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

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

Кроме этого, Вы cможете посетить все общие доклады фестиваля, интересные широкой публике, и специализированные доклады конференций блока клиентских технологий и интерфейсов: конференцию "Apps Conf 2017".

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

Адаптация

Адаптивная верстка 5 лет спустя

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

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

Тезисы:
* Ограничения и трудности - трансформация десктопа в мобайл (таблицы, картинки, видео и изображения).
* Оптимальное количество брейкпоинтов - какие значения самые важные и что делать с промежуточными?
* Удобные единицы измерения - вычисляемые значения в CSS3 (calc, vh, vw и прочие).
* Расположение навигации на экране - про пальцы.
* Best practice: простые способы снижения нагрузки.
* Worst practice - как делать не надо.
* Мультитач, тапы и свайпы - чтобы работало.
* Детали настройки - вендорные префиксы и прочие системные директивы.

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

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

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

- Статистические данные на основе сайта tutmee.ru.
- Подтверждение важности и актуальности качественной адаптивной верстки (на основе статистики).
- Подходы при разработке иностранных и отечественных проектов. Преимущества и недостатки.

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

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

Как технология AMP HTML ускоряет сайты и повышает бизнес-метрики

Артём Цымпов

* История проекта Accelerated Mobile Pages.
* Как это работает.
* Западные кейсы и результаты.
* Отечественные кейсы и результаты.
* Как правильно внедрить AMP.
* Будущее технологии.

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

Приложения

Как подойти к современным веб-приложениям

Никита Прокопов

Веб — это не только странички. Люди делают в вебе приложения и люди хотят пользоваться веб-приложениями.

Да, с веб-технологиями как таковыми всё хорошо, но веб-приложения — это уже серьезная затея. Приложения работают с горами данных, хитрой логикой, впечатляющими интерфейсами. Люди ждут от приложений отзывчивости при плохой связи, корректности, совместной работы (раз уж мы все равно в интернете). Они видели, что Google Docs это может, и тоже этого хотят. Только как сделать Google Docs и не устать?

Доклад отвечает на вопрос: как организовать архитектуру, чтобы а) сделать, б) современное, в) нетривиальное веб-приложение и г) не надорваться? С чего начать? Какие основные части? Как они могут выглядеть? Мы рассмотрим возможные модели данных, рендеринга, синхронизации, лога событий, серверного рендеринга, совместной работы и работы оффлайн. Приложения требуют подхода. Хорошего, плохого, основательного — хотя бы осмысленного. Этот доклад — про подходы.

Single page application, толстый клиент
,
Взаимодействие с серверной стороной (API)
,
Оффлайн и кэширование в локальных хранилищах
,
Интерактивные приложения
Программный комитет ещё не принял решения по этому докладу

Как масштабировать сложный Single Page Application

Алексей Катаев

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

Также я отвечу на вопросы: почему мы используем deep routing вместо pubsub, почему Angular 1.6 + typescript, расскажу немного о тестировании и CI, и о том, как мы за 10 дней сделали платформу для проведения олимпиады Skyeng Super Cup на 100.000 учеников.

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

Как мы запустили offline-версию сайта RG.RU

Алексей Чернышев
Максим Чагин

Мы расскажем о построении работы действующей offline версии сайта на примере СМИ с миллионной аудиторией. О выборе стека технологий для решении поставленной задачи. О результатах эксплуатации с момента запуска.
В том числе: * Стратегия обновления данных в Service Worker * Проблемы и их решение при работе с оффлайн-средой * Сбор аналитики при отсутствии интернета

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

Разработка Rich Text Editor: проблемы и решения

Егор Яковишен

Краткая история редактирования текста в браузерах. Родовые проблемы WYSIWYG-редакторов. Типы и функции современных веб-редакторов.

