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

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

Wi-Finame: kl10tch

pass: raster-noton

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

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

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

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

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

a-piskunov.ru [email protected]

СЕЙЧАС

тимлид

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

http://a-piskunov.ru

mailto:[email protected]

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

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

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

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

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

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

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

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)

http://html5please.com/#polyfill

ШИМЫgithub.com/es-shims

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

github.com/paulmillr/es6-shim

http://github.com/es-shims

http://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

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

http://vk.com/smile42ru

http://a-piskunov.ru

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

Internet