FrontendConf

Доклады

Архитектура (7)

Архитектурный паттерн «Точки расширения»: настоящая node_modulность

Владимир Захаров

Фронтенд-карьер

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

Ищем точки расширения, дописываем react, расставляем бекдоры и пушим в продакшн.

Доклад принят в программу конференции

ASEPTIC: методология построения слоеной архитектуры фронтенда по канонам SOLID

Архитектуры / другое

Как разрабатывать масштабируемые фронты с низким порогом входа? Детальный гайд разделения на слои, которые дадут прикурить FSD :)

Доклад принят в программу конференции

Архитектура безопасной авторизации на примере протоколов OAuth и OIDC

Иван Поддубный

Вебпрактик

- Мы поговорим об основных подходах к аутентификации в SPA-приложениях
- Разберем том как грамотно построить архитектуру авторизации в сервисах, особенно если их несколько
- Разберем протоколы oAuth и OIDC, сценарии их работы
- Как наилучшим и безопасным образом работать с JWT токенами: на клиенте, на уровне BFF, или вынести в отдельный слой

Доклад принят в программу конференции

Расширяемый код

Роман Хаимов

Рексофт

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

Доклад принят в программу конференции

Микрофронты, макрофронты, фронты. Разумный подход к выбору

Когда говоришь слово микрофронты, то все одобрительно кивают головой. Это так модно и стильно. И, вроде, даже понятно.

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

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

Доклад будет полезен разработчикам любого уровня для знакомства и систематизации информации по данной теме

Доклад принят в программу конференции

Архитектура для фронтенд приложения любого размера без FSD и накладных расходов

Пакетные менеджеры и организация модульности
Микросервисы, SOA
Архитектурные паттерны
React, Vue, Angular и другие JavaScript-фреймворки

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

За последние пару лет, появился FSD и культ микрофронтов. Однако в их применении присутствуют свои недостатки, такие как высокий порог вхождения и неприменимость к проектам на ранних этапах развития...

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

Уже два года применяю в своей команде такой подход и пришло время поделится опытом с обществом.

Доклад принят в программу конференции

Аудит фронтенда: от чувства «ничего не понимаю» к объективным метрикам

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

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

Доклад будет полезен, если:
- Вы замечаете проблемы на своём проекте: пользователи жалуются на медленную загрузку приложения, внесение изменений занимает много времени или растёт частота багов;
- Бизнес планирует «квантовый скачок»: готовится расширять команду и наращивать темпы, делать редизайн или добавлять объемные фичи;
- Вы ведете разработку на аутсорсе или перенимаете проект у другой команды.

Доклад принят в программу конференции

Перспективы (5)

Хроники Valibot: Сага о безупречных данных в мире JS

Фронтенд / другое
Производительность и мониторинг фронтенда
TypeScript

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

Осветим три основных кейса использования Valibot:

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

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

Доклад принят в программу конференции

Элемент dialog и атрибут popover. Инструкции к применению

HTML и CSS

В интерфейсах часто встречаются элементы, которые появляются поверх основного контента страницы. Именуются они в различных дизайн-системах по-разному: модалка, попап, всплывашка, тултип и т.д.

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

Доклад принят в программу конференции

Можно ли ИИ научить верстке?

Кодогенерация

Бурное развитие ML в последнее время помогает упростить разработку за счет того, что с его помощью можно автоматизировать многие рутинные задачи.
Часто от фронт-инженеров можно услышать, что верстка им не интересна, но заниматься ей все-таки приходится. Почему не объединить ML и верстку для упрощения разработки?
На самом деле эта идея не нова, и уже есть исследования, которые проводились с целью создать такой инструмент. Цель доклада – познакомить слушателей с тем, что уже есть, и рассказать, как оно работает и какие перспективы развития есть в будущем.

Доклад принят в программу конференции

PWA — до чего дошел progressive

Мобильные приложения без native (PWA, AMP)
Даниил Трофимов

Купер (ex СберМаркет)

