What’s Next in JS? От Nuxt до Web3: всё, о чём расскажут на HolyJS 2024 Autumn

Когда Алиса в Стране Чудес сказала «тут нужно бежать со всех ног, чтобы только оставаться на месте», она словно описывала JavaScript-разработку. Только начнёт казаться, что уже привык, как жизнь подбрасывает новые фреймворки, подходы, области применения.

Пора ли уже осваивать фреймворк Astro? Каково на практике с Nuxt 3? Что надо понимать, если думал про блокчейны «мода на них скоро пройдёт» и не обращал внимания, а теперь тебя зовут работать в web3-проект? А WebAssembly тоже уже нельзя упускать из внимания, да?

Можно пытаться разбираться с этим всем самостоятельно, а можно сходить на конференцию. Там говорят и обо всех этих новых темах, и о менее «модных», но не менее важных: как правильно анализировать производительность проекта? А его доступность? Как привычные фреймворки устроены «изнутри»?

Уже скоро мы проведём HolyJS 2024 Autumn, где будут доклады обо всём этом. Программа уже составлена, и представляем Хабру короткие описания всех докладов.

Содержание

• Фреймворки

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

• Кейсы

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

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

• Инструменты

• Бэкенд

• API

• Web3

• UI

• Другое

---

Фреймворки

Impress от Metarhia. Зачем нужны типы, если есть контракты, и при чем тут local storage?

В 2022 году в СберМаркетинге встала задача разработки таск-трекера, основным отличием которого хотелось сделать интерактивность. Для этого необходимо было подобрать достаточно удобный и практичный инструмент со стороны бэкенда. Выбор пал на Impress Application Server от технологического стека Metarhia.

Евгений рассмотрит основные возможности, которые предоставляет Impress Application Server. Расскажет об успешном опыте использования Impress в качестве сервера приложения, а также о сложностях, с которыми столкнулись.

В заключение расскажет о случаях, когда стоит использовать Impress в качестве сервера приложений.

---

Astro-land: новая жизнь ваших лендингов, или «Таинственный остров»

Рассказ об опыте переноса лендингов Алгоритмики на Astro.

Требовалось: обеспечить быструю загрузку сайта, SEO, перенести из SPA существующую верстку и React-компоненты с минимальными доработками. В ходе переноса столкнулись с рядом трудностей, о которых тоже расскажет Сергей. Он подробно остановится на архитектуре Astro и ее особенностях в ряду других «HTML-first / no-js» фреймворков. Постарается ответить на вопрос, стоит ли рисковать, выходя за рамки мейнстримных решений, и не рановато ли использовать Astro для серьезного продакшена (спойлер: «да, стоит», «нет, в самый раз»).

---

На чем сегодня писать для WebAssembly?

Цель доклада — определить, на каком языке лучше писать для WebAssembly, сравнивая скорость исполнения и удобство написания кода.

Сегодня существует множество языков, поддерживающих компиляцию в .wasm. Рассмотрим основные: C, Rust, Go и AssemblyScript. Для измерения производительности напишем несколько примеров, таких как размытие изображения по Гауссу, пороговое изображение (Threshold), быстрая сортировка (quicksort) и другие кейсы.

---

Жизнь до и после React Compiler

В докладе разберемся, что такое компиляторы и React Compiler в частности. Посмотрим, какие проблемы решает и на какие текущие механизмы React он повлияет. Проверим, можно ли его использовать с чем-то кроме React 19. Кстати, а его можно уже использовать? Ведь всегда есть вероятность, что с выходом чего-то нового может сломаться что-то старое. Поэтому копнем в практики, позволяющие аккуратно протестировать работоспособность React Compiler на проектах.

В итоге попробуем понять, наступит ли у React новая эра.

---

Streaming в Next.js: механизм работы и преимущества для пользователя