Обработка различных способов ввода (клавиатура, голос, copy&paste, autocomplete/autocorrect, gesture input). Проблемы с использованием contenteditable и execCommand. Браузерные API: Selection, Input Method Editor, Clipboard, MutationObserver, CompositionEvents. Спецификация W3C Input Events.

Хранение состояния документа (document state): модель данных, виды сущностей, рендеринг в разных форматах, семантика HTML-кода. Способы изоляции CSS в редакторе (iframe, БЭМ-нотация, CSS reset, Shadow DOM). Привычный UX: выделение текста, copy&paste, горячие клавиши, undo/redo. Адаптация контента под разные устройства и экраны. Многопользовательское редактирование и синхронизация изменений. Работа в оффлайн-режиме.

Public API редактора и подключение плагинов. Примеры современных редакторов: Quill от Salesforce, Trix от Basecamp, Draft.js от Facebook. Обзор крупных проектов: Google Docs, iCloud Pages, Office 365.

Будущее rich text editing.

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

Компоненты и их композиция

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

- MVC и его вариации: MVP, MVVM, FLUX.
- Разделяй и властвуй: компонентная декомпозиция.
- Коммуникация компонент: события, стримы, атомы.
- Парадигмы: императивная, функциональная, реактивная.
- Двусторонний поток данных: от источника к потребителю и от потребителя к источнику.
- Конфигурирование и кастомизация: боль и страдания от раздувающихся интерфейсов.
- Композиция компонент: приватное и публичное, инкапсуляция и сокрытие.
- Принцип ленивости в приложении к загрузке, вычислениям и рендерингу.
- Резюме: идеальная компонентная модель.

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

Архитектура в сложных React-приложениях

Павел Силин

1) Обзор разных подходов к архитектуре приложений.
2) Типичные ошибки, проблемы и страдания в сложных react-приложениях .
3) Как страдать меньше и сделать масштабируемое и поддерживаемое react-приложение.

Single page application, толстый клиент
,
Взаимодействие с серверной стороной (API)
,
JavaScript
,
Фронтенд / другое
,
Микросервисы, SOA
,
Архитектурные паттерны
,
Архитектуры / другое
Программный комитет ещё не принял решения по этому докладу

Разработка React-компонентов

Павел Силин

1) Использование принципов SOLID для react-компонентов.
2) Использование stroybook для разработки react-компонентов.
3) Как мы бьем приложение на react-компоненты.
4) Тупые и умные react-компоненты.
5) React-компоненты и стили/

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

Интерактивные 3D-карты своими руками

Александр Амосов

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

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

JavaScript
,
WebRTC, WebGL и веб-медиа в целом
,
Интерактивные приложения
Программный комитет ещё не принял решения по этому докладу

Портируем существующее Web-приложение в виртуальную реальность

Денис Радин

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

Должны ли мы использовать CSS или WebGL для проброса приложения в VR?
Какие решения доступны на текущий момент, и каких ошибок стоит остерегаться?
Почему HTML так же хорош для разработки VR-интерфейсов, как и для обычного, плоского Web?
Как веб-разработчик может быть частью VR-революции?

Single page application, толстый клиент
,
Веб-графика, оптимизация изображений
,
WebRTC, WebGL и веб-медиа в целом
Программный комитет ещё не принял решения по этому докладу

Кошелёк или деньги: сложный выбор между памятью и процессором

Игорь Алексеенко

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

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

Новинки

Валидация пользовательских данных в 2017-м году

Павел Ловцевич

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

Современные браузеры предоставляют разработчику широкий набор встроенных методов для работы с данными пользователя. Разработка собственных велосипедов и использование тяжелых библиотек со множеством зависимостей остались в прошлом. В отдельных случаях можно даже обойтись без написания Javascript-кода!

В рамках доклада будут рассмотрены основные аспекты работы с HTML5 Constraint Validation API:
- семантика полей форм;
- доступные методы API;
- прогрессивное улучшение валидации (CSS → JS);
- глубина и особенности реализации API в браузерах.

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

