Впервые за годы у конференции HolyJS будут два офлайн-дня, так что 21 и 22 мая JavaScript-разработчики смогут встретиться в Москве и вдоволь наобщаться. Но и любители онлайна не забыты: к московской части можно будет подключиться удалённо, а ещё будут два полностью онлайновых дня.

Докладов за все четыре дня будет немало — и теперь, когда программа сформирована, мы делимся с Хабром их описаниями.

---

Оглавление

• Инструменты разработки

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

• Backend

• Стандарты

• Языки

• Производительность

• Архитектура

• UI

• Soft skills

• Другое

• Заключение

Инструменты разработки

Борьба с ветряными мельницами, или Как жить с техническим долгом

Мы живем в реальном мире, где помимо проектов, написанных с нуля, встречается и всякое разное. Кто-то называет это «кодом с душком», кто-то вежливо зовет легаси. Но суть одна и та же: в проекте много технического долга.

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

---

Почему Playwright лучше Jest, а Vitest тормозит: измеряем coverage как профи

В докладе мы узнаем наилучший способ измерения Code Coverage с помощью Playwright, разберемся с возникающими проблемами, узнаем способы ускорения Playwright и Jest-тестов, а также научимся объединять результаты нескольких тестовых прогонов в один отчет.

---

Автоматизация процессов разработки и поддержки: от ботов до Code Review

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

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

Во второй части — история создания внутреннего сервиса для работы с Code Review и Review Roulette. Вы узнаете, откуда берутся такие задачи и почему важно предъявлять к внутренней разработке те же требования, что и к внешней (небольшой спойлер: в конце вы увидите, как в решении этой задачи помог React).

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

---

Битва титанов: LSP vs PSI (VS Code vs IntelliJ)

Заглянем внутрь IDE и разберем механизмы, благодаря которым мы получаем помощь в написании кода (в контексте JavaScript и TypeScript). Разберем возможности двух главных платформ по созданию расширений — не только в отношении работы с кодом, но и в отношении взаимодействия с пользователем. Попытаемся понять, насколько сложно написать плагин для JS-фреймворка на каждой из платформ. Доклад будет интересен тем, кто размышляет о выпуске плагина для своей библиотеки/фреймворка, а также тем, кто хотел понять, как оно работает и почему иногда все так тормозит.

---

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

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

Рассказ о Кроно: о внутреннем движке студии Лебедева для 3D-сайтов и о том, как он был создан в процессе работы над сайтом группы «Аквариум».

---

Cocos Creator: путешествие в TS-геймдев для начинающих

Поговорим о том, что такое Cocos Creator, о его возможностях, основных плюсах и минусах относительно движков Unity и Unreal. Кратко разберем, как с ним работать, а также создадим свой первый проект — игру с механикой Flappy Bird.

---

Как превратить соревнование для программистов в The International?

На ежегодном соревновании ICPC три студента сидят за одним компьютером и пишут код. Соревнование масштабное, участвует более 100 университетов со всего мира. Задача ICPC — сделать его таким же захватывающим зрелищем, как The International.

Вы спросите: «А при чем здесь HolyJS и веб-технологии?» В ICPC Live используют много самописного софта и Ad Hoc-решений, чтобы сделать максимально интересный экспириенс. И этот доклад — о видеотехнологиях, React, UX, WebRTC и путешествиях.

---

Щепотка SVG, нотка 3D* и карты

Системы безопасности PSIM позволяют предотвращать происшествия на крупных транспортных и промышленных объектах. Команда спикера занимается разработкой подобной системы, где один из важнейших модулей — карта с отображением ситуации на объекте в реальном времени. Этот доклад о полученном опыте создания такого модуля.

Бегло затронем создание локального тайлового сервера и конвертации тайлов. Рассмотрим решение для просмотра больших SVG-файлов (они необходимы для отображения информации на планах этажей каждого здания). Немного поговорим про glTF, посмотрим на подход к созданию таких моделей. Узнаем про опыт рендеринга и взаимодействия c моделями на карте с использованием ThreeJS.

