О чём расскажут на HolyJS 2022 Autumn27.10.2022 19:32

Как получить от ESLint максимум пользы? Что можно впихнуть в библиотеку на два килобайта? Как выжать больше производительности, когда очевидные оптимизации уже сделаны? Почему слоны умные и параноидальные? Всё это будет в программе HolyJS (да-да, про слонов тоже). Собрали описания всех докладов в этом хабрапосте и разделили на тематические блоки.

Конференция в этот раз пройдёт в два этапа: сначала два дня будут полностью онлайновыми, а вот в третий день можно будет хоть прийти на офлайн-мероприятие в Москве, хоть подключиться удалённо. Другие подробности (вроде точного расписания) и билеты — на сайте.

Оглавление

Инструменты

Навстречу новому developer experience с Leporello.js: придумываем livecoding-среду разработки для функционального программирования

После появления библиотеки React в мире JavaScript наблюдается рост интереса к функциональному программированию.

Спикер обсудит процесс разработки и отладки функциональных программ и расскажет, какие новые уникальные возможности с точки зрения developer experience открывает функциональное программирование. Покажет новый концепт IDE для функционального программирования и расскажет о его разработке.

Архитектура приложения через Storybook

Спикер расскажет, как спроектировать приложение через Storybook, который по сути является не библиотекой, а концепцией разработки. На примере практических кейсов на React, которые легко применимы и к другим библиотекам и фреймворкам, будут затронуты проблемы библиотек, с которыми сталкивался спикер.

Из доклада вы получите практический гид внедрения Storybook: от момента, когда пора внедрять эту концепцию, до проблемы внедрения и примеров решения, особенностей работы store со Storybook, разбора DI-компонентов.

How to build large react-redux application without code mess

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 нет?

Мы разрешим эти проблемы, улучшив доступность маркетплейса вместе по шагам:

1. Исправим главные баги.

2. Доработаем UI Kit (заголовок, картинку, попап и др.).

3. Сделаем навигацию с клавиатуры.

4. Поправим тачовую версию.

5. Протестируем вручную и автоматически.

Планировщик задач: не замораживаем вкладку при открытии страницы

Вы узнаете, как с помощью планировщика задач в Яндексе делают инициализацию скриптов на странице поиска более дружественной к человеку и не блокирующей UI. А также о том, как вам добиться того же.

Рассмотрим проблему большого TBT (Total Blocking Time) при открытии страниц в браузере, не зависящего от выбора фреймворков и библиотек. Виктор расскажет, как уменьшить TBT, не ухудшая другие показатели.

Батчинг в React

Дмитрий обратил внимание, что на собеседованиях мало кто из разработчиков отвечает на вопрос о батчинге. Некоторые даже впервые слышат такое слово. Спикер расскажет об этом явлении в React. Как это работало в старых версиях и как работает сейчаc.

Графика и анимации

High refresh web

На рынке с каждым годом появляется всё больше устройств с дисплеями, поддерживающими высокие частоты обновления экрана. Их появление привносит в жизнь разработчиков дополнительные проблемы, которые нужно учитывать при разработке сложного софта в вебе (ГИС-системы, графические редакторы, игры). В докладе Александр подробно расскажет, что нужно учитывать, чтобы приложения на таких дисплеях работали без ошибок.

Хаки и ветчина из JS-геймдева, которые подходят для велосипедных оптимизаций приложений в вебе

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

Спикер рассмотрит связь некоторых высокоуровневых концептов и простого кода на JS. Полученные знания могут пригодиться при написании своих велосипедов и при изучении низкоуровневых вставок в коде популярных библиотек. Весь доклад построен на GameDev-опыте, в частности — разработки рендерера PixiJS.

Анимации и их оптимизация в корпоративных проектах

Анимации на сайте позволяют управлять вниманием пользователя, делают просмотр более приятным, а информацию более запоминающейся. Для SPA анимация является еще более важным элементом, позволяющим сгладить рендер страницы и имитировать поведение нативного приложения.

Несмотря на удешевление производительности устройств, анимации все еще остаются достаточно «тяжелой» историей для браузера, и приходится прикладывать немало усилий для плавности анимации и высокого FPS. На примере анимаций с реальных проектов, написанных на Nuxt 2 с библиотеками GSAP 3 и Lottie, разберем следующие нюансы создания вау-эффекта с помощью анимаций:

• дорогие для анимации свойства, вызывающие пересчет лэйаута;

• альтернативы will-change как «подсказка браузеру»;

• request animation frame;

• дебаг производительности.

Case-study

Ситидрайв: поездка продолжается

Удивительная и местами невеселая история о том, как в Ситидрайв удается давать клиентам доступ к десяти тысячам машин круглые сутки. Рецепт одного из крупнейших каршерингов: NodeJS, Redis, RabbitMQ и маленькая щепотка удачи.

А почему бы не вынести все конфиги в отдельный пакет, сократив бойлерплейт до нуля?

Вам когда-нибудь приходилось копировать конфиги ESlint, Babel, Webpack и других инструментов из проекта в проект? В вашем package.json уже столько плагинов, что среди них невозможно найти реальные зависимости проекта? А что, если вы можете избавиться от всех лишних зависимостей вынесением в отдельные тематические пакеты? И все конфиги сократятся до одной строки импорта, а бойлерплейт — до 100 байтов.

Из доклада вы узнаете, как команде спикера в Билайне это удалось. Спикер поделится историей появления этого решения, а заодно расскажет, сколько боли они схватили там, где совсем не ожидали.

Как на самом деле работать над перформансом веб-приложения

