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

За последние несколько лет в мире 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 включения: как с ними бороться?

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 и другие изменили наш код. Теперь он прекрасен.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я автор библиотеки 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

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

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

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

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

- Почему браузера и браузерных расширений пока не всегда достаточно.
- 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.