Поговорим об актуальных Web API доступных для использования в рамках PWA (Service Worker, Push и Notifications, API для работы с "железом" и т.д.) и о том, насколько они кроссбраузерны и готовы к применению в продакшене.

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

Доклад принят в программу конференции

Bun vs Node

Пакетные менеджеры и организация модульности
Браузеры
ES.Next
Node.js
TypeScript
Deno.js

Сравним Bun vs Node. Так ли он хорош? Рассмотрим, почему был выбран JSCore, как он работает и в чем отличие от V8. Поговорим о Zig, и ответим на вопрос: стоит ли переезжать на Bun уже сейчас или нет?

Доклад принят в программу конференции

FrontOps (6)

Мониторинг Next.js приложения

Логирование и мониторинг
Node.js
Производительность и мониторинг фронтенда
FrontOps
Метрики
Инструменты

Рассмотрим в докладе основные метрики для наблюдения Node.js приложения с SSR. Разберем два варианта их сбора и визуализации с использованием Prometheus+Grafana / OpenTelemetry+JaegerUI.
Вас ждет:
- Минимальный набор метрик, который позволить понимать, что происходит с приложением
- Как подключать инструменты мониторинга и избежать утечки памяти
- Настройка алертинга для вашего приложения
- Улучшаем время ответа Next.js с использованием кеша
- Находим проблемные места приложения

Доклад принят в программу конференции

Нативные юнит-тесты в Node.js

Node.js
FrontOps

С релизом NodeJS v20 модуль "node:test" стал стабильным, и я решил попробовать его на проекте с более чем 500 юнит-тестами. В докладе поделюсь опытом перехода на новый тест-раннер. Обсудим, стоит ли делать выбор в сторону "node:test" или же оставаться на Jest или Vitest. Разберём поддержку ассёртов, репортеров, моков, таймеров, удобство настройки и интеграцию с TypeScript и JSX.

Доклад принят в программу конференции

За кулисами веб-производительности: инструменты и техники для ускорения сайта

Фронтенд / другое
Производительность и мониторинг фронтенда
Денис Сергеевич

МТС Диджитал

Тезисы:
• Почему скорость процессоров не успевает за веб-приложениями
• Причины большого количества JS-кода на сайте
• SPA по 20 мб уже действительность
• Инструменты куда мы смотрим (МТС) чтобы найти проблемы большого размера билдов и сократить его
• Графики скорости и восприятие людей (откуда возникли 60fps и почему важно придерживаться)
• Почему скорость браузерной страницы лагает на 4080ti, а Cyberpunk идет на максималках

Доклад принят в программу конференции

Про жизнь JavaScript-отshellников

Со времён первых терминалов 60-х годов и до наших дней CLI — основа взаимодействия с ЭВМ. Командная строка буквально связывает всё: человека и программы, программы и программы, программы и операционную систему. Давайте погрузимся в то, как эта связь устроена, поищем подводные камни. Особое внимание уделим эффективному применению CLI в JavaScript-разработке. И попробуем сделать наши скрипты чуть лучше, процесс сборки — быстрее, а деплои — надёжнее.

Доклад принят в программу конференции

Под покровом кода: сбор метрики покрытия в e2e тестах

Тестирование фронтенда
Надёжность продакшена

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

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

Доклад принят в программу конференции

Как приготовить SLO, жить с этим и не пожалеть

Производительность и мониторинг фронтенда
Web Vitals

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

* поговорим, для чего собирать метрики
* рассмотрим, что такое SLA, SLO, SLI
* обсудим, как считать базовые показатели и как приготовить сбор данных
* расскажу, какие инструменты существуют и какие из них удобные
* покажу, как это всё хранить, выводить и рисовать красивые графики
* расскажу, куда слать алерты, когда пробило и как выстроить культуру реакций на них

Доклад принят в программу конференции

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

Ускорение разработки используя ИИ инструменты

Олег Рогов

НЛМК ИТ

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

Доклад принят в программу конференции