Next — go-to solution для агентств, занимающихся проеĸтной разработĸой. Недавно у него появилось очень сильное ĸонĸурентное преимущество среди других фреймворĸов — streaming. Федор поделится опытом команды KODIX в использовании streaming SSR. Что было непонятно в доĸументации, ĸаĸие задачи решали и ĸаĸой результат получили. Разберем, ĸаĸ работает ĸэширование в Next.js, ĸаĸ готовить streaming и сочетать с ĸэшами. Обсудим, ĸаĸ это работает и за счет чего улучшается UX пользователей.

---

Шестеренки реактивности Vue

Мы любим Vue за простоту и скорость разработки на нем. Но часто говорят, что в нем много магии и подкапотной работы. Однако ощущение магии развеивается, если разобраться, как работают все шестеренки изнутри.

В докладе мы погрузимся в исходники и примеры, чтобы разобраться, как работают отдельные части в системе реактивности Vue изнутри. И, конечно, научимся использовать реактивность Vue с максимальной эффективностью.

---

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

Как отследить память в V8?

Поговорим об использовании Chrome DevTools в Node.js. Александр сделает акцент на том, как можно построить метрики для отслеживания перформанса. Посмотрим, какие нововведения для этого появились в Node.js, обсудим библиотеки.

node:v8, node:inspector, node:perf-hooks. Как с помощью этих библиотек построить метрики для перформанса и для чего еще их можно использовать. Как их применять для написания тестов и предвещать утечки памяти. Поговорим о GC и о данных, которые можем получать теперь. Обсудим, как это пригодится.

---

Web perf: найти и оптимизировать

Поговорим про основные инструменты для анализа производительности. Рассмотрим техники оптимизации, позволяющие улучшить web performance, которые будут полезны как для небольших, так и для крупных проектов. На примере произведем оптимизацию медленного сайта до blazing-fast современного приложения.

---

Продуктовая разработка на Node.js: что можно, а что нельзя

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

---

Кейсы

Эволюция premier.one. От тонны легаси к Nuxt 3

Спикеры — одни из первых, кто перевел проект с высоким трафиком в проде с Vue 2 на Nuxt 3. Это был не просто рефакторинг — это была полная переработка архитектуры и подходов к организации процесса разработки.

Они расскажут, как справились:

• с переходом на Nuxt 3 без возможности мягких обновлений и болезненной разработки на фреймворке, обновляющемся раз в две недели;

• с нагрузкой SSR на большой трафик при ML-контенте всего сайта;

• с проблемами большой связки технологий: TS, Pinia, Mobx, Inversify, Vitest, Storybook и т. д.;

• с преодолением других «подводных камней».

---

Мониторинг доступности (A11Y) ВКонтакте

Рассмотрим большую и сложную задачу не только с точки зрения техники, но и бизнеса на примере системы мониторинга доступности (A11Y) во ВКонтакте.

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

---

Архитектура

Технологическая стратегия как спасательный круг в море разных техстеков

Георгий расскажет о применении техполитики в компании «Сибур Цифровой». Как она помогает выравнивать работу на разных проектах, переиспользовать решения, выращивать внутренние инструменты и сокращать техдолг.

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

---

История реактивности

Десять лет назад подъем React сделал observables антипаттерном, а сейчас signals внедряют в стандарт JavaScript. Как так получилось? Почему мы возвращаемся к устаревшим технологиям? Поменялось ли что-то за это время? Постараемся разобраться во всей истории и спрогнозировать ближайшие несколько лет.

---

Пользовательская мясорубка: как строить коллаборативные сервисы

Погрузимся в «кухню» разработки коллаборативных онлайн-сервисов, где множество пользователей одновременно взаимодействуют с данными в реальном времени. Обсудим, как разрешать конфликты, возникающие при совместном редактировании, используя технологии CRDT и Yjs.

---

3 главных недостатка FSD после 3 лет использования

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

Подводные камни использования FSD и как их обойти.

---

Разбираемся в Feature-Sliced Design

