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

Но при непривычном формате суть программы остаётся прежней. Языки и фреймворки, производительность и «бессерверность», опыт бывалых и нововведения — в общем, всё, что может заинтересовать разработчика на JavaScript. Собрали все описания докладов в один хабрапост.

• Фреймворки

• Node.js

• Кейсы

• Перформанс

• Технический долг

• Бессерверность

• Графика

• Языки

• Другое

---

Фреймворки

Неизбежность тонкого клиента

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

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

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

Из этого доклада вы узнаете, как можно быстро создавать легковесные SPA, которые из коробки умеют SSR, роутинг, server push, и лишены многих недостатков современных JS-приложений. 

---

Как подружить Angular и React в одном приложении

Как-то раз владельцу стартапа Invent.us, где работает Максим, пришла идея, чтобы Angular-команда помогла React-команде в создании нового приложения. Приложение представляло собой доску с виджетами в виде плиток. Каждый виджет имел свою определенную функциональность. Задачей Angular-команды было сделать виджет на Angular и запустить его внутри React-приложения, причем внешний вид, анимация, шрифты, отступы не должны были отличаться от React-виджетов. Для этого нужно было создать UI kit, идентичный тому, который был на React, или как-то использовать React UI kit внутри Angular. 

Максим опишет тот долгий и мучительный путь, который пришлось пройти до запуска и корректной работы Angular внутри React. Он объяснит, как был сделан Angular UI kit, в основе которого сложный фасад для React UI kit.

---

Node.js

npm-уязвимости: вызов принят

В этом докладе рассматривается проблема поиска и устранения уязвимостей npm.

Нет никаких иллюзий по поводу того, насколько «интересны» различные CVE, пока они не проявят себя. Но в то же время хочется напомнить, что node_modules — это не .m2. И неконтролируемые риски рано или поздно превращаются в ущерб.

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

Доклад будет полезен техлидам JS, isec, Dev(Sec)Ops и всем, кто причастен к организации безопасной среды для разработки.

---

Workshop. How to convert crypto currencies with gRPC microservices in Node.js

часть 1, часть 2

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

В воркшопе рассматриваются ключевые принципы архитектуры, паттерны проектирования и технологии, используемые для построения микросервисов в стеке Node.js. Он охватывает теорию фреймворка gRPC и механизм Protocol Buffers, а также приемы и особенности построения изолированных сервисов с использованием монорепозитория с рабочими пространствами lerna и yarn, с TypeScript.

Этот воркшоп подойдет разработчикам, которые хотят изучить и применить на практике паттерн микросервисов GRPC на платформе Node.js.

---

Кейсы

Безопасность данных: построение архитектуры при интеграции алгоритмов шифрования в приложении для финансового учета

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

Самые частые способы получения злоумышленниками данных пользователя извне — это XSS, CSRF и bruteforce attack. Базовые действия со стороны фронтенда — это аутентификация и введение двухфакторной защиты. Но как еще больше обезопасить хранение, передачу и работу с данными? 

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

Базовая архитектура построена на связке React х Redux х TypeScript. 

Алгоритмы шифрования: RSA, AES, Paillier cryptosystem. 

Для организации архитектуры используется: RxJS, Web Worker, Web Assembly.

Будет интересно JS-разработчикам, которые интересуются безопасностью и шифрованием.

---

Server-driven UI в вебе. Не пиши, а описывай свой фронтeнд

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

Хочется бросить всё и уйти в бэкендеры!

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

---

Перформанс

Передача видео без потери качества в WebRTC: опыт VK Звонков

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

Будут затронуты WebRTC, WebCodecs, Media Source Extensions, WASM. Также спикер расскажет, как устроен формат видео WebM и чем полезен DataChannel в WebRTC.

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

---

Когда лагает интерфейс

Как правило, web performance в сознании инженеров ассоциируется преимущественно с первоначальной стадией жизненного цикла страницы — до события load. Отчасти это объясняется тем, что только одна из пяти метрик Web Vitals собирает замеры со страницы после её загрузки.

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

