Заявки на доклады

Конференция FrontendConf проходит в рамках профессионального фестиваля "Российские интернет-технологии". Вам, как участнику конференции, доступны все доклады этой конференции.

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

Поиск по тегам:

Адаптация

История о том, как мы в банке JS-сервисы встраивали в нативное приложение

Зар Захаров

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

Мобильные сайты и приложения на веб-технологиях
,
AngularJS, Backbone.js и другие JavaScript-фреймворки
,
JavaScript
Программный комитет ещё не принял решения по этому докладу

Микросервисы на фронтенде в почте Mail.ru

Егор Утробин

Фронтенд почты Mail.ru долгое время являлся огромным монолитом, в котором появлялось всё больше проблем. Поэтому новую функциональность стали реализовывать как отдельные сервисы.

Основные проблемы, которые мы решили:
- Ускорили процесс разработки.
- Уменьшили время ручного тестирования и автотестов.
- Стали внедрять все больше новых технологий, так как смогли быстро обкатывать их в реальных проектах.
- Увеличили читабельность кода, каждый сервис получился достаточно простым и сделанным по определенному шаблону.
- Тот код, что мы пишем на фронте, полностью смогли использовать в наших Android и iOS.
- Имеем возможность быстро с нуля переписать проект.
- Значительно уменьшили порог входа в проект.

Адаптивные дизайн и вёрстка
,
Мобильные сайты и приложения на веб-технологиях
,
Single page application, толстый клиент
Доклад принят в программу конференции

Новинки

Parcel.js: быстрый упаковщик без настроек

Марк Иконников

Parcel.js или, как его называют в народе, "Webpack на минималках" появился не так давно и уже начинает завоевывать массы. Его главная особенность - это "никаких настроек, все из коробки". По заявлению разработчиков, Parcel.js быстрее Webpack в 10 раз.

Во время доклада рассмотрим, как с помощью него можно легко создавать и собирать веб-приложения.

Шаблонизаторы и препроцессоры
,
AngularJS, Backbone.js и другие JavaScript-фреймворки
Программный комитет ещё не принял решения по этому докладу

WebRTC: делаем видеозвонки из браузера

Григорий Петров

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

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

Программный комитет ещё не принял решения по этому докладу

Делаем приложение лучше с помощью современных Browser APIs

Тимофей Лавренюк

Планируешь сделать свое приложение лучше? Современные WEB API могут в этом помочь.

Мы разберем, что они из себя представляют, и как использовать новейшие API на примере реального проекта.

Мобильные сайты и приложения на веб-технологиях
,
Оффлайн и кэширование в локальных хранилищах
,
JavaScript
Программный комитет ещё не принял решения по этому докладу

Путь пикселя

Юрий Артюх

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

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

Приложения

Криптокошелечек своими руками

Егор Малькевич

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

Мы проговорим только то, что касается именно веб-разработки, в рамках, например, React. Какие плюсы, минусы, узкие места. Отдельно проговорим про мобильную и веб-разработку. На что стоит обратить внимание.

Программный комитет ещё не принял решения по этому докладу

PWA или вся правда о нативности в вебе

Дарья Лиманская

Многогранный мир полноценной фулстек-разработки на JavaScript уже ни для кого не в новинку. Но вот с клиентскими приложениями на девайсах все еще возникают споры.

React Native, гибридные приложения Cordova/Phonegap, имея свои огромные плюсы, все же выглядят как своеобразный костыль/подстройка/эмуляция нативного приложения. Но спасибо Google и привет Progressive Web Apps.

Веб-сайт с нативным поведением без дополнительных плагинов, использующих нативный код и workarounds под разные платформы.

С чем это едят, и есть ли подвох ? Ну, и немного об AngularJS на десерт.

Мобильные сайты и приложения на веб-технологиях
,
JavaScript
,
Фронтенд / другое
,
Кросплатформенная разработка
,
Мобильные приложения / другое
Программный комитет ещё не принял решения по этому докладу

Службы данных на RxJS Observable как спасение от абстракций и многословности Redux

Евгений Иванов

