От Angular до биотеха: что будет на HolyJS 2024 Spring22.03.2024 17:15

В апреле мы проведём конференцию HolyJS — о чём будут её доклады? Что вообще должны говорить на JS-конференции? Спорить, какой фреймворк лучше?

Бессмысленные холивары мы не любим. А вот полезную информацию по тем же фреймворкам — вполне. Так что будут доклады с темами вроде «Angular Platforms» и «Vue.js Renderer».

В мире фронтенда бывает лучше один раз увидеть, чем сто раз прочитать: когда речь об анимациях и прочих красотах. А лучше всего — и увидеть красоту в презентации доклада, и услышать от спикера о том, как её правильно наводить. И такое будет: скажем, о работе с 3D сразу два доклада.

В основном конференция суровая техническая. Но для тех, кого волнуют вопросы вроде карьерных, есть и блок из нескольких докладов «Мягкая сила». Знаете ли вы, сколько и как можно заработать на HTML5-играх?

Будет и многое другое, вплоть до докладов, связанных с биотехом. При чём тут вообще JS-разработка? Ответ можно узнать из описаний докладов под катом.

Содержание

UI

Навигация с помощью голосового помощника

Голосовые помощники все больше становятся частью нашей жизни — они помогают подбирать музыку, строить маршруты, заказывать такси и многое другое. Однако в вебе редко можно встретить таких помощников, хотя Speech API добавили в браузеры 10 лет назад.

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

10 ошибок в UX для незрячих

Илья думал, что его команда сделала Яндекс Маркет доступным для незрячих. А потом пришел незрячий тестировщик и указал на ошибки, на которые никогда бы не обратили внимание:

• заголовки мешали на смартфоне;

• тег button делал кнопку недоступной;

• доступный блок прятал самое важное;

• текст не читался полностью;

• семантичные теги em и b не влияли на интонацию скринридера.

Он разберет эти и другие особенности в UX и поделится решением на базе библиотеки React.

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

Раз, два, три джс, или Как я делал 3D-сайт

Во время выступления Бекжан расскажет, как делал свой первый 3D-сайт на Three.js, как учился, сколько времени ушло, как оптимизировал до 100 FPS и что он понял в конце.

Сайт, готовый ко всему

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

Обо всём этом и расскажет Никита Дубко.

Как строку букв превратить в боль для разработчика, или Что такое интерфейсы в биотехе

Мария пробежится «автостопом» по биоинформатике: расскажет про антитела, при чем тут белки (не те, что на деревьях), ламы (те самые), зачем им программисты и фронтенд.

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

Atomic CSS Deep Dive

Доклад про подход Atomic CSS в верстке и разработку инструментов.

Кратко вспомним базу — почему Atomic CSS. Рассмотрим популярные решения для работы в этом подходе и сравним их с изобретением Валентина — mlut. Разберем проблемы известных инструментов и посмотрим, как Валентин решил их в своем. Будут интересные технические детали и немного хардкора. Также рассмотрим лучшие практики в Atomic CSS, которые помогут верстать без боли.

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

Иконки и как их готовят

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

Все готовят иконки по-разному, и все решения отличные! И кажется, что есть универсальное решение, которое лишено всех минусов. Об этом решении и расскажет Петр.

От Telegram до Одноклассников: секреты встраивания приложений куда угодно

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

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

Безопасная разработка во фронтенде

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

Инструменты

Профессиональное оборудование разработчиков

Мы часто слышим «что мы сделали», но практически никогда — «как мы сделали». Если программирование — это про обучение и навыки, то на что влияет наше профессиональное оборудование? Особенно в связи со стремительно возросшим соотношением удаленки по сравнению с работой в офисе.

Сколько стоит оборудовать идеальное рабочее место, и стоит ли оно того? Так ли плоха стандартная клавиатура ноутбука? А какие они еще бывают? В чем преимущество ортолинейной, а в чем — сплит-клавиатуры? Сколько нужно мониторов для счастья, и можно ли заменить монитор VR’ом? Удобное кресло-реклайнер или работа стоя?

Обо всём этом и не только собирается рассказать Роман.

Снэпшоты памяти — не страшно, снэпшоты — полезно

