23 September 2019

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

Tinkoff corporate blogAngularConferences
19 и 20 сентября мы с коллегами посетили конференцию AngularConnect. Это одна из крупных Angular-конференций, в этом году она прошла в пятый раз. В программе было 30 докладов, из которых 8 — от команды Angular, 4 воркшопа и 5 эксперт-зон. Ради такого стоило поехать в Лондон (ну ладно, в Лондон всегда стоит съездить).

В этой статье мы расскажем, почему выбрали AngularConnect, какие темы были интересны нам, и поможем определиться с просмотром докладов первого дня конференции.

image

Программа


Первое, на что мы обратили внимание, когда решали, ехать или нет, — это, конечно же, программа. 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. Проверить совместимость библиотеки можно по ссылке.



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 и использование зависимостей с уязвимостями.

  1. Следовать angular way — залог отсутствия XSS.
  2. Избежать проблем с авторизацией помогут OAuth 2.0 и библиотека.
  3. Проект, созданный при помощи 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 затрагивает три уровня оптимизации: время выполнения кода, использование структур данных и работу компилятора.

  1. Ускорить выполнение кода помогут inline caching и мономорфные функции.
  2. Bloom filter ускорит работу со структурами.
  3. Ivy compiler преобразует html-шаблон в оптимизированный JavaScript-код.
  4. Перед просмотром рекомендую ознакомиться с видео 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. С другой — были и доклады, уровень которых мы оценили ниже заявленного. Но ценность конференции не только в докладах — к этому вопросу вернемся во второй части.
Tags:angularangularconnectконференцииfrontend
Hubs: Tinkoff corporate blog Angular Conferences
+26
2.8k 22
Comments 4
Top of the last 24 hours