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

🦄 Angular Prerender сгенерирует статичный HTML из всех роутов в вашем приложении, с помощью Guess.js и Universal. 👉 https://www.npmjs.com/package/angular-prerender

🦄 Хотите узнать, как будут работать Tree-shakable Components и NgModules? LayZeeDK дает подробное объяснение многих новых функций, появившихся в Angular Ivy. 👉 https://blog.angularindepth.com/angular-revisited-tree-shakable-components-and-optional-ngmodules-329a4629276d

📚 5 фич в Angular CLI, о которых вы могли не знать 🔸 Conditional Polyfill Serving 🔸 Hidden Source Maps 🔸 Looking up the Documentation 🔸 Profiling the Build 🔸 Open the Browser on ng serve 👉 https://blog.mgechev.com/2019/02/06/5-angular-cli-features/

📚 А вы знали, что с помощью console.profile можно запускать профилировку JavaScript? 👉 https://developer.mozilla.org/en-US/docs/Web/API/Console/profile

🦄 Когда выйдет Ivy, и что нам ждать в Angular 8? 👉 https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7

🦄 Основы реактивного программирования с использованием RxJS Что такое реактивность? Сложно найти ответ на, казалось бы, такой распространенный термин. Если кратко: реактивность  — это способность реагировать на какие-либо изменения. Но о каких изменениях идет речь? 👉 https://medium.com/p/984c1a390e2d

⚡️ Убедитесь, что обновили Angular CLI до версии 7.3, так как в нем добавили оптимизацию полифилов 🔸 CLI создаст два бандла с полифилами - для старых (большой) и для новых браузеров (маленький) 🔸 Пользователи новых браузеров получат меньше JS кода, а значит приложение загрузится и запустится быстрее 💨 👉 https://netbasal.com/prevent-loading-redundant-es2015-browser-polyfills-thanks-to-angular-cli-177494c5244d

🦄 Это то, что я использую для красивых скриншотов с кодом https://carbon.now.sh

📚 Throttling оповещений пользователей с помощью RxJS 👉 Пример использования оператора groupBy https://blog.angularindepth.com/throttling-notifications-from-multiple-users-with-rxjs-4d90473f34aa

📚 Вы знали, что в Chrome Dev Tools можно копировать объекты в буфер обмена?

📚 Адаптация Clean Code для TypeScript Особое внимание советую уделить: 🏹 Functions 🎓 Classes 🎨 Composition 🚪 Open/Closed Principle 👉 https://github.com/labs42io/clean-code-typescript

📚 Совет дня: если не получается реализовать сложную задачу, попробуйте ее скомпилировать. 👌 Visitor Pattern https://refactoring.guru/ru/design-patterns/visitor

🦄 Если часто просматриваете код на GitHub, то попробуйте Sourcegraph для TypeScript: 👮 Type information 👉 Go to definition 🔎 Find references 🎁 Sourcegraph: Google Chrome Extention https://chrome.google.com/webstore/detail/sourcegraph/dgjhfomjieaadpoljlnidmbgkdffpack?hl=en

📚 Вопрос: что такое share(), publish(), multicast() в RxJS? 🦊 Заваривайте кофейку, ответ будет длинным. Прежде чем переходить к следующему пункту обязательно разберитесь с предыдущим. 📢 Что такое Subject? Простыми словами, Subject это телефон. В него можно говорить, и из него можно слушать одновременно. Есть различные Subject: Subject, ReplaySubject, BehaviorSubject, AsyncSubject. 🏰 Что такое multicast()? Оператор multicast() на вход принимает Subject или его фабрику. И передавая в него различные виды Subject можно получить следующие комбинации: multicast(new Subject()) multicast(new ReplaySubject()) multicast(new BehaviorSubject()) Все это создает нам ConnectableObservable, который позволяет расшарить Subject на несколько потоков. Но у них всех будут разные стратегии работы, в зависимости от переданного Subject. 🍬 Немного сахара Операторы publish(), publishReplay(), publishBehavior() используют mulicast() с определенным Subject: publish() // работает аналогично multicast(new Subject()) publishReplay() // работает аналогично multicast(new ReplaySubject()) publishBehavior() // работает аналонично multicast(new BehaviorSubject()) 👨‍🏫 Считаем ссылки Оператор refCount() реализует паттерн RefCount и автоматически управляет ConnectableObservable: — если появляется подписчик, то он делает connect; — если появляется еще один подписчик, то ничего не происходит, используется тот же connect; — если все подписчики отпишутся, то он сделат unsubscribe от коннекта к ConnectableObservable. 🦄 Финальный босс Остались операторы share(), shareReplay(). share() // работает аналонично publish() + refCount() shareReplay({ refCount: true }) // работает аналонично publishReplay() + refCount() ❤️ Теперь ты знаешь как это работает, отправь своим коллегам, пусть они тоже узнают.

📚 Вы знали, что TypeScript оптимизирует использование enum, если добавить const?

🚀 Вместе с обновлением RxJS (6.4.0) так же обновили документацию. 👏 Все примеры доступны на stackblitz 🔎 Добавили форму поиска оператора

🦄 Storybook Если еще не пробовали Storybook, то обязательно попробуйте. Он позволит быстро структурировать отображение компонентов вашей библиотеки или приложения. Для быстрого старта есть готовый schematics:

cd my-react-vue-angular-app
npx -p @storybook/cli sb init

👉 https://storybook.js.org/ __ Также, если не видели, то посмотрите доклад Алексея Охрименко про Storybook: https://youtu.be/HkVcU24Opu0

🦄 Virtual DOM для Angular Очень ранняя версия, но уже можно попробовать:

@Component({ template: '' })
export class AppComponent extends Renderable {
  render() {
    return (<h1>Hello World!</h1>)
  }
}

👉 https://github.com/trotyl/ng-vdom ___ Также если интересно как это работает, то есть замечательная статья: https://blog.angularindepth.com/introducing-to-ng-vdom-a-new-way-to-write-angular-application-60a3be805e59

📚 Для того, чтобы больше не теряться с Injector, Providers и InjectFlags в Angular, рекомендую две замечательные статьи. 🔥 Tree-shakable зависимости в Angular https://blog.angularindepth.com/tree-shakable-dependencies-in-angular-projects-5aaa7012b9e7 🦄 Область видимости провайдеров в Angular https://blog.angularindepth.com/a-curios-case-of-the-host-decorator-and-element-injectors-in-angular-582562abcf0a __ Если только недавно начали знакомство с Angular, то лучше начать с официальных статей в документации: https://angular.io/guide/dependency-injection

📚 Если вам понравилась прошлая статья про Bloom Filter, то обязательно почитайте о том: 🚀 Как реализован DI в Angular Ivy 🦄 И что такое NodeInjector 👉 https://blog.angularindepth.com/angular-di-getting-to-know-the-ivy-nodeinjector-33b815642a8e