- Постановка проблемы: рассмотрим приложение, в котором состояние управляется с использованием методологии Flux, выделим основные минусы (например, многословность при работе с асинхронными запросами);
- Краткое введение в реактивное программирование и RxJS (Observable, Subject и его типы);
- Реактивные службы данных, использование в Angular (где это довольно распространенный паттерн), использование в React/Vue с Dependency Injection и без;
- Сравнение двух подходов на примере, подведение итогов.

Программный комитет ещё не принял решения по этому докладу

Разработка многомодульной системы на React-Redux-стеке в HeadHunter

Никита Мостовой

Уже более 2-х лет мы занимаемся проектом Talantix. Это SPA, состоящий из 4-х модулей. Каждый модуль имеет свой набор страниц с уникальными данными и бизнес-логикой.

Мы построили проект на React-Redux-стеке. По мере увеличения количества модулей и росте их сложности мы сталкивались с проблемами. Поговорим о путях их решения и затронем темы:
1) Разделение модулей, разделение редьюсеров в зависимости от модуля.
2) Нормализация данных и как она ускорила разработку.
3) Изменение контрактов общения фронтенда и бэкенда.
4) Сохранение данных с помощью батчевых action.
5) Внедрение общего middleware для разбора данных и отказ от него.
6) Разделение бизнес-логики и событий в приложении, переход от redux-thunk к кастомным middleware.

Мобильные сайты и приложения на веб-технологиях
,
Single page application, толстый клиент
,
JavaScript
Программный комитет ещё не принял решения по этому докладу

Progressive Web Apps

Олег Орлов

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

Я покажу кейсы применения PWA крупными компаниями, и как они повлияли на показатели компаний. Покажу, как сделать свое первое PWA.

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

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

Мобильные сайты и приложения на веб-технологиях
,
Браузеры
Программный комитет ещё не принял решения по этому докладу

Готовим изоморфные веб-приложения правильно

Павел Малышев

Сначала обсудим то, как развивалась web-разработка, откуда мы шли и куда пришли. Выделим различные подходы, поговорим о плюсах и минусах. Расскажу об изоморфных (универсальных) веб-приложениях, своем опыте их разработки, почему мы должны и можем их делать. А, главное, как делать, чтобы не было мучительно больно.

Как использовать изоморфность для написания абсолютно любых веб-приложений, от простых сайтов до сложных SPA. Что делать если нужно, чтобы веб-приложение загружало мегабайтные бандлы без ущерба для скорости загрузки и индексировалось поисковиками. Как сделать полноценный Progressive Enhancement, чтобы даже юзеры с выключенным JS могли использовать ваше сверхсовременное веб-приложение. Как при правильном подходе добиться 100% общего кода в любом окружении. А также другие интересные кейсы.

Single page application, толстый клиент
,
AngularJS, Backbone.js и другие JavaScript-фреймворки
,
JavaScript
,
Accessibility
,
Фронтенд / другое
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Зачем мы переписываем приложение на Elm, и кто его знает?

Виктор Русакович

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

Первая мысль - давайте перепишем приложение на Elm!
Первый вопрос - а что это такое?
Первое сомнение - а возможно ли переписать приложение не сразу, а по "кусочкам"?

Elm - это не фреймворк. Elm - это язык, который компилируется в JavaScript. За 40 минут я расскажу вам, что именно у нас тормозило, что не устраивало в архитектуре, какие решения мы пробовали, и они нам не понравились (спойлер: React, TS, Vanilla.js, coffeescript) и как, наконец-таки, мы переписываем наше приложение по частям на Elm и планируем в будущем оставить только его в приложении (долой AngluarJS!).

AngularJS, Backbone.js и другие JavaScript-фреймворки
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Scriptless application

Алексей Осипенко

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

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

Single page application, толстый клиент
,
Взаимодействие с серверной стороной (API)
,
AngularJS, Backbone.js и другие JavaScript-фреймворки
Программный комитет ещё не принял решения по этому докладу

Как переехать с одного фреймворка на другой и не быть уволенным

Виталий Глибин

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

Как объяснить бизнесу, что вам нужно полгода, чтобы все переписать с нуля на этом модном и современном фреймворке (спойлер: никак).

