Обзор AngularConnect 2019. Часть 1

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. Проверить совместимость библиотеки можно по ссылке ^[1].

Ссылка с таймкодом ^[2]

Отдельно часть Igor Minar:

Ссылка с таймкодом ^[3]:

Deep Dive into the Angular Compiler

Alex Rickabaugh, разработчик Angular Compiler, рассказывает о пяти этапах компиляции Angular-модуля в JavaScript-код. Он на примере разбирает модель компиляции: какой она была и какой станет в Ivy. NgModule scopes, частичное выполнение кода и улучшенная проверка типов в шаблонах — основные преимущества Ivy, по мнению Alex.

Доклад будет полезен тем, кто хочет детально разобраться в особенностях компилятора и понять, из каких этапов состоит его работа.

Ссылка с таймкодом ^[4]:

Angular and the OWASP top 10

Philippe De Ryck напоминает про рейтинг уязвимостей OWASP 10, но подробно останавливается только на трех из них: XSS, Broken Auth и использование зависимостей с уязвимостями.

1. Следовать angular way — залог отсутствия XSS.
2. Избежать проблем с авторизацией помогут OAuth 2.0 и библиотека.
3. Проект, созданный при помощи ng new, имеет 20 тысяч установленных файлов, которые не контролирует разработчик. Этим пользуются злоумышленники: npm-пакет electron-notify-native добавили в популярный репозиторий. Спустя некоторое время изменили код. Популярный репозиторий получает уязвимость при обновлении зависимостей.

Рекомендуем этот доклад как введение в OWASP 10.

Ссылка с таймкодом ^[5]:

My journey on the Angular Team

Manu Murthy присоединился к команде Angular в октябре 2017 года. В своем докладе он рассказывает о трех ключевых моментах за это время: изменении фокуса на сообщество, улучшении процессов внутри команды и о текущих вызовах. В конце доклада рассказывает о проектах интернов 2019 года: Caretaker, Scaled searching in code и Connecting Ecosystem.

Два года команды Angular пролетели для нас за полчаса. Заскучать не успели. Если хотите узнать фреймворк изнутри — доклад вам понравится.

Ссылка с таймкодом ^[6]

How we make Angular fast

Во время разработки Ivy команда сосредоточилась на производительности.

Бо́льшую часть доклада Miško Hevery рассказывает об оптимизации js-скриптов движком V8. На примере бенчмарков он показывает время выполнения мономорфных и полиморфных функций.
Miško отмечает полезные программы для работы с профилированием V8. В конце доклада представляет структуры данных в Ivy и анонсирует ngDevMode — режим для наглядного дебагинга вашего приложения в консоли браузера.

В большей части доклада происходит разбор низкоуровневых оптимизаций браузера. Подойдет разработчикам, которые хотят максимально оптимизировать свои приложения.

Ссылка с таймкодом ^[7]

Finding Angular

Elana Olson рассказывает про экосистему Angular: как создать проект, как стилизовать его при помощи Angular Material, как добавить сервисы и для чего они нужны. В завершении Elana Olson объясняет, как можно помочь Angular-сообществу и добавить свой проект в экосистему.

Доклад оправдывает уровень Starter. Подойдет для новых разработчиков, которые недавно прошли Tour of Heroes.

Ссылка с таймкодом ^[8]:

The secrets behind Angular’s lightning speed

Max Koretskyi затрагивает три уровня оптимизации: время выполнения кода, использование структур данных и работу компилятора.

1. Ускорить выполнение кода помогут inline caching и мономорфные функции.
2. Bloom filter ускорит работу со структурами.
3. Ivy compiler преобразует html-шаблон в оптимизированный JavaScript-код.
4. Перед просмотром рекомендую ознакомиться с видео Miško. Доклад Max Koretskyi воспринимается проще, потому что примеры подобраны из Angular. Описание работы Bloom filter запомнилось навсегда.

Ссылка с таймкодом ^[9]:

Profiling Angular apps like a shark

Gil Fink начинает с рассказа о процессе рендеринга в браузере, его этапах, отличии reflow от repaint, RAIL model. Затем Gil переходит к профилированию и на примерах показывает, как найти проблемные места с помощью вкладки Performance в Chrome.

Доклад подойдет для ознакомления с процессом профилирования приложений. Завязки на Angular нет, можно рекомендовать друзьям фронтендерам любой специализации.

Ссылка с таймкодом ^[10]:

Automating your Angular projects with Schematics

Brandon Roberts из Nrwl рассказывает о возможностях Angular Schematics. Они могут пригодиться для автоматизации рутинных задач: установить зависимости при добавлении пакета, выполнить дополнительные операции при обновлении. А с помощью схематик можно добавить шаблоны кода и облегчить создание типовых сущностей. Например, Brandon показывает, как добавить шаблон для API-сервиса.

Доклад начинается с основ и подойдет для знакомства с технологией.

Автор: Ish_Ivan

Источник ^[11]