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 Degirmenci и 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 команда сосредоточилась на производительности.
Бо?льшую часть доклада Misko Hevery рассказывает об оптимизации js-скриптов движком V8. На примере бенчмарков он показывает время выполнения мономорфных и полиморфных функций.
Misko отмечает полезные программы для работы с профилированием 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 Degirmenci и 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 команда сосредоточилась на производительности.
Бо?льшую часть доклада Misko Hevery рассказывает об оптимизации js-скриптов движком V8. На примере бенчмарков он показывает время выполнения мономорфных и полиморфных функций.
Misko отмечает полезные программы для работы с профилированием 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-код.
- Перед просмотром рекомендую ознакомиться с видео Misko. Доклад 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. С другой — были и доклады, уровень которых мы оценили ниже заявленного. Но ценность конференции не только в докладах — к этому вопросу вернемся во второй части.
fetis26
такое почти всегда. хорошо, хоть тут были указаны хотя бы примерные уровни. очень часто приходится догоадываться о содержимом из заголовка и вот тут могуть быть настоящие разочарования.
что из докладов рекомендуете посмотреть?
yuliatsareva
Привет! Я — коллега Ивана, тоже была на AngularConnect, поделюсь своим мнением.
В первую очередь рекомендую оба Keynote как обзор самого важного, что произошло и будет происходить с Angular.
Далее из докладов первого дня советую «The secrets behind Angular’s lightning speed» от Max Koretskyi. Доклад интересный и воспринимается легко. Мне лично особенно понравилась часть про bloom filters как ответ на вопрос «Зачем фронтендеру алгоритмы?».
Если этот доклад понравится, можно посмотреть «How we make Angular fast» Misko Hevery, он более хардкорный.
Из докладов второго дня я бы пересмотрела «How Angular works» от Kara Erickson. Обзор докладов второго дня мы скоро опубликуем.
Как видите, мой топ-3 скорее о том, как Ангуляр работает, чем что-то практическое. Мне кажется, это полезно для общего инженерного развития. Что касается практических докладов (схематики, миграция breaking changes, организация контрибьютинга на гитхабе — темы актуальные лично для меня), то я ожидала больше интересных кейсов и открытий. Но здесь все индивидуально.