В своем докладе расскажу об опыте миграции нашего большого и сложного приложения с Backbone (и иже с ним jQuery/underscore) на Vue. Как мы смогли это осуществить, с какими проблемами сталкивались и почему нам это удалось без вреда для бизнеса (а даже наоборот). Доклад будет интересен всем без исключения разработчикам, а не только ценителям jQuery и Vue.

Single page application, толстый клиент
,
AngularJS, Backbone.js и другие JavaScript-фреймворки
,
JavaScript
Доклад принят в программу конференции

Визуализация активности клиентов по всему миру в реальном времени

Александр Сербул

В докладе мы поделимся опытом разработки высоконагруженной системы визуализации активности клиентов Битрикс24 (~65 млн. хитов в сутки) по всему миру с использованием продвинутых возможностей кластерных технологий Apache Spark Streaming, АПИ Google-карт и алгоритмов потоковой агрегации событий на Java с использованием пулов потоков.

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

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

Программный комитет ещё не принял решения по этому докладу

Vue.js на большом проекте: миф или реальность?

Андрей Солодовников

Подходит ли Vue.js для создания большого web-приложения?

- Разберёмся, что у нас есть на старте (модули, плагины, фреймворки).
- Что делает разработку на Vue.js реально удобной?
- Как дела с производительностью?
- Каковы возможности декомпозиции и способности скелиться?

Single page application, толстый клиент
,
JavaScript
,
Интерактивные приложения
,
CSS модули и веб компоненты
Доклад принят в программу конференции

Качество

Доступность? Запросто!

Сергей Кригер

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

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

Accessibility
,
Совместная работа дизайнеров и верстальщиков
Программный комитет ещё не принял решения по этому докладу

Как мы отделили фронтенд от монолитного бэкенда

Зарема Халилова

У нас в Uploadcare основной сайт — монолит на Django. Разрабатывать клиентскую часть в экосистеме монолита было неэффективно, и мы приняли волевое решение сделать отдельное приложение для фронтенда на Node.js.

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

Спойлер: всё получилось хорошо, бэкендеры и фронтендеры счастливы!

Программный комитет ещё не принял решения по этому докладу

Как обновить продукт за полгода, не блокируя другие команды, и при этом сохранить рассудок

Олег Плотников

Прошлой весной мы запустили проект по обновлению интерфейса с примерно такой постановкой задачи:
- запустить маркетплейс с плагинами;
- обновить и систематизировать UI продукта;
- прокачать текущую функциональность.

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

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

Single page application, толстый клиент
,
Фронтенд / другое
,
Инструментальная поддержка, декомпозиция задач
,
Методологии и процессы разработки ПО; Сроки и приоритеты
,
Продуктовая разработка
Программный комитет ещё не принял решения по этому докладу

Отложенное исполнение кода без костылей

Иван Потапов

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

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

JavaScript
,
Браузеры
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

E2E и BDD

Иван Ботанов

Тесты, тесты, кругом тесты. Этот доклад снова про тесты. Но не про привычные нам юниты, а про е2е.

Мы рассмотрим:
1) Что такое е2е.
2) Зачем нам нужны е2е.
3) Как правильно писать е2е.
4) Как подружить е2е-тесты и BDD-подход на примере Angular.
5) Как это встраивается в Agile-процесс разработки.
6) Как в этом участвует бизнес, и почему ему это выгодно.
7) Посмотрим демку на Angular.

Программный комитет ещё не принял решения по этому докладу

Типизация против story points: кто кого?

Илья Климов

Войны о необходимости статической типизации в мире JavaScript не утихают ни на минуту. Автор и сам регулярно выступает с одной из баррикад, распекая TypeScript за их слабый вывод типов, Flow - за отсутствие экосистемы, а обычный JS - за то, что он еще существует. Но что, если отставить вопросы веры и задаться простым вопросом - а позволяют ли типы работать продуктивнее? Существующее исследования говорят, что нет. Интуиция и личный опыт автора - что да.