Как ускорить клиентское приложение при слиянии крупных сервисов

Производительность и мониторинг фронтенда
Владислав Снежкин

Яндекс Еда и Market Delivery

1. Обо мне. Расскажу как разрабатывал всю frontend часть для event Стартапа. Когда был CTO в аутсорсинга компании, любил всегда разработать frontend часть сложных проектов. Сейчас я техлид в Яндекс еде и Маркет Деливери, который пишет код и принимал активное участие в оптимизации скорости загрузки. Потому что без разработки, без проверки гипотез этот проект невозможно сделать.
2. История этого доклада. В 2022 году произошло слияние Яндекс Еды и сервиса Деливери Клаб и перед командой разработки встала задача быстро перевести проект на наш стэк. Было принято решение перевести только веб, а нативные приложение вставить вебвью. Такое решение было принято потому что наш сервис давно существует как суперапп: в такси, маркете, заправках.
3. Проблема. Мы столкнулись с проблемой, что пользователи начали жаловаться на скорость загрузки сервиса в приложении, при слиянии сервисов, очевидно что появляются проблемы с интеграцией, что влияет на конверсию и в конечном итоге на бизнес метрику GVM. И команде веба поставили амбициозную задачу решить все эти проблемы.
4. Технический анализ проблемы. Классический путь это открыть lightspeed, что мы и сделали и посмотреть на картинку, но из этого будет мало что понятно и ты делаешь замеры конкретно твоего устройства в твоей сети в твоём регионе, но когда сервис распространяется на разные страны здесь возникают уже проблемы, потому что невозможно понять причины и оптимизировав приложение, ты не можешь гарантировать стабильность везде.
5. Международная проблема скорости. Параллельно наш сервис ещё выходит в зарубежные страны как суперапп в вебвью, и самая проблема началась когда сервис стал выходить в страны Африки, которые удалены от наших CDN дата центров на тысячи километров. И все проблемы с загрузкой усугубилось. Тут приложу карту где расположены наши CDN сервера и где находятся страны Африки, чтобы понять масштаб большого пинга
6. Как начать собирать метрики. На этом слайде расскажу про важность метрик, как они помогают понимать проблемы, как проблемы могут быть связаны с типом устройства, например бывают слабые девайсы на которых всё тормозит, и тут можно обыграть и упростить чуть функционал, некоторые операции делать потом.
- Расскажу как мы устроили сбор метрик в реалтайм, как они нам помогают (например мы можем откатить релиз, если видим деградацию), расскажу как начать собирать метрики на своём проекте, такие как: first contentful paint, time to interactive, dom_loading, dom_interactive, ttfb, dnsNoCache, dom_content_loaded, long task all
7. Как мы начали решать проблему. Первое мы определили тип проекта, у нас проект с гибридным рендером, т.е. Мы можем часть контента отрендерить на сервере, а часть на клиенте + мы используем mobx, который инициализируются на сервере и потом передаётся на клиент.
Мы начали с главной страницы (список заведений), поскольку это была самая медленная страница и эта страница являлась посадочной.
Мы разделили задачи на 2 категории: проблема загрузки и проблема интерактивности, у пользователя тормозила лента при взаимодействии.
1. На главной странице у нас есть эндпоинт получения списка ресторанов, который выполняется 1,3сек. Мы понимали что на фронте на него повлиять не можем. Мы вынесли вызов этого запроса с сервера на клиент, этот приём помог нам быстрее миновать белый экран загрузки и сразу же добавить интерактивности в виде скелетонов на странице. У пользователя уже появлялась шапка с которой он мог взаимодействовать.
2. Разбили приложение на чанки. Например загрузку библиотек, компонентов, которые не нужно грузить при первом рендере. Сделали асинхронную загрузку только нужных mobx торов, на каталоге нам не нужен стор трекинга.
8. Тестовые телефоны с горбушки. Расскажу историю как мы решили каждому разработчику купить самые дешёвые андройды на Горбушке, и дали эти девайсы как тестовые, задача была простая, чтобы приложением хотя бы можно было пользоваться. И каждый член команды проверял свои изменения на своём слабеньком устройстве. И этот подход сработал, мы дали ребятам почувствовать что испытывает пользователь на самом слабом девайсе. И достаточно быстро смогли получить вменяемые результат по производительности.
9. Оптимизации нативок. Рассказ про то как мы на этапе сборки кэшировали статику для того чтобы она была предзагружена на этапе первого открытия вебвью. + мы отразили в манифесте 2 категории статики, которая меняется часто и которая меняется редко. Статика которая меняется редко, кэшировалась при сборке, та которая часто в реалтайм в момент открытия приложения, натиска выгружала всё, что было указано.
10. Пример. Здесь я нарисую алгоритм выявления проблем, через какие сервисы, на какие метрики стоит смотреть, как тип рендера может влиять на выбранный подход оптимизации. Т.е. Тут закреплю рассказанный мною опыт и дам советы как выявить места которые стоит усилить.
1. Хочется также дать советы как изначально писать код так, чтобы минимизировать риски деградации по скорости
11. Выводы. Суммаризирую важность, ещё раз кратко упомяну про метрики (было и стало), хочу рассказать про ответственность что клёво задумываться про скорость и оптимизацию, и этот навык отличается специалиста от просто человека, который набирает код не задумываясь, а как это повлияет на приложение. Раньше разработчики были ограничены ресурсами и из-за этого приходилось задумываться об памяти о кол-ве потребляемых ресурсов, сейчас мы не ограничены в ресурсах, тестируем свой софт на мощных устройствах, но стоит помнить что профиль вашего пользователя может отличаться и быть гораздо слабее.