Сага о yield. Скрытые возможности

Евгений Евсеев

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

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

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

Веб-погружение или виртуальная реальность с WebVR

Татьяна Кузнецова

Виртуальная реальность захватывает мир - устройства, игры, образование… Не избежал этой участи и веб - уже сейчас можно создавать подобные веб-продукты с помощью экспериментального JavaScript API - WebVR.

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

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

Пора начинать фыркать – Grid Layout уже здесь

Сергей Попов

Про Grid Layout сказано уже много. Большое количество статей, примеров, инструментов. Однако только сейчас мы можем начинать свободно пользоваться этой спецификацией. Пора заканчивать читать справочники и начинать использовать Гриды в реальном мире.

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

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

Прогрессивный рендеринг и Catberry.js

Михаил Реенко

Знаете ли вы, что такое прогрессивный рендеринг?
Почему вам стоит его использовать?
Какие есть варианты сегодня?

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

Компоненты на GLSL шейдерах для контроля над каждым пикселом Web-приложения без потери производительности или самый технологичный спиннер в браузере, как и зачем он был создан?

Денис Радин

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

Шейдеры - небольшие программы на си-подобном языке GLSL (OpenGL Shading Language), которые позволяют описывать состояние вершин (вершинные шейдеры) или пикселов (пиксельные шейдеры) в контексте OpenGL (или WebGL) с помощью математических функций. GLSL компилируется и выполняется на GPU с беспрецедентной для HTML/CSS производительностью. Как правило, шейдеры применяются для разработки игр и компьютерной графики, а использование их в UI-компонентах незаслуженно обходится стороной.

В данном докладе рассматривается опыт использования GLSL при разработке Web-приложений.

Single page application, толстый клиент
,
WebRTC, WebGL и веб-медиа в целом
Доклад принят в программу конференции

Качество

Что делать, когда у вас 100 партнеров? Как в lamoda устроен фронтенд системы аналитики

Иван Потапов

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

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

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

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

Оценка фронтенда: моя история о том, как сдавать задачи вовремя

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

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

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

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

Экосистема или зоопарк? Как работать с дизайном и frontend десятков связанных систем

Федор Щудло

Это история о том, как вести параллельную работу над дизайном и frontend нескольких десятков систем, представляющих из себя единую экосистему.

Как от “стихийной” разработки и уймы повторяющегося кода перейти к написанию библиотек для самих себя, сделать своими пользователями своих же разработчиков, а что-то даже выложить в open source. И почему выкладывать в open source важно, и вам тоже следует это делать.

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

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

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

Дизайн-система. Идеальный компонент

Роман Ганин

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

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

Вам нужен крутой разработчик. Нам тоже

Владимир Гриненко

Работая в одной из крупнейших IT-компаний в Европе, мы все время нуждаемся в крутых разработчиках.

В докладе я расскажу, как мы их ищем (и не находим), «выращиваем» вне компании, нанимаем, а затем продолжаем растить уже внутри.

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

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

Александр Курганов

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

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

Тестируй это

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

Как писать тесты?
Как запускать тесты?
Кто все сломал?

Все три вопроса рассмотрены в докладе. Также будет демо интеграции проекта, покрытого тестами, и cloud-based-сервиса по запуску этих тестов (github+travis).

Кроме того, расскажу об опыте по сокращению времени прогона тестов; о том, как добавить тесты в случае, если у вас уже есть большое приложение, но все еще без тестов.

JavaScript
,
Фронтенд / другое
,
Автоматизация тестирования
,
Интеграционное тестирование
,
Юнит-тестирование
,
Приёмочные и функциональные тесты
,
Тестирование фронтенда
Программный комитет ещё не принял решения по этому докладу

Типографика: от металла к пикселям

Роман Прудников

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

Основные понятия и правила хорошего тона в типографике и применение этого в CSS с примерами из реального проекта.

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

Особенности разработки API

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

