Фронтенд разработка без боли

КАК ПИСАТЬ ФРОНТЕНД БЕЗпроблем и боли

Wi-Finame: kl10tch

pass: raster-noton

РЕБЯТА ВАС МНОГО!1. Junior? 2. Middle/Senior/Lead? 3. Backend? 4. Design?

АНТОН ПИСКУНОВс 2008 - фриланс

с 2011 - веб-студии с 2012 - хайлоад

!более трехсот завершенных проектов несколько десятков эпичных факапов

!опыт своего бизнеса, трижды

a-piskunov.ru smile@a-piskunov.ru

СЕЙЧАС

тимлид

scalecastle.ioидеолог, евангелист

ЗАЧЕМ МЫ ЗДЕСЬМетодологии разработки

Приёмы скоростной разработки

Организация кода

Новые технологии

Обзор фреймворков

bem

web componentsсборка

оптимизацииcloudflare

gulp

grunt

angularjs

опять все тормозит

я так привык

sass

lesses5

amdwtf?!

cdn http

twitter flight

shim/sham

agile

быстрее!

ВЕРИШЬ ПРЕЗЕНТАЦИЯМ НА СЛОВО?

В ОДНОМ ИЗ ПРОЕКТОВ (С)

Палево

NDA

ИСТОРИЯКак мы писали веб раньше

Серверная логика

Серверный рендеринг

Клиент «отдыхает»

ИСТОРИЯПроблемы которые у нас возникали

Организация кода

Продолжительность загрузки

Не отзывчивый интерфейс

Скудность возможностей

Сайт не был приложением

ОРГАНИЗАЦИЯ КОДАJavaScript

Спагетти-код (jquery-like)

Месиво из событий

Тонны коллбэков

JS - шаблонизаторы

Управление зависимостями

ОРГАНИЗАЦИЯ КОДАCSS

Месиво из селекторов

Низкая читабельность

Проблемы с переопределением

Кроссбраузерность

Управление зависимостями

ПРОДОЛЖИТЕЛЬНОСТЬ ЗАГРУЗКИ

ПРОДОЛЖИТЕЛЬНОСТЬ ЗАГРУЗКИ

• Вес статики • Количество статики • Количество запросов • «Пинг» до серверов

• Отсутствие модульности • Всё своё тащу с собой • Какая минификация?

ПРОБЛЕМЫ БЫЛИ

Организация кода

Продолжительность загрузки

Не отзывчивый интерфейс

Скудность возможностей

Сайт не был приложением

СУПЕРМЕН СПЕШИТ НА ПОМОЩЬ

BEMТолько без религии!

Object Oriented CSSAtomic CSS

SMACSS…чтоугодно…

BEMГлавное - четкие, прописанные на бумаге правила,

доступные для каждого члена команды

Мы договариваемся о префиксах и живем дружно

l - уровень b - блок e - элемент js - для JS __ - модификатор

BEM

Открытая документация

Относительная простота

Хорошо распространен

Не навязчив

ЧТО ПРИНЕС СУПЕРМЕНЧеткое соглашение об именовании

PREPROCESSINGМы голыми танцевали под луной, когда LESS и SASS пришли в наш мир

Нафига оно мне?

• Вложенность селекторов • Переменные • Операторы, вычисления • Миксины • Вы ничего не теряете • Вы следуете принципу DRY

PREPROCESSING

PREPROCESSING

PREPROCESSING

ЧТО ПРИНЕС СУПЕРМЕНЧеткое соглашение об именованииУдобный способ следовать соглашениюНиштяки для быстрой разработки

WEB COMPONENTSЧто мы можем использовать?

• Шаблоны • Декораторы • Теневой DOM • Кастомные элементы • Импорты

WEB COMPONENTSЧто мы можем использовать?

• Шаблоны • Кастомные элементы

ПОЧЕМУ ТАК МАЛО?

КАК НЕ МОЖЕМ?!

WEB COMPONENTSЧто мы можем использовать

на самом деле

• Шаблоны • Кастомные элементы • Идеологию

ЧТО ПРИНЕС СУПЕРМЕНЧеткое соглашение об именованииУдобный способ следовать соглашениюНиштяки для быстрой разработки

Возможность не превратить проект в прах и говно через полгода активного кодинга

ОРГАНИЗАЦИЯ КОДАCSS

Месиво из селекторов

Низкая читабельность

Проблемы с переопределением

Кроссбраузерность

Управление зависимостями

КАКИЕ ПРОБЛЕМЫ РЕШИЛ СУПЕРМЕН