Доклад принят в программу конференции

Собрать за 60 секунд или оптимизация сборочного цикла ПО

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

В своем докладе я расскажу, как с помощью ~синей изоленты и супер клея~ применения практик и стандартизации, оптимизировать процессы разработки, для решения проблем со скоростью сборок нашего с вами кода

Доклад принят в программу конференции

Frontend в космосе: отображение космической системы на картах

React, Vue, Angular и другие JavaScript-фреймворки
Производительность и мониторинг фронтенда
Анимации и 2D/3D графика в браузере
WebGL

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

В докладе вы узнаете как:

— собрать стек Web-GL технологий, для решения широкого спектра картографических задач
— поделить планету на части вместе с H3-сотами
— отобразить большие данные на карте, используя гибридную кластеризацию
— сэкономить работу на стороне бэка, используя геодезические преобразования при отрисовке линий
— реализовать real-time анимацию объектов на примере спутниковой группировки

Обещаю, будет как минимум красиво, как максимум — полезно!

Доклад принят в программу конференции

«У меня всё работает», или Как оптимизировать веб-приложения для рынков, где интернет не LTE

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

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

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

Доклад принят в программу конференции

Технологии (16)

Uncaught ReferenceError: __webpack_require__ is not defined

Фронтенд / другое
Михаил Крайнов

VK, ВКонтакте

Что делать, если билд прошёл успешно, а страница не грузится? Как читать ошибки Вебпака? Что такое runtime chunk? В своём докладе я расскажу, во что превращаются ваши исходники после сборки и как понять, что происходит на клиенте, если вам вдруг пришлось дойти до чтения собранного кода

Доклад принят в программу конференции

Уязвимости в современных JavaScript-фреймворках на примере React, Vue и Angular

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

Доклад принят в программу конференции

Селекторы CSS: простые и сложные

HTML и CSS

Сколько способов выбрать элемент для стилизации при помощи CSS-селектора вы знаете? Ведь бывает же иногда будничная ситуация, когда из всего проекта работать нам разрешают только с CSS-файлом. Но сделать всё равно нужно красиво!

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

Доклад принят в программу конференции

Адаптация веб-приложений для скринридеров мобильных устройств

Доступность (Accessibility - a11y)

