Frontend Conf 2016

May 31 - June 1 2016
Сколково, Россия
Профессиональная конференция фронтенд-разработчиков
View
To favorites

Андрей Сумин

CTO at Mail.Ru Group

Роберт Харитонов

Руководитель отдела разработки at Liberty Global

Ростислав Галкин

Frontend Lead at Babo

Анастасия Горячева

Разработчик at Avito

Евгений Кольцов

Технический директор at eski.mobi

About event

Topic: IT

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

Audience

  • Тимлидам
  • FrontEnd-Разработчикам
  • Проектировщикам интерфейсов
  • Системным администраторам
  • QA
Share

Schedule

Show all
Tuesday, May 31
Day 1
Get access to all talks
Purchased
In cart
Free
Free
Free
Free
Free
Free
Качество

Андрей Сумин

CTO at Mail.Ru Group

Как отвечать за продакшн

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

В докладе я расскажу, какой плаcт работ мы еще делаем, чтобы улучшить техническое качество продукта. Сконцентрируюсь на frontend. Рассмотрим вопросы:

1. Логирование.
2. Мониторинг.
3. Алертинг.
4. Бета-пользователи.
5. Саппорт.
6. Плагины.
7. Антивирусы.
и т.п.

Purchased
In cart
Free
Free
Free
Free
Free
Free
Новинки

Роберт Харитонов

Руководитель отдела разработки at Liberty Global

React: новая эра фронтенд разработки

React(JS) — это современная библиотека для разработки UI компонентов от Facebook, по праву считающаяся самой трендовой технологией среди JavaScript разработчиков на 2015/16 год.

Но каким образом React стал настолько популярен в среде разработчиков, учитывая что библиотека покрывает только View из необходимого минимума MVC архитектуры? Ответ таится в экосистеме технологий, в рамках которой нам открываются совершенно новые способы разработки приложений, не только для веба, но и нативных платформ с родным UI (iOS, Android, Win 10, OSx).

Роберт расскажет, почему огромная популярность React более чем заслужена, и почему это не "очередной фреймворк", а чуть ли не самое большое изменение в JavaScript разработке за последние годы.

Purchased
In cart
Free
Free
Free
Free
Free
Free
Приложения

Ростислав Галкин

Frontend Lead at Babo

Amazing threesome, rrr... React. Redux. Real world

"Все гениальное просто" — таким бы мог быть слоган Redux, одной из имплементаций FLUX-архитектуры, которой 31 мая исполняется ровно год. И вот уже практически год, как мы приняли решение использовать Redux в наших проектах. Это был осознанный риск, о котором мы ничуть не пожалели.

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

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

Обо всем этом я расскажу в своем докладе, поделюсь тем опытом и ощущениями, которые мне лично удалось получить за время работы с React и Redux.

Purchased
In cart
Free
Free
Free
Free
Free
Free
Инструменты

Анастасия Горячева

Разработчик at Avito

МРТ для данных

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

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

Большие одностраничные приложения тоже устроены сложно. Чтобы их починить или обвесить новым функционалом, требуется вникнуть в их устройство. Для этого нередко приходится засучивать рукава и с головой погружаться в самую глубь проекта. И немалая часть проблем связана именно с бизнес-логикой и потоками данных. Но что, если у нас будет возможность проникнуть в структуру данных, способ увидеть связи между ними и отслеживать то, как они влияют друг на друга? Такой способ, чтобы не требовалось вскрытия черепной коробки — все как с МРТ.

В докладе речь пойдет о собственных разработках в этой области.

Purchased
In cart
Free
Free
Free
Free
Free
Free
Адаптация

Евгений Кольцов

Технический директор at eski.mobi
and 1 more
speaker

Как мы адаптировали более 150 сайтов по технологии JavaScript-adaptive

° С чего мы начинали;
° Все способы адаптации;
° JavaScript-adaptive;
° Опыт создания собственной библиотеки;
° История панели управления;
° Сервис оптимизации изображений;
° Чему мы научились.

Purchased
In cart
Free
Free
Free
Free
Free
Free
Качество

Алексей Малейков

Ведущий разработчик at HTML Academy

Радости и гадости регрессионного тестирования вёрстки

Совместно с университетом ИТМО мы запустили курс, посвященный основам HTML и CSS. Уже на момент регистрации на этот курс записалось более 12 тысяч студентов. Перед нами стояла задача разработать систему, которая будет автоматически проверять итоговые проекты на соответствие заранее подготовленному макету. В качестве основной техники для проверки было выбрано регрессионное тестирование.

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

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

Purchased
In cart
Free
Free
Free
Free
Free
Free
Новинки

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

Сооснователь и CTO at LOVATA

Пользовательские свойства как основа архитектуры CSS

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

- Всесильны ли препроцессоры?
- Можно ли дать CSS второй шанс?
- Наследуемость или БЭМ?
- А что с обратной совместимостью? Решение есть!

В рамках доклада будут детально рассмотрены практические примеры применения CSS Custom Properties. Также будут рассмотрены новые спецификации CSS Extensions (Сustom selectors) и CSS @apply Rule в рамках перспективы отказа от препроцессоров.

