Реактивное программирование очень мощная штука. Томас Бурлесон (ex-Google) написал хорошую статью о том, как оно помогает в разработке приложений — "Push-based Architectures with RxJS" .

В статье рассматривается одно приложение, написанное с использованием двух подходов — pull-based и push-based. Pull-based — это традиционный подход, в котором view инициирует обращение к внешним API. В push-based подходе view реагирует на изменение данных в некотором источнике-стриме. Pull-based приложение без дополнительного тюнинга получилось очень топорным и не очень интуитивным. С push-based — приложение стало интуитивным и приятным в использовании. Код тоже стал более организован.

Томас ничего не написал про недостатки. По-моему опыту работа со стримами требует большего планирования, чем при обычном императивном программировании. Также rxjs требует время, чтобы в него погрузиться (но это того стоит).

Как бы то ни было очень советую посмотреть статью. Хотя примеры там и используют Angular, push-based подход можно применить в React, во Vue и в других фреймворках/библиотеках.

#angular #rxjs #architecture

https://medium.com/@thomasburlesonIA/push-based-architectures-with-rxjs-81b327d7c32d

Нашёл хорошую статью, объясняющую разные способы комбинирования стримов в RxJS — "Comprehensive Guide to Higher-Order RxJS Mapping Operators: switchMap, mergeMap, concatMap (and exhaustMap)".

Самое полезное, что стоит выделить (под стримом здесь понимается создаваемый в операторе внутренний Observable):

- concatMap для обработки стримов по очереди;
- mergeMap для обработки стримов параллельно;
- switchMap если нужно отменять стримы, созданные ранее;
- exhaustMap для игнорирования создания новых стримов, если текущий стрим ещё не был завершён;

В общем, рекомендую почитать, если хотите углубить своё понимание RxJS. В примерах используется Angular, но только как декорации.

#rxjs #angular

https://blog.angular-university.io/rxjs-higher-order-mapping/

Вчера вышла девятая версия Angular. Стивен Флюин рассказал про новый релиз в статье "Version 9 of Angular Now Available — Project Ivy has arrived!".

Девятая версия самое большое обновление Angular за последние три года. В этой версии по умолчанию включён Ivy — новый компилятор и пайплайн рендеринга. Благодаря ему Angular теперь может компилировать компоненты на этапе сборки, ускоряя рендеринг и инициализацию приложения. Также благодаря Ivy бандлы приложения получаются до 40% меньше. В этой версии был улучшен developer experience: добавлены новые возможности для дебага приложения, улучшены сообщения об ошибках, улучшена статическая типизация шаблонов (ngIf, ngFor, ng-template, etc).

Вышел очень интересный релиз. Обязательно попробую его потыкать, когда будет время.

#angular #release #announcement

https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3

Сегодня на youtube-канале Honeypot вышел документальный фильм, посвящённый Vue.js.

В фильме рассказывается про историю появления фреймворка и про людей, стоящих за его разработкой. Vue.js разработал Эван Ю в 2013 году. Сначала проект назывался seed.js, но когда наступил момент публикации пакета в npm, оказалось, что это имя уже было занято. Эван пошёл в Google Translate и посмотрел перевод слова "view" на разные языки, в итоге он выбрал французский вариант — "vue".

Сначала проект разрабатывался для души, когда Эван работал в Google. Работа над Vue открыла новые возможности — Эвана пригласили работать в команду Meteor. В этот период он параллельно занимался разработкой и Vue, и Meteor. Он не был доволен темпами развития Meteor, поэтому решил рискнуть и полностью переключился на разработку Vue. Риск того стоил. Сейчас у Vue большое сообщество, фреймворк используют по всему миру, а в Китае Эван стал практически национальным героем среди разработчиков.

Ламповый и вдохновляющий фильм. Очень рекомендую посмотреть.

#vue #history

https://www.youtube.com/watch?v=OrxmtDw4pVI

