Как стать автором
Обновить
194.8
Рейтинг
Skyeng
Крутой edtech с удаленкой для айтишников

Что мы читали в мае: обзоры Ivy, релиз Nest 5 и прочие полезные тексты для Angular-разработчиков

Блог компании Skyeng Angular *Читальный зал


Для тех, кто в длинные выходные готов не только кушать шашлык, но и читать всякие нужные тексты, я собрал десятку майских ссылок из канала разработчиков Vimbox в корпоративном Слаке Skyeng. Как и в прошлый раз, подборка сконцентрирована вокруг фреймворка Angular и будет интересна работающим с ним программистам.


Движок Ivy в Angular: первый взгляд на компиляцию, runtime и change detection


Отличный разбор грядущего Ivy renderer: в общих чертах расписано, зачем вообще его делают, и как оно внутри работает.


«Прежде чем мы перейдем к подробностям исполнения, мне бы хотелось посвятить несколько параграфов ответу на вопрос, который всегда возникает у меня в голове по поводу любых изменений. Это вечный вопрос: почему?»


Подробности про упомянутый в статье Incremental DOM концепт, реализованный в Ivy renderer, и его отличия от Virtual DOM – в этой статье.


Ну а для тех, кому совсем скучно – официальный design doc по Ivy-компилятору.


Исполнение change detection в Angular Ivy: вы готовы?


Еще один мини-обзор Ivy renderer с гифками о работе change detection/live cycle hooks, показанной структурой внутренних объектов и демкой, где можно пощупать это руками.


Веселый момент из статьи:


RxJS: Избегаем утечек с takeUntil


Короткая заметка про то, почему takeUntil должен всегда быть последним.


«В чем проблема?
Если оператор takeUntil расположен перед оператором, создающим новую подписку, то при получении уведомления об отписке в takeUntil этот оператор не отпишется и продолжит работать.»


Как научиться мыслить реактивно и анимировать движущиеся объекты с RxJS


Делаем анимации с RxJS


«Всегда, когда вы сталкиваетесь с проблемой, в которой играют роль время и асинхронность, реактивное мышление вкупе с реактивными библиотеками типа RxJS приведут вас к более простому и надежному решению. В этом мире постоянных подключений, облаков, неблокирующих платформ и микросервисов время и асинхронность будут играть все более важную роль».


Почему настало время отказаться от Template-Driven форм Angular


Почему стоит пользоваться только ReactiveForms и забыть про всяческие ngModel. Кратко и по делу.


«Почему не использовать и то, и другое?


У меня четыре причины:
1. Сложное освоение.
2. Придется грузить и то, и другое, и бандл станет немного больше.
3. Мы не можем предсказать, что выберет разработчик, поэтому будет сложнее обрабатывать pull requests.
4. По-моему, всегда имеет смысл придерживаться одной парадигмы, если нет серьезных причин этого не делать».


Семь шагов навигации с роутером Angular


Достаточно поверхностная анатомия @angular/router, или что происходит при навигации.



«Из этой статьи мы узнали, что делает роутер Angular, когда пользователь переходит с одной страницы на другую.


Вы можете использовать мнемонику PRIGRAM:
Parse
Redirect
Identify
Guard
Resolve
Activate
Manage
чтобы запомнить порядок шагов, проходимых роутером Angular.


Знание этого процесса позволит вам лучше понимать, что происходит за кулисами, и поможет вылечить потенциальные проблемы с роутингом».


Знакомимся с дифферами Angular


Рассказ о том, как в устроены дифферы в Ангуляре на примере написания своего.


«Дифферы Angular, пожалуй, наименее известные API; это высокооптимизированные блоки, используемые самим Angular внутри фреймворка (ngClass, ngStyle, ngFor и т.д.).


Вы точно не будете использовать их ежедневно, но они могут оказаться очень полезными при определенных условиях. Если вы когда-либо говорили себе: «Мне недостаточно знать, что что-то изменилось, мне надо знать, что именно изменилось», дифферы Angular дадут вам ответ».


Хотите создавать Angular Elements? Рассказываю!


Простой пример, как по-быстрому завести @angular/elements с простым вебпак-конфигом для сборки.


«Обратите внимание, что мы все сделали вручную и с нуля.


В будущем это должно стать, и станет, проще. Стоит ожидать, что все будет конфигурироваться внутри Angular CLI, и создание сборки элемента будет делом одной команды cli.


Но если вы услышали про Angular Elements и хотите их попробовать – это одно из возможных решений. Я делюсь вторым в следующей статье».


Полный гид по стратегии Change Detection onPush


Полезное описание того, как работает ChangeDetection.OnPush, без ухода в код Ангуляра. Очень полезно тем, кто не в курсе/плохо понимает, как с этим жить.


«Эта техника называется dirty checking. Чтобы узнать, надо ли обновить шаблон, Angular’у требуется взять новое значение, сравнить его со старым, и на основании этого принять решение по обновлению.


Представьте себе большое приложение с тысячами биндингов; если мы позволим Angular’у проверять каждый из них во время цикла change detection, мы столкнемся с проблемами производительности.


Что, если помочь Angular’у, намекнув ему, когда стоит проверять наши компоненты?»


Nest 5: Официальный релиз


Релизнулась пятая версия Nest – отличного Node.js ангуляроподобного бэкенд-фреймворка на typescript. Его сделали еще более абстрактным (позволив использовать любой http-сервер, не только экспресс), поправили синтаксис, чтоб больше совпадал с Ангуляром (декораторы/модули), причесали модуль микросервисов, упростив впиливание своих адаптеров и RPC библиотек вместо дефолтно доступной.


Ну и традиционное: приходите к нам работать! Нам всегда нужны крутые люди!

Теги:
Хабы:
Всего голосов 9: ↑9 и ↓0 +9
Просмотры 3.1K
Комментарии Комментировать

Информация

Дата основания
Местоположение
Россия
Сайт
www.skyeng.team
Численность
1 001–5 000 человек
Дата регистрации
Представитель
Alisa Kruglova