О чем расскажут на HolyJS 2023 Autumn: от архитектуры до карьеры19.10.2023 10:01

Как переписать целые JS-библиотеки на CSS? А как ускорить сборку? Найти утечки памяти? Внедрить PWA? Заменить фон в видеозвонке? Отрендерить видео в Node.js? Прокачать личный бренд?

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

Содержание

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

Ниндзя кодогенерации. Ускоряем разработку

Спикер выбрал эту тему, потому что сам на нескольких проектах ускорял разработку за счет кодогенерации. Он генерировал все, начиная от SDK и типов и заканчивая микросервисами, микрофронтендами и хуками. Также он работал с AST, чтобы генерировать SQL Joins из GraphQL, и писал трансформеры для модификации кода.

Ускоряем процесс сборки и сокращаем cycle time

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

Как мы перевели сборку всего фронтенда ВКонтакте на SWC, и стоило ли оно того

Самыми популярными транспиляторами для JavaScript до сих пор остаются Babel и ts-loader. Они хорошие, но медленные.

В погоне за скоростью сборки спикер с командой решили переехать на многообещающий SWC. Конечно, это не могло пройти гладко. Погрузившись в SWC, они обнаружили, что есть нюансы, которые заставляют копаться в исходниках на Rust и чинить то, что не должно было сломаться. Фёдор расскажет об удивительном приключении в погоне за скоростью сборки.

Snip — организуй свои сниппеты

Спикер расскажет про использование адаптеров для соединения сред тестирования: «ванильного» JS API c API интеграционного тестирования, API interactions-тестов Storybook с unit-тестами Jest.
Поговорим про использование кода сниппетов как основы для написания интеграционных тестов. Спикер сделал свою реализацию API Сypress для браузера и разрабатывает сниппеты сразу на его API, которые повторно использует уже в интеграционных тестах.
Петр покажет, как написать адаптер для запуска interactions-тестов Storybook в Jest. Запуск тестов в дальнейшем происходит без браузера, такие тесты быстрее.

Про node_modules

Цельное повествование о том, как устроена система зависимостей в JS.

Тест-раннеры, оптимизация тестов и аспекты тестирования на JavaScript

Поговорим о тестировании JavaScript-приложений, а конкретно — о тест-раннерах. Cравним их, узнаем о лучших практиках и видах тестирования. Поговорим об оптимизации тестов.

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

Написание бенчмарков и performance-тестов для кода на JS/TS

JavaScript — богатый язык, в нем большинство задач можно решить несколькими способами. Часто фронтендеры хотят сравнить варианты решения и выбрать самый быстрый, чтобы использовать его в своем проекте. Это важно в клиентском коде, который выполняется в браузере — метрики Web Vitals FID, INP, TBT, TTI как раз про это. Это также важно и в серверном коде — отзывчивость на запросы (TTFB, TTLB) и RPS зависят от скорости выполнения кода в Node.js.
Для оценки скорости работы кода и сравнения скорости разных вариантов служат бенчмарки. Для фиксирования результатов и недеградации по скорости используются performance-тесты. Для оценки скорости работы кода и поиска в нем неоптимальных мест выполняется профилирование.
Спикер расскажет, какие бывают ошибки при написании бенчмарков и как их избежать, как писать хорошие бенчмарки и performance-тесты, и как профилировать код на JS/TS.

Performant-стратегия загрузки веб-шрифтов

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

Партнерство с Garbage Collector. Память в JS и работа с утечками

Спикер расскажет о том, как внутри команды решали проблемы утечки памяти и как их находили. Подробнее узнаем о самом V8 и памяти внутри него, а также об алгоритмах работы GC и его вариациях запуска. Обсудим инструменты для исследования утечек памяти, как их читать и как с их помощью искать проблемы использования perf hooks и process для получения данных о потреблении памяти приложениями.

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

Three.js: синхронизация звука и графики

Возможно, вы сталкивались с проблемой совмещения звука и визуализации в единую эмоциональную и кинематографическую сцену. Cпикер рассмотрит увлекательное сочетание трехмерной графики и звука, используя возможности Three.js и Audio API. Доклад будет полезен фронтенд-разработчикам, веб-дизайнерам и всем, кто интересуется созданием уникальных визуальных эффектов в веб-приложениях. Предварительных знаний Three.js не требуется, но базовое понимание JavaScript и веб-разработки пригодится.

