🦊 Angular Fox 🚀 — русскогорящие новости сообщества

🇷🇺 Angular Performance Checklist на Русском

В этой статье описаны полезные практики, которые помогут вам улучшить производительность ваших приложений на Angular.

🙀 И теперь полностью на русском языке!

👉 https://github.com/mgechev/angular-performance-checklist/blob/master/README.ru-RU.md

🐥 Тригонометрия для Игр

26 интерактивных слайдов, показывающих принципы тригонометрических расчетов для построения собственной ракеты 🚀

👉 https://demoman.net/?a=trig-for-games

🌳🎋 Dynamic Reactive Forms

Обновленная версия доклада с Angular Connect про динамические реактивные формы. Пока еще в разработке, но уже можно попробовать демо.

🍳 FormQL =
🥚 Reactive Forms +
🐣 Dynamic Components +
🐥 GraphQL

👉 Angular Air
https://youtu.be/pYMt_pC9wb4

✍️ StackBlitz
https://stackblitz.com/edit/formql-example

📚 Имплементация простого компилятора на JavaScript

Обязательно попробуйте написать собственный компилятор и поиграться с ним. Это поможет вам в разработке собственного DSL.

🔡 Lexical analysis
🌳 Syntax analysis
🗣 AST interpretation
🚀 Source code generation

👉 https://blog.mgechev.com/2017/09/16/developing-simple-interpreter-transpiler-compiler-tutorial/

🦄 Building a transaction service

Реализация масштабируемого транзакционного сервиса для уменьшения нагрузки на Http сервер и без использования Ngrx. 👏

👉 https://blog.angular.io/ded666eafd5e

🚀 CodeSandbox

CodeSandbox запускает VSCode, что делает его отличной альтернативой stackblitz. Имеет интеграцию с GitHub, поддерживает совместное программирование онлайн, и многое другое.

📦 VSCode Extensions
🛠 Devtool functionality
🚀 TS Refactoring support
👫 Real-time Live Share Coding

👉 https://hackernoon.com/4febbaba1963

🦄 Стейт-машина в Angular

🥚 Как используют стейт-машины
🐣 Плюсы и минусы
🐥 Учимся использовать правильно

👉 https://medium.com/p/452f8b47ce9d

🦄 File Uploading in Angular Reactive Forms

Простой способ загрузить файлы на сервер с помощью Angular Forms.

👉 https://netbasal.com/89a3fffa1a03

🦄 Операторы и пайпы
Основы реактивного программирования с использованием RxJS

RxJS обладает богатейшим API. В документации описано более 100 методов. Чтобы немного познакомиться с ними, рассмотрим, как на практике выглядит реактивный код.

👉 https://medium.com/p/3583345faec1

👩‍💻 Writing Resilient Components

🚅 Don’t stop the data flow
🎨 Always be ready to render
🙅🏼‍♀️ No component is a singleton
📦 Keep the local state isolated

Даже, если вы не используете React, вы обнаружите те же принципы для любой модели компонентов, в том числе и Angular.

👉 https://overreacted.io/writing-resilient-components/

🦄 Моментальное открытие GitHub репозитория

Если вы пользуйтесь продуктами JetBrains, то обязательно попробуйте Toolbox App и плагин для быстрого открытия любого GitHub репозитория.

👉 https://www.jetbrains.com/toolbox/app/

👩‍💻 Structural Directives

Если вы хотите разобраться с структурными директивами, то обязательно прочитайте эти три вводных статьи. В них подробно объясняется, как они работают.

👉 https://netbasal.com/bfe4d8c44fb1
👉 https://netbasal.com/659acd0f67e
👉 https://netbasal.com/1a5198d9ab7d

🦄 Автоматическое обновление Lazy Modules вместе с Angular Ivy

Одна из основных целей Ivy — это устранение различий между JIT и AOT. Это позволит иметь более универсальные механизмы для ленивой загрузки приложения.

👉 https://blog.angularindepth.com/e760872e6084

⚡️ В TypeScript 3.4 RC добавили инкрементальные билды!

Просто используйте флаг --incremental или добавьте в tsconfig.json:

"compilerOptions": {
    "incremental": true
}

🥳 Это ускорило мои билды в x12-15 раз!
🚀 Ждем поддержку в Angular CLI!

https://devblogs.microsoft.com/typescript/announcing-typescript-3-4-rc/

🦄 Новая директива NGXF 🚀

Просто передайте в trackByKey ваш ключ, и она сгенерирует функцию для trackBy вашего ngFor.

👉 https://ngxf.gitbook.io/platform/features/track-by-key

🐕 Что нового в Akita v3.0

🚀 Store Middleware
🎩 Entity UI Store
🤯 Event-based APIs
👀 Breaking Changes

👉 https://engineering.datorama.com/92740d0d72e4

🦄 Angular и React в одном приложении с помощью Nrwl Nx

Создание двух приложений (одно Angular и одно React) с помощью Nx, использующих общую библиотеку c web-components.

👉 https://blog.nrwl.io/78b5578de598

🦊 Погружение в Reactive Forms

Простой способ, как можно синхронизировать значения не только обычных FormControl, но и FormGroup и FormArray.

👉 https://medium.com/p/8c143d518f6d

🦊 Why you HAVE to unsubscribe from Observable теперь доступна на Angular in Depth

Если читали русскоязычную версию, то буду очень благодарен, если немного похлопаете 👏

👉 https://blog.angularindepth.com/92502d5639d0

🦄 Продвинутый DI

Эффективное использование 🚸 ViewChild и ViewChildren.

👉 https://www.youtube.com/watch?v=PRRgo6F0cjs