Этот доклад - анализ статистики, накопленной 40 разработчиками из 6 стран мира в течение полугода. В докладе я приведу очевидные, неочевидные и совсем контр-интуитивные выводы про пользу типизации в мире JavaScript.

Node.js и io.js
,
JavaScript
,
Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

CSS Code Coverage & Clean Up

Антон Холкин

Удаление неиспользуемого CSS-кода – одна из задач Frontend-оптимизации на сайте Booking.com. Суммарно по всем пользовательским сценариям и их вариациям – на сайте более 50K различных CSS-селекторов. Определить, какие из них актуальные, просто проанализировав кодовую базу – невозможно. А ввиду большого количества сценариев/вариаций (более 2000) с возможными динамическими изменениями страницы невозможен и вариант ручного тестирования.

Мы получили code coverage CSS-кода, используя crowd source-подход. Я расскажу, на чем основан выбор такого подхода, и как при его использовании мы минимизировали негативное воздействие на пользовательский опыт (а в некоторых случаях и избежали).

В докладе также будет описано, как на основе полученного code coverage, мы провели валидацию этих данных. Расскажу, как затем осуществили и саму процедуру удаления ненужного CSS-кода. Разумеется, последняя процедура проводилась с непременным контролем качества и с возможностью немедленного роллбэка. Кроме этого, расскажу о том, как при наличии более 300 Frontend-разработчиков и UX-дизайнеров мы сумели никого не обидеть и минимизировали нежелательные удаления.

Результатом для нас стало повышение конверсии, улучшение времени на Critical Rendering Path на M ms. А также повышение velocity нашей команды разработчиков.

JavaScript
,
Браузеры
,
CSS модули и веб компоненты
,
Совместная работа дизайнеров и верстальщиков
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Это страшное слово Deadline

Василика Климова

Я работаю в разработке 7 лет. Последние полтора года являюсь Team Lead и отвечаю головой за Frontend в Artec3D. Наша работа всегда является заключительным звеном перед релизами. В процессе подготовки релизов и формирования сроков работают все: менеджеры, маркетологи, дизайнеры, бэкендеры и другие. В случае смещенных сроков и невозможности перенести релиз отдувается, конечно же, Frontend-отдел... Об этом и поговорим.

Как не сойти с ума, когда до релиза сайта 2 недели, а дизайн ещё не полностью готов? Что делать, если внедрен новый стек технологий, а команда в нем еще не разобралась? Как быть, если перед релизом команду покидают важные разработчики?

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

Совместная работа дизайнеров и верстальщиков
,
Фронтенд / другое
,
Code Review
,
Совместная работа, система контроля версий, организация веток
,
Большие проекты/команды
,
Корпоративная культура и мотивация
,
Поиск и развитие команды
,
Антикризисный менеджмент
,
Управление / другое
Программный комитет ещё не принял решения по этому докладу

Ликбез: полное руководство по современным стратегиям загрузки шрифтов

Сергей Болтрукевич

11 способов загрузки веб-шрифтов, и какой именно должен подойти вам. Как легко оптимизировать шрифт и уменьшить его размер до 3-х и более раз.

Программный комитет ещё не принял решения по этому докладу

И вот я - верстальщик. Что дальше?

Александра Шинкевич

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

Так было и со мной. Но это ведь отнюдь не значит, что компания была (и есть) плохая, и возможностей роста в ней нет. Что же делать, если расти хочется, но непонятно, как и куда, ведь спросить не у кого?

Я расскажу свою историю и поделюсь тем, на что обратить внимание новичкам в самом начале их карьеры.

Программный комитет ещё не принял решения по этому докладу

Конечные автоматы в построении UI

Сергей Болтрукевич

О том, как можно уменьшить сложность и сократить количество ошибок при построении UI, используя теорию конечных автоматов.

Программный комитет ещё не принял решения по этому докладу

Показываем картинки пользователю: подробное руководство

Никита Дубко

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

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

Война текстовых редакторов: рассказ очевидца

Александра Шинкевич

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

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

Программный комитет ещё не принял решения по этому докладу

Закэшируй это

Всеволод Шмыров

Кэширование в браузере - это достаточно гибкий механизм. Используете ли вы весь его потенциал?

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