Purchased
In cart
Free
Free
Free
Free
Free
Free
Качество

Илья Бовкунов

Проектировщик at КБ «Собака Павлова»

UX-дизайнер, ты ли это? Навыки проектировщика в стилизации интерфейсов

Доклад предполагает общение о завершающих этапах проектирования, о месте перехода прототипа в графический дизайн. Освещение тем, акцентов, шрифтов и цвета. 

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

Тезисно:
- Путь проектировщика в проекте. От начала и бумажных тигров, жизненных ситуаций и сценариев, вариантов использования и эскизов до самих прототипов. Про последний этап и будет весь рассказ.
- Акценты. Якорные элементы. Правильное построение визуальной иерархии в прототипе.
- Вертикальный ритм. Выбор кеглей и интерлиньяжей для построения базовых блоков. Расстояния между блоками. Построение заголовочных и третичных текстов по базовым блокам. Использование полученной сетки для определения расстояний между объектами и текстами на странице.
- Аккуратность в прототипах. Верное использование внутренних и внешних кавычек. Длинных тире, коротких, дефисов. Корректное расположение союзов и предлогов.
- Цвета. Выбор базового цвета. Выбор пары комплиментарных цветов по базовым. Подбор верных оттенков серого по базовому цвету.

Purchased
In cart
Free
Free
Free
Free
Free
Free
Новинки

Денис Глазков

Бэкенд-разработчик at IT

base.network — пиринговый веб на JavaScript

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

Доклад посвящен новому open-source проекту — base.network — распределенному независимому пиринговому вебу. Расскажу про общую схему работы сети, немного о работе с криптографией на JavaScript, о создании приложений на JavaScript без использования центральных серверов.

Purchased
In cart
Free
Free
Free
Free
Free
Free
Новинки

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

Разработчик at НГС Технологии

Vue.js и его брат-близнец Vue-server.js

    Современный Веб всё больше стремится к динамичным, похожим на приложения, сайтам.

Оперативно строить быстрый и динамичный интерфейс на проекте N1.RU нам помогает Vue.js.
Однако, как и многие современные библиотеки и фреймворки, Vue.js не умеет рендериться на сервере. 
При этом иметь такую возможность бывает полезно по нескольким причинам: начиная от вопросов SEO и заканчивая красотой загрузки страницы.
Чтобы реализовать такую возможность для Vue.js мы создали его дополнение — Vue-server.js.

Я расскажу о том, что умеет Vue.js, что у нашего дополнения "под капотом", почему мы выбрали такой путь и как, вообще, всё это работает. А ещё попробую дать критическую оценку проделанной работе.
Purchased
In cart
Free
Free
Free
Free
Free
Free
Get access to all talks
Purchased
In cart
Free
Free
Free
Free
Free
Free
Приложения

Кирилл Дмитренко

Фронтенд-разработчик at Яндекс

Стабильность WebGL приложений

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

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

Purchased
In cart
Free
Free
Free
Free
Free
Free
Новинки

Мстислав Живодков

Frontend developer at 2GIS

Как мы ускоряли WebGL

Если вы захотите сделать веб-приложение с использованием технологии WebGL, скорее всего, вы захотите также, чтобы это приложение было отзывчивым и быстро работало даже на медленных компьютерах.

Но если вы простой фронтендер, занимаетесь js, html и css, то 3D-графика для вас покажется совершенно иным миром со своими законами. Так это случилось с нами во время разработки нашего продукта.

Поэтому в докладе я хочу рассказать:
1. О новых проблемах, с которыми мы столкнулись по вине WebGL;
2. О различных методах оптимизации, которые мы успешно и не очень опробовали на проекте, а также наглядно показать их действие на рабочих примерах;
3. Приведу другие способы ускорения, до которых у нас пока ещё просто не добрались руки.

Purchased
In cart
Free
Free
Free
Free
Free
Free
Приложения

Роман Янке

Frontend developer at 2ГИС

Жизнь HTML в 2ГИС под iOS

– Когда и для чего нативному приложению использовать веб-технологии.
– Что делается хорошо, а что нельзя ни в коем случае делать с веб-вью в приложении.
– Как в 2гис проходит разработка для мобильного приложения и чем она отличается от привычного процесса фронтенд-разработки.
– Как сделать html-страницу похожей на приложение, чтобы сохранить чувство «нативности».

Purchased
In cart
Free
Free
Free
Free
Free
Free
Wednesday, June 1
Day 2
Инструменты

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

Фулстек-разработчик at LOVATA

Классические архитектуры во фронтенде

Responsive web design, HTML5, CSS3, IDE, API, React, Angular, веб-компоненты, БЭМ... Опытным фронтендерам эти слова давно знакомы. А как насчет таких классических архитектур как MVC, MVP или MVVM? Знаете ли вы, что такое MVP, и почему Angular.js построен на паттерне MVVM, а не MVC, хотя в этом фреймворке активно используется понятие "контроллер"? Чем эти три архитектуры отличаются друг от друга, и зачем, вообще, о них нужно знать фронтендеру?

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

