Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
19 и 20 сентября мы с коллегами посетили конференцию AngularConnect. Это одна из крупных Angular-конференций, в этом году она прошла в пятый раз. В программе было 30 докладов, из которых 8 — от команды Angular, 4 воркшопа и 5 эксперт-зон. Ради такого стоило поехать в Лондон (ну ладно, в Лондон всегда стоит съездить).
В этой статье мы расскажем, почему выбрали AngularConnect, какие темы были интересны нам, и поможем определиться с просмотром докладов первого дня конференции.
Первое, на что мы обратили внимание, когда решали, ехать или нет, — это, конечно же, программа. 8 докладов от Angular team, известный многим Angular-разработчикам John Papa, автор блога Angular in Depth Max Koretskiy и многие другие известные спикеры — по-настоящему звездный состав.
Но дело не только в громких именах. Заявленные темы выглядели крайне актуальными для наших рабочих задач.
Многого мы ожидали от докладов уровня deep-dive — Performance optimizations in Angular от инженера Google Mert Değirmenci и Profiling Angular apps like a shark об отладке проблем с производительностью и памятью. Нам важно все, что связано с производительностью, потому что мы делаем сложные интерактивные приложения.
Доклад Migrating breaking changes with TSLint and Schematics тоже казался точным попаданием. У нас есть внутренняя библиотека UI Kit, при разработке которой мы не раз сталкивались с негативом, когда делали ломающие изменения. Мы пришли к необходимости автоматических миграций, поэтому было интересно узнать, как это делают другие.
Мы используем NgRx и следим за применением его лучших практик. Поэтому нас заинтересовал еще один deep-dive доклад — Quantum Facades: Why NgRx Facades are terrible or awesome depending on how you observe them. Хотели послушать выводы Sam Julien и сравнить их с нашими.
И таких пересечений было много!
Первый день конференции открывали Stephen Fluin и Igor Minar.
Stephen поблагодарил сообщество за поддержку и рассказал об увеличении в Google количества проектов на Angular с 600 в 2018 году до 1500 в 2019.
Igor рассказал, что в Angular CLI 8.3 упростили сборку под ES 5 — это позволило сократить затрачиваемое время на 40%. Еще он рассказал об оптимизации в Angular 9: вес артефактов уменьшится, приложения начнут работать быстрее. Это станет возможным за счет нового рендера Ivy. В девятой версии фреймворка библиотеки будут поставляться с поддержкой ViewEngine. А с десятой версии — с Ivy. Проверить совместимость библиотеки можно по ссылке.
Ссылка с таймкодом
Отдельно часть Igor Minar:
Ссылка с таймкодом:
Alex Rickabaugh, разработчик Angular Compiler, рассказывает о пяти этапах компиляции Angular-модуля в JavaScript-код. Он на примере разбирает модель компиляции: какой она была и какой станет в Ivy. NgModule scopes, частичное выполнение кода и улучшенная проверка типов в шаблонах — основные преимущества Ivy, по мнению Alex.
Доклад будет полезен тем, кто хочет детально разобраться в особенностях компилятора и понять, из каких этапов состоит его работа.
Ссылка с таймкодом:
Philippe De Ryck напоминает про рейтинг уязвимостей OWASP 10, но подробно останавливается только на трех из них: XSS, Broken Auth и использование зависимостей с уязвимостями.
Рекомендуем этот доклад как введение в OWASP 10.
Ссылка с таймкодом:
Manu Murthy присоединился к команде Angular в октябре 2017 года. В своем докладе он рассказывает о трех ключевых моментах за это время: изменении фокуса на сообщество, улучшении процессов внутри команды и о текущих вызовах. В конце доклада рассказывает о проектах интернов 2019 года: Caretaker, Scaled searching in code и Connecting Ecosystem.
Два года команды Angular пролетели для нас за полчаса. Заскучать не успели. Если хотите узнать фреймворк изнутри — доклад вам понравится.
Ссылка с таймкодом
Во время разработки Ivy команда сосредоточилась на производительности.
Бо́льшую часть доклада Miško Hevery рассказывает об оптимизации js-скриптов движком V8. На примере бенчмарков он показывает время выполнения мономорфных и полиморфных функций.
Miško отмечает полезные программы для работы с профилированием V8. В конце доклада представляет структуры данных в Ivy и анонсирует ngDevMode — режим для наглядного дебагинга вашего приложения в консоли браузера.
В большей части доклада происходит разбор низкоуровневых оптимизаций браузера. Подойдет разработчикам, которые хотят максимально оптимизировать свои приложения.
Ссылка с таймкодом
Elana Olson рассказывает про экосистему Angular: как создать проект, как стилизовать его при помощи Angular Material, как добавить сервисы и для чего они нужны. В завершении Elana Olson объясняет, как можно помочь Angular-сообществу и добавить свой проект в экосистему.
Доклад оправдывает уровень Starter. Подойдет для новых разработчиков, которые недавно прошли Tour of Heroes.
Ссылка с таймкодом:
Max Koretskyi затрагивает три уровня оптимизации: время выполнения кода, использование структур данных и работу компилятора.
Ссылка с таймкодом:
Gil Fink начинает с рассказа о процессе рендеринга в браузере, его этапах, отличии reflow от repaint, RAIL model. Затем Gil переходит к профилированию и на примерах показывает, как найти проблемные места с помощью вкладки Performance в Chrome.
Доклад подойдет для ознакомления с процессом профилирования приложений. Завязки на Angular нет, можно рекомендовать друзьям фронтендерам любой специализации.
Ссылка с таймкодом:
Brandon Roberts из Nrwl рассказывает о возможностях Angular Schematics. Они могут пригодиться для автоматизации рутинных задач: установить зависимости при добавлении пакета, выполнить дополнительные операции при обновлении. А с помощью схематик можно добавить шаблоны кода и облегчить создание типовых сущностей. Например, Brandon показывает, как добавить шаблон для API-сервиса.
Доклад начинается с основ и подойдет для знакомства с технологией.
Ссылка с таймкодом:
Доклад про схематики закрывал программу первого дня. Впереди нас ждал Angular-эль, неформальное общение, прогулки по Лондону… И второй день конференции, о котором мы расскажем в отдельной статье.
Впечатления от первой половины конференции остались смешанными. С одной стороны, некоторые доклады были действительно глубокие, настоящий deep-dive с контентом «из первых рук», часто от самих создателей Angular. С другой — были и доклады, уровень которых мы оценили ниже заявленного. Но ценность конференции не только в докладах — к этому вопросу вернемся во второй части.
В этой статье мы расскажем, почему выбрали AngularConnect, какие темы были интересны нам, и поможем определиться с просмотром докладов первого дня конференции.
Программа
Первое, на что мы обратили внимание, когда решали, ехать или нет, — это, конечно же, программа. 8 докладов от Angular team, известный многим Angular-разработчикам John Papa, автор блога Angular in Depth Max Koretskiy и многие другие известные спикеры — по-настоящему звездный состав.
Но дело не только в громких именах. Заявленные темы выглядели крайне актуальными для наших рабочих задач.
Многого мы ожидали от докладов уровня deep-dive — Performance optimizations in Angular от инженера Google Mert Değirmenci и Profiling Angular apps like a shark об отладке проблем с производительностью и памятью. Нам важно все, что связано с производительностью, потому что мы делаем сложные интерактивные приложения.
Доклад Migrating breaking changes with TSLint and Schematics тоже казался точным попаданием. У нас есть внутренняя библиотека UI Kit, при разработке которой мы не раз сталкивались с негативом, когда делали ломающие изменения. Мы пришли к необходимости автоматических миграций, поэтому было интересно узнать, как это делают другие.
Мы используем NgRx и следим за применением его лучших практик. Поэтому нас заинтересовал еще один deep-dive доклад — Quantum Facades: Why NgRx Facades are terrible or awesome depending on how you observe them. Хотели послушать выводы Sam Julien и сравнить их с нашими.
И таких пересечений было много!
Доклады
Первый день конференции открывали Stephen Fluin и Igor Minar.
Stephen поблагодарил сообщество за поддержку и рассказал об увеличении в Google количества проектов на Angular с 600 в 2018 году до 1500 в 2019.
Igor рассказал, что в Angular CLI 8.3 упростили сборку под ES 5 — это позволило сократить затрачиваемое время на 40%. Еще он рассказал об оптимизации в Angular 9: вес артефактов уменьшится, приложения начнут работать быстрее. Это станет возможным за счет нового рендера Ivy. В девятой версии фреймворка библиотеки будут поставляться с поддержкой ViewEngine. А с десятой версии — с Ivy. Проверить совместимость библиотеки можно по ссылке.
Ссылка с таймкодом
Отдельно часть Igor Minar:
Ссылка с таймкодом:
Deep Dive into the Angular Compiler
Alex Rickabaugh, разработчик Angular Compiler, рассказывает о пяти этапах компиляции Angular-модуля в JavaScript-код. Он на примере разбирает модель компиляции: какой она была и какой станет в Ivy. NgModule scopes, частичное выполнение кода и улучшенная проверка типов в шаблонах — основные преимущества Ivy, по мнению Alex.
Доклад будет полезен тем, кто хочет детально разобраться в особенностях компилятора и понять, из каких этапов состоит его работа.
Ссылка с таймкодом:
Angular and the OWASP top 10
Philippe De Ryck напоминает про рейтинг уязвимостей OWASP 10, но подробно останавливается только на трех из них: XSS, Broken Auth и использование зависимостей с уязвимостями.
- Следовать angular way — залог отсутствия XSS.
- Избежать проблем с авторизацией помогут OAuth 2.0 и библиотека.
- Проект, созданный при помощи ng new, имеет 20 тысяч установленных файлов, которые не контролирует разработчик. Этим пользуются злоумышленники: npm-пакет electron-notify-native добавили в популярный репозиторий. Спустя некоторое время изменили код. Популярный репозиторий получает уязвимость при обновлении зависимостей.
Рекомендуем этот доклад как введение в OWASP 10.
Ссылка с таймкодом:
My journey on the Angular Team
Manu Murthy присоединился к команде Angular в октябре 2017 года. В своем докладе он рассказывает о трех ключевых моментах за это время: изменении фокуса на сообщество, улучшении процессов внутри команды и о текущих вызовах. В конце доклада рассказывает о проектах интернов 2019 года: Caretaker, Scaled searching in code и Connecting Ecosystem.
Два года команды Angular пролетели для нас за полчаса. Заскучать не успели. Если хотите узнать фреймворк изнутри — доклад вам понравится.
Ссылка с таймкодом
How we make Angular fast
Во время разработки Ivy команда сосредоточилась на производительности.
Бо́льшую часть доклада Miško Hevery рассказывает об оптимизации js-скриптов движком V8. На примере бенчмарков он показывает время выполнения мономорфных и полиморфных функций.
Miško отмечает полезные программы для работы с профилированием V8. В конце доклада представляет структуры данных в Ivy и анонсирует ngDevMode — режим для наглядного дебагинга вашего приложения в консоли браузера.
В большей части доклада происходит разбор низкоуровневых оптимизаций браузера. Подойдет разработчикам, которые хотят максимально оптимизировать свои приложения.
Ссылка с таймкодом
Finding Angular
Elana Olson рассказывает про экосистему Angular: как создать проект, как стилизовать его при помощи Angular Material, как добавить сервисы и для чего они нужны. В завершении Elana Olson объясняет, как можно помочь Angular-сообществу и добавить свой проект в экосистему.
Доклад оправдывает уровень Starter. Подойдет для новых разработчиков, которые недавно прошли Tour of Heroes.
Ссылка с таймкодом:
The secrets behind Angular’s lightning speed
Max Koretskyi затрагивает три уровня оптимизации: время выполнения кода, использование структур данных и работу компилятора.
- Ускорить выполнение кода помогут inline caching и мономорфные функции.
- Bloom filter ускорит работу со структурами.
- Ivy compiler преобразует html-шаблон в оптимизированный JavaScript-код.
- Перед просмотром рекомендую ознакомиться с видео Miško. Доклад Max Koretskyi воспринимается проще, потому что примеры подобраны из Angular. Описание работы Bloom filter запомнилось навсегда.
Ссылка с таймкодом:
Profiling Angular apps like a shark
Gil Fink начинает с рассказа о процессе рендеринга в браузере, его этапах, отличии reflow от repaint, RAIL model. Затем Gil переходит к профилированию и на примерах показывает, как найти проблемные места с помощью вкладки Performance в Chrome.
Доклад подойдет для ознакомления с процессом профилирования приложений. Завязки на Angular нет, можно рекомендовать друзьям фронтендерам любой специализации.
Ссылка с таймкодом:
Automating your Angular projects with Schematics
Brandon Roberts из Nrwl рассказывает о возможностях Angular Schematics. Они могут пригодиться для автоматизации рутинных задач: установить зависимости при добавлении пакета, выполнить дополнительные операции при обновлении. А с помощью схематик можно добавить шаблоны кода и облегчить создание типовых сущностей. Например, Brandon показывает, как добавить шаблон для API-сервиса.
Доклад начинается с основ и подойдет для знакомства с технологией.
Ссылка с таймкодом:
Доклад про схематики закрывал программу первого дня. Впереди нас ждал Angular-эль, неформальное общение, прогулки по Лондону… И второй день конференции, о котором мы расскажем в отдельной статье.
Впечатления от первой половины конференции остались смешанными. С одной стороны, некоторые доклады были действительно глубокие, настоящий deep-dive с контентом «из первых рук», часто от самих создателей Angular. С другой — были и доклады, уровень которых мы оценили ниже заявленного. Но ценность конференции не только в докладах — к этому вопросу вернемся во второй части.