Оффлайн и кэширование в локальных хранилищах
,
Node.js и io.js
,
Фронтенд / другое
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

RUM: in the wild

Александр Гутников

Производительный сайт - одна из главных целей современного веб разработчика. И поэтому нам нужен инструмент, который позволит:
- определять «проблемные» места, чтобы понимать, где именно нужны оптимизации;
- искать баланс между количеством функционала и скоростью загрузки у клиентов;
- контролировать, что после релиза мы ничего не “сломали”.

В докладе поговорим о том, что такое RUM (real user monitoring), и как он может помочь современному веб-разработчику делать свою работу лучше, а именно:
- какие метрики измерять и мониторить;
- что нужно знать про агрегацию собранных данных;
- какие инструменты могут со всем этим помочь.

Программный комитет ещё не принял решения по этому докладу

Внутренние стандарты разработки

Алексей Захаренко

Frontend развивается быстро, иногда даже слишком.
Постоянно обновляются библиотеки, появляются новые языки и подходы к разработке.

У нас небольшая компания, примерно 10 команд, но однажды и мы ощутили боль отсутствия внутренних стандартов.

Расскажу о следующем опыте:
- Когда и как мы поняли, что это боль;
- Какие методы решения проблемы выбрали и почему;
- Последовательность и этапы решения;
- Процесс внедрения в команды подрядчиков;

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

JavaScript
,
Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

Библиотека элементов на практике

Сергей Кузнецов

Сегодня многие клиенты хотят получить персонализированную библиотеку элементов, созданную под их стиль. Мы разберемся с тем, какие плюсы и минусы есть у разных решений, и, вообще, всегда ли стоит создавать библиотеку элементов или в некоторых случаях это бесполезно? Разберем принципы, нюансы и подводные камни, а также раскроем следующие темы:
1) Кому и зачем нужны библиотеки элементов;
2) Частые требования к реализации;
2) Как грамотно реализовать репозиторий под библиотеку;
3) Компоненты: правильная верстка - это еще не всё;
4) Настраиваем сборщик: меньше действий, больше удобства;
5) NPM-пакеты на практике;
6) Документация - это важно!

Программный комитет ещё не принял решения по этому докладу

Рефакторинг - Где? Куда? Когда? Откуда? Почему? Зачем и Как?

Алексей Охрименко

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

Single page application, толстый клиент
,
Пакетные менеджеры и организация модульности
Доклад принят в программу конференции

Что не так с Emoji

Алексей Авдеев

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

Дизайн и работа с изображениями
,
Браузеры
,
Accessibility
,
Совместная работа дизайнеров и верстальщиков
Программный комитет ещё не принял решения по этому докладу

Инструменты

Иван Тулуп: асинхронщина в JS под капотом

Михаил Башуров

У javascript насквозь асинхронная природа, но при этом один поток - как же так? Как пользоваться асинхронностью и не выстрелить себе в ногу?

Мы рассмотрим, что такое event loop, и с чем его едят, поглядим, чем таски отличаются от микротасок, как браузеры управляют приоритетами задач, и что говорит на этот счет спецификация. Также узнаем, в чем отличия в работе event loop в Node.js, и проведем параллели с браузерами.

Node.js и io.js
,
JavaScript
,
Браузеры
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Middlewares are awesome

Никита Мостовой

Приложения на стеке React-Redux стали уже одним из стандартов в современной фронтенд-разработке. Вместе с Redux в проектах используют redux-thunk, redux-saga или какой-нибудь другой похожий инструмент. Они позволяют общаться с API, обрабатывать сложные случаи. Эти решения объединяет то, что они все — middleware с определенным форматом. Middleware в Redux — это очень мощный инструмент, который позволяет решать любые задачи по построению бизнес-логики, разделить уровни MVC.

Мы поговорим о том, как кастомные middleware упрощают нашу жизнь в различных случаях и заменяют redux-thunk, sagas.

AngularJS, Backbone.js и другие JavaScript-фреймворки
,
JavaScript
Доклад принят в программу конференции

Знай свой JIT: ближе к машине

Андрей Мелихов

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

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