Purchased
In cart
Free
Free
Free
Free
Free
Free
Инструменты

Денис Паясь

Разработчик at Яндекс

Конструктор

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

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

Стала закрадываться мысль, что пора что-то менять. И мы поменяли.

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

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

Purchased
In cart
Free
Free
Free
Free
Free
Free
Инструменты

Роберт Харитонов

Руководитель отдела разработки at Liberty Global

Библиотека UI компонентов, о которой вы всегда мечтали

Уже много лет все говорят о компонентном вебе и мире, где новые интерфейсы строятся из готовых блоков на раз-два, но чего мы в итоге достигли? Пока БЭМ, Polymer, Angular и создатели других технологий ищут лучшие пути организации клиентского кода, создавая сложные абстракции, сообщество React уже давно наслаждается отличными и простыми инструментами для работы с UI компонентами.

В рамках доклада Роберт поделится опытом мирового React-сообщества в создании удобных и простых в обращении библиотек UI компонентов.

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

Purchased
In cart
Free
Free
Free
Free
Free
Free
Инструменты

Татьяна Бабич

Руководитель Frontend-отдела at Simbirsoft

55+1 прием для улучшения JavaScript-кода

В докладе будут рассмотрены приемы, практики и «фишки», которые полезно использовать для создания любого Frontend-приложения. 

Мы поговорим об организации модульности и компонентов на примере приложений с Angular, React и Polymer. Обсудим, как использовать особенности JavaScript, и рассмотрим особые случаи, когда фреймворки действительно приходят на помощь.

Purchased
In cart
Free
Free
Free
Free
Free
Free
Новинки

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

Senior JavaScript developer at IPONWEB

Angular 2 не так уж и плох... А если задуматься, то и просто хорош

Не так страшен Angular 2, как его малюют.

Первая реакция о нем весьма негативная. Круглые скобочки, квадратные, что это, зачем? Но что, если я вам скажу, что эти скобочки позволяют избавиться от проблем, которые не может решить React v15.x? 

Знаете ли вы, что Angular 2 ближе к функциональному программированию, чем Redux?

В этом докладе мы обсудим: 
1) Что нового даёт нам Angular 2? 
2) Рассмотрим его архитектуру и поймём ценность этих решений. 
3) Реактивное программирование с Angular 2.
4) В чём Angular 2 превосходит React и Redux? 
5) Как перейти на Angular 2 и спать спокойно.

Purchased
In cart
Free
Free
Free
Free
Free
Free
Приложения

Филипп Нехаев

Архитектор веб-интерфейсов at Tinkoff.ru

Как мы разрабатываем новый фронтенд Tinkoff.ru

Недавно запустили новый сайт Тинькофф. 

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

Сейчас tinkoff.ru насчитывает более 3000 компонентов и сотни страниц.

Purchased
In cart
Free
Free
Free
Free
Free
Free
Новинки

Роман Грунтович

Frontend developer at tutu.ru

Что делать, когда костыли уже не помогают? Опыт tutu.ru

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

Можно решать эти проблемы, двигаясь небольшими шагами, внося улучшения постепенно. Альтернативный вариант — все стереть и написать заново. На это тяжело решиться, ведь требуется выделить ресурсы, которых всегда не хватает. Также есть риск навредить уже работающему продукту. Однако, мы решились и в своем докладе я расскажу: 

- Что такое реинжиниринг и зачем он был нужен в tutu.ru.
- Как мы подошли к выбору нового технологического стека.
- Как мы выбрали архитектуру новых приложений. 
- Почему мы пришли к TypeScript и React. 
- Шаблонизатор для компонентов Reactа, серьезно? 
- Выкидывать legacy код жестоко, но нужно же с ним что-то делать. 
- Как удовлетворить seo без лишних усилий.

Purchased
In cart
Free
Free
Free
Free
Free
Free
Get access to all talks
Purchased
In cart
Free
Free
Free
Free
Free
Free
Качество

Денис Мишунов

Разработчик at Digital Garden AS

В погоне за производительностью. Психология пользователя

“Страница должна загружаться быстрее чем за 1 секунду; количество серверных запросов должно быть сведено к минимуму; CSS и JS файлы должны быть сжаты и не превышать 50 килобайт…” — это лишь малая часть технических решений и рекомендаций, которыми нас снабжает индустрия в погоне за производительностью. Но во всем этом есть одна проблема — пользователям нет никакого дела до килобайтов, миллисекунд и количества запросов. 

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

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

Purchased
In cart
Free
Free
Free
Free
Free
Free

Tickets

Video
Access to all videos
Purchased
In cart
Free
Free
Free
Free
Free
Free

Organizer

Ontico
http://ontico.ru

Organizer committee: Олег Бунин, support@ontico.ru, 74956460768

Similar events

June 7 2019
Talks 16
Views 5.64 K
development, frontend
August 4-7 2019
Talks 132
Views 497.04 K
code, development, engineering, safety, scale, security, soft, technology, vpn
July 10-12 2019
Talks 50
Views 258.25 K
astronomy , bioinformatics, biology, data science, geoscience, language interoperability, machine learning, materials science, python, social sciences
more