---

Неочевидные возможности SVG в современном фронтенде

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

Доклад будет полезен всем, кому интересно узнать о возможностях применения SVG в построении интерактивных интерфейсов. Будут затронуты best practices и вопросы перформанса. Уровень Junior+ и выше.

---

Как сделать из Cocos Creator крепкий орешек: строим TS-архитектуру вокруг игры

Cocos Creator — это игровой движок, китайский аналог и конкурент Unity3D, использующий в качестве языка программирования TypeScript. К сожалению, документация к Cocos Creator, доступная в открытых источниках, крайне скудная, а сам движок не предоставляет и не рекомендует никаких архитектурных решений.

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

---

Разбираемся в устройстве плееров анимаций на примере lottie-web

Вероятно, вы уже пробовали Lottie или хотя бы слышали о нем. Использовать просто: экспортируем анимацию из Adobe After Effects в JSON, подключаем lottie-web, скармливаем ему полученный JSON-файл — и анимация появится на экране. Но как же работает эта магия?

На воркшопе разберемся в основах воспроизведения анимации: слои, трансформации, кейфреймы, кривые анимации. Разберем структуру lottie.json. А также посмотрим, что именно делает lottie-web и какие паттерны используют разработчики этой библиотеки.

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

Будет много картинок!

---

Работа анимаций в React Native под капотом

Евгений рассмотрит, как анимации в RN работают из коробки, почему появилась библиотека Reanimated, зачем нужен второй JS-поток и при чем тут JSI. Доклад будет полезен RN-разработчикам, веб-разработчикам, которые хотят получить представление о работе RN, а также нативщикам, которым интересно посмотреть на перфоманс чего-то, написанного на кроссплатформе.

---

Backend

B-tree индексы в базах данных на примере IndexedDB и PostgreSQL

Доклад о том, как работают обычные™ индексы в базах данных. Будет крайне полезен как тем, кто начинает работать с базами данных, так и тем, кто работал, но подзабыл. Используете IndexedDB? А порядок колонок в индексе правильный указываете? Или, быть может, у вас бэкенд на PostgreSQL и там без индексов никуда?

Рассмотрим:

• Как индекс ускоряет поиск.

• Нужно ли индексировать условия where.

• Нужно ли индексировать условия в order by.

• Нужно ли индексировать foreign keys.

• Что делать, если критериев поиска несколько.

• В каком порядке указывать колонки в индексе.

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

---

Как организовать ETL с Node.js в serverless-архитектуре

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

Технологии: Node.js (stream).
Форматы данных: ndjson, Parquet.
Инструменты для построения: Airflow, Step Function.

---

Быстрые прототипы на Moleculer

Спикер расскажет о модельной задаче, которую ему однажды понадобилось запрототипировать за два дня. Вы узнаете о требованиях к инструменту реализации прототипа, которые следуют из задачи, и увидите инструменты, хоть как-то подходящие к задаче в мире JS.

Почему под такую задачу подошел только Moleculer? Спикер приведет результаты бенчмарков и расскажет об архитектуре Moleculer.

---

Стандарты

Одно PWA, чтоб править всеми

Термин PWA появился еще в 2015 году, но из-за браузерных разногласий долгое время был лишь красивой идеей. В 2023 году появилась надежда, что на iOS появятся альтернативные браузерные движки, а это может привести к тому, что для создания почти полноценных приложений будет достаточно знаний фронтенда.

Никита покажет, что умеют современные PWA: как изменился их внешний вид, насколько они интегрированы в операционные системы и в каких случаях они решают пользовательские задачи не хуже нативных приложений.

---

Что нового в JS и вебе

В докладе Мария расскажет о состоянии стандарта ECMAScript на сегодняшний момент. Проведет мини-экскурс в стандарты и proposals. Расскажет про TC39, Interop — кто все эти люди. О тех proposals, которые уже вот-вот (и позже) войдут в стандарт, и о том, почему у нас до сих пор нет нормальной работы со временем (Temporal). Почему JavaScript до сих пор не стал еще более функциональным при помощи pipe-оператора, и какими скоро станут декораторы. А также пройдется по новым Web API, которые появились или скоро появятся.