JavaScript
,
Производительность и мониторинг фронтенда
Доклад принят в программу конференции

Использование монорепозиториев для разработки проектов

Андрей Антропов

- Начну с обсуждения проблем, которые приходится решать при разработке больших проектов — выделение общих частей, работа с их версионированием и прочие способы контроля сложности проекта. Всё это — чтобы подвести к необходимости использования монорепозиториев в проекте;
- Перейду к монорепозиториям как способу организации проектов, который по дизайну способствует модульности проекта;
- Опишу возникающие проблемы при подобной структуре проекта и способы их решения, подведу к тому, что есть лакуны в инструментах, помогающих в разработке проектов, базирующихся на монорепах. А именно: интегрированность внутрь проекта и возможность быстрого расширения функционала за счет проекта;
- Затрону вопросы модульной сборки проекта на этапе его старта с возможностью набора необходимого функционала и физическим отключением и удалением всего ненужного;
- Расскажу про Rispa как один из способов решения данной задачи с точки зрения управления и работы с проектом.

Программный комитет ещё не принял решения по этому докладу

Этот замечательный Node.js

Александр Лобашев

Знакомый js, инструменты и многое другое сделали Node популярной платформой для разработки. Но что происходит, когда выполняется js-код? Как работает I/O? Почему нельзя использовать блокирующие операции в работе веб-сервера? Разбираемся с устройством платформы Nodejs.

Пакетные менеджеры и организация модульности
,
Взаимодействие с серверной стороной (API)
,
Node.js и io.js
,
JavaScript
Программный комитет ещё не принял решения по этому докладу

Рефакторинг платежного процесса Яндекс.Денег

Илья Кашлаков

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

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

Программный комитет ещё не принял решения по этому докладу

Как React изменил Javascript

Игорь Зиновьев

- История JS-фреймворков.
- Главные игроки на рынке сегодня.
- Как работает React.
- Почему React Native - это важно.
- Обзор экосистемы.

Программный комитет ещё не принял решения по этому докладу

Grid Layout как основа современной раскладки

Сергей Попов

Grid с нами уже больше года. Мы прочитали и посмотрели уже всё, что можно было, но никто по-настоящему не рассматривал гриды под практическим углом. Это мы и сделаем.

Программный комитет ещё не принял решения по этому докладу

Квантовая механика вычислений

Дмитрий Карловский

У клиента медленный девайс, а вам нужно делать кучу тяжёлых действий в UI-потоке.
- Как добиться 60 кадров в секунду, не превращая код в спагетти?
- Как отменять уже начатые вычисления, когда их нужно повторить с более актуальными данными?

У вас сервер, вычисляющий ответ на запрос от 1 мс до 10 с.
- Как сделать так, чтобы долгие задачи не блокировали быстрые, не создавая по потоку на каждый запрос?
- Как отменять уже начатые вычисления, когда клиент помер?

Спойлер: stackfull fibers помогут нам выдавать каждой задаче процессорное время квантами по 16 мс.

JavaScript
,
Асинхронное программирование, реактивное программирование
,
Оптимизация производительности
,
Алгоритмы и их сравнение
Программный комитет ещё не принял решения по этому докладу

Техническая сторона создания UI-kit на Angular 4/5

Юрий Юрин

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

В своём докладе я расскажу о процессе вынесения общего кода в библиотеку. Минусы использования исходного кода напрямую, и проблемы, возникающие при сборке в бандл: разные инструменты сборки (Webpack, Angular CLI), отсутствие готовых инструментов для AOT-компиляции при использовании require и require.context, отказ от css-modules, инлайнинг файлов стилей и изображений.

Мы потратили больше 100 часов на обсуждения, эксперименты и код. Если у вас есть похожая задача, вы сможете их сэкономить.

Пакетные менеджеры и организация модульности
,
AngularJS, Backbone.js и другие JavaScript-фреймворки
Доклад принят в программу конференции

Фреймворки: теория эволюции

Анастасия Лопатина

Backbone, Knockout, Ember, React, Angular, Vue — количество фронтенд-фреймворков растёт каждый день. Но задумывались ли мы когда-либо над тем, что всё это время двигало вперёд их развитие?

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