Два дня назад вышла новая мажорная версия Angular. Стивен Флюин рассказал про новинки релиза — "Version 10 of Angular Now Available".

По сравнению с прошлой версией релиз получился довольно скромный. В Angular Material был добавлен элемент управления для выбора диапазона дат. При импорте CommonJS модулей фреймворк будет выводить предупреждение о потенциальных проблемах с размером бандла. Во время создания проекта с помощью ng new можно передать новый флаг --strict для включения строгих проверок в TypeScript-коде и шаблонах, отключения объявлений типа any, уменьшения порогового значения размера бандла на 75% и конфигурации приложения как side-effect free для продвинутого три-шейкинга.

Поддержка IE9, IE10 и IE Mobile объявлена устаревшей и будет удалена в следующей версии. Были обновлены зависимости: TypeScript обновлён до версии 3.9, TSLib до версии 2.0, TSLint до версии 6.

#angular #release #announcement

https://blog.angular.io/version-10-of-angular-now-available-78960babd41

Вчера вышел Angular 11. Марк Тексон рассказал про новые фичи релиза — "Version 11 of Angular Now Available".

С версии Angular 11 шрифты будут инлайниться по умолчанию. Улучшена инфраструктура для тестирования компонентов. Улучшен вывод информации о процессе сборки. Идёт работа над Language Service, который улучшает опыт разработки, предоставляя полезные сервисы для IDE (полноценный релиз запланирован в следующей версии). Улучшена поддержка Hot Module Replacement (HMR). Ускорена сборка благодаря переходу на TypeScript 4.0 и улучшениям в Angular compatibility compiler (ngcc).

Также появилась экспериментальная поддержка Webpack 5 (для её включения нужен yarn). TSLint официально задеприкейчен; рекомендуется переходить на ESLint. Была удалена поддержка IE9, IE10 и IE mobile.

Команда Angular начинает больше работать с сообществом. У проекта появился публичный Roadmap. Идут активные работы по инвентаризации всех открытых ишью. Было исправлено несколько проблем и реализована новая фича с большим количеством голосов.

#release #angular

https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7

Минко Гечев из Google представил Angular DevTools — "Introducing Angular DevTools".

Angular DevTools — это расширение для Chrome, облегчающее отладку и профилирование Angular-приложений. Оно было разработано с нуля с участием разработчиков Augury — популярного расширения для отладки Angular.

С помощью Angular DevTools можно инспектировать и редактировать дерево компонентов, профилировать исполнение цикла отслеживания изменений (change detection cycle). Также в рамках этого проекта был улучшен опыт отладки Angular-приложений: был добавлен новый API и улучшены сообщения об ошибках. В следующих релизах разработчики планируют добавить наиболее полезные фичи Augury.

Angular DevTools поддерживает приложения, разработанные с помощью Angular v9 и выше на базе Ivy.

#angular #debug #announcement

https://blog.angular.io/introducing-angular-devtools-2d59ff4cf62f

Диего Хаз — автор библиотеки компонентов Reakit — рассказал о принципе разработки базовых компонентов — "Introducing the Single Element Pattern".

При разработке приложений Диего выделяет понятие "базовый компонент" — фундаментальную часть приложения, следующую определённым правилам, благодаря которым кодовая база проекта легко масштабируется и не усложняется в поддержке (принцип Singel). Правила:

— Компонент рендерит только один элемент (в редких случаях несколько)
— Компонент не должен ломать приложение при возникновении исключений
— Рендерит все HTML-атрибуты, переданные как пропсы
— Мёржит стили, передаваемые как пропсы
— Добавляет все обработчики событий, передаваемые как пропсы

В первую очередь советы из статьи полезны при разработке библиотеки компонентов, но их можно использовать при разработке обычных компонентов. Также эти принципы можно использовать не только с React, но и с любым другим компонентным фреймворком.

#react #vue #angular #svelte

