Лучшее из мира Angular за неделю
Дайджест №2 (26 января — 7 марта)
Свежая подборка со ссылками на новости и материалы.
Приятного чтения!
⚡ Релизы
Angular
Angular 7.2.4 — 7.2.7 — на текущий момент команда Angular активно развивает Bazel Schematics, и готовит Renderer Ivy к скорому релизу.
Angular CLI
Angular CLI 7.3.0 — 7.3.4 — была добавлена полезная опция es5BrowserSupport, которая позволяет новым браузерам не загружать ненужные им полифилы.
IONIC
NGRX
NGRX 7.2.0–7.3.0 — изменения направлены на улучшение поддержки schematics.
ReactiveX
RxJS 6.4.0 — наконец-то исправили работу shareReplay, но он по прежнему работает неправильно, и теперь окончательно.
Также обновили документацию:
👏 Все примеры доступны на stackblitz
🔎 Добавили форму поиска оператора
TypeScript
TypeScript 3.3.3
TypeScript 3.3.3333 — просто немного лол
🛠️ Инструменты
🖥 MediumEditor — очень простой WYSIWYG Editor, который не имеет зависимостей, легковесный и работает во всех браузерах.
📒 Storybook — если еще не пробовали, то обязательно попробуйте. Он позволит быстро структурировать отображение компонентов вашей библиотеки или приложения.
⚡️ Sourcegraph — если часто просматриваете код на GitHub, он упростит просмотр TypeScript кода.
🖥 Carbon — это то, что я использую для красивых скриншотов с кодом.
🦄 Angular Prerender — сгенерирует статичный HTML из всех роутов в вашем приложении с помощью Guess.js и Universal.
👩🏻🎤️ type-coverage — покажет в процентах покрытие типами вашего приложения.
👮♂️ NGX Permissions — простой, но в тоже время очень мощный и производительный менеджер прав для Angular. Можно использовать везде: в шаблонах, в роутах, в сервисах и т.д.
📚 Интересные статьи
⚡️ Убедитесь, что обновили Angular CLI до версии 7.3, так как в нем добавили оптимизацию полифилов
🔸 CLI создаст два бандла с полифилами — для старых (большой) и для новых браузеров (маленький)
🔸 Пользователи новых браузеров получат меньше JS кода, а значит приложение загрузится и запустится быстрее 💨
📚 Для того, чтобы больше не теряться с Injector, Providers и InjectFlags в Angular, рекомендую две замечательные статьи.
🔥 Tree-shakable зависимости в Angular
🦄 Область видимости провайдеров в Angular
🦄 Virtual DOM для Angular
Очень ранняя версия, но уже можно попробовать:
@Component({ template: '' })
export class AppComponent extends Renderable {
render() {
return (<h1>Hello World!</h1>)
}
}📚 5 фич в Angular CLI, о которых вы могли не знать
👉 https://blog.mgechev.com/2019/02/06/5-angular-cli-features/
📚 Изучение Open Source
То, как Angular обрабатывает выражение foo + bar | baz.
✅ Front-end of a compiler
✅ Recursive descent parsing
✅ Visitor pattern
🦄 Tooltip с помощью Angular CDK
Практическое применение @angular/cdk
🖥️ Overlay + 🚄 Portal = 💫 Tooltip
👉 https://blog.angularindepth.com/building-tooltips-for-angular-3cdaac16d138
🦄 Погружение в Рефакторинг
💖 Интерактивный онлайн-курс о техниках рефакторинга
Если вы совсем недавно начали программировать, то очень рекомендую пройти этот курс. Он поможет вам писать более читаемый и понятный код.
🚀🚀 Angular DI
🚀 Как реализован DI в Angular Ivy
🦄 И что такое NodeInjector
🚀🚀🚀 Tree-shakable Components
LayZeeDK дает подробное объяснение как будут работать Tree-shakable Components и NgModules в Angular Ivy.
🥬 Alex 🦅 Eagle — ABC: Angular, Bazel and CLI
На AngularNYC рассказали про производительность Bazel, и планы по улучшениям. Релиз обещают в июле.
🥬🥬 Bazel Training
Если вы хотите научиться или научить свою команду использовать Bazel, то вы можете использовать готовую презентацию для этого.
https://docs.google.com/presentation/d/1OwktccLvV3VvWn3i7H2SuZkBeAQ8z-E5RdJODVLf8SA/preview
🗽 Продвинутые паттерны TypeScript
Практикуемся с примитивными типами, и становимся настоящими мастерами и волшебниками TypeScript 🧙
🗽🗽 Пишите быстрый код
👩🏻🎤 Что такое большое O
🚄 Чем отличается O(N²) от O(logN)
⚡️ Что такое Бинарный поиск
🦄 ReactiveX
Что такое реактивность?
Если кратко: реактивность — это способность реагировать на какие-либо изменения.
👉 Но о каких изменениях идет речь?
https://medium.com/p/984c1a390e2d
🦄🦄 RxJS Throttling
Throttling оповещений пользователей с помощью RxJS
👉 Пример использования оператора groupBy
https://blog.angularindepth.com/4d90473f34aa
📚 Как работает EventManagerPlugin
🚄 Создание кастомных эвентов
🎧 Использование их с помощью HostListener()
🦄 Angular Reactive Forms
👌 Validations
💫 Update On
🦸♂️ Preventing Infinite Loops
🦄 10 способов использования Interceptors
👮🏻♀️ Authentication
👩🏻🏭 Caching
👩🏻🎤 Profiling
🧙🏻♀️ Fake backend
🦄 NgRuAir
🚀 Ivy
Обсуждаем Ivy, сроки, плюсы и минусы нового рендерера.
https://www.youtube.com/watch?v=O5zM5sWptTw
🗽 Серверный рендеринг с Angular Universal
Если вы хотели разобраться с SSR, то самое время это сделать.
⏳ Блиц
Хороший пример кастомного оператора для RxJS. Позволяет сопоставить Http ошибки с семантически более правильными.
https://gist.github.com/nilsmehlhorn/14e2edb545088ea741784e122e77ad20
❄️ mergeMap: выполняет все параллельно
🌱 concatMap: выполняет все последовательно
☀️ switchMap: выполняет новый, а предыдущий отменяет
🍁 exhaustMap: игнорирует все новые, пока предыдущий не завершится