Когда говорят об обеспечении доступности веб-приложений, разработчики в основном представляют добавление соответствующих ARIA-атрибутов в HTML-тегах. Однако на практике всё оказывается сложнее.

В своём докладе я расскажу о шагах, которые нужно предпринять, чтобы сделать свое приложение по-настоящему доступным, а также об особенностях мобильных скринридеров (VoiceOver и TalkBack), которые нужно учитывать при разработке доступных интерфейсов. Приведу практические примеры из опыта адаптации Яндекс Лавки к работе с мобильными скринридерами.

Доклад принят в программу конференции

Проклятие седьмой вкладки. Неочевидные причины перехода на HTTP 2.0

Браузеры
Сетевое администрирование
Профилирование и отладка кода
Сеть
HTTP/HTTPS
WebSockets
Софья Волынская

Яндекс Лавка

Фронтенд-разработчики пишут на Javascript, Typescript, выбирают себе фреймворк по вкусу, библиотеки компонентов, пишут разнообразные тесты, а сеть принимают как должное. Ну что там – HTTP-запросы во вкладке Network ходят туда-сюда, тут запрос POST, тут GET, все работает – работает, не трогай!

Мы тоже так думали. Пока к нам не пришли странные пользователи, которые зачем-то открывают все в новой вкладке. «Закройте!» – говорили мы им, но с каждым новым репортом становилось все яснее, что долго так продолжаться не может.

И мы отправились в большое приключение – снимать таинственное проклятие седьмой вкладки.

Доклад принят в программу конференции

Ускоряем показ сайта с помощью App Shell. Как Service Worker ухудшает метрики

Single page application, толстый клиент
Мобильные приложения без native (PWA, AMP)
React, Vue, Angular и другие JavaScript-фреймворки
Производительность и мониторинг фронтенда
Web Vitals
Егор Смирнов

ВКонтакте

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

AppShell — это подход к разработке приложений, когда пользователь при входе сразу видит скелет сайта, в который потом будет встраиваться контент. Я 2 года занимался добавлением этой технологии в мобильную веб-версию ВКонтакте, но в итоге от неё было решено отказаться.

Я расскажу про особенности реализации AppShell. Покажу, как реализовать его в React, и как это сделано у нас на серверном ренденринге в kPHP. Обсудим результаты АБ-экспериментов, интересные особенности и фишки работы с Service Worker.

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

Доклад принят в программу конференции

Современные подходы к реактивности и хранению состояния в фронтенд-разработке

- Реактивность в современных фронтенд-фреймворках, мемоизация.
- Сигналы: новый подход к управлению состоянием и зависимостями.
- А что с управлением серверным состоянием? Tanstack.

Доклад принят в программу конференции

Как работает видеопоток в браузере. WebRTC под капотом

Браузеры
Мобильные приложения без native (PWA, AMP)
WebRTC, p2p
Онлайн-медиа (<video>, <audio>)

Как делать фотографии не хуже чем в нативном приложении?
Что такое WebRTC? Что такое MediaStream?
Как скармливать правильно видеопоток OCR моделям машинного обучения?
Все ответы на эти вопросы вы найдете в данном докладе!
И, разумеется, не забудем про подводные камни!

Доклад принят в программу конференции

Atomic CSS: верстка и легкость бытия

Препроцессоры CSS
CSS фреймворки
HTML и CSS
Адаптивная вёрстка

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

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

Ключевая мысль доклада: Atomic CSS - это не для тех, кто плохо знает CSS. Это не очередной Bootstrap, а полноценный подход, со своими идеями, плюсами и минусами

Доклад принят в программу конференции

Алхимия быстрого создания браузерных расширений

Браузеры
Фронтенд / другое

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

Доклад принят в программу конференции

Система типов TypeScript как язык программирования

TypeScript

Сколько типов вы пишете и используете в своих проектах? Насколько они сложны? Случалось ли вам думать, что что-то невозможно полноценно затипизировать? А задумывались ли вы о том, на что действительно способна система типов TypeScript? Спойлер: она способна на большее, чем вы думаете.

