Кто согласен, что современный фронтенд — это сложно, поднимите руки! Ради чего мы мучаемся с настройкой Webpack? Почему реализация SSR требует писать столько кода, и нужен ли он нам вообще такой ценой? Кто виноват и что мы, как разработчики, можем сделать?
Мы стараемся ответить на эти и сотни других вопросов в секции Frontend. И год от года темы становятся все разнообразнее и хардкорнее. А основной лейтмотив секции — эксперименты.
Смотрите под катом, кто над чем экспериментировал в прошлом году, и что будут рассказывать и показывать в этом
![](https://habrastorage.org/r/w780q1/webt/em/sv/_6/emsv_6njjrz4yqtwjnxkuo7lykw.jpeg)
На екатеринбургском DUMP прошлого года первое место занял доклад Александра Коротаева (Tinkoff.ru). Все знают, что WebGL это очень быстро. Хочется сразу всё на него переписать, но технология выглядит так, будто она прилетела в веб с другой планеты. Стандарту уже почти 9 лет, а специалистов в нем крайне мало.
Александр рассказывал, как рисовать 2D быстро, но просто, на примере написания игр, не забивая голову матрицами и сложным API. В докладе рассматриваются концепции пререндеринга, шейдеров и использования React-дерева для быстрого рисования на плоскости.
Виталий Дмитриев из 404Group собрал тот самый аншлаг на теме о реактивном программировании. Виталий говорил о том, что реактивная парадигма уже много лет имплементирована в окружающих нас гаджетах и цифровых экосистемах. Мы ежедневно используем устройства, способные управлять другими устройствами, но если пытаемся воспроизвести их логику в своих приложениях, получаем тяжело расширяемую, проактивную систему. Почему?
Многие школы и туториалы учат нас создавать сущности, которые несут прямую ответственность за управление теми или иными компонентами. В сложных больших проектах, через пару лет, это превращается в запутанный кошмар и ни один современный инструмент не способен решить данную проблему, пока разработчики пишут проактивный код.
О том как мыслить реактивно, а не проактивно, смотрите выступление ниже:
Александра Шинкевич рассказывала как внедрить стандарты разработки, чтобы никто не пострадал. Чуть ли не в каждой команде не утихают споры на злободневные темы: «Табы или пробелы?», «Нужно ли делать отступы между скобками?», «Одинарные или двойные кавычки?», «Ставить ли точки с запятой в конце строк?». И это только начало списка. Но так ли уж необходимо обсуждать это каждый раз, когда начинается новый проект, делается код-ревью или в команду приходит новый разработчик?
На казанском DUMP Денис Колесников из Авито рассказывал непростую историю обновления технологического стека в проекте с долгой историей. Это почти как перебирать двигатель самолета на лету. Денис рассказывает как итеративно, поступательно они меняли фронтенд в Авито, внедрили серверный рендеринг, менеджмент зависимостей микрофронтендов, а так же какие грабли встретили и какие выводы из всего этого сделали.
Этот доклад для разработчиков middle и senior уровня, работающих с большой централизованной кодовой базой (и желающих эту кодовую базу распилить).
Графический контент это половина средней web-странички. Чтобы правильно приготовить эту половину надо понимать как устроены картинки и что с ними можно делать.
Полина Гуртовая (Злые марсиане) разобрала анатомию разных форматов (PNG, JPG, WebP, SVG и других) и рассказала как выбрать подходящий.
Тут же она объясняет, почему выбор формата — это только маленький шаг на веселом пути оптимизаций и рассказывает, что надо делать дальше.
SvelteJS — один из наиболее динамично развивающихся фреймворков на JavaScript'e. Сможет ли он сместить с позиций React, Angular и Vue?
Павел Малышев — мейнтейнер проекта и фасилитатор русскоязычного сообщества рассказал о текущем состоянии фреймворка SvelteJS, его экосистемы и сообщества, а также почему это не «yet another JS framework» и вам стоит присмотреться к нему.
На юбилейном DUMP2020 в Екатеринбурге зал Frontend-секции теперь будет вмещать 400 человек. Вангуем, что и этот зал заполнится на 100% на некоторых докладах.
Программный комитет секции: Полина Гуртовая (Злые марсиане) и Егор Ходырев (Точка) рассказали какие темы ждут и какие уже заявлены.
Мы ищем доклады на русском и английском языке продолжительностью 30-40 минут. Если вы раньше нигде не выступали — не проблема. Мы поможем продумать структуру, собрать контент и отрепетировать выступление.
Для вдохновения мы подготовили список тем, которые нам интересны. Список не исчерпывающий, мы открыты новому и рассматриваем любые заявки.
Подать заявку на доклад можно здесь.
![](https://habrastorage.org/r/w780q1/webt/74/vz/sl/74vzsl21zuyd9tondazxbycd8uw.jpeg)
Нужен ли нам N(e/u)xt.js?
(Григорий Петров, Evrone)
В докладе Григорий использует эти два фреймворка, чтобы рассказать об основных сложностях современной фронтенд-разработки и то, как мы можем с ними бороться: готовыми шаблонами, собственным кодом или новыми архитектурами приложений. Сложности спикер будет показывать с позиции «почему так получилось?» и что можно с этим сделать.
GameDev in Frontend
Анна Блок (Frontend Help, Типичный верстальщик) и Дарья Пушкарская (Web Hero School)
Доклад о возможностях сменить направления деятельности, если ты всегда мечтал разрабатывать игры.
Анна и Дарья покажут список технологий и возможностей, с которыми создаются игры.
А в конце презентуют собственную игру, дабы показать, что в этом нет ничего сложного.
Про Lighthouse
Серёжа Попов (Лига А. / HTML Academy)
Lighthouse делает за нас всю грязную работу, но мы продолжаем его игнорировать. Проверку на этом инструменте должен проходить каждый сайт и приложение, так как в современном мире фронтенда становится важным не то, на чём написано приложение, а то, как быстро оно грузится и какому объему пользователей оно доступно. Lighthouse проще использовать, чем игнорировать. Сергей расскажет о проблемах, которые важнее, чем кажутся, и о том, как решить эти проблемы с помощью Lighthouse.
WebAssembly: новые возможности и новые проблемы
Полина Гуртовая (Evil Martians)
В докладе мы разберемся что же такое WebAssembly.
Поговорим о WebAssembly как о формате, не привязанном к web, обсудим, как WebAssembly живет в браузерах.
На примере V8 разберемся, как выполняется JS и WASM. Попробуем понять, что влияет на скорость выполнения JS и WASM, и в каких случаях WASM оказывается быстрее. И, наконец, обсудим текущий статус технологии и возможности ее применения.
Управление монорепозиториями с помощью NX
Антон Никулин (Tinkoff.ru)
Сегодня практически любое крупное веб-приложение состоит из множества более мелких, которые, в свою очередь, используют разные библиотеки. Если каждый такой независимый модуль лежит в своем репозитории, то обновление даже одной библиотеки запускает обновление всех зависимостей по цепочке.
Обновление сегодня тоже не такое простое — на каждом этапе этой цепи необходимо проходить путь CI. А это новые потенциальные проблемы: несовместимость версий, упавшие тесты, устаревание версии и так далее. Если мысли об этом вызывают у вас боль, то этот доклад для вас.
Антон расскажет, как удобно разместить все в одном репозитории с помощью NX, как можно дробить приложение на маленькие части без боли. Поговорим, что это вам даст, как продать это команде и бизнесу. Заглянем «под капот», а потом посмотрим на подводные камни. В конце разберемся как внедрить NX у себя.
![](https://habrastorage.org/r/w780q1/webt/9d/pe/lw/9dpelwrv59osbxdgdd4tonys0qw.jpeg)
Это только несколько заявок, которые программный комитет успел рассмотреть, но чем больше заявок, тем лучше программа!
Хотите выступить на самой крупной в УрФО конференции разработчиков в новом Конгресс-холле в зале на 400 человек?
Подавайте заявку, пока не поздно.
Или приходите/приезжайте на DUMP 15 мая послушать темы, прошедшие жестокую мясорубку отбора ;)
Помимо основной программы обещаем кучу интересного.
Мы стараемся ответить на эти и сотни других вопросов в секции Frontend. И год от года темы становятся все разнообразнее и хардкорнее. А основной лейтмотив секции — эксперименты.
Смотрите под катом, кто над чем экспериментировал в прошлом году, и что будут рассказывать и показывать в этом
![](https://habrastorage.org/webt/em/sv/_6/emsv_6njjrz4yqtwjnxkuo7lykw.jpeg)
Топовые темы 2019
На екатеринбургском DUMP прошлого года первое место занял доклад Александра Коротаева (Tinkoff.ru). Все знают, что WebGL это очень быстро. Хочется сразу всё на него переписать, но технология выглядит так, будто она прилетела в веб с другой планеты. Стандарту уже почти 9 лет, а специалистов в нем крайне мало.
Александр рассказывал, как рисовать 2D быстро, но просто, на примере написания игр, не забивая голову матрицами и сложным API. В докладе рассматриваются концепции пререндеринга, шейдеров и использования React-дерева для быстрого рисования на плоскости.
Виталий Дмитриев из 404Group собрал тот самый аншлаг на теме о реактивном программировании. Виталий говорил о том, что реактивная парадигма уже много лет имплементирована в окружающих нас гаджетах и цифровых экосистемах. Мы ежедневно используем устройства, способные управлять другими устройствами, но если пытаемся воспроизвести их логику в своих приложениях, получаем тяжело расширяемую, проактивную систему. Почему?
Многие школы и туториалы учат нас создавать сущности, которые несут прямую ответственность за управление теми или иными компонентами. В сложных больших проектах, через пару лет, это превращается в запутанный кошмар и ни один современный инструмент не способен решить данную проблему, пока разработчики пишут проактивный код.
О том как мыслить реактивно, а не проактивно, смотрите выступление ниже:
Александра Шинкевич рассказывала как внедрить стандарты разработки, чтобы никто не пострадал. Чуть ли не в каждой команде не утихают споры на злободневные темы: «Табы или пробелы?», «Нужно ли делать отступы между скобками?», «Одинарные или двойные кавычки?», «Ставить ли точки с запятой в конце строк?». И это только начало списка. Но так ли уж необходимо обсуждать это каждый раз, когда начинается новый проект, делается код-ревью или в команду приходит новый разработчик?
На казанском DUMP Денис Колесников из Авито рассказывал непростую историю обновления технологического стека в проекте с долгой историей. Это почти как перебирать двигатель самолета на лету. Денис рассказывает как итеративно, поступательно они меняли фронтенд в Авито, внедрили серверный рендеринг, менеджмент зависимостей микрофронтендов, а так же какие грабли встретили и какие выводы из всего этого сделали.
Этот доклад для разработчиков middle и senior уровня, работающих с большой централизованной кодовой базой (и желающих эту кодовую базу распилить).
Графический контент это половина средней web-странички. Чтобы правильно приготовить эту половину надо понимать как устроены картинки и что с ними можно делать.
Полина Гуртовая (Злые марсиане) разобрала анатомию разных форматов (PNG, JPG, WebP, SVG и других) и рассказала как выбрать подходящий.
Тут же она объясняет, почему выбор формата — это только маленький шаг на веселом пути оптимизаций и рассказывает, что надо делать дальше.
SvelteJS — один из наиболее динамично развивающихся фреймворков на JavaScript'e. Сможет ли он сместить с позиций React, Angular и Vue?
Павел Малышев — мейнтейнер проекта и фасилитатор русскоязычного сообщества рассказал о текущем состоянии фреймворка SvelteJS, его экосистемы и сообщества, а также почему это не «yet another JS framework» и вам стоит присмотреться к нему.
На юбилейном DUMP2020 в Екатеринбурге зал Frontend-секции теперь будет вмещать 400 человек. Вангуем, что и этот зал заполнится на 100% на некоторых докладах.
Программный комитет секции: Полина Гуртовая (Злые марсиане) и Егор Ходырев (Точка) рассказали какие темы ждут и какие уже заявлены.
Концепция и заявки DUMP2020
Мы ищем доклады на русском и английском языке продолжительностью 30-40 минут. Если вы раньше нигде не выступали — не проблема. Мы поможем продумать структуру, собрать контент и отрепетировать выступление.
Для вдохновения мы подготовили список тем, которые нам интересны. Список не исчерпывающий, мы открыты новому и рассматриваем любые заявки.
Ключевые темы
- Инструменты: IDE, плагины, линтеры, сборщики
- Методологии, архитектура и принципы: SOLID, микросервисы, БЭМ
- Оптимизация: производительность, управление памятью, WebAssembly
- Серверная разработка: Node.js, V8, ChakraCore
- Управление стейтом: Redux, MobX, Flux
- Синхронизация и хранение данных на клиенте: REST, GraphQL, Веб-сокеты
- Мобильная разработка: PWA, ReactNative, VueNative
- Десктопные приложения: Electron, NW.js
- Безопасность: взлом и защита, уязвимости в npm
- ECMAScript: возможности новых спецификаций
- Альтернативы JS: Typescript, ClojureScript, Elm, Dart
- Тестирование: Selenium, модульные тесты, TDD
- Фреймворки: React, Angular, Vue
- Стили: препроцессоры, CSS Modules, CSS-in-JS, Styled Components
- Графика: SVG, WebGL, VR
- Доступность: семантика, ARIA, скринридеры
- Прототипирование: Figma, дизайн-системы
- Фан: IoT, Game Dev, эксперименты
- Истории: успехи и провалы, взаимодействие с бизнесом
- Другое: Web API, будущее стандартов, опенсорс, пакетные менеджеры и т.д.
Подать заявку на доклад можно здесь.
![](https://habrastorage.org/webt/74/vz/sl/74vzsl21zuyd9tondazxbycd8uw.jpeg)
Темы, заявленные в этом году
Нужен ли нам N(e/u)xt.js?
(Григорий Петров, Evrone)
В докладе Григорий использует эти два фреймворка, чтобы рассказать об основных сложностях современной фронтенд-разработки и то, как мы можем с ними бороться: готовыми шаблонами, собственным кодом или новыми архитектурами приложений. Сложности спикер будет показывать с позиции «почему так получилось?» и что можно с этим сделать.
GameDev in Frontend
Анна Блок (Frontend Help, Типичный верстальщик) и Дарья Пушкарская (Web Hero School)
Доклад о возможностях сменить направления деятельности, если ты всегда мечтал разрабатывать игры.
Анна и Дарья покажут список технологий и возможностей, с которыми создаются игры.
А в конце презентуют собственную игру, дабы показать, что в этом нет ничего сложного.
Про Lighthouse
Серёжа Попов (Лига А. / HTML Academy)
Lighthouse делает за нас всю грязную работу, но мы продолжаем его игнорировать. Проверку на этом инструменте должен проходить каждый сайт и приложение, так как в современном мире фронтенда становится важным не то, на чём написано приложение, а то, как быстро оно грузится и какому объему пользователей оно доступно. Lighthouse проще использовать, чем игнорировать. Сергей расскажет о проблемах, которые важнее, чем кажутся, и о том, как решить эти проблемы с помощью Lighthouse.
WebAssembly: новые возможности и новые проблемы
Полина Гуртовая (Evil Martians)
В докладе мы разберемся что же такое WebAssembly.
Поговорим о WebAssembly как о формате, не привязанном к web, обсудим, как WebAssembly живет в браузерах.
На примере V8 разберемся, как выполняется JS и WASM. Попробуем понять, что влияет на скорость выполнения JS и WASM, и в каких случаях WASM оказывается быстрее. И, наконец, обсудим текущий статус технологии и возможности ее применения.
Управление монорепозиториями с помощью NX
Антон Никулин (Tinkoff.ru)
Сегодня практически любое крупное веб-приложение состоит из множества более мелких, которые, в свою очередь, используют разные библиотеки. Если каждый такой независимый модуль лежит в своем репозитории, то обновление даже одной библиотеки запускает обновление всех зависимостей по цепочке.
Обновление сегодня тоже не такое простое — на каждом этапе этой цепи необходимо проходить путь CI. А это новые потенциальные проблемы: несовместимость версий, упавшие тесты, устаревание версии и так далее. Если мысли об этом вызывают у вас боль, то этот доклад для вас.
Антон расскажет, как удобно разместить все в одном репозитории с помощью NX, как можно дробить приложение на маленькие части без боли. Поговорим, что это вам даст, как продать это команде и бизнесу. Заглянем «под капот», а потом посмотрим на подводные камни. В конце разберемся как внедрить NX у себя.
![](https://habrastorage.org/webt/9d/pe/lw/9dpelwrv59osbxdgdd4tonys0qw.jpeg)
Это только несколько заявок, которые программный комитет успел рассмотреть, но чем больше заявок, тем лучше программа!
Хотите выступить на самой крупной в УрФО конференции разработчиков в новом Конгресс-холле в зале на 400 человек?
Подавайте заявку, пока не поздно.
Или приходите/приезжайте на DUMP 15 мая послушать темы, прошедшие жестокую мясорубку отбора ;)
Помимо основной программы обещаем кучу интересного.