До HolyJS осталось меньше месяца — пора поведать Хабру, какие именно доклады там будут. Под катом их описания, а тут отметим пару вещей:
В этот раз шире обычного раскрыта тема производительности. Когда React.memo не ускорит, а замедлит? Почему Solid.JS такой быстрый? Что нужно знать JS-разработчику в современном многоядерном мире?
Помимо докладов, в программе есть несколько воркшопов, так что будет не только теория со слайдами, но и практическая деятельность.
Описания мы разделили по тематическим блокам, но это деление не строгое, некоторые доклады можно причислить к разным блокам сразу.
Воркшопы
GlimmerX — declarative UI & derived reactivity in 27kb*
Александр Канунников
EPAM
Вокруг Ember и Glimmer набралось много мифов: что он слишком тяжелый, медленный, устарел, не может решить современных задач бизнеса. Однако Apple, Square, LinkedIn, Intercom в 2021 запускают новые продукты, написанные на Ember.
Александр покажет, может ли на практике эта система предоставить что-то простое, сравнимое с React, Vue, Svelte для современного фронтенд-разработчика. Мы узнаем:
как создать новый проект с нуля;
что такое GlimmerX, как он связан с Glimmer VM;
особенности декларативных компонентов;
lisp-подобный синтаксис hbs.
А также познакомимся с реактивностью, основанной на производном состоянии, поработаем с асинхронностью, сетью и небольшим количеством стилей. Ну и постараемся уложиться в 27kb gzip'нутого бандла.
После воркшопа у вас будет начальное представление о работе с GlimmerX, базовых принципах реактивности и специфике написания бизнес-логики, понимание сценариев, где такой подход оправдан и применим. Полученных знаний хватит, чтобы ближе познакомиться с четвертой версией Ember.js.
Пишем браузерное расширение с нуля
Семён Левенсон
Яндекс
Браузерные расширения набирают популярность (например, этой осенью приходят на iOS и iPadOS). Расширения — это возможность покрыть потребности ваших пользователей за рамками вашего приложения (интеграции, дополнительные функции и т.д.).
На воркшопе, помимо практического создания конкретного расширения, разберем:
из чего состоят браузерные расширения;
какие особенности и ограничения есть;
какие есть юзкейсы;
какие есть площадки и как в них появиться;
какие есть утилиты для разработки.
Statoscope. Курс интенсивной терапии для вашего бандла (доклад + воркшоп)
Сергей Мелюков
Яндекс
Statoscope — это инструмент для анализа webpack-бандлов. А Сергей — его автор и мейнтейнер. Statoscope зародился в далеком 2016 году как эксперимент, а теперь это полноценный тулкит для просмотра, анализа и валидации сборки. Процесс разработки Statoscope интересен тем, что на данный момент аналогичного по функциональности инструмента просто нет и подсмотреть проверенное решение просто негде. Поэтому множество архитектурных решений просто выбрасывались на помойку и придумывались заново.
Выступление будет из двух частей. В докладе речь пойдет об инструменте, примерах использования, архитектурных решения внутри Statoscope, непростом процессе его разработки и о грандиозных планах на него. А в рамках дополнительного воркшопа Сергей покажет, как Statoscope работает изнутри, как создать свой собственный отчет, как написать свое правило для валидации, а также ответит на все вопросы зрителей.
Фреймворки
Ryan Carniato
eBay
Доклад о UI-фреймворке SolidJS от его создателя. У Solid удивительная производительность: он быстрее Vue, Svelte и даже Inferno. А еще в нем нет «лишнего» VDOM. Также он имеет React-подобный синтаксис.
В этом докладе Райан покажет истоки SolidJS, его настоящее и будущее, чтобы участники поняли его уникальную модель исполнения и философию. Станет понятно, как Solid достигает своей производительности благодаря гранулированным обновлениям и подходу с низким уровнем абстракции. А также рассмотрим, как начать использовать фреймворк в своих проектах. SolidJS молод, но на нем уже можно строить полноценные приложения, а Райан покажет, как это делать.
Докручиваем ApolloClient до энтерпрайзной разработки
Павел Черторогов
Ps.kz
Павел уже несколько раз выступал на HolyJS, и зрительские оценки всегда оказывались отличными. Как правило, его доклады не обходятся без названия GraphQL — на этой теме он собаку съел, рассмотрев её уже с самых разных ракурсов.
В этот раз в докладе он поговорит о том, как использовать ApolloClient 3 с кодогенерацией, со статическим анализом и минимум бойлерплейта. Покажет возможности быстрого поиска ошибок в постоянно изменяющихся требованиях.
Стейт-менеджер сына маминой подруги
Игорь Камышев
Aviasales
Большие современные фронтенд-приложения сильно зависят от стейт-менеджеров. Почти год назад в Aviasales приняли решение переехать с Redux+RxJS на Effector. Игорь расскажет, почему это произошло, с какими проблемами столкнулись и каким командам подойдет этот путь.
В конце посмотрим, как изменилась жизнь фронтендеров за время использования Effector и разберем главную киллер-фичу этого стейт-менеджера.
Web development best practices in 2021: What the data tells us
Laurie Voss
Netlify
Веб-разработчики порой «варятся в своем котле». Не устарели ли наши инструменты и методы? Или, наоборот, это лучшие практики индустрии? Делаем ли мы что-то передовое, чего не делает никто другой? Как работают другие, чем они довольны, а что не нравится? Как все это узнать?
Один из способов — опросить тысячи разработчиков, что и сделала команда Лори. Опираясь на полученные данные, он представит картину веб-разработки в 2021 году: от языков и фреймворков до того, как пандемия изменила вашу рабочую жизнь.
Case-study
Доска в клеточку. Рисуем математику в вебе
Антон Хайновский
Skyeng
При преподавании математики нередко нужно писать. Как это сделать удобным в онлайн-образовании? В Skyeng реализовали графический редактор в браузере со свободным письмом пером — для рисования графиков, формул и геометрических фигур. Антон поделится тем, как команда спустилась на уровень железа, чтобы добавить еще больше интерактивности.
В докладе будет:
Выбор библиотеки для создания редактора, SVG или CANVAS?
Как прикрутить режим коллаборации, когда преподаватель и ученик работают совместно.
Создание собственных инструментов и фигур.
Как подружить браузер с USB-планшетом для рисования: комплект «железа» из ручки, которая пишет обычными чернилами, и планшета, на который кладется обычный листочек в клеточку: пишем ручкой, и все отображается в браузере.
Добавление альтернативной математической библиотеки для быстрого запуска новых фич.
Доклад будет интересен middle/senior frontend разработчикам, а также тем, кто интересуется онлайн-образованием, желающим найти практическое применение нераспространённым браузерным возможностям.
Считаете, что TDD не работает? У меня для вас плохие новости
Дмитрий Коваленко
Lightsource.ai
Все говорят про последователей TDD, но никто их в глаза не видел? Вот он — Дима!
А что, если TDD — это совсем не про то, что тесты нужно писать до кода? Хотя формально именно про это.
Но в этом докладе Дима расскажет про свой подход к написанию тестов в стиле TDD, который экономит ему время и не имеет ничего общего с юнит-тестами.
Тема TDD часто провоцирует холивары, и тут у кого-то во время доклада тоже может возникнуть желание возразить — ну, в таком случае после доклада может получиться не просто секция «ответы на вопросы», а увлекательная дискуссия.
Звонки на 2000+ участников, или Что умеет WebRTC
Вадим Горбачев
ВКонтакте
WebRTC сейчас главная технология для видеозвонков, но хорошо ли она масштабируется? Оказывается, при звонках на 2000+ участников возникают сложности и нужно придумывать ухищрения по целому ряду причин.
Вадим об этом знает как никто другой: он занимался реализацией таких звонков в VK, а также пишет сейчас в магистратуре диплом по WebRTC.
Вводная часть его доклада будет посвящена основам (что такое WebRTC, сигналинг, кадры в видео, способы передачи стримов на клиента). Основная часть — тем сложностям, с которыми команда за год столкнулась в VK-звонках, и как их решили.
Расширения для браузера: Угроза или опасность?
Али Гасымов
Disco
Али сделал больше 20 браузерных расширений, одно из которых может похвастаться 15-миллионной месячной аудиторией. И в докладе он комплексно рассмотрит вопрос безопасности расширений.
Сначала разберём, как создать расширение и что они могут делать. Также на реальных примерах рассмотрим, что расширения делают чаще всего. На основе полученных знаний придумаем 3 способа украсть логин и пароль ВКонтакте, и разберём плюсы и минусы каждого способа. В конце узнаем, как обезопасить свои данные от вредоносных расширений.
Разбор полетов: Microsoft To-Do
Алексей Мигуцкий
Microsoft/GitHub
Алексей расскажет про практический кейс того, создавался архитектурный процесс для Microsoft To-Do. Он участвовал в проекте с первого месяца его написания и до передачи проекта на поддержку и развитие в индийский офис Microsoft.
Будет упор на практические аспекты: что делали, почему делали, бизнес-контекст, конкретные практики. А также чуть-чуть вводной теории (что такое архитектура) и ретроспектива (кто виноват и почему).
Перформанс
Фронтендер и его 10 тысяч кроликов
Александр Коротаев
ВКонтакте
Слышали о «проблеме 10K» в ИТ? Это когда количество сущностей, которые надо обсчитывать, вырастает до многих тысяч, что начинает оказывать серьезное влияние на производительность.
Это применимо и к фронтенду, но причем тут кролики? Они взяты из геймдева: чтобы показать производительность приложения, на экран выбегают тысячи ушастых персонажей, и в идеале ничего не тормозит.
Зачем этот доклад тем, кто делает формочки и таблички? Если задуматься, то ячейки таблиц, карточки с постами и прочие элементы — это и есть наши «кролики». Когда их становится очень много, приходится менять подходы. И об этом расскажет Александр — человек, которого многие хабрачитатели могут помнить по докладу «"Герои меча и магии" в браузере: долго, сложно и невыносимо интересно».
React.memo — сплетни/исходники/грань полезности
Александр Бальцевич
APC
Большинство разработчиков знают React.memo на уровне «эта штука для улучшения перфоманса», но не ответят на вопросы вроде «где грань, за которой memo уже не улучшает перфоманс, а замедляет?» Александр полез глубже.
Из этой сессии вы узнаете отличия React.memo от React.useMemo на примере исходников или чем отличается хук от хока. Доклад приоткроет завесу исходников, познакомит с тем, что под капотом memo делится на memo и simple memo. Вы также станете свидетелями расследования одной любопытной истории: некоторые люди утверждают, что React.memo станет дефолтным поведением компонента, и приводят убедительные аргументы. Далее рассмотрим трюки от Дена Абрамова — как не используя memo можно ускорить перфоманс приложения. А в конце создадим старую добрую блоксхему, которая подскажет, нужно ли вам сейчас использовать React.memo.
Node.js
OpenID Connect и OAuth2.0 на nextjs
Михаил Вовренчук
Почтатех
Все чаще крупным компаниям необходимо предоставлять авторизованный доступ пользователям с различного спектра устройств, базы пользователей растут, а технологии и стандарты становятся сложней с каждым годом. Чтобы разобраться в текущем зоопарке технологий, Михаил расскажет про OAuth2 и три спецификации, которые он брал для реализации SSO-клиента для NextJS. Михаил покажет стандартные проблемы и особенности шифрования пользовательских данных и хранения их в сессии приложении, как на бэкенде, так и на фронтенде.
Опыт разработки OpenID Connect (как серверной, так и клиентской части) дал Михаилу опыт и видение, которым он готов поделиться.
Тема OAuth всплывает часто, и так же часто люди не знают, как ее готовить. Спикер постарается раскрыть этот момент так, чтобы в следующий раз вы точно сделали как нужно.
MoleculerJS: высоконагруженные, отказоустойчивые и распределенные микросервисы
Иван Журавлев
MoleculerJS
Поговорим о разнице между сервисами и микросервисами, какие бывают транспорты, какие собирать метрики и как трассировать распределенные запросы. Что необходимо в фреймворке микросервисов, чтобы покрыть основные задачи разработки. Какие бывают техники обеспечения отказоустойчивости в микросервисах и чем они отличаются. Какие особенности работы с базами данных в микросервисной архитектуре приложений, что такое SAGA и как работают распределенные транзакции. Возможно ли сделать двухстороннюю интеграцию микросервисов с внешними системами. И чем так полезны события с гарантированной доставкой. Обо всем этом вы сможете узнать на примере фреймворка Moleculer.
Node.js: Меньше сложности, больше надежности
Тимур Шамсединов
Metarhia
Давайте брать от Node то, что он даёт в 2021-м, а не использовать его так, как будто сейчас 2013-й. Зачастую разработчики недостаточно знают встроенные возможности платформы, которые сделаны хорошо, и используют внешние зависимости, которые устарели и написаны гораздо хуже. Похоже на вас? Давайте посмотрим на fs, v8, vm, child_process, worker_threads, async_hooks, crypto, undici и забудем про axios, express, lodash, async.js, bcrypt, argon2, mkdirp, bluebird, socket.io, и др.
Вы не думаете про безопасность и надежность? Давайте узнаем про роутинг запросов без ReDOS-уязвимостей и Path traversal, изоляцию контекстов исполнения запросов друг от друга. Вспомним про XSS, SQL инъекции, CSRF, поговорим про обработку ошибок на колбэках и промисах, которые вы часто игнорируете. Обсудим утечки памяти и других ресурсов, race condition и dead locks, которые у вас на каждом шагу в однопоточном JavaScript, а вы боретесь с ними рестартом процесса, не догадываясь, что происходит.
Вы используете навязанные вам архитектурные и структурные антипаттерны, такие как middleware, shared/global state, смешивание слоев абстракций, нарушение закона Деметры и принципов DDD? У вас контексты запросов req и res проникают в код предметной области и код, работающий с базой данных, потому что нужно помнить про GRASP и SOLID, применять GoF и чистую архитектуру? Давайте писать framework agnostic-код, вытесним фреймворки и зависимости в детали реализации.
Языки
Multicore JavaScript: past, present and future
Ujjwal Sharma
Igalia
Поскольку JavaScript-приложения становятся все сложнее, перформанс волнует многих. Тем временем компьютеры продолжают развиваться, и при этом процессоры развиваются с помощью многоядерности и big.LITTLE, а не тактовой частоты.
Где JavaScript находится в этом многоядерном мире и как он может адаптироваться? Какую роль в этом сыграет WebAssembly? Каковы текущие инструменты и методы, которые разработчики могут использовать для создания производительных JavaScript-приложений, и что ждет их в будущем? Вот те несколько вопросов, на которые мы ответим в ходе этой презентации.
Множественное наследование на JavaScript
Виктор Вершанский
DataArt
Тема будет рассмотрена на примере типичной бэкендовой задачи по трансформации данных. Для обработки запроса мы в итоге создадим объект, позволяющий одновременно оперировать более чем одной сущностью в цепочке прототипов. При этом Виктор также покажет:
Краткий обзор механизмов прототипного наследования
Как работает механизм множественного наследования с использованием Proxy
Механизмы определения интерфейсов доступа к полям и методам делегированных сущностей.
Алексей Березин
Joyn GmbH
Самими по себе типами в TypeScript никого не удивить, но насколько мощный это инструмент для работы с ними? Алексей Березин рассмотрит это на конкретных примерах.
Для понимания работы системы типов в TypeScript существует специальный проект type-challenges с задачками разного уровня сложности. И в докладе будут использованы задачки оттуда — причём уровня hard.
IPFS — InterPlanetary File System with Node.js
Romulo Cintra
Igalia
«Межпланетная Файловая Система» — звучит как что-то из научной фантастики, но это вполне реальный протокол для распределённого хранения файлов в духе BitTorrent. Изменит ли он кардинально использование нами файлов в интернете? Сейчас невозможно сказать с полной уверенностью. Зато уже сейчас возможно узнать о его основах с практическими примерами на NodeJS в докладе от контрибьютора TC39.
The 2021 edition of dealing with files on the Web
Thomas Steiner
Веб получает всё больше возможностей, ранее доступных только нативным приложениям, благодаря различным инициативам вроде Project Fugu. В частности, работа с файлами в вебе сейчас и 10 лет назад — небо и земля. Теперь мы можем делать почти что нативные приложения, работая с файловой системой прямо из браузера. Томас (активно участвующий в том же Project Fugu) познакомит вас с новыми Web API и расскажет, как такие приложения создавать.
Элемент ввода файла и атрибут download на элементах якоря раньше были основным способом работы с файлами в Интернете. Теперь это не так! Томас покажет современные способы работы с файлами в браузере и то, как они интегрируются с буфером обмена, перетаскиванием и проводником файлов вашей операционной системы. Вы также узнаете, что не все файлы созданы одинаковыми. Тут будет предварительно записанная сессия лайвкодинга — так что не будет ни слайдов, ни багов; только чистое развлечение!
Сергей Головин
CSSSR
Сергей долго исследовал применимость формальных методов и Model Checking в прикладной разработке — и понял, что хоть использование уже существующих инструментов (например Alloy и TLA+) вполне может помочь в некоторых случаях, всё равно оно будет затруднено из-за разделения кодовой базы самого инструмента и разрабатываемой системы. В перспективе это может усложнить их поддержку в будущем. А выяснив, что из более или менее прикладных языков, решающих эту проблему, есть разве что F*, используемый Microsoft для разработки низкоуровневых вещей, спикер начал искать альтернативы. И нашел RacketScript, который вполне может решить эту задачу в будущем. Именно поэтому Сергей присоединился к его разработке.
О том, что за формальные методы и Model Checking такие, и как они вообще могут быть применены во фронтенд-разработке, а также при чём тут Racket и RacketScript, он расскажет в своем докладе.
Масштабирование
Как готовить production с Webpack 5 module federation
Вадим Малютин
Grid Dynamics
В интернетах самым недосказанным является production-разработка микрофронтендов с webpack 5.
На проекте нужно было разбить монолитное приложение на микросервисы и микрофронтенды. Когда команда приступила к написанию кода, поняла, что информации о разработке и релизе реальных приложений с webpack 5 очень мало, и в основном речь о пет-проектах. В то же время в статьях и роликах можно найти множество хвалебных отзывов и восторженных комментариев разработчиков насчет революционной технологии. А вот как настраивать Nginx/Docker/Kubermetes, CI/CD, организовывать шаринг библиотек, react context-ов, и т. п. можно узнать только в бою.
Вадим расскажет про свой путь в продакшен и про все подводные камни, с которыми столкнулась команда.
Диана Суворова
Uber
Масштаб Uber: ~3K+ микросервисов, десятки фронтенд-команд и сотни фронтенд-приложений. В докладе будет подробно рассказано о том, как Uber обеспечивает безопасную, совместную среду для фронтенд-инженеров:
Jazelle: инкрементные, кэшируемые сборки для больших монорепозиториев JavaScript https://github.com/uber-web/jazelle.
И как он поддерживает использование компонентов react-graphql-datarich.
Прочее
Никита Дубко
Яндекс
Помните картинку про троллейбус из буханки? Так вот: можно делать ещё и картинки из музыки, закодировав звуки как изображение! И Никита покажет реализацию в браузере «музыкального проигрывателя для картинок». Существуют даже практические ответы на вопрос «зачем» (например, для стеганографии). Но, конечно, такие доклады обычно смотрят не для решения практической проблемы, а просто потому что это интересно: позволяет узнать больше одновременно и о звуке, и об изображениях.
Ethereum & DeFi для JS-разработчика
Артем Воробьев
1inch Network
Существует дивный мир Web3, Ethereum и децентрализованных финансов, наполненный JS/TS-инструментами. В этом мире разработчик может создать и запустить проект на хакатоне — именно так был создан 1inch два года назад. Артем расскажет, что такое децентрализованное приложение и что нужно знать фронтенд-разработчику, чтобы его создать. Цель — показать, как применять на практике JS/TS-инструменты для создания dApp (decentralized application).
Стек: Angular/React, web3.js and/or Etheres.
Заключение
Теперь, когда у вас есть почти вся информация о программе, принять решение становится проще. Но напомним, что смотреть доклады — это еще не все: на конференции вас ждут дискуссии с каждым спикером после доклада, чаты, партнерские активности и так далее.
Еще больше информации и билеты на сайте.