Процедурная генерация 3D-элементов в браузере

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

Боремся с 90-секундным зависанием Chrome при рендеринге графиков на 50к точек каждый

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

Замена фона в видеозвонке

Спикер расскажет, как разобрать видео на кадры, найти в кадрах людей, заменить фон и собрать обратно. И еще немного про нейронки, стримы и канвасы.
Используемые технологии: WebRTC, Insertable Streams, Media Source Extensions, Canvas. Доклад будет полезен, если вы работаете с видео, звонками или конференциями, делаете свой видеоплеер, сервис групповых звонков или DRM.

Убиваем Lottie? Тащим Rive?

Спикер расскажет о Lottie: обсудим ограничения и посмотрим, как он работает под капотом, а именно — как работает механизм рендера. Также обсудим новый инструмент от создателя Lottie — Rive. Евгений покажет, как Rive решает проблемы, с которыми не может справиться Lottie: в качестве примера рассмотрим подкоробочную интерактивность Rive. Реализуем интерактивный анимируемый элемент с помощью Rive и без кодинга.

Backend

Рендеринг видео в Node.js

Степан уже выступал с докладом о рендеринге видео на JavaScript. Тот доклад был обзорный, он рассматривал весь процесс рендеринга. Как рисовать объекты, анимировать, как засунуть последовательность фреймов в видео. В этот раз спикер сфокусируется на рендеринге видео именно в Node.js. В процессе будут сравниваться перфоманс рендеринга на Node.js и в брауезере. Оказывается, браузер делает столько скрытых оптимизаций! Пороемся в грязном белье имплементации WebGL в Node.js.

Real DTO

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

React server components

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

Про фронтенд с точки зрения плюсовика-компиляторщика

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

Case-study

Мой первый опыт реализации highload-проекта — как это было

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

PWA: инструкция по внедрению

Как продать бизнесу PWA? А если продали, то как грамотно внедрять? Поговорим о важном и рассмотрим PWA как бизнес-фичу.

WebAssembly в решениях СБОЛ.про

Спикер расскажет об относительно новой технологии, которая приблизила скорость вычислений в браузере к нативной и покажет, какие задачи можно решать с помощью этого инструмента. Отдельно будут описаны конкретные решенные кейсы, а также отмечена коллаборация разных специалистов, которая возникает при работе с этой технологией.
Технологии: WebAssembly, Emscripten, CMake и The WebAssembly Binary Toolkit. Доклад будет полезен фронтенд-разработчикам, С++ разработчики, а также ML-инженерам, которые с ними сотрудничают.

Архитектура

Внутреннее устройство React Native

На российском рынке существуют мнение о том, что React Native — плохая технология. Люди не слишком хорошо разбираются в RN, и многие любят приводить в пример Flutter. Но если спросить «Чем Flutter лучше React Native?» — аргументы заканчиваются. Спикер расскажет, почему React Native может идеально подходить для решения задач мобильной разработки. Объяснит, что мы не ограничены средой React Native, имеем полный доступ к нативной разработке, а новая архитектура RN избавляет его от проблем, которые раньше были главным контраргументом в отношении использования фреймворка.

Визуализация архитектуры приложений

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

Glorious Monolith: масштабируем приложение без микрофронтендов

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

##UI

React-query VS reatom/async — конфигурация против композиции

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

Дизайн и код в гармонии

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

Создаем интерактивную карту на основе библиотеки OpenLayers

Спикер расскажет, как на проекте они создают карту города и области с использованием библиотеки OpenLayers. Это JavaScript-библиотека с открытым исходным кодом, которую клиент выбрал вместо библиотеки Leaflet, недоступной в данный момент. Фичи системы: построение маршрутов, позиционирование по координатам, отображение сигналов с транспортных средств, поиск объектов в заданном периметре, отображение пути, пройденного транспортным средством за определенный промежуток времени.

CSS first. Когда JS не нужен

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

Экономим время пользователя с помощью буфера обмена

Не так давно спикер решал задачу: предложить пользователю сделать перевод по номеру, если у него в буфере обмена был скопирован номер телефона. Реализовать оказалось сложнее, чем сказать — на пути стоят ограничения в виде разнообразной поддержки браузеров и особенностей платформ. Помимо описанной задачи есть и другие кейсы, когда мы можем за счет работы с буфером «ускорить» пользователя, так как ему нужно совершать меньше кликов. В докладе поговорим о возможностях и ограничениях работы с буфером обмена на стороне клиента (Clipboard API) и как его можно использовать.

