Документ представляет собой обзор подходов к современному фронтенд-разработке, включая методологии, инструменты и технологии, которые помогают организовать код и оптимизировать производительность. Особое внимание уделяется принципам BEM, использовании препроцессоров, таких как Sass и Less, а также внедрению web-компонентов и управлению зависимостями через инструменты, такие как Bower и npm. Автор делится личным опытом и проблемами, с которыми сталкивался в процессе разработки, подчеркивая важность модульности, минимизации кода и доступности фронтенда.

1. КАК ПИСАТЬ ФРОНТЕНД БЕЗ
проблем и боли
Wi-Fi
name: kl10tch
pass: raster-noton

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

3. АНТОН
ПИСКУНОВ
с 2008 - фриланс
с 2011 - веб-студии
с 2012 - хайлоад
!
более трехсот завершенных проектов
несколько десятков эпичных факапов
!
опыт своего бизнеса, трижды
a-piskunov.ru
smile@a-piskunov.ru
СЕЙЧАС
тимлид
scalecastle.io
идеолог, евангелист

4. ЗАЧЕМ МЫ ЗДЕСЬ
Методологии разработки
Приёмы скоростной разработки
Организация кода
Новые технологии
Обзор фреймворков
bem
web components
сборка
оптимизации
cloudflare
gulp
grunt
angularjs
опять все тормозит
я так привык
sass
lesses5
amd
wtf?!
cdn http
twitter flight
shim/sham
agile
быстрее!

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

6. В ОДНОМ ИЗ ПРОЕКТОВ (С)
Палево
NDA

7. ИСТОРИЯ
Как мы писали веб раньше
Серверная логика
Серверный рендеринг
Клиент «отдыхает»

8. ИСТОРИЯ
Проблемы которые у нас возникали
Организация кода
Продолжительность загрузки
Не отзывчивый интерфейс
Скудность возможностей
Сайт не был приложением

9. ОРГАНИЗАЦИЯ КОДА
JavaScript
Спагетти-код (jquery-like)
Месиво из событий
Тонны коллбэков
JS - шаблонизаторы
Управление зависимостями

10. ОРГАНИЗАЦИЯ КОДА
CSS
Месиво из селекторов
Низкая читабельность
Проблемы с переопределением
Кроссбраузерность
Управление зависимостями

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

12. ПРОДОЛЖИТЕЛЬНОСТЬ
ЗАГРУЗКИ
• Вес статики
• Количество статики
• Количество запросов
• «Пинг» до серверов
• Отсутствие модульности
• Всё своё тащу с собой
• Какая минификация?

13. ПРОБЛЕМЫ БЫЛИ
Организация кода
Продолжительность загрузки
Не отзывчивый интерфейс
Скудность возможностей
Сайт не был приложением

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

15. BEM
Только без религии!
Object Oriented CSS
Atomic CSS
SMACSS
…чтоугодно…

16. BEM
Главное - четкие, прописанные на бумаге правила,
доступные для каждого члена команды
Мы договариваемся о префиксах и живем дружно
l - уровень
b - блок
e - элемент
js - для JS
__ - модификатор

17. BEM
Открытая документация
Относительная простота
Хорошо распространен
Не навязчив

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

19. PREPROCESSING
Мы голыми танцевали под луной,
когда LESS и SASS пришли в наш мир
Нафига оно мне?
• Вложенность селекторов
• Переменные
• Операторы, вычисления
• Миксины
• Вы ничего не теряете
• Вы следуете принципу DRY

20. PREPROCESSING

21. PREPROCESSING

22. PREPROCESSING

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

24. WEB COMPONENTS
Что мы можем использовать?
• Шаблоны
• Декораторы
• Теневой DOM
• Кастомные элементы
• Импорты

25. WEB COMPONENTS
Что мы можем использовать?
• Шаблоны
• Кастомные элементы

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

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

29. WEB COMPONENTS
Что мы можем использовать
на самом деле
• Шаблоны
• Кастомные элементы
• Идеологию

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

36. ОРГАНИЗАЦИЯ КОДА
CSS
Месиво из селекторов
Низкая читабельность
Проблемы с переопределением
Кроссбраузерность
Управление зависимостями

37. КАКИЕ ПРОБЛЕМЫ РЕШИЛ
СУПЕРМЕН
Месиво из селекторов
Низкая читабельность
Проблемы с переопределением
CSS

