Есть два способа знакомиться с программой конференции. Если открыть официальные описания докладов, будет информативно: узнаешь, о чём каждый из них. А если дёрнуть за рукав людей из программного комитета, получится неформальное обсуждение, где и общие тренды выделят, и посмеются в процессе.
До HolyJS осталось меньше месяца, её программа сформирована, и мы решили рассказать вам о ней обоими способами сразу. Для тех, кому важна информативность, под катом есть официальные описания всех докладов. А для тех, кому хочется неформальнее и аналитичнее, добавили также видеозапись нашего youtube-шоу «Тяжёлое утро с HolyJS»: там как раз участники ПК разбираются в более свободной форме (вплоть до закадрового смеха).
Воркшопы и фреймворки, Дэн Абрамов и Виталий Фридман — всё это ниже:
Оглавление
- Разбор программы от ПК
- Воркшопы
- Фреймворки
- Микрофронтенды
- Стандарты
- Рендеринг
- Архитектура
- Перформанс
- Автоматизация
- Build tools
- Тестирование
- Case study
- И что дальше
Разбор программы от ПК
Воркшопы
Что удобно в онлайн-конференции: зрители могут наглядно видеть экран спикера, без всякого «мне с заднего ряда мелко». Поэтому в этот раз будет целых три воркшопа, позволяющих не просто узнать что-то теоретически, а увидеть на практике.
«Получаем формы правильно: От флажков до выпадающих списков», Виталий Фридман
Чем хороша тема: Фронтендеры привыкли фигачить формы. Одна на завтрак, три на обед и баги по формам на ужин. Но правильно ли их делают? Как собрать в голове ментальную картину хорошей формы? Ответы есть у Виталия, который обладает огромнейшей экспертизой в области интерфейсов и их работы.
Чем ценен спикер: Виталий — человек, который не нуждается в представлении. Он известный перфекционист и «адвокат» современного веба. Он отличается вниманием к каждой детали и в каждом своём докладе делает мир фронтенда чуточку лучше.
Кому будет полезно: если вы хоть раз верстали формы и у вас зачесалось при этом — «а будет ли эта форма эффективной?», «а что можно было бы улучшить в ней?», если у вас хотя бы раз возникал немой вопрос «какого черта тут происходит?», когда вы заполняли очередную форму на сайте — то этот воркшоп для вас. Разберёмся, попробуем, потрогаем.
«Сборка мелкого движка для 2D-игр на JS с использованием общеизвестных мелких библиотек», Иван Попелышев
Чтобы написать игру, достаточно взять фреймворк с огромным API, пройти туториалы и достаточно быстро собрать прототип. При этом у некоторых людей ощущение страха совместится с нежеланием читать огромные API и желанием писать свой мега-алгоритм вот-сейчас-вот.
В то же время туториалы, объясняющие, как всё делать с нуля, рисуют квадратик и зачастую не показывают как «нарисовать остальную сову».
В процессе воркшопа будут использованы CodeSandbox, PixiJS, p2, Tiled и мелкие сниппеты для интеграции. Фокус будет на архитектуре, то есть на том, как всё это связать и подготовить для месячной разработки игры.
«Хватит использовать консоль для тестирования UI-компонентов», Дмитрий Коваленко
Мы привыкли к тому, что для того, чтобы протестировать фронтенд, нужен jsdom. Jest стал стандартом тестирования UI-компонентов. Но нормально ли то, что мы пытаемся тестировать UI в окружении Node.js? Доклад о том, как в Cypress.io пытаются перевернуть подход к тестированию компонентов.
Чем хороша тема: Тема тестирования не вполне раскрыта в современной JS-разработке. И люди либо не тестируют свой код, либо делают это не всегда правильно и оптимально. Спикер выдает аргументированное мнение, идущее вразрез с принятым в большинстве компаний подходом, который оправдывается пирамидой тестирования.
Кому будет полезно: Любому разработчику, который работает с UI. Джуны получат опыт тестирования визуальных компонентов (и не только), а люди с опытом — смогут поставить под вопрос те методы тестирования, которые они используют ежедневно. Ну или задумаются о том, почему они не используют то, что уже здесь и просто.
Фреймворки
«Интервью с Дэном Абрамовым», интервьюеры: Наталия Теплухина, Наталия Короткова
Интервью с Дэном Абрамовым, в котором Наталия Теплухина и Наталия Короткова зададут Дэну накопившиеся вопросы о фронтенде, планах на будущее и о многом другом. А также узнают, над чем работает Дэн сейчас.
Что бы вы хотели узнать у Дэна? Присылайте нам свой вопрос с помощью этой формы.
«SvelteJS under the hood», Павел Малышев
SvelteJS — современный компилируемый JS-фреймворк, который наделал много шума в 2019 году, стал наиболее интересным фреймворком по версии «State of JS» и продолжает набирать популярность. В то же время, вокруг него сложилось много споров и противоречий, разночтений и просто слухов.
Действительно ли это радикально новый подход? Является ли SvelteJS фреймворком или это все-таки компилятор? Исчезает ли он на самом деле и где там «магия»? Как он вообще работает и при чем тут «кибернетическое улучшение» веб-приложений?
Павел предлагает заглянуть «под капот» этого интереснейшего фреймворка и попробовать разобраться.
«Fully zone-less — High-performance Angular applications in post IVY», Michael Hladky
Рассмотрим, как в Angular устроен механизм обнаружения изменений, и поймём, почему zone.js — ваш злейший враг. Разберёмся с template bindings, рендерингом компонентов, и где в вопросах производительности приходится платить наибольшую цену. Как минимум, вы научитесь определять блокирующие UI (и избегать их), анализируя статистику flame charts. А как максимум, сможете в итоге добиться производительности приложения без зон, при этом на самом деле используя их!
Кому будет полезно: Всем, кто хочет глубоко разбираться в производительности (не только Angular)
Почему здесь и сейчас: Докладов о производительности немного
«Mint — programming language for writing single page applications», Gusztáv Szikszai
Хотите узнать, что будет, если скрестить Elm и React? Как подружить функциональную разработку с тем, что делает команда React? Тогда вам сюда.
Чем ценен спикер: Доклад от создателя языка, который создал именно язык, а не просто фреймворк с высокоуровневыми обертками.
Кому будет полезно: Тем, кто хочет посмотреть на альтернативы JavaScript на фронте, и тем, кто хотел посмотреть на функциональный подход, но руки не доходили, потому что «Хаскель — это не практично».
Микрофронтенды
«Architecting complex JavaScript (frontend) setups for large scale enterprise projects», Natalia Venditto
В этом докладе Наталия обсудит те вопросы, которыми надо задаваться каждому фронтенд-архитектору, когда он определяется с технологиями и архитектурными паттернами для крупных энтерпрайзных приложений. Она глубоко рассмотрит последние тренды вроде микрофронтендов и module federation, облачного и статического пре-рендеринга, поговорит о кроссбраузерной и кроссустройственной поддержке, об оптимизации производительности и Core Web Vitals.
Чем ценен спикер: Они в компании мигрировали проект на эти рельсы
Кому будет полезно: Тем, у кого есть большой проект на фронте и кто хочет разбить его на микрофронтенды.
Почему здесь и сейчас: Со стороны сборки мы ещё не заходили.
«Microfrontends на React вместе с Kubernetes», Иван Затравкин
В этом докладе мы обсудим, что такое микрофронтенды, какие проблемы они решают, какие плюсы и минусы у этого подхода. Затем поговорим о Kubernetes и как это может быть полезно фронтенд-разработчику. В завершение посмотрим, как это всё работает вживую на production-ready коде.
Доклад призван дать практические навыки использования микрофронтендов и Configuration as a Code в отношении фронтенд-разработки.
Чем хороша тема: Микрофронтенды — тренд 2020 года, в русскоязычном комьюнити мало докладов на эту тему. И, как правило, такие доклады не раскрывают ошибок и проблем, просто хайпят. А Иван решает реальные проблемы.
Кому будет полезно: Тем, кто хочет микрофронтенды, но не знает, как.
«Микрофронтенды, module federation, Webpack 5», Павел Черторогов
Павел расскажет и покажет, как работает module federation в Webpack 5. Расскажет про то, как Zack Jackson и Tobias Koppers проделали титаническую работу, чтобы предложить достойный стандарт для микрофронтендов.
Чем ценен спикер: Павел обычно рассказывает про GraphQL. Но мимо Module Federation, который, по его мнению, сильно повлияет на индустрию корпоративного фронтенда, он просто не смог пройти мимо.
Чем хороша тема: С середины 2020 года Павел исследует вопрос того, как объединить разрозненные NextJS-приложения на разных поддоменах (админки различных сервисов) в один большой личный кабинет с единой шапкой и меню. Чтобы при переходе между сервисами не было перезагрузки страницы в браузере. При этом, чтобы разработчики сервисов могли влиять на работу меню и шапки из своих приложений, добавляя свои элементы и логику. Разделение ответственности, независимые деплои уже давно есть, теперь надо все это как-то красиво склеить. И оказывается, эта тема не такая простая, как кажется на первый взгляд. Просмотрено куча инструментов, сделан анализ, найдено решение. И спрятать это всё дело в тумбочку было бы кощунством.
Кому будет полезно: Этот доклад будет интересен тем, кто хочет собрать несколько разрозненных приложений в один SPA. Ну или разбить большой монолитный SPA на несколько небольших. Ох уж эти инженеры, сперва мучаются, что-то разбивают, а потом это самое разбитое обратно как-то хитро склеивают. Ненормальные… Если вам интересно, как, а главное, зачем инженеры занимаются этой «ерундой», то обязательно приходите посмотреть и послушать про микрофронтенды.
«One logic to rule them all, from clot to wire», Владимир Минкин
Презентация концепции Strings API с библиотекой Wire для создания веб и мобильных приложений, которые повторно используют бизнес-логику в языке Dart.
Цель этого доклада: продвинуть идеи создания программных систем, состоящих из «плагинов» — отдельных компонентов и блоков, которые можно тестировать индивидуально, визуально и в модульных тестах. Разделение ответственности — это не новая идея и того же можно добиться с помощью уже существующих инструментов. Разница с Wire заключается в том, что он предоставляет простой и семантически красивый API с четким разделением задач на уровне API-библиотеки: общение в одном месте, данные в другом. В докладе будет уделено внимание архитектуре систем визуального ПО и тому, что «всё — это MVC», а также архитектуре Flux.
Стандарты
«Comprehending standards notation for JS», Leo Balter
Чем ценен спикер: Лео известен своей активностью в TC39 и проектами вроде test262. Его работа над языковыми стандартами JavaScript помогает всем JS-разработчикам писать код лучше, но особенно важно, что его работа над интернационализацией позволяет разработчикам делать инструменты и интерфейсы, работающие без лингвистических и культурных границ.
Чем хороша тема: Она не слишком часто обсуждается на конференциях, во многом из-за того, что мало у кого тут столько опыта, сколько у Лео. Она важна, потому что даёт разработчикам много неочевидной информации и позволяет им занять более активную роль в эволюции JavaScript.
Кому будет полезно: Этот доклад будет интересен и полезен самым разным JavaScript-разработчикам. Кому-то он просто поможет понять, как разрабатываются языковые фичи, какие мысли, идеи и усилия сопровождают этот процесс. А кто-то зайдёт дальше, и для него доклад окажется стартовой точкой, чтобы самому начать участвовать в улучшении языка.
«Standardizing JavaScript decorators in TC39», Daniel Ehrenberg
В этом докладе Дэниэл объяснит, что представляет собой TC39 и как они работают. Посмотрим на некоторые недавние языковые пропоузалы вроде Temporal, разберём, как декораторы проходили через процесс TC39 (в том числе как и почему они менялись). Вы тоже можете помочь TC39 развивать JavaScript.
Чем ценен спикер: Дэниэл занимается этим стандартом, к тому же он бывший председатель, эксперт TC39.
Чем хороша тема: Декораторы — важная часть JS, стандарта еще нет, а уже много всего на этом завязано из-за удобства. Первая версия стандарта про декоратор была провальной, и ее не приняли.
Кому будет полезно: Тем, кто интересуется стандартами и будущим языка.
«WebAuthn: Theory and practice», Martin Splitt и Семен Левенсон
WebAuthn — молодая, но перспективная технология. Она не только улучшает безопасность, но и предоставляет более дружелюбный UX для аутентификации. В докладе Мартин и Семен рассмотрят:
— что это вообще и какие проблемы решает
— какие есть юзкейсы
— как добавить WebAuthn на свой сайт и как эта технология может уменьшить отличия от нативных приложений
Чем хороша тема: Web Auth — это новое API, помогающее людям использовать простую аутентификацию. Об этом пока что немного докладов
Кому будет полезно: Всем, кто использует аутентификацию
«Wonderful world of new Web API», Thomas Steiner
Веб развивается так быстро, что стоит моргнуть, как пропустишь массу интересного. А браузеры в этом мире — локомотивы, тянущие весь мир вперёд. В этом докладе вы из первых рук узнаете, как разрабатывать веб-приложения для нескольких экранов, как блокировать клавиатуру (и зачем это может понадобиться), и о многих других новых фичах, которые веб-платформа предоставляет разработчикам.
Томас — developer advocate в Google, который стремится сделать веб лучше благодаря стандартизации, наработке и распространению лучших практик, а также исследованиям. Он ведёт блог и твиттер @tomayac.
Рендеринг
«Автоматическая виртуализация рендеринга произвольной верстки», Дмитрий Карловский
Рендерить всё — это слишком медленно. Подстраиваться под ограничения виртуального скролла — сложно.
Встречайте полностью виртуальный рендеринг, гарантирующий отзывчивость приложения независимо от размера страницы, и не требующий от прикладного разработчика дополнительных приседаний.
Чем ценен спикер: Спикер часто задумывается о практических вещах, которые многие разработчики часто могут упускать и использовать хайповые решения для костылей.
Чем хороша тема: Вы когда-нибудь рендерили списки? А «бесконечные» списки? Открывали ли вы merge request на GitHub или GitLab с сотнями комментариев? Пытались участвовать в обсуждении на Хабре, где комментариев хорошо за 300? В этих случаях перед разработчиками встает вопрос — как все отрендерить, чтобы ничего не отвалилось (например, скролл в рандомную точку). Дима разберет различные стратегии, опишет проблемы современных решений и предложит нестандартный способ по реальному улучшению ситуации.
Кому будет полезно: Всем, у кого на работе есть длинные списки.
«React Reconciler: Как написать собственный рендерер», Ярослав Лосев
Что такое «реконсиляция» в React и какой путь проходит компонент от кода до отрисовки на экран? Какие рендереры уже существуют и как написать свой собственный на примере отрисовки React-компонентов в Figma с использованием React Reconciler.
Доклад позволяет практикующим разработчикам глубже окунуться в то, как устроен React и его архитектура.
Чем ценен спикер: Ярослав — один из основных контрибьторов react-figma, пишет свои конфиги, столкнулся с кучей нюансов такой работы, так как либа опенсорсная и доступная для всех.
Кому будет полезно: Разработчикам, которые используют React в повседневных задачах. Доклад даст огромное понимание о том, что происходит под капотом и как управлять рендером.
Архитектура
«Алгоритмы консенсуса. При чем тут Node.js?», Андрей Печкуров
Мы отправимся в увлекательное путешествие по жестокому миру распределенных систем и познакомимся с основными проблемами, возникающими в них. Полученные знания помогут нам понять, для чего нужны алгоритмы консенсуса. Без связанных с подобными алгоритмами понятий, разумеется, тоже не обойдется.
Наконец, окончательно напуганные некоторыми популярными алгоритмами консенсуса, мы на примере одного образовательного проекта порассуждаем на тему того, что нужно, чтобы написать производительное линеаризуемое хранилище пар ключ-значение на Node.js.
Доклад должен быть полезен всем Node.js-разработчикам, независимо от опыта.
Кому будет полезно: Будущим архитекторам и тем, кто не знает, что такое алгоритм консенсуса.
Почему здесь и сейчас: На JS-конференциях о таком обычно не рассказывают, фундаментальная тема для расширения профессионального кругозора.
Перформанс
«Core Web Vitals: Theory and practice», Elizabeth Sweeny, Иван Акулов
Ура, веб-производительность! В этом докладе Элизабет и Иван глубоко погрузятся в теорию и практику Core Web Vitals:
— Что это такое, почему они имеют значение и как их измерять
— Как Lighthouse вычисляет оценку, и какую роль в этом играют CWV
— И как оптимизировать Core Web Vitals на практике (на примере реального сайта)
Чем ценен спикер: Она Product Manager веб-платформы в Google
Чем хороша тема: Сейчас Web Vitals и метрики — это тренд
Кому будет полезно: Каждому фронтендеру, которого волнуют метрики
Автоматизация
«Rise of the robots», Theodore Vorillas
Роботов используют в индустриальной автоматизации уже более 50 лет. Но в последние годы появилось много опенсорсных наработок. А современные JavaScript-фреймворки позволяют нам создавать богатые и творческие приложения, использующие лучшие IoT-решения.
В этом докладе участники смогут наблюдать творческий процесс прототипирования робота, используемого для мобильного end-to-end-тестирования — робота, который автоматизирует тестирование на реальных устройствах. Также будут озвучены идеи о будущем IoT с JavaScript и популярных веб-технологий.
Чем ценен спикер: Тема тестирования недооценена на конфах по разработке. Особенно, тестирование со стороны пользователя, а еще для мобильных приложений. Докладчик не просто закрывает эту тему, но и предлагает свежее и оригинальное решение.
Кому будет полезно: Всем, кто работает с мобильными приложениями или сайтами, кому интересно тестирование, и особенно кто любит технику и роботов.
Почему здесь и сейчас: Это не обычный рассказ про программные решения, с которыми мы работаем каждый день. Доклад про применение железа к проблеме поиска программных ошибок, про то, как настоящий робот может заменить человека в процессах разработки.
«Babel: A refactoring tool», Nicolò Ribaudo
Николо расскажет об использовании Babel в качестве инструмента рефакторинга и работы с кодмодами.
Чем ценен спикер: Николо является кор мейнтейнером Babel уже более трех лет и готов рассказать много интересных и сложных вещей о нем.
Чем хороша тема: Babel является неотъемлемой частью современного фронтенда. Кодмоды в то же время как подростковый секс: все говорят, но никто не делает. Хочется приблизить аудиторию к использованию кодмодов с использованием уже знакомого инструмента.
Build tools
«Модульный JavaScript: Динамическое разрешение зависимостей», Юрий Караджов
Чем ценен спикер: Видеть недостатки в популярных решениях — это не редкость, а вот предлагать оригинальные рабочие решения — это уже незаурядно. Опыт есть не только в разработке инструмента, но и в его внедрении в рабочие процессы растущей компании. А до этого эти идеи внедрялись в команде Apple
Чем хороша тема: Сейчас хватает поделок, связанных со сборкой проектов, но очень немногие из них похожи на production-ready решения. Здесь рассказ про инструмент, который закрывает недостатки существующих проектов на базе webpack и предлагает несколько другой подход к работе с зависимостями
Кому будет полезно: Если вам нравится webpack и вы хотите лучше узнать о кейсах, когда он не так хорош, как все считают. Если вам НЕ нравится webpack и вы хотите узнать про альтернативу
Почему здесь и сейчас: Проектов подобного рода (крупных) всего два, ни один не освещен толком в сообществе. Этот рассказ от создателя, фактически презентация на русскоязычную аудиторию
Тестирование
«Хватит использовать консоль для тестирования компонентов», Дмитрий Коваленко
Чем хороша тема: Тема тестирования недораскрыта в современной JS-разработке. И люди либо не тестируют свой код, либо делают это не всегда правильно и оптимально. Спикер выдает аргументированное мнение, которое идет вразрез с принятым в большинстве компаний подходом, который оправдывается пирамидой тестирования
Чем ценен спикер: По теме у Дмитрия явно свой оформленный взгляд, достаточно посмотреть на его веселые баталии с Ильей Климовым
Кому будет полезно: Любому разработчику, который работает с UI. Джуны получат опыт тестирования визуальных компонентов (и не только), а люди с опытом смогут поставить под вопрос те методы тестирования, которые они используют ежедневно. Ну или задумаются о том, почему они не используют то, что уже здесь и просто
Почему здесь и сейчас: Свежий взгляд на проблему и опыт от разработчика инструментов, для решения этой проблемы, помножены на смелость заявить отличную от распространенной точку зрения
Case study
«Как разработать свой собственный формат баннера на примере Lamoda», Роман Пятаков
Чем хороша тема: У спикера богатый опыт в разработке баннерки, наступления на грабли и решения их проблем. Спикер разберет весь путь обновления баннеров, сбора проблем и их решений в Lamoda и также даст качественную оценку текущего решения.
Чем ценен спикер: Спикер непосредственно участвовал во всем процессе и сможет дать информацию «из первых рук» по этому case study
Кому будет полезно: Если вашем сайте есть баннеры, то доклад будет полезен
Почему здесь и сейчас: Опыт одной из крупных компаний в рунете.
И что дальше?
Напоследок напомним: хотя этот пост — сплошное перечисление докладов, конференция — это не только сидеть и слушать. Возможность задать каждому спикеру вопросы, чаты с другими участниками, активности от компаний-партнёров — это всё тоже будет.
А если среди докладов вы увидели интересные для себя, то дальше логично отправляться на сайт конференции — там и вся информация о ней, и билеты.
