Size: a a a

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

2019 January 27
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
Вопрос: Какой WYSIWYG Editor выбрать?
Ответ: Рекомендую посмотреть на MediumEditor.

✍️ MediumEditor — очень простой WYSIWYG Editor:
🚆 Не имеет зависимотей
🕊️ Легковестный
👷 Работает во всех браузерах

👉 https://github.com/yabwe/medium-editor

__
Так же есть множество плагинов для Картинок, Таблиц, Markdown и другого.
источник
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
📚 Изучение Open Source: то, как Angular обрабатывает выражение 'foo + bar | baz'.

✅ Front-end of a compiler
✅ Recursive descent parsing
Visitor pattern

👉 Все это в трех TypeScript файлах
https://github.com/angular/angular/tree/master/packages/compiler/src/expression_parser
источник
2019 January 29
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
📚 Если вам понравилась прошлая статья про Bloom Filter, то обязательно почитайте о том:

🚀 Как реализован DI в Angular Ivy
🦄 И что такое NodeInjector

👉 https://blog.angularindepth.com/angular-di-getting-to-know-the-ivy-nodeinjector-33b815642a8e
источник
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
📚 Для того, чтобы больше не теряться с 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
источник
2019 January 30
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
🦄 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-60a3be805e59https://blog.angularindepth.com/introducing-to-ng-vdom-a-new-way-to-write-angular-application-60a3be805e59
источник
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
🦄 Storybook

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

Для быстрого старта есть готовый schematics:
cd my-react-vue-angular-app
npx -p @storybook/cli sb init


👉 https://storybook.js.org/

__
Также, если не видели, то посмотрите доклад Алексея Охрименко про Storybook:
https://youtu.be/HkVcU24Opu0https://youtu.be/HkVcU24Opu0
источник
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
🚀 Вместе с обновлением RxJS (6.4.0) так же обновили документацию.

👏 Все примеры доступны на stackblitz
🔎 Добавили форму поиска оператора
источник
2019 January 31
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
📚 Вы знали, что TypeScript оптимизирует использование enum, если добавить const?
источник
2019 February 01
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
📚 Вопрос: что такое 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()


❤️ Теперь ты знаешь как это работает, отправь своим коллегам, пусть они тоже узнают.
источник
2019 February 03
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
🦄 Если часто просматриваете код на GitHub, то попробуйте Sourcegraph для TypeScript:
👮 Type information
👉 Go to definition
🔎 Find references

🎁 Sourcegraph: Google Chrome Extention
https://chrome.google.com/webstore/detail/sourcegraph/dgjhfomjieaadpoljlnidmbgkdffpack?hl=en
источник
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
📚 Совет дня: если не получается реализовать сложную задачу, попробуйте ее скомпилировать.

👌 Visitor Pattern
https://refactoring.guru/ru/design-patterns/visitor
источник
2019 February 05
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
📚 Адаптация Clean Code для TypeScript

Особое внимание советую уделить:
🏹 Functions
🎓 Classes
🎨 Composition
🚪 Open/Closed Principle

👉 https://github.com/labs42io/clean-code-typescript
источник
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
📚 Вы знали, что в Chrome Dev Tools можно копировать объекты в буфер обмена?
источник
2019 February 06
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
📚 Throttling оповещений пользователей с помощью RxJS

👉 Пример использования оператора groupBy
https://blog.angularindepth.com/throttling-notifications-from-multiple-users-with-rxjs-4d90473f34aa
источник
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
🦄 Это то, что я использую для красивых скриншотов с кодом
https://carbon.now.sh
источник
2019 February 07
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
⚡️ Убедитесь, что обновили Angular CLI до версии 7.3, так как в нем добавили оптимизацию полифилов

🔸 CLI создаст два бандла с полифилами - для старых (большой) и для новых браузеров (маленький)
🔸 Пользователи новых браузеров получат меньше JS кода, а значит приложение загрузится и запустится быстрее 💨

👉 https://netbasal.com/prevent-loading-redundant-es2015-browser-polyfills-thanks-to-angular-cli-177494c5244d
источник
2019 February 08
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
🦄 Основы реактивного программирования с использованием RxJS

Что такое реактивность?
Сложно найти ответ на, казалось бы, такой распространенный термин. Если кратко: реактивность это способность реагировать на какие-либо изменения. Но о каких изменениях идет речь?

👉 https://medium.com/p/984c1a390e2d
источник
2019 February 09
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
🦄 Когда выйдет Ivy, и что нам ждать в Angular 8?

👉 https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7
источник
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
📚 А вы знали, что с помощью console.profile можно запускать профилировку JavaScript?

👉 https://developer.mozilla.org/en-US/docs/Web/API/Console/profile
источник
2019 February 11
🦊 Angular Fox 🚀 — русскогорящие новости сообщества
📚 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/
источник