Разработка API/Framework/встраиваемого контента сильно отличается от разработки обычного frontend-приложения. На примере нашего API Яндекс.Карт я расскажу, чем именно.

+ Какие задачи обычно решают разработчики API?
+ С каким проблемами сталкиваются?
+ Какие есть ограничения в разработке?
+ Чем еще должен заниматься разработчик API, кроме непосредственно разработки?

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

Типографика: восток

Роман Прудников

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

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

Когнитивные ловушки: почему оформление не должно быть слишком хорошим, а тексты слишком убедительными

Тамара Кулинкович

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

Краткое содержание.

* Слишком натурально – страшно.
Когда сходство с оригиналом бывает излишним. Почему потребители боятся человекоподобных роботов? Теория «Зловещей долины» и ее использование в дизайне и кинематографе. Применение ограничителей. Примеры использования страха и тревоги в дизайне.

* Слишком красиво – дорого.
Отталкивающе хорошее оформление. «Не захочу, пока не пойму»: теория когнитивного диссонанса Л. Фестингера, теория конструктов Дж. Келли и информационная теория эмоций П. Симонова. «Не попробую, пока не буду уверен»: теории потребностей Д. Аткинсона и В. Врума.

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

* Слишком убедительно – властно.
Властные тексты и «Теория реактанса». Какие послания вызывают «реактивное сопротивление». Исследование восприятия слогана “Just do it!”: почему можно потерять лояльных пользователей из-за уверенных текстов. Какие пользователи больше подвержены реактивному сопротивлению. Использование реактивного сопротивления в маркетинговой и организационной коммуникации. Как техника BYAF (“But you are free”) увеличивает конверсию и уступчивость пользователей.

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

Как создать UI для платформы, в которой уже более 500 сервисов, и не умереть

Евгений Успенский

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

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

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

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

Инструменты

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

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

Работаешь такой, работаешь. Создаешь компоненты всякие, некоторые даже по несколько раз в в разных проектах используются. Может, попробовать выложить в NPM, Github? Пусть другие тоже пользуются! Но как сделать это правильно? Например, компонент-то на React. Как так сделать, чтобы его можно было без проблем внедрить в любой проект, не важно какая система управления зависимостей используется: Webpack, CommonJS, AMD или просто <script>...

А еще надо добавить тесты, дать возможность сообществу присылать Pull Request. Что выбрать для компонента на React?

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

Компонент-платформа

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

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

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

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

Документация REST API

Артём Кузвесов

Часто возникает ситуация, когда нужна документация для API. Например, если вы работаете в команде, где роли backend- и frontend-разработчиков исполняют разные люди. Или нужно дать доступ к API сторонним разработчикам.

Такая документация должна быть всегда актуальной и легко читаемой. Как показывает практика, хранение её в google docs/Markdown/reStructuredText/etc. неудобно, и программисты часто забывают её вовремя актуализировать. Лучше всего, если документация API будет храниться максимально близко к коду.

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

Паразитируем на React-экосистеме (Angular 4+)

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

Паразитизм — форма взаимоотношений между организмами различных видов, из которых один (паразит — aka Angular 4+) использует другого (хозяина — aka React) в качестве среды обитания и источника питания, нанося ему вред, но при этом не убивая.

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

Мы рассмотрим оба подхода — о том, как выживать в суровом мире Angular 4+ с помощью React-экосистемы (оставляя ее в живых), и о том, как в конечном счете "убить" своего "хозяина".

Из этого доклада вы узнаете, как работать с Redux, Mobx, GraphQL и рядом других основополагающих кирпичиков React-экосистемы.

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

Рефакторинг клиентского кода или как отрефакторить миллион строк кода и не сойти с ума

Алексей Золотых

+ Реафакторинг - понятие.
+ Когда нужен, когда не нужен.
+ Как правильно ставить цели для рефакторинга.
+ Средства для рефакторинга в IDE и простейшие средства.
+ Рефакторинг из консоли.
+ Применяем JavaScript для того, что рефакторить JavaScript.
+ Подводные камни.

