company_banner

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

    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. С другой — были и доклады, уровень которых мы оценили ниже заявленного. Но ценность конференции не только в докладах — к этому вопросу вернемся во второй части.
    Tinkoff
    it’s Tinkoff — просто о сложном

    Comments 4

      0
      С другой — были и доклады, уровень которых мы оценили ниже заявленного.

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


      что из докладов рекомендуете посмотреть?

        0
        Привет! Я — коллега Ивана, тоже была на AngularConnect, поделюсь своим мнением.

        В первую очередь рекомендую оба Keynote как обзор самого важного, что произошло и будет происходить с Angular.

        Далее из докладов первого дня советую «The secrets behind Angular’s lightning speed» от Max Koretskyi. Доклад интересный и воспринимается легко. Мне лично особенно понравилась часть про bloom filters как ответ на вопрос «Зачем фронтендеру алгоритмы?».

        Если этот доклад понравится, можно посмотреть «How we make Angular fast» Miško Hevery, он более хардкорный.

        Из докладов второго дня я бы пересмотрела «How Angular works» от Kara Erickson. Обзор докладов второго дня мы скоро опубликуем.

        Как видите, мой топ-3 скорее о том, как Ангуляр работает, чем что-то практическое. Мне кажется, это полезно для общего инженерного развития. Что касается практических докладов (схематики, миграция breaking changes, организация контрибьютинга на гитхабе — темы актуальные лично для меня), то я ожидала больше интересных кейсов и открытий. Но здесь все индивидуально.
        0

        Спасибо за статью! Жду вторую часть :)

          0
          Вторая часть выйдет через несколько дней! А пока мы обновили видео на отдельные доклады.

        Only users with full accounts can post comments. Log in, please.