Александр расскажет, что собой представляет архитектурная методология Feature-Sliced Design. В компании используют методологию на многих проектах и за последние пару лет решали самые разные проблемы, которыми сегодня хочется поделиться.

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

---

Функциональное программирование в JavaScript

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

---

Data-oriented Design

Самая большая проблема в программировании — проблема сложности. DOD (data-oriented design) позволяет решать ее системно и довольно просто. При этом подход сочетается с ООП и ФП.

Алексей расскажет о преимуществах и ограничениях DOD и покажет, как внедрить у себя.

---

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

Метавселенная для МТС на Babylon.js

Василий опишет процесс создания 3D-метавселенной. Побегаем по локациям с видом от третьего лица. Рассмотрим коллизии с препятствиями, анимации персонажей, эффекты северного сияния и пролета метеоритов. Соединение пользователей друг с другом при помощи colyseus.js. Спикер расскажет об оптимизации моделей, видео- и аудиоассетов.

---

XR on the Web: Exploring the Possibilities with JavaScript

В докладе подробно рассматриваются интересные возможности дополненной реальности (AR) в вебе с обсуждением технологий и фреймфорков, лежащих в ее основе, а также best practices дополненной реальности с использованием JavaScript.

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

---

Вы не готовы к WebGPU

Доклад со здравым взглядом на текущее состояние и перспективы WebGPU. Чем он полезен? Что компании, по типу Unity, делающие на WebGPU большую ставку, не хотят рассказывать?

---

Мемы, шейдеры, оверинжиниринг и PixiJS: как полноценная RTS-игра в вебе грузится за 3 секунды и выдает 120 FPS

История 4-летней разработки браузерной RTS-игры Age of Memes, вдохновленной Age of Empires.

В докладе будет:

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

• Обзор алгоритмов сжатия и ресайза текстур. Оптимизация прогрессивной загрузки, чтобы для First Contentful Paint было нужно всего 6–8 мегабайт.

• Рассказ, как строили рендеринг на PixiJS и как индексы, оптимизации и свои шейдеры помогли выжать 120 FPS на картах с тысячами юнитов.

---

3D-графика с аддонами Node.js

Во время доклада рассмотрят возможность запуска CUDA/OpenCL и WebGL JS-кода в Node.js без браузера с помощью компилируемых аддонов. Представленное решение будет совместимо с three.js и другими популярными WebGL-библиотеками. Рассмотрим, «зачем это нужно», и обсудим производительность Node.js в реалтайм рендеринге сложной графики. Будут и другие примеры интеграции мультимедийных аддонов c Node.js. Луис перечислит факторы, влияющие на выбор между этой технологией и браузерными решениями, и продемонстрирует реальные примеры использования в коммерческих продуктах.

---

Fallout 2 и WebAssembly

Василий захотел играть в fallout2-ce (Fallout 2 Community Edition) из браузера и получил интересный удачный и неудачный опыт.

Он расскажет, как именно работает WebAssembly, что есть из коробки в Emscripten, что такое стандартная библиотека, как устроен Asyncify и как можно загружать файлы игры по запросу. Покажет небольшие WebAssembly-специфичные изменения в C-коде игры и объяснит, почему их пришлось добавить.

Презентация конкретного решения конкретной проблемы с пояснениями, как оно работает изнутри.

---

Инструменты

Интернационализация — что ты такое?

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

В рамках доклада вы узнаете:

• Что на самом деле входит в интернационализацию.

• Чем интернационализация отличается от локализации и какие еще термины есть в контексте международных запусков.

• Как сделать так, чтобы команда думала в первую очередь про продукт, а не про особенности конкретной страны.

• Какие best practice Яндекс использует в международной разработке.

---

Как сделать автотесты полезными. Эволюция автотестов в Яндекс ID

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

---

Сколько памяти ест ваша вкладка?

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

Поговорим про утечки памяти, про инструменты для работы с памятью в JavaScript. И увидим, наконец, сколько весит ваш useMemo.

---

Бэкенд

LaranaJS: настоящий SSR