Месиво из селекторовНизкая читабельность

Проблемы с переопределением

CSS

ОРГАНИЗАЦИЯ КОДАJavaScript

Спагетти-код (jquery-like)

Месиво из событий

Тонны коллбэков

JS - шаблонизаторы

Управление зависимостями

КАКИЕ ПРОБЛЕМЫ РЕШИЛ СУПЕРМЕН

JavaScript

Спагетти-код (jquery-like)Месиво из событий

ЗАВИСИМОСТИ

В этом слове столько же боли как в слове «лего» или «угол мебели»

- Парни, а какой версии у нас jQuery? - 1.8 кажется. Или 1.9 Не помню, спроси Диму.

ЗАВИСИМОСТИПочему так важно контролировать их?

• Вы всегда точно знаете какая версия у либы • Вы вовремя обновляетесь (фичи, безопасность) • Инструмент позволяет не таскать их в Git • Деплой становится проще!

ЗАВИСИМОСТИНо будьте осторожны!

BOWERТут как с BEM’ом, главное без фанатизма

bower.iocomponent.io

NPM…чтоугодно…

BOWER

Открытая документация

Хорошо распространен

Большой список библиотек

Можно вертеть как хочешь

BOWER

1. Установка npm install bower !2. Работаем! bower init

BOWER

Конфиг файл .bowerrc

BOWER INSTALL -S JQUERY

ЕЩЕ НЕМНОГО ПАКЕТОВ

ЧТО ПРИНЕС СУПЕРМЕНЧеткое соглашение об именованииУдобный способ следовать соглашениюНиштяки для быстрой разработки

Возможность не превратить проект в прах и говно через полгода активного кодингаЧеткий контроль над 3rd-party

Еще ништяки для быстрой разработки

КАКИЕ ПРОБЛЕМЫ РЕШИЛ СУПЕРМЕН

JavaScript && CSS

Управление зависимостями

ПРОБЛЕМЫ БЫЛИ

Организация кода

Продолжительность загрузки

Не отзывчивый интерфейс

Скудность возможностей

Сайт не был приложением

АНТРАКТ?

ОПТИМИЗАЦИЯ

Сократить вес кода

Сократить количество запросов

Уменьшить расстояние до пользователя

Шорт-лист для сайта улитки

СБОРКА ПРОЕКТА

• Задействовать зависимости • Скомпилировать SASS/LESS • Минифицировать CSS • Минифицировать JS

СБОРКА ПРОЕКТА• Задействовать зависимости • Скомпилировать SASS/LESS • Минифицировать CSS • Минифицировать JS • Прогнать CSSLint/JSLint • Оптимизировать изображения • Минифицировать HTML • Запустить тесты

GULPJSГлавное не используйте Ant

brunchgrunt

…чтоугодно…broccoli

GULPJS

Открытая документация

Можно вертеть как хочешь

Полноценное программирование

CONTENT DELIVERY

Весь контент должен быть доступен, битый линк на ресурс создаст неиллюзорный абзац

Весь контент должен быть расположен максимально близко к пользователю

CONTENT DELIVERYПервая линия обороны

Nginx, gzip, cache

Riak, Redis, Memcache O_o

CONTENT DELIVERYВторая линия обороны

CloudFlare

Clodo, Selectel

MaxCDN

NGENIX

ЧТО ПРИНЕС СУПЕРМЕНДоступность фронтенда

Скорость загрузки ассетов

ИДЕОЛОГИЯКак мы работаем с данными?

ИСТОРИЯКак мы писали веб раньше

Серверная логика

Серверный рендеринг

Клиент «отдыхает»

ИДЕОЛОГИЯКак мы работаем с данными?

Зачем таскать данные которые могут нам не пригодится при каждом рендере

страницы?

Давайте будем более интерактивны

ИДЕОЛОГИЯSPA: Single Page Application

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

Загружаем данные on-demand

Снижаем объём загружаемого HTML с помощью API и шаблонизации

ДАННЫЕКак работать с данными лучше?

Ради бога выкиньте RPC и тем более XML

Работайте с актуальной парадигмой REST и JSON

Кэш как всегда всех спасёт

ДАННЫЕREST

Нет серебрянной пули - вы можете видоизменять его под свои требования и задачи

GET domain.tld/api/usersGET domain.tld/api/users/listGET domain.tld/api/users?list

ДАННЫЕREST

Разделите внешнее API и внутреннее API на разные приложения

С умом используйте CORS