На прошлом HolyJS Александр рассказывал о работе GC в V8, как быть с ним партнерами. Потом родилась идея использовать реальные инструменты, такие как DevTools, memlab, Clinic.js, чтобы рассмотреть реальные кейсы утечек в рандомных опенсорс-библиотеках — например Jest, MongoDB, Nock и других.

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

The Good, the Bad and NPX

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

Тестирование производительности React-компонентов в CI

Артем расскажет, как внедрял автоматическое тестирование производительности React-компонентов в дизайн-систему и сервисы SberDevices, а также про инструмент, который создал во время решения этой задачи.

Инструментарий solution-архитектора: правильные решения в условиях неопределенности

Большинство задач во фронтенде можно решить «с наскока». Этот же соблазн сохраняется и при переходе к NodeJS. Вот только при разработке бэкендов такой подход чаще всего ведет к большой куче связного легаси.

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

Иван предлагает вместе найти ответ на эти вопросы.

Генерация реактивной модели из контрактов

Артем расскажет, как он и его коллеги взяли за источник истины Zod-контракты и смогли сильно сократить код и повысить его надежность. Покажет, как работать с внутренностями Zod, какие есть ограничения у него и у контрактов в общем.

Кодовая эволюция: избавляемся от CoffeeScript с помощью нейросети

Вы когда-нибудь сталкивались с большим количеством legacy-кода, переписывание которого потребует массу времени? Никита расскажет, как удалось переписать 40K строчек кода с CoffeeScript на Node.js, используя нейросеть. Рассмотрим конкретный кейс, поговорим о плюсах и минусах такого подхода, а также разберем, как проделать эту процедуру аккуратно и без последствий.

Кейсы

Zero Error Policy: узнаем про ошибки быстрее пользователей

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

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

Браузер как платформа для «тяжелых» приложений

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

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

Доклад построен вокруг технических решений в основе приложения для работы с химическими датасетами на JS/TS, Wasm и WebGL. Подойдет разработчикам любых уровней.

История одного фича-флага

Павел расскажет об использовании фича-флагов в фуллстек JS-проекте. Рассмотрит клиентские и серверные, dev и prod, для бизнес-логики и среды поставки. Вы научитесь выкатывать функциональность быстрее и откатывать в случае проблем.

В основе доклада — семилетний опыт разработки продукта, из кодовой базы которого происходит поставка в три среды: on-prem, public cloud и private cloud.

Обсудим типовые задачи и способы их решения при помощи фича-флагов. Кроме личного опыта Павла он обсудит с вами стандартные средства работы с фича-флагами.

История переписывания редактора Хекслета с JS на TS. Сложности, результаты и статистика

Тренажер Хекслета был запущен в 2013 году и с тех пор прошел длинный путь развития и смены технологий. В ядре тогда был только что появившийся React, и он же и остался. Но все, что вокруг, менялось множество раз. Последнее глобальное изменение закончилось недавно, в Хекслет перешли с JS на TS. На этом отдельно взятом примере хорошо стало видно, что дает TS, что не дает, с какими сложностями предстоит столкнуться и от каких проблем избавиться.

Во время доклада Кирилл расскажет про этот переход и приведет статистику, которая поможет практически в чистом эксперименте сравнить JS- и TS-версии одного продакшен-проекта.

Вьюххх! Как мы перевели сотни проектов на Vue 3 и не пострадали

Никита расскажет про вызовы, с которыми пришлось столкнуться при переводе решения, на котором работает более 400 проектов, на новый стек Nuxt 3 + Vite.

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

Большие миграции для больших проектов. Переезд Tracker на Gravity UI

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

Рассмотрим плюсы и минусы каждого варианта. Вместе с Алексеем обсудим, какой путь выбрала команда Tracker и с какими проблемами она столкнулась. Затронем вопросы автоматизации процесса миграции, включая использование линтеров, семантического поиска и замены кода с инструментами типа Semgrep и Comby.

Счастье as a Service, или Как платформа позволяет вырасти от десяти разработчиков до трехсот за три года

Подход X5 Digital в создании PaaS для разработчиков — не самый легкий и дешевый, но позволяет гибко готовиться к кратному росту продуктовых команд и делать жизнь разработчиков счастливее. Саша расскажет, как создание и развитие платформы может стать трамплином для бизнеса; как они много спотыкались, но со временем встали на ноги; поговорит немного про светлое будущее и розовых пони.

Архитектура

