В браузерном JavaScript интерфейсы стали предсказуемы: «однопоточные», с транзакционным сценарием отрисовки (пустой экран → загрузка → интерфейс). C упором на закон Парето, расскажу, как, потратив 20% времени, отрисовать приложение на 80% быстрее за счёт приёмов «реактивного дизайна» — ещё не сформулированных, но уже используемых в продуктах с приоритетом на UX.

Строка поиска — это часто самый распространённый и удобный способ навигации по сайту. Казалось бы, что может проще? Но в реализации это оказывается не самой простой задачей. Особенно если приложение уже написано на React, а поиск должен работать и на мобильных устройствах.

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

Кто-то говорит, что код — это поэзия, для кого-то код — инструмент решения бизнес-задач, другие просто любят учиться и играть с кодом, а кто-то говорит, что undefined is not a function, потому что ничего не тестирует. Как совместить красоту и лёгкость быстрого прототипирования с тестами, чтобы бизнес-задачи не ушли на второй план, оставалось время для обучения и undefined is not a function не прилетал ночью?

Постараюсь ответить на эти и некоторые другие вопросы. Также поговорим об инструментах Wallaby.js и Quokka.js, которые помогают творить в любимом окружении, не отвлекаясь от основного кода.

CSS Houdini — набор спецификаций, который изменит веб-разработку. С его внедрением в браузеры обычный верстальщик будет вынужден выучить JavaScript, чтобы оставаться востребованным. Зато вместо того, чтобы дожидаться появления браузерной реализации «супер-мега-гридов», достаточно будет подключить полифил для CSS. Мы немного пофантазируем и рассмотрим все существующие спецификации Houdini.

Расскажу о программировании GPU с точки зрения верстальщика.

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

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

В основе многих популярных библиотек и фреймворков лежат вещи, которые фронтендеру вроде и не надо знать. Почему React так эффективно частично обновляет DOM-дерево? Как Immutable.js удаётся воплощать принцип copy-on-write и при этом не съедать много памяти и быстро работать? Дело в том, что в их основе лежат специальные структуры данных, которые мало кто из разработчиков по настоящему ценит и использует.

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

В последнее время все так сильно увлеклись новыми спецификациями CSS, что, кажется, разучились писать чистый HTML. А ведь в HTML всего несколько величин, которые можно померить — валидность, дерево заголовков, семантичность и доступность. Вот всё, что нужно, чтобы создавать качественные и оптимизированные сайты.

Вы когда-нибудь пробовали написать плагин к PostCSS, который бы идеально подходил для вашего проекта? Задача может быть элементарной, но даже в самом простом деле не исключены нюансы. Я постараюсь дать основы обхода AST (абстрактного синтаксического дерева) и его изменения. Также расскажу, как PostCSS и CSSTree дополняют друг друга.

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