---

Языки

Чему нас могут научить APL-подобные языки

Речь пойдет о так называемых Array Programming Languages — группе языков, которая стоит отдельно от мейнстрима. Скорее всего, если вы увидите код на таком языке, то подумаете, что это какая-то шутка. Тем не менее и у них есть свое место в современном мире разработки. Попробуем вместе разобраться в их внутренней логике, примерах использования и в том, чему можно научиться, программируя на таких языках.

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

---

Типы в прототипах

Будут раскрыты и поставлены вопросы определения типов в классической модели прототипного наследования.

Поговорим про другой JavaScript, странный TypeScript и прочие вещи.

---

Производительность

React concurrency: а так ли это хорошо?

Самым важным дополнением React 18 было Concurrent Rendering и связанные с ним хуки вроде useTransition и useDeferredValue. При тех плюсах, которые нам принесли эти нововведения, хотелось бы разобраться, когда мы теряем преимущества и блокирующая отрисовка все-таки оказывается полезнее. Рассмотрим прошлые версии, сравним с последней, покопаем исходники, разберемся с историей React concurrency.

---

Как мы в 4 раза ускорили мобильную версию ВКонтакте

Когда-то мобильная версия ВКонтакте была WAP-сайтом для кнопочных телефонов, а вся команда разработки состояла из двух человек. Теперь это полноценное SPA-приложение, которое не уступает по функциональности нативным клиентам, а его разработкой занимается множество кросс-функциональных команд.
При таком масштабировании неизбежны архитектурные проблемы, результат которых — просадки производительности. Последние два года команда спикера улучшает перформанс мобильной версии. Хоть они и набили много шишек, команде удалось радикально сократить время отрисовки страниц, и спикер поделится своим опытом.

---

1000 пользователей в одной конференции

WebRTC — это технология для обмена видео- и аудиосообщениями в веб-браузере, которая обеспечивает шифрование данных, адаптивную потоковую передачу и конфиденциальность.
Однако создание приложения с использованием WebRTC может столкнуться с проблемами, такими как совместимость, управление доступом пользователей и NAT-трассировка. Кроме того, некоторые устройства могут иметь проблемы с декодированием видео- и аудиосообщений. Решение проблем может быть найдено с помощью медиасервера MCU или подходов, используемых в индустрии игр.

---

BFCache: как моментально загрузить предыдущую страницу

Из статистики браузера Chrome: каждый десятый переход на компьютере и каждый пятый на мобильном устройстве происходит на предыдущую или следующую страницу. При переходе необязательно загружать страницу заново, он может быть мгновенным. Для этого в самом браузере есть нативное решение — BFCache, специальный кэш для перехода назад и вперед.
Спикер расскажет, как включить BFCache на своем сайте на примере Яндекс Маркета, поделится проблемами и особенностями, затронет тему тестов и метрик.

---

Архитектура

«Коробочный» discovery для микрофронтендов на базе ModuleFederation

Микрофронтенды — сложная схема взаимодействия отдельных модулей. Каждый новый модуль нужно тщательно конфигурировать, а локальный сервер дорабатывать для возможности подключать новый микрофронтенд... Стоп, зачем так усложнять? На самом деле для добавления нового микрофронта достаточно поставить пакет, а все остальное сделает за вас дискавери.

В докладе будет показана реализация умного дискавери на трех различных уровнях в реализации микрофронтендов, позволяющих схлопнуть конфигурацию микрофронтов на базе Webpack Module Federation.

---

Доменное моделирование и архитектура приложений на ReScript

После крайне тухлого прошлого года в этом году ReScript «попер»: в него добавили async/await, отрефакторили JSX и работу с React, выпустили (в бету) новую стандартную библиотеку и планируют еще много полезного.

Но почему это должно кого-то волновать, когда есть золотой стандарт — TypeScript?