В этом докладе я продемонстрирую возможности нескольких продвинутых типов TypeScript, используя модуль интерполяции в качестве примера, и докажу, что на типах можно программировать.

Доклад принят в программу конференции

Эволюция микрофронтендов

Пакетные менеджеры и организация модульности
FrontOps
Микросервисы
Никита Балихин

Газпромбанк

В докладе разберём, какие инструменты для управления зависимостями есть в экосистеме Javascript и поймём, какие проблемы они решают

Доклад принят в программу конференции

Оптимизация Next.js: Как справиться с высоким потреблением ресурсов

Оптимизация изображений
React, Vue, Angular и другие JavaScript-фреймворки
Node.js
Производительность и мониторинг фронтенда

Фронтенд-разработĸа все больше движется в сторону сервера.
Команда Kodix поделится опытом работы с высоĸим потреблением ресурсов сервера фронтендом при ежедневном трафиĸе оĸоло 20 тысяч посещений.
Мы рассĸажем о действиях, ĸоторые предприняли для снижения нагрузĸи и повышения стабильности приложений.
Разберем ошибĸи, ĸоторые больше всего вредили производительности и ĸаĸ их устранение позволило избавиться от рестартов приложения, а таĸже повысить сĸорость отдачи страницы.

Таĸже рассмотрим новую возможность - partial-prerendering, и ĸаĸ она повлияет на разработĸу.
Основное внимание будет уделено выбору оптимальных стратегий рендера и их ĸомбинации.
Говоря об оптимизации сервера мы таĸже рассĸажем о наших ошибĸах и проблемах c производительностью при использовании Next-image.

Доклад принят в программу конференции

Криптография для фронтэндеров

Браузеры
Безопасность в браузере
Мобильные приложения без native (PWA, AMP)
Offline-приложения

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

Доклад принят в программу конференции

WebAssembly: Тяжело в учении, сложно при внедрении, быстро в использовании

Оптимизация производительности
WebAssembly (WASM)

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

Мы обсудим:
- В каких кейсах может помочь WebAssembly
- Что нужно, чтобы скомпилировать С++ код в WASM и успешно подключить его в проекте
- Как подружить всё это с Typescript, Webpack и Web Workers
- Почему придется рефакторить код и менять типы
- Чем отличаются структуры данных в JS и WASM
- Как реализовать версионирование WASM-модуля
- Как это всё покрыть тестами

Доклад принят в программу конференции

Компьютерное зрение и искусственный интеллект в разработке веб-приложений

Фронтенд / другое

Введение:
- Мотивация доклада - почему ИИ это важно на фронтенде и сделает тебя лучше
Про технологию:
- Что такое тенсорфлоу
- Направления применения тенсорфлоу (зрение звук текст..)
- Кейсы решений для бизнеса на фронтенде (у многих нет понимания именно КАК применять?)

Примеры реализаций:
- Процесс работы с TensorFlow
- Делаем "умное рисование"
- Делаем классификацию документов и меняем UI/UX с ИИ
- Использование модели ИИ

Заключение:
- выводы/результаты

Доклад принят в программу конференции

Дизайн (3)

Что делают дизайнеры на заводе

Продуктовая разработка
Agile-практики в госкомпаниях, банках, предприятиях
Управление командой
Управление разработкой

После того как я впервые съездила на завод, стало понятно, почему в дизайнеров кидаются тапками.

Мы работали на ярких прикольных аймаках, проектируя интерфейсы MES-систем в соответствии с трендами. А потом своими глазами увидели, в какой ад для сотрудников производства это превратилось.

Стоит только коснуться производственной специфики, как стандартные подходы разваливаются на куски — даже если у вас уже есть огромная дизайн-система на основе популярной методологии Material Design.

Доклад принят в программу конференции

Дизайн vs Фронтенд. Что скрывается за идеальным макетом

Дизайн мобильный приложений
Прототипирование
Коммуникация
Команда

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

