🦊 Angular Fox 🚀 — русскогорящие новости сообщества
3.97K subscribers
1.21K photos
7 videos
1.06K links
Как костыль на реактивно-лисьей тяге 🔥🦊

Нравится канал? Подпишись на меня!
👉 twitter.com/thekiba_ru
💖 twitter.com/thekiba_io
medium.com/@thekiba
github.com/thekiba

Чаты @angular_ru @angular_jobs
Download Telegram
🔥 Introduction

🚀 Introducing Akita
https://medium.com/p/f2f0fab5a8
🚀 Introducing Angular Schematics for Akita
https://medium.com/p/356201367fc1
🚀 Our Journey in Angular: from Ngrx to Akita
https://medium.com/p/9b70b3d7ea70
🚀 I Built the Ngrx Demo App with Akita
https://medium.com/p/57f83fe92192


🎁 What’s New

💥 What’s New in Akita Schematics
https://medium.com/p/247bf5330adb
💥 What’s New in Akita v1.1.0 🔥
https://medium.com/p/a9ec885ebfdc
💥 What’s New in Akita v1.2.0 🔥
https://medium.com/p/f4a9c4c0e68a
💥 What’s New in Akita v1.9.0 🔥
https://medium.com/p/b2567bc7c719
💥 What’s New in Akita — Angular Forms Manager, Dynamic Stores and More!
https://medium.com/p/8d8580b09963


☄️ Examples

👷 Building a Shopping Cart in Angular Using Akita
https://medium.com/p/c41f6a6f7255
👷 Create a Shopping List with Akita and Angular
https://medium.com/p/2fe3ff905d38
👷 Working with Normalized Data in Akita and Angular
https://medium.com/p/e626d4c67ca4
👷 Connect Angular Forms to Akita Store
https://medium.com/p/d51845f621cd
👷 How to Secure Your User’s Data After Logout in Akita
https://medium.com/p/976e0a4ad84a
👷 The Complete Guide to Authentication in Angular with Akita
https://medium.com/p/dc1b343f7e71
👷 Plan Your Next Party with an Angular Invite App Using Akita!
https://medium.com/p/422495351767
👷 Akita and Firebase — a Match Made in Angular Heaven
https://medium.com/p/4a47ff889208
👷 Infinite Scroll in Angular Using Akita
https://medium.com/p/c5edf51de4ed

Docs: https://netbasal.gitbook.io/akita/
GitHub: https://github.com/datorama/akita
🎁 Awesome ReactiveX Tool at reducing boilerplate

npm i rx-handler


Demo on StackBlitz
GitHub Repository by johnlindquist
🎁 RunJS

🚀 A scratchpad for your thoughts, a playground for your creativity...

🖥 macOS only https://projects.lukehaas.me/runjs/
Для всех кто уже обновился до Angular 7.x+

Пока что остаются проблемы с производительностью и пересборки приложения в режиме production и development. Если у вас сильно замедлилась пересборка (а это в 2-5 раз), то воспользуйтесь перечисленными способами.

В первую очередь убедитесь, что TypeScript обновлен до версии 3.1.6:
npm ls typescript

Для обновления:
npm install --save typescript@3.1.6


И очень важно, чтобы версия Node.JS была 10 или новее:
node -v

Для обновления Node.JS есть удобный менеджер n:
npm i -g n
n latest


Так же в новой версии @ngtools/webpack имеется деградация производительности, поэтому временно его необходимо откатить до версии 7.0.7:
npm install --save-dev @ngtools/webpack@7.0.7


Так же если у вас установлена последняя версия Angular Cli и у вас медленные production билды, то временно поможет обновиться до последней версии terser:
npm install --save-dev terser@latest


Узнать подробности и следить за развитием событий можно в Issue на GitHub:
https://github.com/angular/angular-cli/issues/13102
🔥 Аналогично команде rxjs-operator-counter, @jamaks написал крутую утилиту ng-app-counter для Angular:
npx ng-app-counter -p tsconfig.json


🎁 GitHub Repository by @ngFanatic
🎉 Теперь GitHub предоставляет неограниченное количество приватных репозиториев для всех пользователей

https://github.com/pricing
TweetDeck приложение для отслеживания GitHub репозиториев ❤️

🗃 Open source
👮🏻‍♂️ Written in TypeScript

https://github.com/devhubapp/devhub
Перед тем как заниматься микро-оптимизациями, проверьте, что все перечисленное уже сделано для вашего Angular приложения:

🔧 Use the Angular CLI
🗜 Compress your assets brotli/gzip
✂️ Use code-splitting with loadChildren
💨 Preload routes
⚡️ Use the Angular Service worker

https://github.com/mgechev/angular-performance-checklist
🔥 Experimental Node.js HTTP framework using RxJS, built with TypeScript and optimized for serverless deployments.

https://github.com/mflorence99/serverx-ts
💥 В Angular 7.2.x улучшена производительность пересборки development!
🌈 Теперь все почти так же, как и раньше! Можно обновляться!

Не забудьте обновить @angular-devkit тоже.

https://github.com/angular/angular-cli/releases/tag/v7.2.1
🎁 Angular Console, который добавляет UI для Angular CLI, теперь имеет свой плагин в VS code.

https://angularconsole.com/
Напоминаю попробовать ngx-quicklink для ускорения навигации страниц с Lazy Modules.

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

https://www.npmjs.com/package/ngx-quicklink
☕️ Немного о вторничной наркомании.

🌈 HTTP Client Karin необычно использует шаблонные литералы.

(Не рекомендуется использовать, пользуйтесь стандартными механизмами)

https://github.com/vaheqelyan/karin
🔥 Простой пример, как можно с помощью @angular/elements рендерить компоненты динамически!

Демо доступно на stackblitz: https://stackblitz.com/edit/angular-elements-with-sanitized-html
😎 Spectator — полезный иструмент для тестирования Angular приложения:
— Делает тестирование проще
— Уменьшает количество бойлерплейта

npm install @netbasal/spectator --save-dev


GitHub: https://github.com/NetanelBasal/spectator

__
И как бонусом подборка статей по тестированию. На что стоит обратить внимание, и какие тесты лучше не писать.

Тесты, которые должен писать разработчик
https://medium.com/p/a04cab35f45b

Антипаттерны тестирования ПО
https://habr.com/ru/post/358178/
🚀 Для всех кто жаждет Ivy!
Сегодня стало возможно попробовать Ivy.

🎁 Воспользуйтесь готовым приложением с Ivy:
https://github.com/thekiba/angular-experimental-ivy

__
Или проделайте всю работу самостоятельно:
— Обновить
@angular/cli до 7.3.0-beta.0
— Создать новое приложение
— Вручную обновить
@angular до 8.0.0-beta.0
— Удалить параметр es5BrowserSupport из angular.json


npm i -g @angular/cli@7.3.0-beta.0
ng new angular-ivy --experimentalIvy
💣 Все что вам нужно знать про ExpressionChangedAfterItHasBeenCheckedError

https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4
This media is not supported in your browser
VIEW IN TELEGRAM
fx — потрясающий CLI инструмент для удобного просмотра и редактирования JSON в терминале.

📐 Formatting and highlighting
🎁 Standalone binary
🎉 Interactive mode
🎨 Themes support

npm install -g fx


https://github.com/antonmedv/fx