Об этом мы и поговорим. Узнаем, почему система типов ReScript хороша для доменного моделирования. Познакомимся с примерами, когда его типы безопаснее, чем типы TypeScript. Подумаем, как может быть устроена архитектура приложения.

Теорката не обещаю, а вот на практические задачи вроде парсинга данных и обработки ошибок мы как раз посмотрим.

---

Зачем фронтенду чистая архитектура, и как она помогает строить микросервисы и микрофронтенды

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

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

---

Тайпли скрипт

Поговорим про эволюцию JS, её альтернативные ветки, данные и типы, функции или объекты.

---

UI

Zustand: выскочка или серьезная альтернатива Redux?

Мастер-класс по созданию React-приложения с использованием стейт-менеджера Zustand и TypeScript. Разбор возможностей библиотеки, синхронные и асинхронные операции, оптимизация рендера компонентов и использование миддлвейров.

Целевая аудитория: разработчики React-приложений, не знакомые с Zustand.

---

Что такое и зачем нужны Container Queries?

Container Queries уже весной будут показывать полное покрытие по браузерам, а это значит, что больше не будет причин не использовать их в продакшене. Но какие конкретные задачи можно будет проще и быстрее выполнять с помощью технологии, и как именно ее применение облегчит решение типовых задач? Именно об этом и поговорим.

---

Soft skills

Апгрейд карьеры: руководство пользователя

Этот нетехнический мастер-класс поможет узнать, как проапгрейдить карьеру самым быстрым путем (смена команд и проектов каждые 1-2 года). Вы узнаете, какие преимущества и недостатки бывают у больших компаний вроде Google, Apple, Microsoft, Tesla, Яндекс, а также, как туда попасть, не убившись в процессе. На базе собственного опыта и опыта коллег из США Азат раскроет грязные и не очень секреты прохождения собеседований и иммиграции.

---

Некогда объяснять, ты тимлид!

Так уж получилось, что вы стали тимлидом. Что теперь делать? Разберем типовые паттерны поведения и проблемы новоявленных тимлидов:

• Ты теперь менеджер: что тебе следует делать и знать.

• Но ты еще продолжаешь быть инженером — как совмещать инженерную и управленческую работу?

• Что тебе стоит знать о своей команде из того, о чем ты до этого не догадывался?

• Парочка вопросов, на которые нужно уметь грамотно отвечать перед руководством и заказчиком.

---

Фронтендеры — они повсюду

Вы наверняка слышали выражение «JavaScript is everywhere», и с каждым годом оно становится всё актуальнее. Казалось бы, обычный фронтенд уже крепко обосновался и в бэкенде, и в мобилках, и на десктопе. Но что же делать фронтенд-разработчику со всем этим многообразием? Как выбрать направление для развития?

Когда спикер руководил ресурным пулом JavaScript-разработчиков, ему довелось увидеть множество различных карьерных переходов. В этом докладе Андрей хочет поделиться составленным роудмапом возможного развития фронтенд-разработчика. Поговорим, как о вертикальных, так и горизонтальных переходах, а также разберем неожиданные карьерные пути на основе историй из жизни.

---

Прочее

Как мы веб-редактор документов строили

Повесть о том, как в компании МойОфис строили веб-редактор документов.

За этим стоит не только команда самого веб-редактора: существует некое «магическое» ядро, на которое завязан весь главный функционал редакторов для разных платформ.

В докладе пойдет рассказ про глобальную архитектуру и ключевые решения, про «магию» ядра и как с ним работают в команде веб-редактора, при чем тут вообще Wasm и Emscripten. Будет затронута тема рендеринга на canvas и основные вызовы, с которыми команда сталкивается при разработке веб-редактора: работа со шрифтами, ссылками, фокусом и выделением, перформанс. В заключение немного поговорим про существующие проблемы и их потенциальные решения.

---

Что на самом деле делает движок блога «Эгея»

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

---

Нечеткий поиск в браузере на полмиллиона строк: построение индекса на CDN

