Что JS-разработчики смогут узнать на HolyJS 2023 Spring

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

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

Оглавление

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

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

• Backend

• Стандарты

• Языки

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

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

• UI

• Soft skills

• Другое

• Заключение

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

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

Алексей Золотых

МойОфис

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

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

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

Александр Канунников

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

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

Константин Лебедев

VK

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

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

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

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

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

Влад Минаев

Haulmont

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

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

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

Сеня Пугач

Студия Артемия Лебедева

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

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

Роман Белов

IDDQD

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

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

Максим Альжанов

VK

На ежегодном соревновании 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-архитектуру вокруг игры

Дмитрий Третьяков

IDDQD

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

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

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

Степан Михайлюк

lumen5

Вероятно, вы уже пробовали 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

Владимир Ситников

Netcracker

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

Рассмотрим:

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

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

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

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

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

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

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

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

Дмитрий Крыстек

Mapbox

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

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

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

Иван Ратников

МТС

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

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

Стандарты

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

Никита Дубко

Яндекс

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

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

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

Мария Кондаурова

BIOCAD

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

Языки

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

Вячеслав Шебанов

DRPC.org

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

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

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

Виктор Вершанский

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

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

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

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

Дмитрий Грош

WIS Software

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

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

Тарас Иванов

ВКонтакте

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

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

Андрей Перепелюков

routeam

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

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

Илья Сидорчик

Яндекс Маркет

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

Архитектура

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

Иван Малюгин

билайн

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

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

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

Сергей Самохов

Банк Точка

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

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

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

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

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

Евгений Лабутин

МТС

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

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

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

Николай Рыжиков

Health Samurai

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

UI

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

Михаил Непомнящий

EPAM Systems Spain

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

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

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

Серёжа Попов

Skillbox

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

Soft skills

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

Азат Мардан

Google/YouTube

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

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

Алексей Пименов

Neogenda

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

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

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

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

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

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

Андрей Смирнов

X5 Group

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

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

Прочее

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

Сергей Симонов

МойОфис

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

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

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

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

Илья Бирман

Дизайн-бюро Артёма Горбунова

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

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

Никита Воробьёв

СберТех

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

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

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

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

Михаил Трифонов

Cloud

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

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

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

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

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

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

Дмитрий Бежецков

Igalia

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 разделил мой мир на «до» и «после»

Глеб Михеев

Skillbox, FrontendConf

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

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

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

Заключение

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

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