Разработчики верят, что занимаются серверным рендерингом, но они ошибаются — 99% из них никогда не видели настоящий SSR.

Евгений расскажет о фреймворке LaranaJS, который не пытается починить фронтенд, а переизобретает его.

---

Как написать и задеплоить бэкенд за полчаса, если ты обычный фронтендер?

Доклад для тех, кто не знаком с бэкендом, но нуждается в нем.

Сначала Антон расскажет о вариантах создания бэка на JS и покажет, что действительно имеет смысл использовать serverless-подход. Далее проведет интерактив на самописном сайте с serverless-бэком — на примере рассмотрим, что и как устроено. Антон покажет, что бэк действительно легко задеплоить. В заключение поделится опытом использования serverless-бэкенда в проде — что было хорошо и плохо — и в каких проектах имеет смысл использовать этот подход.

---

NestJS: типизация и валидация запросов

Иван расскажет о проблемах и нюансах типизации и валидации запросов при работе с фреймворком NestJS. Обсудим идеи, касающиеся валидации запросов для любого вида транспорта, и особое внимание уделим REST- и GraphQL-запросам.

---

Ускорение приложений на Node: когда стандартного профайлера недостаточно

В Linux есть инструмент для профилирования под названием perf. Виктор расскажет, как с его помощью профилировать приложения на Node.js, чтобы увидеть больше информации, чем дает встроенный в Node.js профайлер.

---

Управление нагрузкой в Node.js

В процессе доклада на примере приложения и его развития вы узнаете, как управлять нагрузкой на приложение и обезопасить его от возможных инцидентов. Зачем ему rate limiter, request queue и traffic burst protection. Какие есть подводные камни при их использовании.

---

API

От римских императоров до Temporal API: покоряем даты и время в JS

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

Поговорим о том, как библиотеки вроде date-fns или Luxon пытаются преодолеть эти трудности и насколько это у них получается. Обсудим, станет ли Temporal API швейцарским ножом для решения всех проблем. Наконец, накидаем небольшой чек-лист, который поможет вам уменьшить количество багов при работе со временем и обеспечить наилучший UX для ваших пользователей.

---

Предсказываем Math.random()

Всем нам хорошо известна функция Math.random(). Вам подробно расскажут про Math.random() в Node.js.

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

Покажут методы, которые позволяют предугадывать значения, сгенерированные с помощью Math.random(). Каждый из этих методов мы обязательно разберем и рассмотрим на примере реального кода.

---

Захват медиа в WebRTC-приложениях, или Как, наконец-то, включить камеру на созвоне

В докладе мы погрузимся в то, как запрашивать медиапотоки с помощью getUserMedia, как работать с ограничениями (constraints) и менять их в процессе. Посмотрим, как получать список устройств и отлавливать изменения в нем, и как корректно запрашивать разрешения на доступ к камере и микрофону.

---

Пластиковые лопатки в многопоточной песочнице

Поговорим про реализацию многопоточности в JS. Затронем такие вещи, как Atomics, Transferable Objects, рассмотрим паттерны Semaphore и Mutex. Построим свои космолеты и велосипеды.

---

HTMLVideoElement с нуля, c быстрой перемоткой

Ранее на HolyJS Степан выступал с докладами про рендеринг видео браузерными технологиями: «Рендеринг видео в Node.js», «Генерируем видео на JavaScript». Рассказывал про то, как эмулировать браузерные технологии, какие еще есть челленджи. Доклады были довольно широкими, обзорными. В этом докладе он сфокусируется на одной задаче — имплементации HTMLVideoElement с поддержкой быстрой перемотки. Для систем с frame-by-frame рендерингом — без решения этой задачи никуда. Объяснит, почему ее нужно решать, как решали раньше и как нужно решать сегодня.

---

WebTransport. Когда и как можно использовать?

Поддержка WebTransport API среди браузеров постепенно растет. Разработчики все смелее используют его в реальных проектах. Когда и как стоит применять WebTransport? Чем он отличается от WebRTC и WebSocket?