Артем объяснит, как в этой ситуации можно использовать Chrome DevTools, и покажет, как по-новому определять проблемные участки кода и интерфейса

---

Технический долг

Крестовый поход против легаси в фронтенд-проектах

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

Вам это знакомо? Если да, то рекомендуем вам послушать доклад Василисы. Она расскажет, как видит эту проблему, по полочкам разложит определения и объяснит, какие бывают сложности в старых фронтенд-проектах. 

Примеры кода будут из Angular и React.

---

Поймать дзен, работая над дизайн-системой Яндекс.Дзена

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

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

---

Фронтенд: Графы. Сборка. Мертвый код

Никита работает в Яндекс.Маркете уже 4 года и за это время сформировал нейронные связи, позволяющие быстро понимать состав и состояние кодовой базы.

Это знание очень часто помогает не делать лишнего для достижения конкретного результата. Как сделать возможность «не делать лишнего» доступнее для сотни с лишним коллег? Для этого пришлось задуматься над автоматизацией вырезания лишнего из кодовой базы.

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

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

Для подписчиков Яндекс.Плюс будет бонус: поэкспериментируем с инструментами из мира network analysis для оценки здоровья нашего репозитория.

---

Бессерверность

Serverless — это не страшно!

Часто от монолитного приложения хочется уйти в serverless. Иван расскажет, как это делается. Причем не в контексте AWS, как это часто бывает, а на примере Яндекс.Облака. Хотя методы практически универсальны для любого облака.

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

---

Воркшоп. Тысяча маленьких контроллеров: пишем весь бэкенд на лямбдах

часть 1, часть 2

Дарья проведет воркшоп по бессерверной архитектуре: особенностям ее построения и преимуществам. Она расскажет, как разобрать монолит и быстро перенести его в облака. Также будут рассматриваться особенности поддержки multitenants, то, как получить максимум от бессерверной архитектуры и поддерживать ее «вечно», а также варианты переезда с обслуживающего клиента (на примере AWS) на новый (Yandex.Cloud).

---

Графика

Создание интерактивных визуализаций на D3.js и React

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

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

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

Этот доклад будет полезен тем, кто имеет опыт работы с React и хочет научиться создавать интерактивные визуализации.

---

Кубический мир на JavaScript

Мечтаете написать игру, но знаете только JS?

Иван покажет на конкретном примере, как можно разработать клон Minecraft, который будет работать в браузере. Это вполне реально, хотя и требует много времени.

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

---

Быстрая 3D-графика в браузере

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

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

Технологии: TypeScript, WebGL, WebAssembly, Web Workers.

Для тех, кто интересуется производительностью, алгоритмами и 3D-визуализацией.

---

Языки

Не баг, а фича: разбираем компромиссы в дизайне языка TypeScript

В языках программирования нам часто чего-нибудь не хватает: синтаксических конструкций или более удобных способов выразить наши намерения. В таких случаях принято винить создателей языка. К примеру, те, кто пишут на TypeScript, время от времени задаются вопросами вроде «Почему они до сих пор не сделали возможность отключать структурную типизацию? Да и вообще, кому она нужна?» 

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

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

---

Wasm GC

Спикер поделится своим пониманием того, что нового приносит proposal Wasm GC, расскажет почему его так долго делают и какой путь прошли движки за два года экспериментов. В докладе будут подняты общие проблемы при работе над GC. Вы узнаете, чего ожидать от Wasm GC MVP и как его использовать тем, кто производит wasm-модули.

Сейчас Дмитрий реализует поддержку Wasm GC в JSC, так что информация в докладе будет «с полей».

---

Другое

Нейрофизиология сложности кода

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

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

И код. Много кода. Простого кода, сложного кода и непонятного кода, который с одной стороны простой, с другой сложный, а с третьей стороны — вообще пересечение параллельных линий в форме котика.

---

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

А если доклады заинтересовали, дальше стоит открыть сайт конференции: там и расписание, и билеты, и возможность подписаться на новости.