Angular6. PWA. Lazy loading modules. Auto-deploy в Firebase
6 мин
Туториал
Angular 6 позволяет буквально в несколько команд создать основу для Progressive Web Application (PWA), создавать верстку для навигационных страниц, таблиц, dashboard.
Что мы читали в мае: обзоры Ivy, релиз Nest 5 и прочие полезные тексты для Angular-разработчиков
3 мин
Для тех, кто в длинные выходные готов не только кушать шашлык, но и читать всякие нужные тексты, я собрал десятку майских ссылок из канала разработчиков Vimbox в корпоративном Слаке Skyeng. Как и в прошлый раз, подборка сконцентрирована вокруг фреймворка Angular и будет интересна работающим с ним программистам.
Angular cli 6: зачем нужен и как использовать
5 мин
Туториал
Всем привет!
Версия Angular 2.0.0 вышла в сентябре 2016 г. И сразу же появилось большое количество подходов к построению и сборке приложений на этом фреймворке. На просторах интернета можно найти Angular seed на любой вкус.
Мы тоже создали свой Angular seed: создали общий project-template, обязали все команды, разрабатывающие фронт-энд, использовать одну структуру приложений.
А уже через полгода, в марте 2017 года, увидела свет версия Angular cli (cli – command-line interface) 1.0.0. Идея, взятая за основу, просто отличная: систематизировать подход к разработке приложений на Angular 2+. Стандартизовать структуру приложения, создание сущностей внутри приложения, а также автоматизировать сборку приложения. Эти задачи и позволяет решить Angular cli, значительно экономя ваше время.
В статье я покажу, как перейти на Angular cli 6
Беглый деплой или как развернуть front-end за 15 минут
3 мин
Уже очень давно у нас стоял вопрос: как же просто и быстро деплоить front-end проекта?
Мы думали насчет такого инструмента, как Jenkins. Многие, кто настраивал его, знают: настройка занимает немало времени и, что еще важно — затрачивается много ресурсов системы. Поднять его на сервере значит выделить полтора гигабайта памяти. Такое себе удовольствие, когда у тебя 500 мегабайт на всё, например.
Мы думали насчет такого инструмента, как Jenkins. Многие, кто настраивал его, знают: настройка занимает немало времени и, что еще важно — затрачивается много ресурсов системы. Поднять его на сервере значит выделить полтора гигабайта памяти. Такое себе удовольствие, когда у тебя 500 мегабайт на всё, например.
Веб менеджер OpenVPN клиентских ключей VPNFace Lite
7 мин
Интро
О возросшем, у далёкого от сетевых технологий населения, спросе к магическим буквам VPN и их причинам уже даже шутить не интересно.
Привет, а ты же с компьютерами разбираешься? поможешь мне про впн?
Полное руководство по стратегии обнаружения изменений Angular onPush
8 мин
Перевод
Default cтратегия обнаружения изменений
По умолчанию Angular использует ChangeDetectionStrategy.Default стратегию обнаружения изменений.
ChangeDetectionStrategy.Default работает таким образом, что каждый раз, когда что-то меняется в нашем приложении, в результате различных пользовательских событий, таймеров, XHR, промисов и т.д., обнаружение изменений будет запускаться по всем компонентам.
Как я начал любить Vue
15 мин
Вступление
Данный пост — это логическое продолжение моего поста/статьи — Как я перестал любить Angular / How I stopped loving Angular.
Рекомендуется к ознакомлению перед прочтением.
Вот уже около года во всех проектах, в которых я участвую, я использую Vue вместо Angular.
В данном посте я поделюсь основными впечатлениями и отличиями после Angular, а также поведаю некоторые вещи из реального опыта использования Vue на боевых проектах.
Обновляем Angular до 6-ой версии в проекте без использования CLI
13 мин
В этой статье я расскажу о тернистом пути обновления Angular с кастомным Webpack конфигом, который нашей команде пришлось пройти неделю назад. Возможно, наш опыт будет полезен тем, кто использует Angular со своим Webpack конфигом, а остальным — интересен как иллюстрация того, куда может завести современный frontend и как с этим жить.
Наша команда работает над интерфейсом BILLmanager 6. Дабы вы имели общее представление о проекте до обновления, сообщу, что количество файлов в нем уже перевалило за 67 тысяч. Архитектурно можно выделить два подпроекта: модуль регистрации и основной пользовательский интерфейс. По технологиям основу составляют компоненты, директивы и модули Angular, написанные на TypeScript. Есть несколько компонентов на Web components. Для стилизации мы используем SASS/SCSS и применяем CSS variables, чтобы темизировать приложение без перекомпиляции.
Наша команда работает над интерфейсом BILLmanager 6. Дабы вы имели общее представление о проекте до обновления, сообщу, что количество файлов в нем уже перевалило за 67 тысяч. Архитектурно можно выделить два подпроекта: модуль регистрации и основной пользовательский интерфейс. По технологиям основу составляют компоненты, директивы и модули Angular, написанные на TypeScript. Есть несколько компонентов на Web components. Для стилизации мы используем SASS/SCSS и применяем CSS variables, чтобы темизировать приложение без перекомпиляции.
Что мы читали в апреле: полезные статьи для Angular-разработчиков и подборка лучшего с ng-conf
5 мин
Нынешний апрель был, конечно, не самым удачным месяцем для чтения о добром и вечном; все в мыле носились за разбушевавшимся РКН и клеили побитые блюдца. Однако жизнь за пределами зоны его ответсвенности не останавливалась. Наш фронтенд-разработчик Максим Попов даже в самый разгар боевых действий отслеживал интересные новости по Angular и делился ими с коллегами. Кроме того, он отсмотрел доклады прошедшей ng-conf и подготовил подборку наиболее ценного. С его любезного разрешения делюсь этой информацией с Хаброй — будет что почитать и, главное, посмотреть в длинные выходные.
Бешеные псы: Angular 2 vs React
19 мин
Встречайте, противостояние двух фреймворков: Angular и React в формате поединка на примере конкретного простого приложения. За Angular выступает Евгений Гусев (@bunopus), за React — Илья Таратухин (@ilfa). Чтобы сделать честные выводы, они сначала поменялись технологиями и попробовали развернуть базовый проект. Старт на React породил множество проблем, а вот с Angular дело обстояло гораздо проще, потому что это идеальное приложение для человека, который не особенно работал с фронтендом. Но, конечно, это было только начало, дальше пошел настоящий спор, все этапы которого под катом
Angular: оптимизация обработки событий
12 мин
Туториал
Прошла буквально пара недель, как я впервые начал писать на Angular, и сразу же столкнулся с рядом специфических проблем. Из-за малого опыта работы с этим фреймворком, я не уверен, что примененные способы оптимизации — это не стандартная практика. Некоторые признаки указывают, что разработчики предполагают подобные подходы, но делать выводы пришлось по профайлеру, а информацию искать по частям. При этом надо сказать, что решение нашлось очень быстро, когда причины проблем прояснились.
В статье я разберу как оптимизировать обработку часто вызываемых событий: mousemove, scroll, dragover и прочих. Конкретно я столкнулся с проблемами при реализации drag-and-drop интерфейса, поэтому и разбирать буду на примере с перетаскиванием элементов.
Анимация в Angular-приложениях
20 мин
Туториал
Ни одно серьезное приложение не обходится без анимации в том или ином виде. Анимация делает приложения более современными, красивыми и зачастую — более понятными, улучшая пространственную ориентацию внутри приложения. Без обратной связи иногда трудно понять, что произошло, когда мы нажали на элемент. Раньше при необходимости добавить анимацию в приложение, я пользовался CSS-анимацией и в целом был почти доволен.
После перехода нашего продукта на Angular 2+ мы столкнулись с тем, что Ангуляр предоставляет свой механизм для описания анимации. Поскольку Ангуляр полностью владеет транзакциями DOM, то он может упростить описание анимации и мы решили попробовать отказаться от анимации на CSS. Да и в целом было интересно посмотреть, что из этого получится. За почти год разработки проекта мы так и не перешли обратно на CSS-анимацию, и я могу сказать, что можно вполне успешно жить с анимацией Ангуляра. В этой статье я расскажу, как использовать анимацию в проектах на Angular 2+ и о возможностях, которые до сих пор почему-то не описаны в официальном гайде.
Ближайшие события
Пример организации кода для сложного Angular проекта
3 мин
Официальная документация Angular неплохо описывает, а angular-cli автоматически создает структуру относительно простого проекта. Но по мере его развития сложность неизбежно растет и возникает естественная необходимость как-то этой сложностью управлять. В том числе и за счет декомпозиции.
(Изображение взято из статьи "12 Things to Help Large Organizations Do Angular Right" )
Данная публикация есть практическое осмысление статей "12 Things to Help Large Organizations Do Angular Right" (Victor Savkin, Co-founder of Narwhal Technologies (nrwl.io) и "Angular: Understanding Modules and Services" (Michele Stieven, Web Developer & JS enthusiast) через призму собственного опыта работы с фреймворком.
Angular. Рекурсивный компонент
1 мин
Перевод
Бывают ситуации, когда нужно отобразить дерево с неопределенным количеством вложенных однотипных данных и при этом желательно не дублировать код на каждом уровне.
В этой короткой статье мы создадим компонент, который будет использовать в качестве входного параметра массив комментариев с несколькими уровнями вложенности и отображать их рекурсивно.
Анонс RamblerFront& #4
1 мин
29 марта на Мансарде Rambler&Co состоится четвертый внешний RamblerFront& meetup, на котором наши сотрудники поделятся прикладными знаниями в области frontend-разработки.
Архитектура приложения Angular. Используем NgModules
8 мин
Туториал
Перевод
Прим. перев.: для понимания данной статьи необходимо обладать начальными знаниями Angular: что такое компоненты, как создать простейшее SPA приложение и т.д. Если Вы не знакомы с данной темой, то рекомендую для начала ознакомиться с примером создания SPA приложения из оф. документации.
Об NgModules можно прочитать здесь.
Один год назад я уже публиковал статью об NgModules, где рассматриваются технические тонкости, когда импортировать модули, пространство имен и т.д. Рекомендуется для ознакомления (прим. перев.: статья по содержанию аналогична той, на которую я ссылаюсь вначале).
Введение в модули Angular — корневой модуль (Root Module)
5 мин
Туториал
Перевод
Прим. перев.: для понимания данной статьи необходимо обладать начальными знаниями Angular: что такое компоненты, как создать простейшее SPA приложение и т.д. Если Вы не знакомы с данной темой, то рекомендую для начала ознакомиться с примером создания SPA приложения из оф. документации.
Вступление
@NgModule — декоратор, добавленный в Angular 2. Из официальной документации следует, что @NgModule определяет класс, как модуль Angular. Модули Angular помогают разбивать приложение на части (модули), которые взаимодействуют между собой и представляют в конечном итоге целостное приложение. Иными словами, модуль — это упаковка или инкапсуляция части функционала приложения. Модули можно проектировать с учетом многократного использования, т.е. не зависящие от конкретной реализации приложения.
Юнит-тестирование. Чип-тюнинг
5 мин
Recovery Mode
Не важно, какой подход применяется при написании тестов: TDD, BDD, или какой-то другой. Юнит- тесты это первичный защитный барьер, который помогает избежать багов. А хорошо описанные кейсы помогут коллегам понять, что происходит в проекте и не наломать дров в коде.
Angular: авторизация, рефрешим токен и HttpInterceptor
11 мин
Туториал
Доброго времени суток.
Опишу процесс авторизации с использованием некоторого сервера авторизации и интерфейса HttpInterceptor, который стал доступен с версии Angular 4.3+. С помощью HttpInterceptor`a будем добавлять наш токен в Header запроса перед отправкой каждого запроса. Так же, по истечению срока действия токена, получая 401ую ошибку, будем восстанавливать токен и повторять запросы, которые не прошли авторизацию пока ждали рефреша.
Проводить конфигурацию предпочитаю с основного модуля приложения. Или если ваше приложение уже достаточно большое, советую вынести конфигурации в CoreModule.
В статье буду использовать CoreModule, но можно сделать это и в корневом (AppModule обычно) модуле приложения, отличия незначительны.
Опишу процесс авторизации с использованием некоторого сервера авторизации и интерфейса HttpInterceptor, который стал доступен с версии Angular 4.3+. С помощью HttpInterceptor`a будем добавлять наш токен в Header запроса перед отправкой каждого запроса. Так же, по истечению срока действия токена, получая 401ую ошибку, будем восстанавливать токен и повторять запросы, которые не прошли авторизацию пока ждали рефреша.
Начнем с конфигурации Interceptor`ов:
Проводить конфигурацию предпочитаю с основного модуля приложения. Или если ваше приложение уже достаточно большое, советую вынести конфигурации в CoreModule.
В статье буду использовать CoreModule, но можно сделать это и в корневом (AppModule обычно) модуле приложения, отличия незначительны.
Пока писал статью ресурс на angular.io по CoreModule исчез
Коротко говоря, это такой модуль, который должен содержать глобальные сервисы. Преимущество в том, что этот модуль импортируется в модуле приложение (AppModule). Все экспортированные Core модулем сервисы гарантированно будут иметь только один инстанс на все приложение, включая lazy loaded модули.