38. ОРГАНИЗАЦИЯ КОДА
JavaScript
Спагетти-код (jquery-like)
Месиво из событий
Тонны коллбэков
JS - шаблонизаторы
Управление зависимостями

39. КАКИЕ ПРОБЛЕМЫ РЕШИЛ
СУПЕРМЕН
JavaScript
Спагетти-код (jquery-like)
Месиво из событий

40. ЗАВИСИМОСТИ
В этом слове столько же боли как в слове
«лего» или «угол мебели»
- Парни, а какой версии у нас jQuery?
- 1.8 кажется. Или 1.9 Не помню, спроси Диму.

41. ЗАВИСИМОСТИ
Почему так важно контролировать их?
• Вы всегда точно знаете какая версия у либы
• Вы вовремя обновляетесь (фичи, безопасность)
• Инструмент позволяет не таскать их в Git
• Деплой становится проще!

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

43. BOWER
Тут как с BEM’ом, главное без фанатизма
bower.io
component.io
NPM
…чтоугодно…

44. BOWER
Открытая документация
Хорошо распространен
Большой список библиотек
Можно вертеть как хочешь

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

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

47. BOWER INSTALL -S JQUERY

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

49. ЧТО ПРИНЕС СУПЕРМЕН
Четкое соглашение об именовании
Удобный способ следовать соглашению
Ништяки для быстрой разработки
Возможность не превратить проект в прах и говно
через полгода активного кодинга
Четкий контроль над 3rd-party
Еще ништяки для быстрой разработки

50. КАКИЕ ПРОБЛЕМЫ РЕШИЛ
СУПЕРМЕН
JavaScript && CSS
Управление зависимостями

51. ПРОБЛЕМЫ БЫЛИ
Организация кода
Продолжительность загрузки
Не отзывчивый интерфейс
Скудность возможностей
Сайт не был приложением

52. АНТРАКТ?

53. ОПТИМИЗАЦИЯ
Сократить вес кода
Сократить количество запросов
Уменьшить расстояние до пользователя
Шорт-лист для сайта улитки

54. СБОРКА ПРОЕКТА
• Задействовать зависимости
• Скомпилировать SASS/LESS
• Минифицировать CSS
• Минифицировать JS

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

56. GULPJS
Главное не используйте Ant
brunch
grunt
…чтоугодно…
broccoli

57. GULPJS
Открытая документация
Можно вертеть как хочешь
Полноценное программирование

61. CONTENT DELIVERY
Весь контент должен быть доступен,
битый линк на ресурс создаст неиллюзорный абзац
Весь контент должен быть расположен
максимально близко к пользователю

62. CONTENT DELIVERY
Первая линия обороны
Nginx, gzip, cache
Riak, Redis, Memcache O_o

63. CONTENT DELIVERY
Вторая линия обороны
CloudFlare
Clodo, Selectel
MaxCDN
NGENIX

64. ЧТО ПРИНЕС СУПЕРМЕН
Доступность фронтенда
Скорость загрузки ассетов

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

66. ИСТОРИЯ
Как мы писали веб раньше
Серверная логика
Серверный рендеринг
Клиент «отдыхает»

67. ИДЕОЛОГИЯ
Как мы работаем с данными?
Зачем таскать данные которые могут
нам не пригодится при каждом рендере
страницы?
Давайте будем более интерактивны

68. ИДЕОЛОГИЯ
SPA: Single Page Application
Работаем с поведением пользователя
Загружаем данные on-demand
Снижаем объём загружаемого HTML
с помощью API и шаблонизации

69. ДАННЫЕ
Как работать с данными лучше?
Ради бога выкиньте RPC и тем более XML
Работайте с актуальной парадигмой REST и JSON
Кэш как всегда всех спасёт

70. ДАННЫЕ
REST
Нет серебрянной пули - вы можете видоизменять его
под свои требования и задачи
GET domain.tld/api/users
GET domain.tld/api/users/list
GET domain.tld/api/users?list

71. ДАННЫЕ
REST
Разделите внешнее API и внутреннее API
на разные приложения
С умом используйте CORS
GET api.domain.tld/users
GET <any>.domain.tld/users

72. ЧТО ПРИНЕС СУПЕРМЕН
Доступность фронтенда
Скорость загрузки ассетов
Удобство работы с данными
Скорость загрузки приложения