https://www.freecodecamp.org/news/introducing-the-single-element-pattern-dfbd2c295c5d/

В мае вышла новая мажорная версия Angular. Марк Тексон рассказал о всех нововведениях релиза — "Angular v12 is now available".

— Экосистема Angular продолжает миграцию на пайплайн компиляции и рендеринга Ivy; View Engine с 12-ой версии задеприкейчен и будет удалён в одном из будущих релизов.

— Добавлены инструменты для автоматической миграции на новый формат идентификаторов сообщений i18n.

— Protractor (инструмент E2E-тестирования Angular-приложений) больше не используется при создании новых проектов. Его дальнейшая судьба пока неизвестна.

— Теперь @Component поддерживает инлайн SASS-кода. Добавлена поддержка новой модульной системы SASS. Angular CDK и Angular Material больше не поддерживают node-sass.

— Добавлена поддержка Nullish Coalescing в шаблонах. Завершена миграция на Webpack 5 и добавлена поддержка TypeScript 4.2. Команда ng update по умолчанию переключена в production-режим. Задеприкейчена поддержка IE11, она будет удалена полностью в следующей мажорной версии.

#angular #release

https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49

Релиз Angular 13

Сегодня вышла новая мажорная версия Angular. Марк Томпсон рассказал о всех нововведениях релиза — "Angular v13 is now Available".

— С этой версии больше недоступен View Engine — движок рендеринга, предшествующий Ivy. Благодаря его удалению открываются возможности сокращения времени компиляции, которые будут реализованы в будущем

— Изменён формат внешних модулей Angular Package Format (APF): добавлена поддержка ES2020, удалена необходимость использования ngcc

— Включена поддержка сохранения кеша сборки для ускорения скорости бандлинга. Прирост составляет 68%. Также в Angular CLI v12.2 была добавлена поддержка esbuild, который ускорил время сборки production-бандлов на 10%

— Упрощено API для динамического создания компонентов

— По умолчанию включена инвалидация окружения при прогоне каждого теста

— Улучшена доступность компонентов Angular Material

— RxJS обновлён до версии 7.4, TypeScript обновлён до версии 4.4

— Прекращена поддержка IE11. Пользователи Internet Explorer могут продолжать использовать Angular 12. Он будет поддерживаться до ноября 2022 года

#angular #release #jsframeworks

https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

Оптимизация производительности Angular-приложений

Минко Гечев из Google рассказал про распространённые проблемы производительности Angular-приложений и способы их решения — "4 Runtime Performance Optimizations".

— Загрязнение зоны (zone pollution). Возникает в том случае, когда механизм обнаружения изменений запускается асинхронными событиями, не влияющими на состояние основного приложения. Для решения этой проблемы регистрацию событий нужно выносить вне основной зоны Angular с помощью метода runOutsideAngular. Примером загрязнения зоны может быть регистрация обработчика события mousemove для отображения лейблов диаграммы из сторонней библиотеки.

— Запуск обнаружения изменений вне границ компонента (out of bounds change detection). Происходит тогда, когда возникновение событий в одном компоненте запускает механизм обнаружения изменений в соседних независимых компонентах. Эта проблема решается использованием стратегии обнаружения изменений onPush.

— Лишние перерасчёты значений в шаблонах (recalculation of referentially transparent expressions). Если в шаблоне используются методы для получения значений, то они будут исполняться каждый раз при ререндериге компонента. Если эти методы удовлетворяют принципу ссылочной прозрачности, то их можно либо мемоизировать, либо заменить пайпами.

— Большое дерево компонентов (large component trees). Если дерево компонентов слишком большое, то как бы ни были оптимизированы компоненты, приложение будет работать с подтормаживаниями. Решение — уменьшить размер дерева. Это можно сделать с помощью пагинации или виртуализированного списка.

#angular #performance #video

https://youtu.be/f8sA-i6gkGQ