Очень много примеров.

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

Ваш CSS нас не устраивает, мы придумаем свой

Роман Прудников

Нам постоянно нужно от CSS больше того, что в нём (или браузерах) есть прямо сейчас.

История, рассказывающая о том, какими способами мы решали(ем) проблемы недостающих нам возможностей (css frameworks, css polyfills, preproccessors, “post”-proccessors) и о Houdini, который должен положить конец этой ерунде, позволив описывать разработчикам с помощью JavaScript не просто полифилы, а полноценные реализации, не мешающие производительности.

Расскажу о том, что мы можем контролировать в CSS сейчас, что сможем с Houdini, и что в нем есть на текущий момент с примерами демок.

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

Бешеные псы: Angular 2 vs React

Евгений Гусев
Илья Таратухин

Angular 2 отрелижен, React и подавно. Копья поломаны, мечи перекованы на орала, страсти уже поутихли и, вроде как, статус кво восстановлен. Кто-то использует один инструмент, кто-то другой, разве что, иногда раздаются возгласы: "А у них...!"

Однако не всё так просто. В конце концов, мы не только пишем код, но и решаем однотипные проблемы:
* Как сделать наше приложение быстрым?
* Как писать понятнее и проще?
* Как писать быстрее?

Кто-то может сказать: "Эту тему уже миллион раз обсасывали, зачем опять?". Но, все же, если вы стартуете новый проект или решили переписать старый, перед вами всё равно встанет проблема выбора. И даже если вы считаете, что всё очевидно — это далеко не так.

Вот уже год как Wrike использует Angular 2 в бою. И вроде всё хорошо, но иногда закрадываются сомнения: “А вдруг мы свернули не туда?”

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

Мистер Красный (Евгений Гусев) и мистер Синий (Илья Таратухин) спорят, доказывают, демонстрируют примеры, пытаясь понять, что же лучше.

Будет боль, будет спор, будет вывод.

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

React на стероидах

Владимир Гриненко

Давайте писать React-компоненты декларативно.

Это позволит влиять на любой аспект (поведение, внешний вид и даже HTML-разметку) без костылей в виде if'ов в коде. Совершенно аналогично тому, как мы привыкли описывать стили в CSS.

Мы сможем комбинировать произвольные свойства на едином компоненте вместо необходимости создавать нового наследника класса для каждого варианта комбинаций. Легко проводить AB-тесты и прочие виды экспериментов. Добавлять необходимые особенности в зависимости от платформы и так далее.

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

React native на практике: от идеи до приложения

Павел Кондратенко

Как устроено мобильное приложение и как оно работает? Можно ли его написать на js? Много ли нужно знать, чтобы это сделать? Как его потом опубликовать? Долго ли адаптировать его под android и ios? Если вы тоже задаетесь этими вопросами, то приходите на мой доклад! Я поделюсь своим опытом разработки приложения от идеи до релиза.

В своем докладе я буду опираться на опыт разработки мобильного приложения корпоративной библиотеки с помощью react native под платформы android и ios. Я расскажу о тонкостях проектирования и разработки приложения, основной акцент буду делать на технической части: как архитектурно устроено приложение, как оно взаимодействует с пользователем и как оно работает с api.

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

Юзабилити, конверсии и SEO для Frontend

Тарас Гуща

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

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

Возвращаем фронтенд на сервер с Korolev

Алексей Фомкин

Не так давно мы вошли в эпоху одностраничных веб-приложений (SPA). Очень часто сервер превращается в прослойку между DBMS и "толстым" клиентом в браузере. Разработчики вынуждены писать десятки тысяч строк бессмысленного кода. Возможными решениями проблемы являются веб-ориентрованные DBMS (Firebase) или новые языки запросов (GraphQL).

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

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