Более того, эти проблемы специфичны не только для фронтенда и уходят корнями в эпоху становления computer science — 80-90-e годы прошлого века. В докладе вы узнаете, как вопросы реализации FRP и различных видов DSL связаны с тем, как сейчас устроены фреймворки и со способами оптимизации их работы.

От теории я перейду к практике: покажу различные практические способы оптимизации фронтенд приложений и проанализирую их преимущества и недостатки.

Программный комитет ещё не принял решения по этому докладу

Готов ли CSS заменить препроцессоры?

Сергей Попов

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

Разберемся, в каком состоянии сейчас CSS, что именно он может заменить для препроцессоров и ответим на главный вопрос: готов ли CSS заменить препроцессоры.

Шаблонизаторы и препроцессоры
,
Адаптивные дизайн и вёрстка
,
CSS модули и веб компоненты
,
Фронтенд / другое
Доклад принят в программу конференции

Headless browsers: что, как и почему

Виталий Слободин

Headless-браузеры уже давно стали незаменимым инструментом разработчиков. С их помощью можно проводить тестирование кода, проверять качество и соответствие верстки и другое. Но проблема в том, что разработчики мало знают про то, как устроен и работает их инструмент. Расскажу об этих инструментах, и как они работают.

Программный комитет ещё не принял решения по этому докладу

Почему я сбежал от фотошопа, и с чем работать при верстке сайта в 2018

Алексей Гнездилов

Мы рассмотрим альтернативы Photoshop (Avocode, Zepllin, Sympli), разберем, какие возможности они открывают для frontend-разработчиков в 2018 году, с какими трудностями можно столкнуться при их использовании, и как максимально эффективно использовать их при работе в команде.

Интерактивные приложения
,
Дизайн и работа с изображениями
,
Совместная работа дизайнеров и верстальщиков
,
Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

JSON API - работаем по спецификации

Алексей Авдеев

Разберемся в спецификации JSON API.

Расскажу, в чём её суть, чем она дополняет RESTful и чем отличается от GraphQL.
Плюсы, минусы, подводные камни, опыт использования.

Взаимодействие с серверной стороной (API)
Программный комитет ещё не принял решения по этому докладу

Готовим opensource-проект

Камиль Исмагилов

Что необходимо, чтобы ваш проект можно было использовать в OpenSource (от технической реализации и публикации в npm до популяризации среди аудитории).

В частности, вы узнаете:
- Что обозначают все эти бейджи на проектах.
- Что такое code style и какой из них выбрать (standard, airnbnb и т.п.).
- Что такое code climate.
- Особенности файла package.json в публичных плагинах.
- License- and Contribution-файлы.
- gitignore and npmignore.
- Как собирать проект для использования в различных окружениях (напрямую в браузере, как ES6 module, как CommonJS модуль и т.п.).
- Сервисы для документирования (сравнение gitbook, docsify).
- Что такое CI (continious integration Travis), и зачем он нужен.
- Продвижение проекта (как бесполезный компонент набрал больше 100 звёзд, и почему полезный плагин не набрал даже 30).

Пакетные менеджеры и организация модульности
,
JavaScript
,
Фронтенд / другое
Доклад принят в программу конференции

Dollar config: хранение динамических настроек в статическом конфиге

Азат Разетдинов

У каждого приложения есть конфиг. Иногда возникает необходимость использовать разные значения той или иной настройки в зависимости от текущего запроса. Можно назвать такие настройки динамическими. Библиотека dollar-config позволяет декларативно описать внутри статического конфига все возможные варианты значения динамической настройки, а также логику их выбора.

Node.js и io.js
,
JavaScript
,
Управление конфигурацией
Программный комитет ещё не принял решения по этому докладу

Функциональное программирование без монад и функторов

Виталий Потапов

Расскажу историю о том, как я начал использовать функциональное программирование для одного проекта. Как учился «думать в функциональном стиле», почему выбрал библиотеку Ramda и какой в итоге получил профит.

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

JavaScript
Программный комитет ещё не принял решения по этому докладу

Повторное использование кода с помощью HOC в React

