Как получить от ESLint максимум пользы? Что можно впихнуть в библиотеку на два килобайта? Как выжать больше производительности, когда очевидные оптимизации уже сделаны? Почему слоны умные и параноидальные? Всё это будет в программе HolyJS (да-да, про слонов тоже). Собрали описания всех докладов в этом хабрапосте и разделили на тематические блоки.
Конференция в этот раз пройдёт в два этапа: сначала два дня будут полностью онлайновыми, а вот в третий день можно будет хоть прийти на офлайн-мероприятие в Москве, хоть подключиться удалённо. Другие подробности (вроде точного расписания) и билеты — на сайте.
Оглавление
Инструменты
Дмитрий Васильев
После появления библиотеки React в мире JavaScript наблюдается рост интереса к функциональному программированию.
Спикер обсудит процесс разработки и отладки функциональных программ и расскажет, какие новые уникальные возможности с точки зрения developer experience открывает функциональное программирование. Покажет новый концепт IDE для функционального программирования и расскажет о его разработке.
Архитектура приложения через Storybook
Иван Нагайко
VK
Спикер расскажет, как спроектировать приложение через Storybook, который по сути является не библиотекой, а концепцией разработки. На примере практических кейсов на React, которые легко применимы и к другим библиотекам и фреймворкам, будут затронуты проблемы библиотек, с которыми сталкивался спикер.
Из доклада вы получите практический гид внедрения Storybook: от момента, когда пора внедрять эту концепцию, до проблемы внедрения и примеров решения, особенностей работы store со Storybook, разбора DI-компонентов.
How to build large react-redux application without code mess
Konstantin Astapov
Rambler&Co
React с хуками — мощный способ для быстрого и простого создания веб-приложений. Однако по мере роста приложения компоненты оказываются перегружены «состояниями», «эффектами» и «коллбэками». Описание бизнес-логики превращается в путаницу. Разделение компонентов на более мелкие не особо помогает, поскольку между ними сохраняется много путаницы. Порой люди используют Redux, но это добавляет своих сложностей.
Константин расскажет о подходе, который используют в его команде и который помог делать приложения лёгкими для чтения, отладки и масштабирования.
Менеджмент зависимостей в JavaScript
Никита Балихин
Газпромбанк
Михаил Потапов
Тинькофф
Фронтенд-разработчик и немного motion-дизайнер, обожает писать код и разбираться в концептуальных принципах работы инструментов, чтобы они были использованы по назначению. Любит придумывать абстракции, упрощающие жизнь других разработчиков.
ESLint — больше чем просто extend
Денис Красновский
Домклик
ESLint — мощный инструмент, и при должном обращении он будет служить верой и правдой. Но зачастую вся работа с ним сводится к extend-у от всем известного плагина. Как раскрыть его потенциал, как сократить время проверки кода, как сделать реюзабельный конфиг, что будет, если попытаться внедрить его в большой компании, и при чем тут вообще Prettier — узнаете из доклада Дениса.
UI
Воркшоп. Пишем игру на React и разбираемся с react-reconciler
Сергей Константинов
Райффайзен Банк
Из воркшопа вы узнаете, как воспользоваться на практике пакетом react-reconciler, чтобы написать свой собственный рендерер в PIXI.js, что позволит вам управлять библиотекой pixi привычными инструментами из реакта и создавать игры на JSX.
Поэтапно пройдём от первоначальной отрисовки спрайта на страницу до реализации полноценной игры. Затронем работу reconciler'a на примерах реализации интерактивности, работы с анимациями. В конечном счете напишем удобную в использовании библиотеку для разработки графики на react'e c JSX.
Бонусом посмотрим на то, как с помощью кодогенерации с использованием библиотеки recast для работы с AST-деревьями, можно создать свой игровой движок для «программирования мышкой».
Воркшоп. Улучшаем доступность маркетплейса для незрячих, учитывая опыт большого e-commerce проекта
Илья Сидорчик
Яндекс Маркет
Илья Сидорчик со своей командой сделал Яндекс Маркет доступнее для незрячих покупателей и тех, кто пользуется сайтом с клавиатуры. В процессе разработчики столкнулись с неочевидными проблемами: Почему трудно найти кнопку на видном месте? Как удаление role="button" у кликабельного элемента может сделать лучше? Почему в VoiceOver работает, а в NVDA нет?
Мы разрешим эти проблемы, улучшив доступность маркетплейса вместе по шагам:
Исправим главные баги.
Доработаем UI Kit (заголовок, картинку, попап и др.).
Сделаем навигацию с клавиатуры.
Поправим тачовую версию.
Протестируем вручную и автоматически.
Планировщик задач: не замораживаем вкладку при открытии страницы
Виктор Хомяков
Яндекс
Вы узнаете, как с помощью планировщика задач в Яндексе делают инициализацию скриптов на странице поиска более дружественной к человеку и не блокирующей UI. А также о том, как вам добиться того же.
Рассмотрим проблему большого TBT (Total Blocking Time) при открытии страниц в браузере, не зависящего от выбора фреймворков и библиотек. Виктор расскажет, как уменьшить TBT, не ухудшая другие показатели.
Дмитрий Грош
Wis Software
Дмитрий обратил внимание, что на собеседованиях мало кто из разработчиков отвечает на вопрос о батчинге. Некоторые даже впервые слышат такое слово. Спикер расскажет об этом явлении в React. Как это работало в старых версиях и как работает сейчаc.
Графика и анимации
Александр Мышов
2ГИС
На рынке с каждым годом появляется всё больше устройств с дисплеями, поддерживающими высокие частоты обновления экрана. Их появление привносит в жизнь разработчиков дополнительные проблемы, которые нужно учитывать при разработке сложного софта в вебе (ГИС-системы, графические редакторы, игры). В докладе Александр подробно расскажет, что нужно учитывать, чтобы приложения на таких дисплеях работали без ошибок.
Хаки и ветчина из JS-геймдева, которые подходят для велосипедных оптимизаций приложений в вебе
Иван Попелышев
White Frame
Доклад для тех, кто пишет свои игры или высоконагруженные распределенные модели данных. Например, стартап с бесконечной доской и тасками на ней.
Спикер рассмотрит связь некоторых высокоуровневых концептов и простого кода на JS. Полученные знания могут пригодиться при написании своих велосипедов и при изучении низкоуровневых вставок в коде популярных библиотек. Весь доклад построен на GameDev-опыте, в частности — разработки рендерера PixiJS.
Анимации и их оптимизация в корпоративных проектах
Роман Троицкий
Комус-тех
Анимации на сайте позволяют управлять вниманием пользователя, делают просмотр более приятным, а информацию более запоминающейся. Для SPA анимация является еще более важным элементом, позволяющим сгладить рендер страницы и имитировать поведение нативного приложения.
Несмотря на удешевление производительности устройств, анимации все еще остаются достаточно «тяжелой» историей для браузера, и приходится прикладывать немало усилий для плавности анимации и высокого FPS. На примере анимаций с реальных проектов рассмотрим состояние топ 10 универсальных библиотек для создания анимаций, обсудим плюсы и минусы их использования, разберёмся, когда удобнее использовать конкретную библиотеку и обсудим некоторые нюансы их использования. В конце рассмотрим частые случаи проблем с производительностью и варианты их решения.
Генерируем видео на JavaScript
Стёпа Михайлюк
Lumen5
Если ввести в поисковую строку «генерация видео на JavaScript», то гугл вернет 100500 ссылок на видеоплееры. И 99% этих плееров — это просто интерфейс поверх HTMLVideoElement.
Спикер сфокусируется именно на вопросах генерации видео, расскажет о челленджах, ограничениях и решениях. Этот доклад позволит вам получить представление об основных моментах процесса генерации.
Case-study
Ситидрайв: поездка продолжается
Артем Акутин
Ситидрайв
Удивительная и местами невеселая история о том, как в Ситидрайв удается давать клиентам доступ к десяти тысячам машин круглые сутки. Рецепт одного из крупнейших каршерингов: NodeJS, Redis, RabbitMQ и маленькая щепотка удачи.
А почему бы не вынести все конфиги в отдельный пакет, сократив бойлерплейт до нуля?
Иван Малюгин
Билайн
Вам когда-нибудь приходилось копировать конфиги ESlint, Babel, Webpack и других инструментов из проекта в проект? В вашем package.json уже столько плагинов, что среди них невозможно найти реальные зависимости проекта? А что, если вы можете избавиться от всех лишних зависимостей вынесением в отдельные тематические пакеты? И все конфиги сократятся до одной строки импорта, а бойлерплейт — до 100 байтов.
Из доклада вы узнаете, как команде спикера в Билайне это удалось. Спикер поделится историей появления этого решения, а заодно расскажет, сколько боли они схватили там, где совсем не ожидали.
Как на самом деле работать над перформансом веб-приложения
Наталья Стусь
Яндекс
Когда мы гуглим «как улучшить скорость веб-приложения», обычно находим один и тот же набор практик — «сжимайте все, что можно сжимать» или «поделите код на чанки».
Но если все это уже сделано, можно ли улучшить еще? Тут нет серебряной пули, потому что надо заняться исследованием перформанса именно вашего приложения. Спикер расскажет о концепциях, подходах и проблемах, которые появлялись в их команде Авто.ру в ходе решения этой задачи.
Введение в реактивное программирование
Сэм Булатов
Waliot, krd.dev
React — не реактивен (спойлер: не совсем), а вот Vue, Svelte и Angular — да. Но почему? Во времена jQuery, когда программа получала данные, она должна была знать все места, где эти данные задействованы, чтобы обновить их. Сейчас же фреймворки позволяют вам просто обновить данные, а отображением они уже займутся сами. Это один из принципов реактивности — инверсия зависимостей. Отображение следит за изменением данных, чтобы сделать что-то самой. В React этого не происходит, но все же стало лучше, чем было — теперь не нужно обновлять вручную во всех местах, за нас это сделает фреймворк. Доклад будет не о фреймворках, хотя и о них тоже поговорим, а больше про фундаментальные вещи.
Разбираем слона (и это не имеет никакого отношения к JS)
Сергей Абдульманов
Туту.ру
Сергей Абдульманов уже знаком многим по докладам, хабрапостам ( @milfgard) и другим проявлениям. Кажется, он может прийти на любую IT-площадку и рассказать там про что-то «неайтишное» так, что в итоге люди не будут упрекать в оффтопике. В этот раз будет разбирать слона:
Зачем слоны такие умные и параноидальные?
Что можно встроить в руку: датчик запаха и шноркель. Как после этого пользоваться рукой.
Другие детали слона: термопанели на голове, рации в ногах, как слон одевается.
Слон — царь зверей. Кто кому даёт люлей в буше. Почему это имеет отношение к формуле давления.
Деплой слонёнка.
Как мы почти убили слонов и сейчас восстанавливаем.
Вот почему слон такой умный и параноидальный!
Бэкенд
Event Sourcing: глубокое погружение
Антон Жуков
Контрол Системс
На пути построения Event Sourcing-системы вам предстоит столкнуться со множеством трудностей и подводных камней. Придется принимать важные архитектурные решения, и неправильный выбор принесет значительные проблемы или даже похоронит ваш проект. Спикер занимался темой Event Sourcing более четырех лет и прошелся по всем возможным граблям. В этом докладе он поделится своим опытом.
Андрей Власов
Сбер
Василий Маркитан
Сбер
Вы узнаете о технологии WebTransport и ее применении. Сейчас она находится в стадии draft и активно разрабатывается W3C.
Доклад знакомит разработчиков с текущим состоянием технологии, мотивацией ее появления и сравнит с существующими решениями.
В докладе предусмотрена и практическая часть. Будет продемонстрировано взаимодействие с API WebTransport и показано, как происходит развертывание необходимого локального окружения. Так разработчики смогут пощупать технологию заранее и быть готовыми к ее выходу из статуса draft.
Workshop: how to develop, build, and deploy Node.js microservices with NestJS & Pulumi
Andrew Reddikh
Emma
Alexander Korzhikov
ING
На воркшопе вы получите представление о ключевых принципах, необходимых для разработки, построения и поддержки набора микросервисов на стеке Node.js. Будет рассмотрена специфика создания обособленных докеризованных сервисов на TypeScript с использованием монорепозитория и Turborepo. Воркшоп состоит из обзорной части и упражнений по созданию облачной среды при помощи фреймворка Pulumi. Подойдет разработчиками, которые хотят научиться техникам с использованием Pulumi и Docker для Node.js.
Эти спикеры уже выступали с другим воркшопом на летней HolyJS — можно посмотреть в нашем плейлисте в ожидании новых знаний.
Андрей Мелихов
Osome
Попробуем посчитать, что нам нужно для того, чтобы запустить более-менее приличный сервис на Node.js на VDS (blue-green деплой, балансировка, база данных, логи) и сравним с подходом на AWS-стеке (лямбды, RDS, API-gateway). А может быть даже удастся сравнить и Selectel с Yandex.Cloud.
Языки
Воркшоп. Дивный Elm-овый мир без мутаций и side-эффектов. Искусство чистых касаний
Ян Новак
Snapview
Функциональная парадигма сейчас пронизывает фронтенд, но мало кто знает, что Elm стоял у истоков этого тренда (да и вообще мало кто знает про Elm). Ян расскажет, что такое Elm и как его правильно готовить.
Главная задача доклада – показать участникам новый способ думать. Что-то такое, с чем они, скорее всего, еще никогда не сталкивались. Вдобавок показать, что на этом вполне себе хорошо пишется фронтенд.
Доклад будет интересен продвинутым разработчикам (уровня middle и выше), которые хотят узнать новое, размять мозги и, вообще, выйти из зоны комфорта мира трех китов (React, Vue, Angular).
State management
Артём Арутюнян
dbeaver
Что, как и зачем можно впихнуть в библиотеку на два килобайта и как на ее основе можно построить приложение любой сложности?
Артём расскажет, как правильные абстракции могут уменьшать количество и сложность кода в разы. Все примеры будут связаны со стейт-менеджером Reatom, но в докладе будут обобщены до принципов, которые применимы в любом коде.
Эффектор. Бизнес-логика с легкостью
Ян Лаврюшев
Pink Unicorn
Обзор менеджера состояний «Эффектор» и пакетов экосистемы.
Другое
Этичная веб-аналитика. Что делать, когда маркетологи хотят знать лишнее?
Всеволод Родионов
Lido
Освежаем в памяти, как работает GDPR, что в нем нового и почему важно не забивать на него. Придем к пониманию, что обычно всем на него плевать, а по шапке может прилететь именно разработчику. Разберемся, как избежать его (или правильно соответствовать) в пет-проектах, а также, как внедрить GDPR в криптопроекты или построить его так, чтобы полностью отказаться от него без существенных потерь.
There and back again, или Нужно ли становиться руководителем
Виталий Харисов
Яндекс
Владимир Гриненко
Яндекс
Софтскилловый парный доклад о том, как быть руководителем и разработчиком. Вы узнаете плюсы, минусы, советы, подводные камни и кейсы.
Какие преимущества разработчика, который в прошлом был руководителем? Нужно ли становиться руководителем? Как им стать? Что делать, если все-таки стал? Как жить, если уже давным-давно руководитель?
Напоследок
На этом программа не заканчивается — ещё будут, например, доклады от партнёров.
Но ещё важнее, что участвовать в HolyJS — это не только сидеть и смотреть видео. Понятно, что собравшиеся в Москве вволю пообщаются, но и у онлайн-участников будут не только монологи: дискуссии после каждого доклада в формате видеосозвона, чаты для вопросов спикерам и не только.
А нам остаётся напомнить, что все остальные подробности про конференцию и билеты — на её сайте.