Доклад принят в программу конференции

Психология дизайна. Взгляд сквозь призму UX: От когнитивного восприятия до инженерии интерфейсов

1. Введение в пользовательский опыт (UX)
1.1 Определение UX и его значимость.
1.2 История появления и развития UX.

2. Основы когнитивного восприятия
2.1 Введение в когнитивные процессы, связанные с восприятием информации.
2.2 Как когнитивное восприятие влияет на взаимодействие пользователя с интерфейсом и с окружающими объектами.

3. Визуальные аспекты UX
3.1 Значение цветов и их влияние на восприятие.
3.2 Типографика и читаемость текста как элементы улучшения UX.

4. Интерактивные элементы в UX
4.1 Роль анимаций и ховеров в улучшении восприятия интерфейса.
4.2 Примеры эффективного использования анимации для улучшения понимания и вовлеченности c интерфейсом.

5. Психотипы пользователей *
5.1 Классификация психотипов и их влияние на поведение пользователей.
5.2 Примеры применения знаний о психотипах для целевого дизайна.

6. Отзывчивость и доступность
6.1 Важность быстрого отклика интерфейса на действия пользователя.
6.2 Доступные интерфейсы для пользователей с различными ограничениями (как проверять, что смотреть).
6.3 Адаптация под различные устройства и платформы.

7. Раздел о Web UX/UI Engineering
7.1 Кто такие UX Developer/Engineer и UI Developer/Engineer, что они дают компаниям
7.2 Основные обязанности и инструменты, используемые в рамках этих ролей.

8. Заключение
8.1 Подведение итогов значимости качественного UX.
8.2 Направления для дальнейших исследований в области UX.

Доклад принят в программу конференции

Коммуникация и процессы (6)

Должен ли разработчик только писать код?

Дарья Корчуганова

Газпромбанк.Тех, IT_ONE

Периодически слышу от коллег-разработчиков мнение, что разработчик создан только для того, что бы писать код и пушить его в ветку. Протестировать его? Для этого же тестировщики. Отсмотреть макеты? Ну дизайнеры же есть. Проверить собрался ли PR на стенде? А девопсы зачем?! И подобных примеров достаточно много.
Это доклад-рассуждение о том, как иногда смена статуса в Jira может упростить релизный процесс и жизнь всей команде.

Доклад принят в программу конференции

Микрофронтенды - маленькие команды, большие проблемы

Большие проекты/команды
Корпоративная культура и мотивация
Управление / другое
Teamlead
Коммуникация
Управление командой
Управление разработкой
Soft Skills
Николаева Динара

Positive Technologies

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

Доклад принят в программу конференции

Эффективное общение с бизнесом и руководством

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

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

Доклад принят в программу конференции

Релизы без стресса

Боишься, что твой код уронит прод и компания понесет миллионные убытки? Этого легко избежать, если использовать современные практики разработки: автоматизация проверок (линтинг, тестинг), автоматизация мониторинга, практики развертывания и деливери кода. В докладе я расскажу, как все эти практики помогают перестать волноваться после нажатия кнопки "merge" и "deploy"

Доклад принят в программу конференции

Code Review: улучшаем сотрудничество и автоматизируем рутину

Code Review

Кажется, что когда весь отдел состоит из 7 человек, то проблемы с код ревью появляются редко или не возникают вовсе. Но что если бизнес решил за короткое время увеличить отдел в 4 раза за полгода? А если еще в это время проходит реструктуризация команд в кроссфункциональные?

Именно с такой ситуацией мы и столкнулись в отделе веб разработки в Звуке.

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

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

Доклад принят в программу конференции

Как обосновать найм и сроки, используя метрики

Методологии и процессы разработки ПО; Сроки и приоритеты
Управление / другое
Управление командой
Управление разработкой
Управление проектами
Agile / Scrum
Метрики
Методологии
Команда