RTL: от сложности восприятия до нюансов Unicode

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

В поисках идеального фреймворка

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

Мягкая сила

Истории прокачки личного бренда с нуля до тысячника.

В IT-отрасли есть три пути роста и развития — рост внутри компании, рост при переходе в новую компанию и личный бренд. Третий путь является наиболее частным и подходит далеко не всем. В нем необходимо растить свою узнаваемость в различных сообществах и тем самым становиться более привлекательным для компаний и их HR-брендов, так как с помощью известного или узнаваемого человека в компании проще завлекать других. Постараемся разобраться в том, как выглядит личный бренд, как он строится, какие есть преграды на пути построения и как их преодолеть. А в конце узнаем, к чему может привести развитие личного бренда на различных примерах.

Да какая разница, где ты работаешь

Если бы Александр сказал «Я Александр из Google», то звучало-бы куда интереснее, неправда ли? А если он уволился и все, что делал, — это NDA, то теперь начинать заново? Это история про альтернативную ветку развития, в которой можно остаться просто разработчиком, если совсем не тянет в управление. Где найти в себе силы изменить отношение к работе как части себя и просто продолжить жить в радость, по чуть-чуть становясь х10 разработчиком.

Код-ревью с уважением

Что может помочь вырасти разработчику или полностью убить его мотивацию? Что может усилить командную работу или полностью разрушить коллектив? Что может улучшить проект или превратить его в груду хлама, которую невозможно поддерживать? Ответ на все эти вопросы — код-ревью. Это сильный инструмент, который может как созидать, так и разрушать, поэтому важно научиться пользоваться им правильно.

Другое

JavaScript и способы взаимодействия с блокчейном на примере Ethereum

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

Блокчейн, Web3, фронтенд: есть ли место фронтенд-разработчику в блокчейне и как туда попасть?

Поговорим о том, что такое блокчейн и в чем его отличительная особенность. Также затронем тему Web3-приложений и взаимосвязь с блокчейном. Выясним, какая роль у фронтенд-разработчиков в Web3: есть ли для них место и будет ли в будущем. Обсудим, как войти в Web3 с минимальными усилиями и максимальной пользой. Разберемся, страшна ли разработка в Web3-сфере.

Побеждаем в GameFi-хакатоне с призом в 30k$

Онлайн-игры, блокчейн, метавселенные, высокие нагрузки и геймплей в реальном времени. Звучит так, что для разработки такого продукта нужна большая команда, зоопарк языков и технологий. Но на самом деле, это все можно сделать небольшой командой в 1–2 человека. Главное — знать, какие инструменты выбрать, что делать надо и чего не надо.
В этом докладе спикер расскажет, как, используя Javascript-стек он победил в хакатоне от блокчейна Cronos, чего ожидают судьи, за что дают баллы и многое другое.

Создание массовых звонков и трансляций с помощью WebRTC

Как заставить несколько браузеров понимать друг друга? Есть несколько способов, об одном из которых мы поговорим — WebRTC. Это сложная и низкоуровневая технология со своей магией внутри. Поэтому сначала рассмотрим основы, а затем поговорим про создание массовых звонков и трансляций, а также про их архитектуру и реализацию. В заключение обсудим практические примеры и советы, как не наступить на грабли, применяя WebRTC для решения своих задач.

Мне нечего тебе сказать!

Спикер расскажет, как взаимодействовать с сайтом голосом, а главное — зачем, как это делается сейчас, какие спецификации и API для синтеза и распознавания голоса уже есть. На примере крутой демки с Алисой и клиентской библиотекой, которая в реальном времени будет распознавать речь в браузере, узнаем, как это может работать.

Заключение

Весной мы опробовали формат «два онлайновых дня, два офлайновых (но тоже с возможностью смотреть доклады онлайн)». Он понравился и тем, кто лично пришёл на конференцию, и тем, кто подключался издалека.

Так что эта HolyJS пройдёт так же, и на ней тоже дело не ограничится докладами — особенно в офлайн-варианте, где можно будет и вдоволь наобщаться лично, и подходить к стендам компаний-партнёров.

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

© Habrahabr.ru