GET api.domain.tld/users

GET <any>.domain.tld/users

ЧТО ПРИНЕС СУПЕРМЕНДоступность фронтенда

Скорость загрузки ассетов

Удобство работы с данными

Скорость загрузки приложения

ШАБЛОНИЗАЦИЯЗачееем топтаааать мою любооовь, её итак почтиии не стааало.

Да, придется сильно поломать мозг если вы привыкли к серверной разработке

Другой подход диктует другие правила игры

ШАБЛОНИЗАЦИЯ

Таблица на 100 строк. Зачем таскать столько HTML?

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

ШАБЛОНИЗАЦИЯangularjs mustache handlebars

jade underscore

twig.js

ЧТО ПРИНЕС СУПЕРМЕНДоступность фронтенда

Скорость загрузки ассетов

Удобство работы с данными

Уменьшение трафика

Скорость загрузки приложения

САЙТ ТУРБО-УЛИТКА

ПРОБЛЕМЫ БЫЛИ

Организация кода

Продолжительность загрузки

Не отзывчивый интерфейс

Скудность возможностей

Сайт не был приложением

ПРОБЛЕМЫ БЫЛИ

Организация кода

Продолжительность загрузки

Не отзывчивый интерфейс

Скудность возможностей

Сайт не был приложением

ВОЗМОЖНОСТИЧто мы теряем?

Возможности CSS3

Возможности ECMAScript*

Синтаксический сахар

Оптимальные алгоритмы

ПОЛИФИЛЛЫhtml5please.com/#polyfill

хранилища

web components (polymer)

web sockets (socket.io)

ШИМЫgithub.com/es-shims

Ништяки из ECMAScript 5 и ECMAScript 6 уже сейчас

github.com/paulmillr/es6-shim

БИБЛИОТЕКИunderscorejs

Больше возможностей, больше оптимальных алгоритмов

lo-dash

ПРЕПРОЦЕССОРЫ

HTML Slim Haml Jade

CSS SASS SCSS LESS

JS CoffeeScript TypeScript LiveScript

ФРЕЙМВОРКИ

Основательная разработка

Пользовательское приложение

«Админка»

ФРЕЙМВОРКИОсновательная разработка

Vanilla JS

ФРЕЙМВОРКИОсновательная разработка

Vanilla JS

Backbone / Marionette

Underscore

ФРЕЙМВОРКИОсновательная разработка

Vanilla JS

es5-shim

Handlebars

ФРЕЙМВОРКИВ чём соль?

Есть стартовый код - нужно меньше велосипедов

Полная свобода действий, вас ни что не ограничивает

Придется много думать

ФРЕЙМВОРКИПользовательское приложение

Twitter Flight

es5-shim

Handlebars

ФРЕЙМВОРКИВ чём соль?

Четкое workflow для разработчика

Event-Driven - просто песня для приложения с тоннами действий

Думать можно меньше

ФРЕЙМВОРКИ«Админка»

Angular JS

Встроенный шаблонизатор

jQuery Lite

Некоторое количество готовых велосипедов

ФРЕЙМВОРКИВ чём соль?

Четкое workflow для разработчика

Думать придется очень много

Обратная сторона - резкая боль в области поясницы при попытки отойти

от этого workflowВозможность прийти к авто-генерации

ПРОБЛЕМЫ БЫЛИ

Организация кода

Продолжительность загрузки

Не отзывчивый интерфейс

Скудность возможностей

Сайт не был приложением

ИСТОРИЯКак мы писали веб раньше

Серверная логика

Серверный рендеринг

Клиент «отдыхает»

НАШИ ДНИКак мы делаем сейчас

Клиентская логика

Клиентский рендеринг

Клиент «пашет»

Сервер «отдыхает»

PROBLEMS?Нет проблем! Всем няшку!

Код чистый и понятныйФичи пишутся,

а баги находятся, быстро

Интерфейс молниеносен и автономен

Сайт - является полноценным приложением

КУДА БЕЖАТЬ

WHAT TIME IS IT?!

ФИДБЭЭЭЭК!

Если вам не понравилось - обязательно подойдите и скажите мне об этом.

Совсем круто будет - если вы предложите

что можно улучшить.

Анонимно: ask.fm/psknv

ДО ВСТРЕЧИ!

vk.com/smile42ru skype: smile42ru

tel: +7 921 569 49 74

a-piskunov.ru

Редактор в скриншотах: atom.io

Спасибо! Севе Иванову Антону Виллеру Сергею Смирнову Саше Чистякову