Доклад Никиты — о задаче поиска с опечатками в браузере и о том, куда это привело.

Спикер сконцентрируется на алгоритмах обработки естественного языка (NLP), а также раскроет идеи индексации данных. Вы узнаете, как протокол HTTP/2 изменил правила игры в этой задаче и позволил хранить индекс на CDN. Будет много примеров кода и демо.

Доклад адресован тем, кто интересуется практическим применением алгоритмов поиска в браузере.

---

Друг или враг? Искусственный интеллект во фронтенд-разработке

За последний год ИИ очень сильно развился. Таким технологиям, как ChatGPT, GitHub Copilot, Midjourney и RuGPT-3, пророчат заменить разработчиков. В докладе будут затронуты вопросы:

• Правда ли заменят?

• Могут ли заменить уже сейчас?

• Можно ли объединиться с ИИ и приобрести суперсилу?

• Решить ли реальную задачу с помощью ИИ?

---

Влетаем с двух ног в JS на Wasm

JavaScript часто используется для написания пользовательских скриптов. Например, можно написать свой плагин для Figma или функцию для подсчета скидки для магазина в Shopify. Тут возникает сразу несколько проблем: надо, чтобы код исполнялся в песочнице и чтобы он исполнялся быстро и эффективно, потому что пользователей может быть много. Вот как раз про второй пункт и пойдет рассказ.

Мы будем компилировать, точнее, JIT-компилировать JavaScript в Wasm. Считается, что написать JIT-компилятор на wasm невозможно, но эти скучные убеждения ошибочны, еще как можно. Расскажем, как можно упороться, чтобы скомпилировать JS в Wasm, какую производительность это решение показывает и как оно в сравнении с существующими подходами вроде QuickJS.

---

Telegram Web Apps: новый ингредиент для гибких ботов Telegram

Спикер рассмотрит сравнительно новую технологию в мессенджере Telegram под названием Telegram Web Apps, которая привносит новый уровень гибкости ботам Telegram.

Примечательно, что в отличие от классической реализации ботов, которая всегда заключается в написании бэкенд-сервера, Telegram Web Apps связан напрямую с фронтенд-разработкой. И это будет крайне полезно разработчикам, концентрирующимся на клиентской части.

Telegram Web Apps — это аналог известной и зрелой технологии от ВКонтакте VK Mini Apps. Она позволяет разработчикам при необходимости уйти от классического общения с ботом через чат в сторону реализации визуального интерфейса, предоставляющего максимально возможную гибкость. Общение происходит с сервером разработчика, а не с сервером Telegram, что имеет свои преимущества и недостатки.

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

Спикер — бывший разработчик из ВКонтакте, тесно взаимодействовавший с аналогом Telegram Web Apps (VK Mini Apps). Он занимается развитием сообщества, а также сопутствующей документации и библиотек вокруг этой технологии. В докладе будут также озвучены планы по развитию технологии, предоставленные разработчиками, приближенными к платформе со стороны Telegram.

---

Как RxJS разделил мой мир на «до» и «после»

RxJS появился в жизни Глеба в 2016 году вместе с Angular 2 и разделил жизнь на «до» и «после». Те вещи, которые, как казалось, было невозможно отменеджерить, стало очень легко и непринужденно писать.

 Спикеру потребовалось 9 месяцев, чтобы научиться жонглировать реактивщиной, а до этого она жонглировала им.
Глеб расскажет, почему влюбился в Rx, покажет его невероятную гибкость и удобство. По RxJS есть много докладов, но еще ни один не показал его силу. 

Иногда возникает ощущение, что когда ты действительно понимаешь RxJS, то моментально теряешь дар объяснить его. Попробуем!

---

Заключение

Конечно, не докладами едиными. На конференции будут и другие активности, а ещё многим участникам важно общение. Оно будет даже в онлайне (например, после каждого доклада участники могут вдоволь порасспрашивать спикера в формате видеосозвона), а уж про офлайн и говорить не приходится.

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