73. ШАБЛОНИЗАЦИЯ
Зачееем топтаааать мою любооовь,
её итак почтиии не стааало.
Да, придется сильно поломать мозг если
вы привыкли к серверной разработке
Другой подход диктует другие
правила игры

74. ШАБЛОНИЗАЦИЯ
Таблица на 100 строк.
Зачем таскать столько HTML?
Давайте не будем ждать серверных,
мы хотим писать свою логику уже сейчас

75. ШАБЛОНИЗАЦИЯ
angularjs
mustache
handlebars
jade
underscore
twig.js

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

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

78. ПРОБЛЕМЫ БЫЛИ
Организация кода
Продолжительность загрузки
Не отзывчивый интерфейс
Скудность возможностей
Сайт не был приложением

79. ПРОБЛЕМЫ БЫЛИ
Организация кода
Продолжительность загрузки
Не отзывчивый интерфейс
Скудность возможностей
Сайт не был приложением

80. ВОЗМОЖНОСТИ
Что мы теряем?
Возможности CSS3
Возможности ECMAScript*
Синтаксический сахар
Оптимальные алгоритмы

81. ПОЛИФИЛЛЫ
html5please.com/#polyfill
хранилища
web components (polymer)
web sockets (socket.io)

82. ШИМЫ
github.com/es-shims
Ништяки из ECMAScript 5 и
ECMAScript 6 уже сейчас
github.com/paulmillr/es6-shim

83. БИБЛИОТЕКИ
underscorejs
Больше возможностей,
больше оптимальных алгоритмов
lo-dash

84. ПРЕПРОЦЕССОРЫ
HTML
Slim
Haml
Jade
CSS
SASS
SCSS
LESS
JS
CoffeeScript
TypeScript
LiveScript

85. ФРЕЙМВОРКИ
Основательная разработка
Пользовательское приложение
«Админка»

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

87. ФРЕЙМВОРКИ
Основательная разработка
Vanilla JS
Backbone / Marionette
Underscore

88. ФРЕЙМВОРКИ
Основательная разработка
Vanilla JS
es5-shim
Handlebars

89. ФРЕЙМВОРКИ
В чём соль?
Есть стартовый код - нужно меньше
велосипедов
Полная свобода действий, вас
ни что не ограничивает
Придется много думать

90. ФРЕЙМВОРКИ
Пользовательское приложение
Twitter Flight
es5-shim
Handlebars

91. ФРЕЙМВОРКИ
В чём соль?
Четкое workflow для разработчика
Event-Driven - просто песня для
приложения с тоннами действий
Думать можно меньше

92. ФРЕЙМВОРКИ
«Админка»
Angular JS
Встроенный шаблонизатор
jQuery Lite
Некоторое количество готовых
велосипедов

93. ФРЕЙМВОРКИ
В чём соль?
Четкое workflow для разработчика
Думать придется очень много
Обратная сторона - резкая боль
в области поясницы при попытки отойти
от этого workflow
Возможность прийти к авто-генерации

94. ПРОБЛЕМЫ БЫЛИ
Организация кода
Продолжительность загрузки
Не отзывчивый интерфейс
Скудность возможностей
Сайт не был приложением

95. ИСТОРИЯ
Как мы писали веб раньше
Серверная логика
Серверный рендеринг
Клиент «отдыхает»

96. НАШИ ДНИ
Как мы делаем сейчас
Клиентская логика
Клиентский рендеринг
Клиент «пашет»
Сервер «отдыхает»

97. PROBLEMS?
Нет проблем! Всем няшку!
Код чистый и понятный
Фичи пишутся,
а баги находятся, быстро
Интерфейс молниеносен
и автономен
Сайт - является
полноценным приложением

98. КУДА БЕЖАТЬ

99. WHATTIME IS IT?!

100. ФИДБЭЭЭЭК!
Если вам не понравилось - обязательно
подойдите и скажите мне об этом.
Совсем круто будет - если вы предложите
что можно улучшить.
Анонимно: ask.fm/psknv

101. ДО ВСТРЕЧИ!
vk.com/smile42ru
skype: smile42ru
tel: +7 921 569 49 74
a-piskunov.ru
Редактор в скриншотах: atom.io
Спасибо!
Севе Иванову
Антону Виллеру
Сергею Смирнову
Саше Чистякову