Профессиональная конференция фронтенд-разработчиков
Проходит в рамках фестиваля
2015
Российские интернет-технологии
Профессиональная конференция Frontend Conf посвящена всем аспектам разработки клиентской части веб-проектов: дизайн, юзабилити, вёрстка, JavaScript, rich-медиа и так далее. Концепция толстого клиента стала стандартом де-факто — в разработке клиентской части веб-приложений свои правила, законы, фреймворки, подходы к тестированию и проектированию. Всему этому и посвящен Frontend Conf.
  • HTML5 Web Components: следующий шаг к модульности вашего проекта

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

    HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.

    Основные моменты доклада:
    — Для каких проектов Web Components будут полезны в первую очередь;
    — Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
    — Текущие проблемы реализации в браузерах и их решение;
    — Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
    — Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.

  • Компонентный веб. Проникновение в дизайн

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

    Компонентный веб, современные методологии, такие как БЭМ, и инструменты, такие как Sketch и AI, вкупе с передовыми фреймворками, такими как React и Angular, а также шагающий по миру стандарт ES6, могут решить насущные проблемы создания интерфейсов.

    Я покажу, как дизайнер может использовать компоненты в Sketch, сделанные разработчиком. Редактировать и изменять их. А также расскажу, насколько сильно это упрощает жизнь в команде, создающей невероятные продукты каждый день ;)

  • Жизнь в изоляции

    С ростом кодовой базы становится все более очевидной необходимость использования компонентного подхода, когда каждая логическая часть обособлена. Если говорить про JavaScript, то в нем есть области видимости, опираясь на которые можно соорудить изолированные компоненты. Но в CSS нет подобных механизмов, поэтому и придумываются Shadow DOM (Web Components) и различные методики вроде БЭМ.

    Но что если взглянуть на проблему под другим углом? Адаптируя подходы, что уже используются для других задач, можно получить куда больше выгоды, чем просто изолированные стили!

  • Alasql.js - SQL база данных на JavaScript

    AlaSQL - это библиотека для обработки данных с помощью языка SQL, которая написана на JavaScript и может работать в браузере (в том числе, и в режиме WebWorker) или Node.js. Библиотека может быть использована в приложениях для обработки данных, а также для решения задач ETL (extract-transform-loading), таких как приложения бизнес-аналитики.

    В рамках доклада будет рассказано о несложном API AlaSQL, приведено несколько "живых" примеров, как библиотека может быть использована в браузерных и мобильных приложениях.

    AlaSQL позволяет проводить сложные манипуляции с массивами данных (такие как группировки, сортировки, выборки, слияния) с помощью привычных выражений языка SQL. Встроенные процедуры импорта и экспорта данных в различных форматах (включая TXT, JSON, CSV, TSV, Microsoft Excel и Google Spreadsheets) предоставляют удобный интерфейс для импорта и экспорта прямо из SQL-выражений. Библиотека хорошо сочетается с такими современными фреймворками, как Angular.js, d3.js и Google Chars.

    AlaSQL поддерживает совместимость по многим операторам со стандартным SQL и различными его диалектами, что позволяет переносить ранее разработанные процедуры для других баз данных. Специальные расширения синтаксиса SQL позволяют простым и удобным способом использовать все возможности, предоставляемые JavaScript, например, обработка JSON объектов из SQL выражений.

    Для достижения высокого быстродействия AlaSQL написана с использованием сильно оптимизированного JavaScript и содержит несколько эвристик для сокращения времени обработки SQL выражений.

    Все основные положения доклада будут проиллюстрированы примерами кода.

    Андрей Гершун
    МАГ КОНСАЛТИНГ
  • TypeScript: особенности разработки

    TypeScript – светлое будущее ES6 уже вчера.
    Почему не "Кофе"? Чай полезней.
    Что не так с Flow от Facebook?
    Реальная практика использования: плюсы и минусы.
    Не VisualStudio единым. Особенности работы в других IDE.
    Интеграция с уже существующим JS кодом.
    Использование совместно с RequireJS. Подводные камни.
    Использование TypeScript совместно с React.
    TypeScript и Angular.
    Плюшки, которых нет в ES6/7 (пока нет): [static] enum, интерфейсы, private, protected, декораторы... Что дают и зачем?

  • JavaScript завтра

    За последние несколько лет в мире js-разработки особое внимание получили такие проекты как AtScript, TypeScript, SoundScript, Flow, Traceur, Babel, каждый из которых пытается предоставить разработчикам некую "улучшенную" версию JavaScript. Комитет TC39 также стал очень активен и разработал стратегию развития стандарта ECMAScript с более частыми релизами. Движки JavaScript стремительно приближаются к полной поддержке ES6. Огромное количество JS-фреймворков и библиотек выбирают следующую версию стандарта уже сегодня. Это означает, что необходимо уже сегодня обратить внимание на происходящее в мире JavaScript-разработки и разобраться, что ждет язык завтра.

    В своем докладе я постараюсь дать ответы на следующие вопросы:
    - почему такие фреймворки и библиотеки как Angular, Ember, React начали активно и кардинально меняться;
    - почему новая версия стандарта языка ES6 так долго внедряется вендорами браузеров и как TC39 решил ускорить процесс стандартизации и внедрения последующих версий ECMAScript;
    - почему CoffeeScript больше не "just JavaScript", и действительно ли он сделал такой значимый вклад в следующую версию JavaScript;
    - почему были созданы AtScript, TypeScript, Flow, чем каждый из них отличается от остальных, и как они влияют на дальнейшее развитие JavaScript;
    - что такое Strong Mode и SoundScript;
    - как начать писать ES6+ код уже сегодня.

  • Глубокая аналитика скорости сайта

    * Что ваши пользователи знают о ваших сетевых задержках такого, чего не знаете вы?
    * Navigation Timing API - что есть сейчас, что будет в течение года, кроссбраузерность.
    * Собираем и сворачиваем данные по задержкам: как искать узкие места сайта?
    * 3rd-party включения: как с ними бороться?

  • Быстрый рендеринг с DOM шаблонизаторами

    1. Типы шаблонизаторов DOM/innerHTML.
    2. Внутренности AngularJS и почему он тормозит.
    3. Внутренности ReactJS и почему он тормозит.
    4. Менее раскрученные решения Blaze/PaperclipJS/Riot и что там сделано лучше.
    5. Плюсы и минусы virtualdom.
    6. Работа с DOM может быть быстрее, если:
    6.1 Использовать одни и те-же участки DOM несколько раз.
    6.2 Сокращать количество reflow с DocumentFragment.
    6.3 Быстрое создание повторяющихся участков DOM с помощью cloneNode.
    6.4 Создавать куски DOM ahead of time.
    7. Встречаем temple - шаблонизатор, работающий в разы быстрее reactjs и не требующий загрузки 40k библиотеки времени исполнения.

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

    Писать веб-приложение — то еще занятие: медленно, сложно. Особенно трудно, если вы взялись за большой интерфейс.

    В докладе мы ответим на следующие вопросы:
    — Что такое функциональное программирование?
    — Как функциональный подход помогает делать веб-приложения?
    — Что в ФП хорошо ложится на специфику интерфейсостроения?
    — Как может выглядеть архитектура современного фронтенд приложения, использующего ФП?
    — Какие есть истории успеха и живые примеры?

    На примерах из ClojureScript, JavaScript, Elm и React.js.

  • Браузеры наши меньшие, или Нам нужно серьёзно поговорить

    Сделали сайт для ретинового Аймака на жирном канале в центре Москвы? Молодцы, осталось проверить его на ультрасовременном 4G-смартфоне, благо тариф безлимитный. А теперь очнитесь, соберите всю свою ответственность и научитесь делать сайты для людей. Прокси-браузеры, мобилки, прогрессивное улучшение и другие базовые принципы веба — давайте иметь совесть.

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

    Вадим Макеев
    Веб-стандарты
  • Как перестать отлаживать асинхронный код и начать жить

    Асинхронность в Javascript больше не страшна. Классические триллеры вроде "Callback Hell" и "Pyramid of Doom" потеряли свою актуальность настолько, что даже Java-программисты перестали пугать ими невинных джуниоров.

    Всё благодаря паттернам и библиотекам. Streams, Promises, Async-Await и другие изменили наш код. Теперь он прекрасен.

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

  • PostCSS: будущее после Sass и Less

    1. Зачем обрабатывать CSS?
    2. Чем плохи препроцессоры?
    3. Что такое постпроцессоры?
    4. Как их использовать?
    5. Как написать свой постпроцессор?

    Андрей Ситник
    Злые марсиане
  • Единая платформа для сайта и приложений Медузы

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

    О чем будем говорить:
    — как синхронно поддерживать десктоп, мобильный веб и нативные приложение с одинаковым функционалом;
    — как добавлять новые функции в нативное приложение без процедуры апрува;
    — как поддерживать большие нагрузки в бизнес-критичном функционале, но легко и быстро программировать некритичные функции;
    — как и зачем бороться с webview, CORS, jsonp и ASAP.

  • Декларативное целеполагание на примере музыкального приложения seesu.me

    Технологическое отставание разработки приложений от кулинарии и способ это исправить.

    Разработка и проектирование seesu.me (приложения для поиска и прослушивания музыки) как обстоятельства формулирования подхода декларативного целеполагания.

    Источники моих сложностей с seesu.me. Принципы проектирования интерфейсов, Джеф Раскин
    - Zoom UI
    - Отказ от модальных окон
    - Максимум данных на минимум действий пользователя
    - 3 правила высокоскоростного взаимодействия интерфейсов (http://habrahabr.ru/post/211659/)

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

    Больше лаконичности и оптимизаций (помимо текущих http://habrahabr.ru/post/210558/))

    Глеб Арестов
    Еврохим
  • Оживляем текст

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

    Можно ли заполнить текст видеороликом или залить текст текстом?

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

  • Мейкап и контроль качества верстки

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

    Доклад о том, как команда онлайн-версии 2ГИС развивала рабочий процесс разработки интерфейсов, и как мы стали заниматься мейкапом.

    Мейкап — это инструмент для приятного контроля за качеством верстки на веб-проектах.

  • Пакуйте чемоданы. Грузите апельсины

    Модульная структура кода при минимальных затратах улучшает производительность команды при создании сайта или веб-приложения. Существует несколько устоявшихся форматов модулей и репозиториев для их распространения.

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

  • (Не)безопасный Frontend

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

    Данный доклад посвящен различным client-side атакам, в том числе, реализуемым через уязвимости во frontend-части веб-приложений:
    - DOM Cross Site Scripting;
    - Content Security Policy и его обход;
    - "мисконфиги" на серверной стороне, позволяющие провести успешные атаки, направленные на браузер пользователя;
    - атаки через js-фреймворки;
    - правильная установка cookies;
    - HSTS;
    - HTML5 и безопасность;
    - "сложные" случаи эксплуатации client-side уязвимостей;
    - и кое-что еще.

    Доклад ранее нигде не был представлен.

  • Microsoft Edge и платформа веб-приложений в Windows 10

    Microsoft Edge -- новый браузер от Microsoft с новым движком и новым интерфейсом.
    Какие цели преследует Microsoft, и что это нововведение означает для веб-разработчиков?
    Что нового в движке браузера по сравнению с IE, и как он будет развиваться дальше?
    Движок Edge внутри Windows 10: хостинг сайтов внутри приложений и доступ к нативной функциональности.
    Дорожная карта: к чему и когда готовиться?

    Константин Кичинский
    Лаборатория Касперского
  • Визуализация данных в браузере с помощью D3.js

    Практический опыт использования библиотеки d3.js для создания инфографики. Загрузка, обработка, связывание и визуализация данных.

  • О тестировании JS API Яндекс.Карт

    Расскажу:
    — как наша команда разработки тестирует JS API Яндекс.Карт сейчас;
    — Как мы переезжали с умирающего YUI Tests и какие стратегии мы избрали, чтобы не пострадало качество продукта;
    — про сложности в тестировании асинхронных API, требующих дополнительной подгрузки, которым вреден запуск тестов в едином скоупе, и решение, используемое в JS API Яндекс.Карт.

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

    Расскажу, как сделана статистика и аналитика скорости работы (UX) приложений badoo (web, mobile-web, ios, android, windows).
    Общие концепции и примеры, что и как измерять.
    Как собирать данные со 100% пользователей проекта и выдержать нагрузку.
    Как из open-source решений собрать систему сбора и визуализации статистики для своего проекта.

  • Как взаимодействовать с графическими дизайнерами: готовим UI Kit

    Frontend-разработчики и веб-дизайнеры решают совместную задачу – чтобы пользователь получил лучший user experience. Но часто смотрят на проблему с разных позиций — либо наилучшего технического решения проблемы, либо художественного видения мира. Различие инженерных и художественных подходов нередко приводит к конфликту интересов и снижает эффективность работы команды. Однако поле битвы мировоззрений можно превратить в совместное рабочее пространство. В качестве основного подхода к поиску оптимального процесса создания и сопровождения визуального стиля веб-сайта рассматривается подготовка User Interface Kit (или UI Kit). UI Kit содержит элементы, которые служат кирпичами при построении единообразного интерфейса корпоративных веб-сайтов.

    Из предлагаемого доклада слушатели смогут узнать следующее:
    – какие плюсы предоставляет декомпозиция дизайна;
    – что такое UI Kit и какими свойствами он обладает;
    – почему работа с UI Kit понравится и разработчикам, и дизайнерам, и даже менеджеру проекта;
    – как можно реализовать UI Kit и организовать его хранение.

  • Browser Fingerprint - анонимная идентификация браузеров

    Я автор библиотеки fingerprintjs (http://github.com/Valve/fingerprintjs) - средства анонимной идентификации браузеров без cookie. Средства от которого нельзя спрятаться или защититься. Моя библиотека используется на таких сайтах как whitehouse.gov, youporn.com, addthis.com и других сайтах с большой посещаемостью.

    В настоящий момент я разрабатываю новую версию fingerprintjs-2 - для еще более качественного и агрессивного фингерпринтинга браузеров.

    Список статей про fingerprintjs или про технологии, лежащие в ее основе:

    http://mashable.com/2014/07/21/impossible-block-tracking-tool/
    http://www.techtimes.com/articles/11231/20140727/you-cannot-hide-from-canvas-fingerprinting-heres-what-you-need-to-know.htm
    http://www.propublica.org/article/meet-the-online-tracking-device-that-is-virtually-impossible-to-block
    http://www.spiegel.de/netzwelt/web/canvas-fingerprinting-macht-internetnutzung-nachverfolgbar-a-982280.html

  • HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов впридачу

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

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

    В этом докладе:
    - подходы к решению проблемы медленного DOM;
    - существующие решения: react-canvas, методология Netflix;
    - поиск идеального решения для оптимизации производительности;
    - рендеринг HTML/CSS через WebGL, знакомство с HTML GL;
    - ограничения и рекомендации.

    Денис Радин
    Focus Reactive
  • Онлайн-кинотеатр для SmartTV на веб-технологиях

    - Вводная информация о платформе.
    - Особенности и степень гомогенности платформы.
    - Сложности отладки приложений.
    - Заключение и перспективы.

  • Как сделать кроссплатформенное десктопное приложение на базе веб-технологий

    - Почему браузера и браузерных расширений пока не всегда достаточно.
    - nw.js (ex. node-webkit) - пишем под десктоп на js, html, css.
    - Отличные примеры приложений для мотивации.
    - Немного об архитектуре и поддерживаемых платформах.
    - Коротко об основах API и основных устоях.
    - Хранение данных.
    - Возможности nw.js и идеи их использования.
    - Сборка приложений и ее автоматизация.

  • Отладка кода в браузере

    Чем плох console.log, и как сэкономить время на отладке в Dev Tools?

    - Точки останова.
    - Просмотр состояния стеков.
    - Работа с repl в контексте активного стека.
    - Как удобно следить за состояниями переменных и выражений с помощью watch expressions.
    - Как поставить точку останова на события, мутации DOM, XHR, на обращения к полям объектов и на неперехваченные исключения?
    - Pretty print и source maps.
    - Немного о логах и debug.js.

Новости
1 декабря 2015
Видеозаписи фестиваля РИТ++ 2015 и его отдельных конференций
Спешим поздравить вас с Новым 2016 годом и кладем под ёлку видеозаписи докладов фестиваля конференций РИТ++ 2015.
20 мая 2015
Информация для участников (вопросы и ответы)
Информация по заселению в гостиницу, расписаниям, времени начала и окончания мероприятия. Во сколько приходить, что с собой приносить, где поесть и к чему быть готовыми.
6 мая 2015
Компонентный веб, D3.js, SmartTV, асинхронный код и базовые принципы веба
Можно писать сколь угодно компонентный код на БЭМ, React, AngularJS и на чём-нибудь ещё модном. Но пока дизайнер рисует для вас картинки, а не компоненты — круг разработки не замкнут и дизайнеры с разработчиками без конца дублирую работу друг друга. Дорогу из кода в Sketch и обратно покажет Антон Виноградов из Альфа-Лаборатории.
Спонсоры
Информационные спонсоры