Ответим на эти вопросы, рассматривая разработку разных проектов: напишем стриминговый сервис и онлайн-игру с использованием WebTransport и других новых стандартов.

---

Web3

Воркшоп: Как разработать онлайн-игру для Telegram и интегрироваться в экосистему TON

Во время воркшопа обсудим текущее состояние Telegram с точки зрения приложений и блокчейна (да, Telegram интегрирован с блокчейном). Как создаются приложения, где и как публикуются, как на этом заработать. Все это — на примере онлайн-игры в реальном времени, которая выросла из тестового проекта предыдущего доклада.

---

IPFS в корпоративной среде

Артём рассмотрит практические шаги по настройке безопасного доступа к ресурсам IPFS для корпоративного использования. Также приведет описание методов управления правами пользователей и отслеживания их действий. Особый акцент — на кибербезопасности и контроле.

---

Web3 для JavaScript-разработчиков на примере Solana

Александр расскажет, с какими задачами сталкивается JavaScript-разработчик при работе с блокчейном Solana и библиотекой web3.js.
А именно:

• Создание и использование криптокошельков Solana.

• Транзакции. Как создавать, отправлять, какие бывают.

• SPL-токены. Что это такое, как создавать транзакции с ними.

• NFT. Что это такое, как создавать и отправлять.

• Создание логина / регистрации в любом веб-приложении по криптокошелькам Solana. Как с компьютеров, так и с мобильных устройств.

• Использование Web3 на бэкенде.

• Сложности и проблемы работы с Web3 и Solana.

---

Мои данные — это мои данные, или Local-first decentralized web

Современный веб прекрасен, но имеет ряд нюансов.

Он «страдает амнезией» при выключении сервера, сильно централизован при работе с нашими данными, часто задумчив при простейшем нажатии на кнопку. И, наконец, данные являются бесконечным предметом торга.

Рассмотрим техники, с помощью которых можно хотя бы немного улучшить UX, CX и наш прекрасный веб.

---

Смарт-контракты и децентрализованные приложения (DApp)

Рассмотрим ключевые аспекты смарт-контрактов и DApp, а также их важное влияние на современное общество и бизнес. Обсудим примеры реализации смарт-контрактов на платформе Ethereum.

---

UI

Эффективный рендеринг SVG-стрелок: оптимизация для графов с сотнями объектов

В Яндекс Крауд разработали библиотеку рендеринга SVG-стрелок для внутреннего сервиса построения графов без зависимостей и со встроенными оптимизациями.

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

---

Другое

Откуда приходят хорошие идеи?

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

---

Code in the Dark

Code in the Dark — это соревнование по верстке (HTML, CSS), где 4 участника одновременно стараются повторить реализацию дизайна, имея только макет. Обратите внимание, что во время раунда нельзя предварительно просматривать результаты и использовать какие-либо измерительные инструменты.

Победителя определят зрители. В ходе нетворкинга проведем 4 раунда по 15 минут и финальный раунд.

Участие свободное — достаточно записаться в зоне нетворкинга на площадке конференции.

---

Открытый микрофон

Попробуйте себя в роли спикера и расскажите обо всем, что волнует, прямо на конференции.

Выступите с блиц-докладом на свободную тему в любом формате. У каждого участника будет 10 минут, чтобы поделиться своими историями.

Регистрируйтесь по ссылке, чтобы поучаствовать.

Обратите внимание: выступить могут только участники офлайн-части конференции. Записи не будет.

---

Заключение

Если остались любые вопросы, можно найти ответ на официальном сайте HolyJS или спросить здесь в комментариях.

Если вопросов нет, а есть желание приобрести билет — это тоже на сайте.

А здесь напоследок напомним, что у конференции необычный формат: 7 ноября будет онлайн-день, а 14-15 ноября можно хоть лично прийти на неё в Санкт-Петербурге, хоть подключиться удалённо, как вам удобнее.