Все ответы на эти вопросы
— Сколько и каких задач взять в итерацию, чтобы успеть в срок?
— Как улучшить качество разработки?
— Где в процессе узкие места?
— Как доказать, что нужен найм и кого?
— Как защитить решения по техдолгу?
— Как наиболее выгодно выбрать задачи в итерацию?
— Как понять, что мой процесс хороший или плохой?
— Какие из текущих задач имеют риск быть не выполненными вовремя?
— Какие SLA я могу гарантировать по срокам зависимым от нас командам?
— На сколько лучше стало качество нашего решения с течением времени?
— Когда проект будет завершен?

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

Доклад принят в программу конференции

Другое (8)

Продуктовое мышление и зачем оно нужно

To be announced

Доклад принят в программу конференции

Когда локализация это не только текст на разных языках

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

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

Доклад принят в программу конференции

Fail-митап

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

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

Доклад принят в программу конференции

Посадил дед REPL

Илья Черторыльский

Райффайзен Банк

Как написать свой собственный REPL и где его можно применить

Начнем с простого примера https://raiffeisen-dgtl.github.io/Frontend-editor-light/

применим
- monaco-code-editor
- добавим поддержку библиотек (статически)
- будем собирать TS в браузере через babel-stand-alone

добавим
- загрузку библиотек динамически по вводу строки import ... froom 'название библиотеки' посредством CDN и ESM https://github.com/Tetragius/editor/blob/main/src/Components/Playground/script.ts
- добавим файловую систему
- улучшим сборку перейдем с babel-stand-alone на esbuilder
https://github.com/Tetragius/editor/blob/main/src/Services/ESbuilder.ts
- добавим загрузку ассетов

Итог полноценный REPL для разработки на TS

Дополнительно
- LSP (language server protocol) - или как обстоят дела не с TS
- Добавляем онлайн и совместную работу

Доклад принят в программу конференции

React — мастдай или топ-1 технология?

To be announced

Доклад принят в программу конференции

От декларации до отображения

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

Доклад принят в программу конференции

БЭМ vs Tailwind CSS

To be announced

Доклад принят в программу конференции

Резерв (4)

Уволить нельзя рефлексировать: как работать с инцидентами

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

В докладе мы ответим на ряд вопросов:
* Что входит в понятие «надежности»? Как быстро находить неполадки, выявлять причины их возникновения и устранять их?
* Какие технические и процессные решения позволят уменьшить количество инцидентов?
* Нужно ли искать виноватых или можно найти другой путь решения проблем?
* Можно ли прийти к надёжности постепенно? Какие шаги в культуре и процессах можно предпринять для развития зрелого и надежного сервиса?

А также рассмотрим несколько примеров, в которых мы успешно (и не очень) применяли эти практики.

Доклад принят в программу конференции

Когда синдром самозванца — не синдром

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

Пугающие истории о самозванцах и других нежелательных паттернах в IT.

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

Доклад принят в программу конференции

Библиотека стилей для множества продуктов или как не скачать слона. Отличия от Tailwind и Bootstrap, преимущества перед БЭМ.

Дизайн-системы
Препроцессоры CSS
CSS фреймворки
Адаптивная вёрстка
Интеграция CSS в компонентах
Адаптивная вёрстка
Егор Левченко

СберКорус

- Вы ведёте несколько больших продуктов.
- Вашими продуктами пользуются много людей.
- У вас есть единая система стилей, брендбук или жёсткие правила.
- Как сделать доставку стилей и компонентов дружелюбнее.
- Стоит ли использовать для этого Tailwind, Bootstap или надо писать своё?
- CSS vs. SCSS/SASS
- Готовые компоненты для React

Доклад принят в программу конференции

Производительность простейших операций в JavaScript

Какое-то время назад я увидел у друга в коде следующую конструкцию:

arr2.forEach((item) => arr1.push(item));

И когда я его спросил – зачем это, то получил такой ответ: так мы сливаем массивы вместо спред оператора
[...arr1, ...arr2]
Так быстрее.

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

Что из этого вышло? Приходи послушать доклад.

Доклад принят в программу конференции