Дмитрий Цепелев

В докладе я расскажу о том, как можно контролировать сложность React-компонентов и повысить переиспользование кода с помощью компонентов высшего порядка (HOCs). Мы рассмотрим данные проблемы на примере небольшого приложения, попробуем переписать его с использованием HOCs, а затем познакомимся с библиотекой recompose, позволяющей сэкономить время на написании boilerplate-кода. В заключение я расскажу, как я полностью перевел два довольно больших проекта на использование recompose.

Single page application, толстый клиент
,
AngularJS, Backbone.js и другие JavaScript-фреймворки
,
JavaScript
Программный комитет ещё не принял решения по этому докладу

Интернационализация в ReactJS средствами i18next

Алексей Бульба

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

Мы с вами разберёмся в:
- хранении текстов;
- модульной структуре локализаций;
- во взаимодействии с локализацией на примере React.

Single page application, толстый клиент
,
AngularJS, Backbone.js и другие JavaScript-фреймворки
,
Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

Безграничные возможности компиляции

Андрей Роенко

Редкий проект обходится сегодня без участия Babel или TypeScript в сборке. Оба можно расширять под свои нужды.

- Как работает транспиляция.
- Как написать свой плагин.
- Простой пример: assert'ы.
- Транспиляция ES2015-модулей в свою модульную систему.
- Автоматические понифилы при использовании TypeScript.

Шаблонизаторы и препроцессоры
,
JavaScript
Программный комитет ещё не принял решения по этому докладу

GraphQL. Нам нужен новый API

Никита Филатов

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

Программный комитет ещё не принял решения по этому докладу

Компонентный подход без модных фреймворков

Руслан Рустамов

Начать стоит с того, что было:
5 разных UI-китов, около 400 сайтов на shared-хостингах, битрикс, спагетти-код на jquery.

К чему хотелось прийти:
Сократить время разработки и поддержки UI-китов, добиться унификации компонентов. Все это в условиях отсутствия SSR и без потери в качестве SEO. А еще, чтобы эти самые киты можно было центрально обновлять.

Мы выбрали написание собственного самоката, с оглядкой на существующие фреймворки. Спустя год нам удалось перевести 2 из 5 китов на новые рельсы, выкатить новый дизайн на 150 сайтах, выработать подход по работе с компонентами, научить бэкендеров БЭМ-у, попробовать рендерить pug на node.js через битрикс (!), развернуть свой npm-сервер и систему сборки и деплоя.

Программный комитет ещё не принял решения по этому докладу

Статические генераторы сайтов: достойная альтернатива классическим решениям

Слава Абрамов

На примере отдельно взятого проекта я попытаюсь рассказать о преимуществах статических генераторов сайтов (далее СГС) по сравнению с классическими решениями (HTML-верстка + backend, например, CMS Wordpress).

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

Шаблонизаторы и препроцессоры
,
Генераторы статики
,
Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

Библиотека styled-components (SC): зачем она нужна и какие проблемы решает

Артём Арутюнян

Мы познакомимся с библиотекой styled-components (SC), которая предлагает лучший архитектурный подход к организации стилей в веб-приложении. Многими SC воспринимается просто как ещё одна библиотека в экосистеме React для написания CSS in JS, но, помимо этого, есть ещё один важный момент. SC предлагает не просто набор технологий, но и новый архитектурный подход к построению веб-интерфейсов.

* сначала мы разберём, зачем использовать именно CSS in JS;
* потом посмотрим на то, как это реализовано в SC;
* а в итоге рассмотрим гайдлайн построения и управления компонентов представления с помощью SC.

Программный комитет ещё не принял решения по этому докладу

Анимация на сайте – легкий соус или основное блюдо?

Дмитрий Шагаров

Статичная страница сайта, монументальная как памятник архитектуры n-го века или сайт с полным погружением и эффектом присутствия, а, может, кислотная дискотека мерцающих баннеров - что есть достаточная и необходимая анимация веб-страниц?

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

Веб-графика, оптимизация изображений
,
Дизайн и работа с изображениями
,
Совместная работа дизайнеров и верстальщиков
,
Фронтенд / другое
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу