О чём JS-разработчикам поведают на HolyJS 2021 Moscow15.10.2021 20:01

До HolyJS осталось меньше месяца — пора поведать Хабру, какие именно доклады там будут. Под катом их описания, а тут отметим пару вещей:

1. В этот раз шире обычного раскрыта тема производительности. Когда React.memo не ускорит, а замедлит? Почему Solid.JS такой быстрый? Что нужно знать JS-разработчику в современном многоядерном мире?

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

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

Воркшопы

GlimmerX — declarative UI & derived reactivity in 27kb*

Вокруг 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 работает изнутри, как создать свой собственный отчет, как написать свое правило для валидации, а также ответит на все вопросы зрителей.

Фреймворки

Getting started with SolidJS

Доклад о UI-фреймворке SolidJS от его создателя. У Solid удивительная производительность: он быстрее Vue, Svelte и даже Inferno. А еще в нем нет «лишнего» VDOM. Также он имеет React-подобный синтаксис.

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

Докручиваем ApolloClient до энтерпрайзной разработки

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

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

Стейт-менеджер сына маминой подруги

Большие современные фронтенд-приложения сильно зависят от стейт-менеджеров. Почти год назад в Aviasales приняли решение переехать с Redux+RxJS на Effector. Игорь расскажет, почему это произошло, с какими проблемами столкнулись и каким командам подойдет этот путь.

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

Web development best practices in 2021: What the data tells us

Веб-разработчики порой «варятся в своем котле». Не устарели ли наши инструменты и методы? Или, наоборот, это лучшие практики индустрии? Делаем ли мы что-то передовое, чего не делает никто другой? Как работают другие, чем они довольны, а что не нравится? Как все это узнать?

Один из способов — опросить тысячи разработчиков, что и сделала команда Лори. Опираясь на полученные данные, он представит картину веб-разработки в 2021 году: от языков и фреймворков до того, как пандемия изменила вашу рабочую жизнь.

Case-study

 Доска в клеточку. Рисуем математику в вебе

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

В докладе будет:

• Выбор библиотеки для создания редактора, SVG или CANVAS?

• Как прикрутить режим коллаборации, когда преподаватель и ученик работают совместно.

• Создание собственных инструментов и фигур.

• Как подружить браузер с USB-планшетом для рисования: комплект «железа» из ручки, которая пишет обычными чернилами, и планшета, на который кладется обычный листочек в клеточку: пишем ручкой, и все отображается в браузере.

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

Доклад будет интересен middle/senior frontend разработчикам, а также тем, кто интересуется онлайн-образованием, желающим найти практическое применение нераспространённым браузерным возможностям.

Считаете, что TDD не работает? У меня для вас плохие новости

Все говорят про последователей TDD, но никто их в глаза не видел? Вот он — Дима!

А что, если TDD — это совсем не про то, что тесты нужно писать до кода? Хотя формально именно про это.

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

Тема TDD часто провоцирует холивары, и тут у кого-то во время доклада тоже может возникнуть желание возразить — ну, в таком случае после доклада может получиться не просто секция «ответы на вопросы», а увлекательная дискуссия.

Звонки на 2000+ участников, или Что умеет WebRTC

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

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

Вводная часть его доклада будет посвящена основам (что такое WebRTC, сигналинг, кадры в видео, способы передачи стримов на клиента). Основная часть — тем сложностям, с которыми команда за год столкнулась в VK-звонках, и как их решили. 

Расширения для браузера: Угроза или опасность?

Али сделал больше 20 браузерных расширений, одно из которых может похвастаться 15-миллионной месячной аудиторией. И в докладе он комплексно  рассмотрит вопрос безопасности расширений. 

Сначала разберём, как создать расширение и что они могут делать. Также на реальных примерах рассмотрим, что расширения делают чаще всего. На основе полученных знаний придумаем 3 способа украсть логин и пароль ВКонтакте, и разберём плюсы и минусы каждого способа. В конце узнаем, как обезопасить свои данные от вредоносных расширений.

Разбор полетов: Microsoft To-Do

Алексей расскажет про практический кейс того, создавался архитектурный процесс для Microsoft To-Do. Он участвовал в проекте с первого месяца его написания и до передачи проекта на поддержку и развитие в индийский офис Microsoft. 

Будет упор на практические аспекты: что делали, почему делали, бизнес-контекст, конкретные практики. А также чуть-чуть вводной теории (что такое архитектура) и ретроспектива (кто виноват и почему).

Перформанс

Фронтендер и его 10 тысяч кроликов

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

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

Зачем этот доклад тем, кто делает формочки и таблички? Если задуматься, то ячейки таблиц, карточки с постами и прочие элементы — это и есть наши «кролики». Когда их становится очень много, приходится менять подходы. И об этом расскажет Александр — человек, которого многие хабрачитатели могут помнить по докладу «Герои меча и магии» в браузере: долго, сложно и невыносимо интересно».

React.memo — сплетни/исходники/грань полезности

Большинство разработчиков знают React.memo на уровне «эта штука для улучшения перфоманса», но не ответят на вопросы вроде «где грань, за которой memo уже не улучшает перфоманс, а замедляет?» Александр полез глубже.

Из этой сессии вы узнаете отличия React.memo от React.useMemo на примере исходников или чем отличается хук от хока. Доклад приоткроет завесу исходников, познакомит с тем, что под капотом memo делится на memo и simple memo. Вы также станете свидетелями расследования одной любопытной истории: некоторые люди утверждают, что React.memo станет дефолтным поведением компонента, и приводят убедительные аргументы. Далее рассмотрим трюки от Дена Абрамова — как не используя memo можно ускорить перфоманс приложения. А в конце создадим старую добрую блоксхему, которая подскажет, нужно ли вам сейчас использовать React.memo.

OpenID Connect и OAuth2.0 на nextjs

 Все чаще крупным компаниям необходимо предоставлять авторизованный доступ пользователям с различного спектра устройств, базы пользователей растут, а технологии и стандарты становятся сложней с каждым годом. Чтобы разобраться в текущем зоопарке технологий, Михаил расскажет про OAuth2 и три спецификации, которые он брал для реализации SSO-клиента для Next.js. Михаил покажет стандартные проблемы и особенности шифрования пользовательских данных и хранения их в сессии приложении, как на бэкенде, так и на фронтенде.

Опыт разработки OpenID Connect (как серверной, так и клиентской части) дал Михаилу опыт и видение, которым он готов поделиться.            

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

MoleculerJS: высоконагруженные, отказоустойчивые и распределенные микросервисы

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

Node.js: Меньше сложности, больше надежности

Давайте брать от 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

Поскольку JavaScript-приложения становятся все сложнее, перформанс волнует многих. Тем временем компьютеры продолжают развиваться, и при этом процессоры развиваются с помощью многоядерности и big.LITTLE, а не тактовой частоты. 

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

Множественное наследование на JavaScript

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

1. Краткий обзор механизмов прототипного наследования

2. Как работает механизм множественного наследования с использованием Proxy

3. Механизмы определения интерфейсов доступа к полям и методам делегированных сущностей. 

Advanced types в TypeScript

 Самими по себе типами в TypeScript никого не удивить, но насколько мощный это инструмент для работы с ними? Алексей Березин рассмотрит это на конкретных примерах. 

Для понимания работы системы типов в TypeScript существует специальный проект type-challenges с задачками разного уровня сложности. И в докладе будут использованы задачки оттуда — причём уровня hard. 

IPFS — InterPlanetary File System with Node.js

«Межпланетная Файловая Система» — звучит как что-то из научной фантастики, но это вполне реальный протокол для распределённого хранения файлов в духе BitTorrent. Изменит ли он кардинально использование нами файлов в интернете? Сейчас невозможно сказать с полной уверенностью. Зато уже сейчас возможно узнать о его основах с практическими примерами на NodeJS в докладе от контрибьютора TC39. 

The 2021 edition of dealing with files on the Web

Веб получает всё больше возможностей, ранее доступных только нативным приложениям, благодаря различным инициативам вроде Project Fugu. В частности, работа с файлами в вебе сейчас и 10 лет назад — небо и земля. Теперь мы можем делать почти что нативные приложения, работая с файловой системой прямо из браузера. Томас (активно участвующий в том же Project Fugu) познакомит вас с новыми Web API и расскажет, как такие приложения создавать.

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

RacketScript — язык будущего?

Сергей долго исследовал применимость формальных методов и Model Checking в прикладной разработке — и понял, что хоть использование уже существующих инструментов (например Alloy и TLA+) вполне может помочь в некоторых случаях, всё равно оно будет затруднено из-за разделения кодовой базы самого инструмента и разрабатываемой системы. В перспективе это может усложнить их поддержку в будущем. А выяснив, что из более или менее прикладных языков, решающих эту проблему, есть разве что F*, используемый Microsoft для разработки низкоуровневых вещей, спикер начал искать альтернативы. И нашел RacketScript, который вполне может решить эту задачу в будущем. Именно поэтому Сергей присоединился к его разработке.

О том, что за формальные методы и Model Checking такие, и как они вообще могут быть применены во фронтенд-разработке, а также при чём тут Racket и RacketScript, он расскажет в своем докладе. 

Масштабирование

Как готовить production с Webpack 5 module federation

В интернетах самым недосказанным является production-разработка микрофронтендов с webpack 5.

На проекте нужно было разбить монолитное приложение на микросервисы и микрофронтенды. Когда команда приступила к написанию кода, поняла, что информации о разработке и релизе реальных приложений с webpack 5 очень мало, и в основном речь о пет-проектах. В то же время в статьях и роликах можно найти множество хвалебных отзывов и восторженных комментариев разработчиков насчет революционной технологии. А вот как настраивать Nginx/Docker/Kubermetes, CI/CD, организовывать шаринг библиотек, react context-ов, и т. п. можно узнать только в бою.

Вадим расскажет про свой путь в продакшен и про все подводные камни, с которыми столкнулась команда. 

Как сделать так, чтобы фронтенд-PRs завершались быстрее с помощью Bazel, Monorepo, GraphQL, или совместная, безопасная и быстрая разработка фронтенда в масштабах Uber

Масштаб Uber: ~3K+ микросервисов, десятки фронтенд-команд и сотни фронтенд-приложений. В докладе будет подробно рассказано о том, как Uber обеспечивает безопасную, совместную среду для фронтенд-инженеров:

• Jazelle: инкрементные, кэшируемые сборки для больших монорепозиториев JavaScript https://github.com/uber-web/jazelle.

• И как он поддерживает использование компонентов react-graphql-datarich.

Прочее

Картинки со звуком

Помните картинку про троллейбус из буханки? Так вот: можно делать ещё и картинки из музыки, закодировав звуки как изображение! И Никита покажет реализацию в браузере «музыкального проигрывателя для картинок». Существуют даже практические ответы на вопрос «зачем» (например, для стеганографии). Но, конечно, такие доклады обычно смотрят не для решения практической проблемы, а просто потому что это интересно: позволяет узнать больше одновременно и о звуке, и об изображениях. 

Ethereum & DeFi для JS-разработчика

Существует дивный мир Web3, Ethereum и децентрализованных финансов, наполненный JS/TS-инструментами. В этом мире разработчик может создать и запустить проект на хакатоне — именно так был создан 1inch два года назад. Артем расскажет, что такое децентрализованное приложение и что нужно знать фронтенд-разработчику, чтобы его создать. Цель — показать, как применять на практике JS/TS-инструменты для создания dApp (decentralized application).

Стек: Angular/React, web3.js and/or Etheres. 

Заключение

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

Еще больше информации и билеты на сайте.

© Habrahabr.ru