Когда мы гуглим «как улучшить скорость веб-приложения», обычно находим один и тот же набор практик — «сжимайте все, что можно сжимать» или «поделите код на чанки».

Но если все это уже сделано, можно ли улучшить еще? Тут нет серебряной пули, потому что надо заняться исследованием перформанса именно вашего приложения. Спикер расскажет о концепциях, подходах и проблемах, которые появлялись в их команде Авто.ру в ходе решения этой задачи.

Разбираем слона (и это не имеет никакого отношения к JS)

Сергей Абдульманов уже знаком многим по докладам, хабрапостам (@milfgard) и другим проявлениям. Кажется, он может прийти на любую IT-площадку и рассказать там про что-то «неайтишное» так, что в итоге люди не будут упрекать в оффтопике. В этот раз будет разбирать слона:

1. Зачем слоны такие умные и параноидальные?

2. Что можно встроить в руку: датчик запаха и шноркель. Как после этого пользоваться рукой. 

3. Другие детали слона: термопанели на голове, рации в ногах, как слон одевается.

4. Слон — царь зверей. Кто кому даёт люлей в буше. Почему это имеет отношение к формуле давления.

5. Деплой слонёнка.

6. Как мы почти убили слонов и сейчас восстанавливаем.

7. Вот почему слон такой умный и параноидальный!

Бэкенд

Event Sourcing: глубокое погружение

На пути построения Event Sourcing-системы вам предстоит столкнуться со множеством трудностей и подводных камней. Придется принимать важные архитектурные решения, и неправильный выбор принесет значительные проблемы или даже похоронит ваш проект. Спикер занимался темой Event Sourcing более четырех лет и прошелся по всем возможным граблям. В этом докладе он поделится своим опытом.

WebTransport

Вы узнаете о технологии WebTransport и ее применении. Сейчас она находится в стадии draft и активно разрабатывается W3C.

Доклад знакомит разработчиков с текущим состоянием технологии, мотивацией ее появления и сравнит с существующими решениями.

В докладе предусмотрена и практическая часть. Будет продемонстрировано взаимодействие с API WebTransport и показано, как происходит развертывание необходимого локального окружения. Так разработчики смогут пощупать технологию заранее и быть готовыми к ее выходу из статуса draft.

Workshop: how to develop, build, and deploy Node.js microservices with NestJS & Pulumi

На воркшопе вы получите представление о ключевых принципах, необходимых для разработки, построения и поддержки набора микросервисов на стеке Node.js. Будет рассмотрена специфика создания обособленных докеризованных сервисов на TypeScript с использованием монорепозитория и Turborepo. Воркшоп состоит из обзорной части и упражнений по созданию облачной среды при помощи фреймворка Pulumi. Подойдет разработчиками, которые хотят научиться техникам с использованием Pulumi и Docker для Node.js. 

Эти спикеры уже выступали с другим воркшопом на летней HolyJS — можно посмотреть в нашем плейлисте в ожидании новых знаний.

Сколько это стоит

Попробуем посчитать, что нам нужно для того, чтобы запустить более-менее приличный сервис на Node.js на VDS (blue-green деплой, балансировка, база данных, логи) и сравним с подходом на AWS-стеке (лямбды, RDS, API-gateway). А может быть даже удастся сравнить и Selectel с Yandex.Cloud.

Языки

Воркшоп. Дивный Elm-овый мир без мутаций и side-эффектов. Искусство чистых касаний

Функциональная парадигма сейчас пронизывает фронтенд, но мало кто знает, что Elm стоял у истоков этого тренда (да и вообще мало кто знает про Elm). Ян расскажет, что такое Elm и как его правильно готовить. 

Главная задача доклада — показать участникам новый способ думать. Что-то такое, с чем они, скорее всего, еще никогда не сталкивались. Вдобавок показать, что на этом вполне себе хорошо пишется фронтенд.

Доклад будет интересен продвинутым разработчикам (уровня middle и выше), которые хотят узнать новое, размять мозги и, вообще, выйти из зоны комфорта мира трех китов (React, Vue, Angular).

State management

Гигантизм Reatom

Что, как и зачем можно впихнуть в библиотеку на два килобайта и как на ее основе можно построить приложение любой сложности?

Артём расскажет, как правильные абстракции могут уменьшать количество и сложность кода в разы. Все примеры будут связаны со стейт-менеджером Reatom, но в докладе будут обобщены до принципов, которые применимы в любом коде.

Эффектор. Бизнес-логика с легкостью

Обзор менеджера состояний «Эффектор» и пакетов экосистемы.

Другое

Генерируем видео на JavaScript

Если ввести в поисковую строку «генерация видео на JavaScript», то гугл вернет 100500 ссылок на видеоплееры. И 99% этих плееров — это просто интерфейс поверх HTMLVideoElement.

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

There and back again, или Нужно ли становиться руководителем

Софтскилловый парный доклад о том, как быть руководителем и разработчиком. Вы узнаете плюсы, минусы, советы, подводные камни и кейсы.

Какие преимущества разработчика, который в прошлом был руководителем? Нужно ли становиться руководителем? Как им стать? Что делать, если все-таки стал? Как жить, если уже давным-давно руководитель?

Напоследок

На этом программа не заканчивается — ещё будут, например, доклады от партнёров.

Но ещё важнее, что участвовать в HolyJS — это не только сидеть и смотреть видео. Понятно, что собравшиеся в Москве вволю пообщаются, но и у онлайн-участников будут не только монологи: дискуссии после каждого доклада в формате видеосозвона, чаты для вопросов спикерам и не только.

А нам остаётся напомнить, что все остальные подробности про конференцию и билеты — на её сайте. 

© Habrahabr.ru