Когда Алиса в Стране Чудес сказала «тут нужно бежать со всех ног, чтобы только оставаться на месте», она словно описывала 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: механизм работы и преимущества для пользователя
Федор Ищенко
KODIX
Next — go-to solution для агентств, занимающихся проеĸтной разработĸой. Недавно у него появилось очень сильное ĸонĸурентное преимущество среди других фреймворĸов — streaming. Федор поделится опытом команды KODIX в использовании streaming SSR. Что было непонятно в доĸументации, ĸаĸие задачи решали и ĸаĸой результат получили. Разберем, ĸаĸ работает ĸэширование в Next.js, ĸаĸ готовить streaming и сочетать с ĸэшами. Обсудим, ĸаĸ это работает и за счет чего улучшается UX пользователей.
Денис Чернов
SM Lab
Мы любим Vue за простоту и скорость разработки на нем. Но часто говорят, что в нем много магии и подкапотной работы. Однако ощущение магии развеивается, если разобраться, как работают все шестеренки изнутри.
В докладе мы погрузимся в исходники и примеры, чтобы разобраться, как работают отдельные части в системе реактивности Vue изнутри. И, конечно, научимся использовать реактивность Vue с максимальной эффективностью.
Производительность
Александр Зайцев
X5 Tech
Поговорим об использовании Chrome DevTools в Node.js. Александр сделает акцент на том, как можно построить метрики для отслеживания перформанса. Посмотрим, какие нововведения для этого появились в Node.js, обсудим библиотеки.
node:v8, node:inspector, node:perf-hooks. Как с помощью этих библиотек построить метрики для перформанса и для чего еще их можно использовать. Как их применять для написания тестов и предвещать утечки памяти. Поговорим о GC и о данных, которые можем получать теперь. Обсудим, как это пригодится.
Web perf: найти и оптимизировать
Павел Уваров
Kaspersky
Поговорим про основные инструменты для анализа производительности. Рассмотрим техники оптимизации, позволяющие улучшить 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) ВКонтакте
Максим Кузнецов
VK / ВКонтакте
Рассмотрим большую и сложную задачу не только с точки зрения техники, но и бизнеса на примере системы мониторинга доступности (A11Y) во ВКонтакте.
Вы узнаете, как удалось создать инструмент, позволяющий в режиме реального времени собирать ошибки доступности социальной сети со множеством разделов и фич и каких результатов достигли.
Архитектура
Технологическая стратегия как спасательный круг в море разных техстеков
Георгий Журавлёв
СИБУР Диджитал
Георгий расскажет о применении техполитики в компании «Сибур Цифровой». Как она помогает выравнивать работу на разных проектах, переиспользовать решения, выращивать внутренние инструменты и сокращать техдолг.
Докладом спикер хочет заинтересовать представителей крупных компаний в развитии техполитик при разработке своих проектов, вовлечь их в дискуссию о ценностях технологических решений и таким образом развивать общую культуру лидеров компетенций.
Артём Арутюнян
Десять лет назад подъем React сделал observables антипаттерном, а сейчас signals внедряют в стандарт JavaScript. Как так получилось? Почему мы возвращаемся к устаревшим технологиям? Поменялось ли что-то за это время? Постараемся разобраться во всей истории и спрогнозировать ближайшие несколько лет.
Пользовательская мясорубка: как строить коллаборативные сервисы
Виктор Щеглов
Recraft
Погрузимся в «кухню» разработки коллаборативных онлайн-сервисов, где множество пользователей одновременно взаимодействуют с данными в реальном времени. Обсудим, как разрешать конфликты, возникающие при совместном редактировании, используя технологии CRDT и Yjs.
3 главных недостатка FSD после 3 лет использования
Евгений Паромов
Evrone
Евгений расскажет, как узнал о FSD. Как это изменило мышление, как начал использовать FSD во всех проектах и как разочаровался в нем. Как решил проблемы FSD и понял, что это уже не FSD.
Подводные камни использования FSD и как их обойти.
Разбираемся в Feature-Sliced Design
Александр Моргунов
Samokat.tech
Александр расскажет, что собой представляет архитектурная методология Feature-Sliced Design. В компании используют методологию на многих проектах и за последние пару лет решали самые разные проблемы, которыми сегодня хочется поделиться.
Рассмотрим основные концепты и обсудим, что дает методология разработчикам. Сравним с архитектурными паттернами. Разберем преимущества, основные проблемы и их решения. Поговорим про последние апдейты в методологии и возможные варианты развития.
Функциональное программирование в JavaScript
Марат Зимнуров
Avito
Марат расскажет, что такое функциональное программирование на самом деле, какие методы оттуда уже проникли в повседневную разработку, какие конкретные недостатки существуют для его применения в JavaScript и в целом. На примерах разберем, как писать веб-приложения и бэкенды, используя практики функционального программирования, почему сейчас болезненно писать тесты и как убедиться, что ваша разработка уже ушла в путь функций. Узнаем, куда спрятались монады и кто главный композитор!
Алексей Золотых
МойОфис
Самая большая проблема в программировании — проблема сложности. DOD (data-oriented design) позволяет решать ее системно и довольно просто. При этом подход сочетается с ООП и ФП.
Алексей расскажет о преимуществах и ограничениях DOD и покажет, как внедрить у себя.
Графика и анимация
Метавселенная для МТС на Babylon.js
Василий Порох
AIT
Василий опишет процесс создания 3D-метавселенной. Побегаем по локациям с видом от третьего лица. Рассмотрим коллизии с препятствиями, анимации персонажей, эффекты северного сияния и пролета метеоритов. Соединение пользователей друг с другом при помощи colyseus.js. Спикер расскажет об оптимизации моделей, видео- и аудиоассетов.
XR on the Web: Exploring the Possibilities with JavaScript
Faizan Akhtar
В докладе подробно рассматриваются интересные возможности дополненной реальности (AR) в вебе с обсуждением технологий и фреймфорков, лежащих в ее основе, а также best practices дополненной реальности с использованием JavaScript.
В результате вы научитесь использовать JavaScript для создания потрясающей дополненной реальности прямо в браузере, что сделает ее более доступной и практичной. Вы также познакомитесь с инструментами и техниками, которые позволят воплотить основанные на вебе AR-проекты.
Иван Попелышев
White Frame
Муса Асуханов
ЛисГеймс
Доклад со здравым взглядом на текущее состояние и перспективы WebGPU. Чем он полезен? Что компании, по типу Unity, делающие на WebGPU большую ставку, не хотят рассказывать?
Данила Симонов
Age of Memes Interactive
История 4-летней разработки браузерной RTS-игры Age of Memes, вдохновленной Age of Empires.
В докладе будет:
Обзор игровых движков в вебе и объяснение, почему решили сделать свой.
Обзор алгоритмов сжатия и ресайза текстур. Оптимизация прогрессивной загрузки, чтобы для First Contentful Paint было нужно всего 6–8 мегабайт.
Рассказ, как строили рендеринг на PixiJS и как индексы, оптимизации и свои шейдеры помогли выжать 120 FPS на картах с тысячами юнитов.
Луис Бланко
AESD Lab
Во время доклада рассмотрят возможность запуска CUDA/OpenCL и WebGL JS-кода в Node.js без браузера с помощью компилируемых аддонов. Представленное решение будет совместимо с three.js и другими популярными WebGL-библиотеками. Рассмотрим, «зачем это нужно», и обсудим производительность Node.js в реалтайм рендеринге сложной графики. Будут и другие примеры интеграции мультимедийных аддонов c Node.js. Луис перечислит факторы, влияющие на выбор между этой технологией и браузерными решениями, и продемонстрирует реальные примеры использования в коммерческих продуктах.
Василий Рогин
Smartly.io
Василий захотел играть в fallout2-ce (Fallout 2 Community Edition) из браузера и получил интересный удачный и неудачный опыт.
Он расскажет, как именно работает WebAssembly, что есть из коробки в Emscripten, что такое стандартная библиотека, как устроен Asyncify и как можно загружать файлы игры по запросу. Покажет небольшие WebAssembly-специфичные изменения в C-коде игры и объяснит, почему их пришлось добавить.
Презентация конкретного решения конкретной проблемы с пояснениями, как оно работает изнутри.
Инструменты
Интернационализация — что ты такое?
Алексей Ершков
Яндекс
Чаще всего в проектах под интернационализацией (aka i18n) подразумевается возможность показывать интерфейс на нескольких языках. Однако перевод интерфейса — лишь малая часть того, что входит в это обширное понятие.
В рамках доклада вы узнаете:
Что на самом деле входит в интернационализацию.
Чем интернационализация отличается от локализации и какие еще термины есть в контексте международных запусков.
Как сделать так, чтобы команда думала в первую очередь про продукт, а не про особенности конкретной страны.
Какие best practice Яндекс использует в международной разработке.
Как сделать автотесты полезными. Эволюция автотестов в Яндекс ID
Дмитрий Андриянов
Яндекс
В Яндекс ID сформировали новое качество проекта: полное автоматизированное регрессионное тестирование. Оно дает смелость в принятии решений при масштабных изменениях кода и улучшает коммуникацию в команде. Для этого разработали методологию, процессы и инструменты, а также полностью описали функциональные требования к продукту. Дмитрий расскажет, какие шаги предприняли, чтобы к этому прийти, с какими трудностями столкнулись и как их решили.
Сколько памяти ест ваша вкладка?
Антон Непша
Сбер
В докладе вам расскажут, важно ли задумываться о потребляемой памяти и стоит ли жертвовать памятью ради производительности.
Поговорим про утечки памяти, про инструменты для работы с памятью в JavaScript. И увидим, наконец, сколько весит ваш useMemo.
Бэкенд
Евгений Кучерявый
LaranaTech
Разработчики верят, что занимаются серверным рендерингом, но они ошибаются — 99% из них никогда не видели настоящий SSR.
Евгений расскажет о фреймворке LaranaJS, который не пытается починить фронтенд, а переизобретает его.
Как написать и задеплоить бэкенд за полчаса, если ты обычный фронтендер?
Антон Ефременков
ITentika
Доклад для тех, кто не знаком с бэкендом, но нуждается в нем.
Сначала Антон расскажет о вариантах создания бэка на JS и покажет, что действительно имеет смысл использовать serverless-подход. Далее проведет интерактив на самописном сайте с serverless-бэком — на примере рассмотрим, что и как устроено. Антон покажет, что бэк действительно легко задеплоить. В заключение поделится опытом использования serverless-бэкенда в проде — что было хорошо и плохо — и в каких проектах имеет смысл использовать этот подход.
NestJS: типизация и валидация запросов
Иван Клименко
Иван расскажет о проблемах и нюансах типизации и валидации запросов при работе с фреймворком NestJS. Обсудим идеи, касающиеся валидации запросов для любого вида транспорта, и особое внимание уделим REST- и GraphQL-запросам.
Ускорение приложений на Node: когда стандартного профайлера недостаточно
Виктор Хомяков
В Linux есть инструмент для профилирования под названием perf. Виктор расскажет, как с его помощью профилировать приложения на Node.js, чтобы увидеть больше информации, чем дает встроенный в Node.js профайлер.
Управление нагрузкой в Node.js
Дмитрий Крыстек
Mapbox
В процессе доклада на примере приложения и его развития вы узнаете, как управлять нагрузкой на приложение и обезопасить его от возможных инцидентов. Зачем ему rate limiter, request queue и traffic burst protection. Какие есть подводные камни при их использовании.
API
От римских императоров до Temporal API: покоряем даты и время в JS
Сергей Соловьев
Т-Банк
На примерах разберем трудности в задачах со временем, обсудим, какова в этом всем роль Date API, истории веба, механики небесных тел, британских железных дорог и римских императоров.
Поговорим о том, как библиотеки вроде date-fns или Luxon пытаются преодолеть эти трудности и насколько это у них получается. Обсудим, станет ли Temporal API швейцарским ножом для решения всех проблем. Наконец, накидаем небольшой чек-лист, который поможет вам уменьшить количество багов при работе со временем и обеспечить наилучший UX для ваших пользователей.
Андрей Кузьменко
Профи
Всем нам хорошо известна функция Math.random(). Вам подробно расскажут про Math.random() в Node.js.
Ответят на вопросы, как устроена генерация псевдослучайных чисел и какой алгоритм применяется.
Покажут методы, которые позволяют предугадывать значения, сгенерированные с помощью Math.random(). Каждый из этих методов мы обязательно разберем и рассмотрим на примере реального кода.
Захват медиа в WebRTC-приложениях, или Как, наконец-то, включить камеру на созвоне
Николай Пугачев
SberDevices
В докладе мы погрузимся в то, как запрашивать медиапотоки с помощью getUserMedia, как работать с ограничениями (constraints) и менять их в процессе. Посмотрим, как получать список устройств и отлавливать изменения в нем, и как корректно запрашивать разрешения на доступ к камере и микрофону.
Пластиковые лопатки в многопоточной песочнице
Всеволод Золотов
ПСБ
Поговорим про реализацию многопоточности в JS. Затронем такие вещи, как Atomics, Transferable Objects, рассмотрим паттерны Semaphore и Mutex. Построим свои космолеты и велосипеды.
HTMLVideoElement с нуля, c быстрой перемоткой
Степан Михайлюк
Lumen5
Ранее на HolyJS Степан выступал с докладами про рендеринг видео браузерными технологиями: «Рендеринг видео в Node.js», «Генерируем видео на JavaScript». Рассказывал про то, как эмулировать браузерные технологии, какие еще есть челленджи. Доклады были довольно широкими, обзорными. В этом докладе он сфокусируется на одной задаче — имплементации HTMLVideoElement с поддержкой быстрой перемотки. Для систем с frame-by-frame рендерингом — без решения этой задачи никуда. Объяснит, почему ее нужно решать, как решали раньше и как нужно решать сегодня.
WebTransport. Когда и как можно использовать?
Николай Константинов
Сбер
Поддержка WebTransport API среди браузеров постепенно растет. Разработчики все смелее используют его в реальных проектах. Когда и как стоит применять WebTransport? Чем он отличается от WebRTC и WebSocket?
Ответим на эти вопросы, рассматривая разработку разных проектов: напишем стриминговый сервис и онлайн-игру с использованием WebTransport и других новых стандартов.
Web3
Воркшоп: Как разработать онлайн-игру для Telegram и интегрироваться в экосистему TON
Андрей Соколов
Bettor IO
Во время воркшопа обсудим текущее состояние Telegram с точки зрения приложений и блокчейна (да, Telegram интегрирован с блокчейном). Как создаются приложения, где и как публикуются, как на этом заработать. Все это — на примере онлайн-игры в реальном времени, которая выросла из тестового проекта предыдущего доклада.
Артём Шовкин
СберТех
Артём рассмотрит практические шаги по настройке безопасного доступа к ресурсам IPFS для корпоративного использования. Также приведет описание методов управления правами пользователей и отслеживания их действий. Особый акцент — на кибербезопасности и контроле.
Web3 для JavaScript-разработчиков на примере Solana
Александр Казаков
Газпромбанк Лизинг
Александр расскажет, с какими задачами сталкивается JavaScript-разработчик при работе с блокчейном Solana и библиотекой web3.js.
А именно:
Создание и использование криптокошельков Solana.
Транзакции. Как создавать, отправлять, какие бывают.
SPL-токены. Что это такое, как создавать транзакции с ними.
NFT. Что это такое, как создавать и отправлять.
Создание логина / регистрации в любом веб-приложении по криптокошелькам Solana. Как с компьютеров, так и с мобильных устройств.
Использование Web3 на бэкенде.
Сложности и проблемы работы с Web3 и Solana.
Мои данные — это мои данные, или Local-first decentralized web
Павел Востриков
Kaspersky
Современный веб прекрасен, но имеет ряд нюансов.
Он «страдает амнезией» при выключении сервера, сильно централизован при работе с нашими данными, часто задумчив при простейшем нажатии на кнопку. И, наконец, данные являются бесконечным предметом торга.
Рассмотрим техники, с помощью которых можно хотя бы немного улучшить UX, CX и наш прекрасный веб.
Смарт-контракты и децентрализованные приложения (DApp)
Андрей Макаров
Islamic Coin
Рассмотрим ключевые аспекты смарт-контрактов и DApp, а также их важное влияние на современное общество и бизнес. Обсудим примеры реализации смарт-контрактов на платформе Ethereum.
UI
Эффективный рендеринг SVG-стрелок: оптимизация для графов с сотнями объектов
Александр Мальцев
Яндекс Крауд
В Яндекс Крауд разработали библиотеку рендеринга SVG-стрелок для внутреннего сервиса построения графов без зависимостей и со встроенными оптимизациями.
Александр расскажет, почему существующие на рынке решения не подошли. Напомнит, как строятся кривые Безье. Поделится, как оптимизировали SVG-стрелки, чтобы графы с сотнями объектов не нагружали устройство.
Другое
Владимир Спиридонов
РАНХиГС
Креативность, или творческое мышление, — одна из самых заметных и ценных особенностей человека. Как мы справляемся с проблемными ситуациями, что нам мешает и помогает в этом процессе, как мы преодолеваем трудности на этом пути — как нам в голову приходят новые идеи — об этом и пойдет речь в выступлении.
Code in the Dark — это соревнование по верстке (HTML, CSS), где 4 участника одновременно стараются повторить реализацию дизайна, имея только макет. Обратите внимание, что во время раунда нельзя предварительно просматривать результаты и использовать какие-либо измерительные инструменты.
Победителя определят зрители. В ходе нетворкинга проведем 4 раунда по 15 минут и финальный раунд.
Участие свободное — достаточно записаться в зоне нетворкинга на площадке конференции.
Попробуйте себя в роли спикера и расскажите обо всем, что волнует, прямо на конференции.
Выступите с блиц-докладом на свободную тему в любом формате. У каждого участника будет 10 минут, чтобы поделиться своими историями.
Регистрируйтесь по ссылке, чтобы поучаствовать.
Обратите внимание: выступить могут только участники офлайн-части конференции. Записи не будет.
Заключение
Если остались любые вопросы, можно найти ответ на официальном сайте HolyJS или спросить здесь в комментариях.
Если вопросов нет, а есть желание приобрести билет — это тоже на сайте.
А здесь напоследок напомним, что у конференции необычный формат: 7 ноября будет онлайн-день, а 14-15 ноября можно хоть лично прийти на неё в Санкт-Петербурге, хоть подключиться удалённо, как вам удобнее.