Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo
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
быстрее!
7. ИСТОРИЯ
Как мы писали веб раньше
Серверная логика
Серверный рендеринг
Клиент «отдыхает»
8. ИСТОРИЯ
Проблемы которые у нас возникали
Организация кода
Продолжительность загрузки
Не отзывчивый интерфейс
Скудность возможностей
Сайт не был приложением
12. ПРОДОЛЖИТЕЛЬНОСТЬ
ЗАГРУЗКИ
• Вес статики
• Количество статики
• Количество запросов
• «Пинг» до серверов
• Отсутствие модульности
• Всё своё тащу с собой
• Какая минификация?
16. BEM
Главное - четкие, прописанные на бумаге правила,
доступные для каждого члена команды
Мы договариваемся о префиксах и живем дружно
l - уровень
b - блок
e - элемент
js - для JS
__ - модификатор
19. PREPROCESSING
Мы голыми танцевали под луной,
когда LESS и SASS пришли в наш мир
Нафига оно мне?
• Вложенность селекторов
• Переменные
• Операторы, вычисления
• Миксины
• Вы ничего не теряете
• Вы следуете принципу DRY
29. WEB COMPONENTS
Что мы можем использовать
на самом деле
• Шаблоны
• Кастомные элементы
• Идеологию
30.
31.
32.
33.
34.
35. ЧТО ПРИНЕС СУПЕРМЕН
Четкое соглашение об именовании
Удобный способ следовать соглашению
Ништяки для быстрой разработки
Возможность не превратить проект в прах и говно
через полгода активного кодинга
36. ОРГАНИЗАЦИЯ КОДА
CSS
Месиво из селекторов
Низкая читабельность
Проблемы с переопределением
Кроссбраузерность
Управление зависимостями
40. ЗАВИСИМОСТИ
В этом слове столько же боли как в слове
«лего» или «угол мебели»
- Парни, а какой версии у нас jQuery?
- 1.8 кажется. Или 1.9 Не помню, спроси Диму.
41. ЗАВИСИМОСТИ
Почему так важно контролировать их?
• Вы всегда точно знаете какая версия у либы
• Вы вовремя обновляетесь (фичи, безопасность)
• Инструмент позволяет не таскать их в Git
• Деплой становится проще!
49. ЧТО ПРИНЕС СУПЕРМЕН
Четкое соглашение об именовании
Удобный способ следовать соглашению
Ништяки для быстрой разработки
Возможность не превратить проект в прах и говно
через полгода активного кодинга
Четкий контроль над 3rd-party
Еще ништяки для быстрой разработки
61. CONTENT DELIVERY
Весь контент должен быть доступен,
битый линк на ресурс создаст неиллюзорный абзац
Весь контент должен быть расположен
максимально близко к пользователю
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
73. ШАБЛОНИЗАЦИЯ
Зачееем топтаааать мою любооовь,
её итак почтиии не стааало.
Да, придется сильно поломать мозг если
вы привыкли к серверной разработке
Другой подход диктует другие
правила игры
74. ШАБЛОНИЗАЦИЯ
Таблица на 100 строк.
Зачем таскать столько HTML?
Давайте не будем ждать серверных,
мы хотим писать свою логику уже сейчас
93. ФРЕЙМВОРКИ
В чём соль?
Четкое workflow для разработчика
Думать придется очень много
Обратная сторона - резкая боль
в области поясницы при попытки отойти
от этого workflow
Возможность прийти к авто-генерации
95. ИСТОРИЯ
Как мы писали веб раньше
Серверная логика
Серверный рендеринг
Клиент «отдыхает»
96. НАШИ ДНИ
Как мы делаем сейчас
Клиентская логика
Клиентский рендеринг
Клиент «пашет»
Сервер «отдыхает»
97. PROBLEMS?
Нет проблем! Всем няшку!
Код чистый и понятный
Фичи пишутся,
а баги находятся, быстро
Интерфейс молниеносен
и автономен
Сайт - является
полноценным приложением
100. ФИДБЭЭЭЭК!
Если вам не понравилось - обязательно
подойдите и скажите мне об этом.
Совсем круто будет - если вы предложите
что можно улучшить.
Анонимно: ask.fm/psknv