Слои и секторы бизнес-логики. Строим масштабируемую архитектуру с Reflexio

Константин расскажет, как переписывание крупного проекта с большим количеством легаси на модульную архитектуру с разделением UI и бизнес-логики и использованием Redux привело его к созданию новой библиотеки-фреймворка Reflexio. Концептуальный переход от state-менеджмента к так называемому stage-менеджменту, где stage — это более высокоуровневая сущность над state приложения.

Путеводитель по архитектуре фронтенда в 2024

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

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

Pro.Prototypes Workshop

В выступлениях на HolyJS Виктор рассказывал про различные способы работы с механизмом прототипного наследования. И хотя к каждому докладу прилагались примеры, и они до сих пор есть на GitHub, без детального разбора самостоятельно освоить структуру примеров сложно. Кроме того, в докладах практически отсутствует объяснение причин, по которым все так работает и вообще задумано.

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

Вперед в прошлое! Или как подружить чистую архитектуру и RSC

Во время доклада разберем основные детали ментальной модели серверных компонентов. Обсудим реализацию, которую предлагает Vercel в Next.js. Рассмотрим вариант чистой архитектуры, с которой можно начать писать приложения в новой парадигме.

GraphQL для взрослых: как не влипнуть в молодежные фреймворки и внедрить технологию в старый проект

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

Внедрение фреймворка Relay, Apollo или URQL занимает много времени. Например, синхронизация Apollo c Redux звучит как плохая идея. Во время доклада Илья расскажет, как внедрить GraphQL и получить все модные «плюшки» фреймворков: автокомплит, типизацию, кодогенерацию, линтинг и документацию, не сломав все на своем пути.

Фреймворки

Next.js. Как ты вообще рендеришь?

Долгое время мы жили с пониманием, что есть SSR, SSG, CSR. Мы научились их готовить, использовать преимущества и минимизировать недостатки. Появление серверных компонентов в React и внедрение их в Next.js изменили наше привычное понимание о рендеринге. Давайте разберемся, как с этим теперь жить.

Vue.js Renderer: выводим приложение на canvas и не только

Все мы знаем, что такое Document Object Model (DOM). Но что, если мы хотим, чтобы вывод происходил не в HTML, а, например, на canvas или вообще в PDF? На этот и другие вопросы Денис ответит во время доклада.

Что такое рендерер?
Как написать кастомный рендерер? Разберемcя на примере вывода на canvas.
Как это используется самим Vue?

Эволюция микрофронтендов в Тинькофф Обслуживании

Окунемся в историю появления микрофронтендов на Angular & Webpack Module Federation в BigOps, изучим, какие к этому были предпосылки. Разберем внутренности микрофронтендов, изучим их жизненный цикл. Рассмотрим, как их эффективно разрабатывать, тестировать и интегрировать в приложение.

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

Angular Platforms: как запускать приложение где угодно?

Angular — мощная технология для разработки фронтенда веб-приложений. Но ограничивается ли он одним вебом?

Глубоко погрузимся во внутреннее устройство Angular. А именно — в его механизм платформ, позволяющий запускать приложения где угодно.

Рассмотрим встроенные платформы, изучим детали их реализации. А потом напишем свою платформу для запуска Angular-приложения в самом неожиданном месте: прямо в терминале!

Импортозамещаем Svelte, или Как я ускорил Glimmer на 40%

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

Александр пишет Glimmer-VM совместимый рантайм — GXT, который оказался быстрее React в тестах. Он расскажет, что ожидать от нового веб-фреймворка в 2024 году.

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

Запрыгиваем на релизный поезд. Как мы ускоряли путь задач frontend’а на production

В докладе Юрий расскажет:

как внедряли систему merge train (в связке с GitLab CI) в деплой frontend-проектов Mail.ru на production;
с какими сложностями столкнулись, и с какими, возможно, придется столкнуться вам, если решите попробовать;
какие задачи решает технология, и какие технические решения пришлось написать самим (спойлер — кода получилось много);
про результаты — в цифрах и отзывах разработчиков.

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

Применение GSAP и его плагинов в современной веб-разработке: решения и технические преимущества

Cосредоточимся на проблеме, с которой сталкиваются разработчики веб-анимаций: на сложности создания красивых, плавных и одновременно производительных анимаций. Рассмотрим, как GSAP и его разнообразные плагины облегчают эту задачу, предоставляя мощные и гибкие инструменты для создания высокопроизводительных анимаций с простым и понятным кодом.

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

Уникальный 3D-опыт на сайте-музее Самоката. Тонны графики, оптимизаций и WebGL

История создания интерактивного 3D-музея в вебе, написанного с использованием React и Three.js.

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

Доклад рассчитан на фронтенд-разработчиков, заинтересованных в создании пространственного пользовательского опыта с элементами геймификации на WebGL.

А как делить?

Считать или нет, что изучение математики является лишней тратой времени для программиста, — это личное дело каждого. Если вам повезло (или «повезло») с коллегой, который не просто закончил вышку по точным наукам, а применяет ее везде где надо и не надо — понимание его образа мышления поможет прокачать ваши софт-скиллы.

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

В хардкорной части присутствует инстанцирование мешей, перемножение матриц сцены, смешивание скелетных анимаций — будет весело!

Мягкая сила

HTML5-игры. Можно ли заработать в 2024?

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

HTML5-играм более десяти лет. Многие недооценивают их, однако доля рынка — это миллиарды долларов.

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

Что мы делаем в тени, или Зачем дизайнер интерфейсов в биотехе

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

Passing Your Project Interviews and Presales to the West

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

API

Использование протоколов HTTP/3 и UDP для разработки онлайн-игр на клиенте и сервере

Онлайн-игры в реальном времени, быстрые шутеры и низкая задержка. Это удел хардкорных игр для нативных платформ? Да, но с приходом UDP, QUIC и HTTP/3, да еще и в удобной форме, то же самое теперь доступно и в браузере.
Обсудим, какие протоколы передачи данных по сети лучше подходят для онлайн-игр и любых динамических приложений в контексте браузеров. Какие есть ограничения и нюансы у браузеров в сравнении с нативными платформами и почему. Андрей расскажет, в чем разница между протоколами TCP и UDP, а также покажет демо и бенчмарк онлайн-игры с обоими протоколами.

Почему не все так просто с GraphQL

Роман расскажет об опыте миграции с REST на GraphQL в сервисах Яндекс Недвижимость и Яндекс Аренда. По шагам разберет, как в Яндексе работают с GraphQL-схемой, почему написали свой GraphQL-клиент, как изменились процессы разработки после перехода на GraphQL. Он поделится, с какими трудностями столкнулись при интеграции в толстом клиенте.

Доклад раскроет фундаментальную проблему, которая может возникнуть на BFF, и как ее можно решить.

По ту сторону WebView

Супераппы уже давно закрепились на глобальном рынке e-commerce. Они очень полезны для экосистемного бизнеса, этот тренд сохранится в ближайшие годы. Есть множество способов постройки супераппа, один из них — использование WebView. Максиму повезло создать интеграцию между двумя сервисами в рамках экосистемы Uzum, используя WebView. Он расскажет об особенностях WebView в своем докладе: как настроить авторизацию, как дебажить, как писать автотесты и т. д.

Бэкенд

Bun vs Node: что все-таки быстрее?

И на сайте bun.sh и на просторах интернета есть много сравнений скорости работы Bun со всем чем можно. Методики — разнообразные, в результатах — недоговорки и противоречия. Но нельзя принимать все на веру и бездумно повторять «Bun быстрее всех в десять раз!». Используя свой опыт измерения и оптимизации производительности приложений, Виктор проанализирует опубликованные результаты, добавит свои бенчмарки и расскажет об этом простым языком.

CQRS в NestJS

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

Другое

Криптография, блокчейн и немного слез — что делать в Web3 с точки зрения фронтенда

Вот о чем расскажет Виталий:
Как блокчейн работает изнутри, криптография и немного теории. Развенчание Web3 как этапа развития Web и признание его уникальности в применении.
Что вообще может делать фронтенд для блокчейна, пути развития фронтенда в Web3.
Пути децентрализации приложений и точки контакта с Web3.

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

Заключение

С программой всё понятно, а в каком формате всё пройдёт? 15 апреля будет сугубо онлайновый день, а вот про 26–27 апреля выбирайте, что вам больше подходит: лично прийти на московскую конференционную площадку или подключиться к онлайн-трансляции.

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

Остальные подробности и билеты — на сайте конференции. Увидимся в апреле, вживую и онлайн!

© Habrahabr.ru