Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 101 Ad

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

Download to read offline

Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo

Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to Фронтенд разработка без боли (20)

Advertisement

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

  1. 1. КАК ПИСАТЬ ФРОНТЕНД БЕЗ проблем и боли Wi-Fi name: kl10tch pass: raster-noton
  2. 2. РЕБЯТА ВАС МНОГО! 1. Junior? 2. Middle/Senior/Lead? 3. Backend? 4. Design?
  3. 3. АНТОН ПИСКУНОВ с 2008 - фриланс с 2011 - веб-студии с 2012 - хайлоад ! более трехсот завершенных проектов несколько десятков эпичных факапов ! опыт своего бизнеса, трижды a-piskunov.ru smile@a-piskunov.ru СЕЙЧАС тимлид scalecastle.io идеолог, евангелист
  4. 4. ЗАЧЕМ МЫ ЗДЕСЬ Методологии разработки Приёмы скоростной разработки Организация кода Новые технологии Обзор фреймворков bem web components сборка оптимизации cloudflare gulp grunt angularjs опять все тормозит я так привык sass lesses5 amd wtf?! cdn http twitter flight shim/sham agile быстрее!
  5. 5. ВЕРИШЬ ПРЕЗЕНТАЦИЯМ НА СЛОВО?
  6. 6. В ОДНОМ ИЗ ПРОЕКТОВ (С) Палево NDA
  7. 7. ИСТОРИЯ Как мы писали веб раньше Серверная логика Серверный рендеринг Клиент «отдыхает»
  8. 8. ИСТОРИЯ Проблемы которые у нас возникали Организация кода Продолжительность загрузки Не отзывчивый интерфейс Скудность возможностей Сайт не был приложением
  9. 9. ОРГАНИЗАЦИЯ КОДА JavaScript Спагетти-код (jquery-like) Месиво из событий Тонны коллбэков JS - шаблонизаторы Управление зависимостями
  10. 10. ОРГАНИЗАЦИЯ КОДА CSS Месиво из селекторов Низкая читабельность Проблемы с переопределением Кроссбраузерность Управление зависимостями
  11. 11. ПРОДОЛЖИТЕЛЬНОСТЬ ЗАГРУЗКИ
  12. 12. ПРОДОЛЖИТЕЛЬНОСТЬ ЗАГРУЗКИ • Вес статики • Количество статики • Количество запросов • «Пинг» до серверов • Отсутствие модульности • Всё своё тащу с собой • Какая минификация?
  13. 13. ПРОБЛЕМЫ БЫЛИ Организация кода Продолжительность загрузки Не отзывчивый интерфейс Скудность возможностей Сайт не был приложением
  14. 14. СУПЕРМЕН СПЕШИТ НА ПОМОЩЬ
  15. 15. BEM Только без религии! Object Oriented CSS Atomic CSS SMACSS …чтоугодно…
  16. 16. BEM Главное - четкие, прописанные на бумаге правила, доступные для каждого члена команды Мы договариваемся о префиксах и живем дружно l - уровень b - блок e - элемент js - для JS __ - модификатор
  17. 17. BEM Открытая документация Относительная простота Хорошо распространен Не навязчив
  18. 18. ЧТО ПРИНЕС СУПЕРМЕН Четкое соглашение об именовании
  19. 19. PREPROCESSING Мы голыми танцевали под луной, когда LESS и SASS пришли в наш мир Нафига оно мне? • Вложенность селекторов • Переменные • Операторы, вычисления • Миксины • Вы ничего не теряете • Вы следуете принципу DRY
  20. 20. PREPROCESSING
  21. 21. PREPROCESSING
  22. 22. PREPROCESSING
  23. 23. ЧТО ПРИНЕС СУПЕРМЕН Четкое соглашение об именовании Удобный способ следовать соглашению Ништяки для быстрой разработки
  24. 24. WEB COMPONENTS Что мы можем использовать? • Шаблоны • Декораторы • Теневой DOM • Кастомные элементы • Импорты
  25. 25. WEB COMPONENTS Что мы можем использовать? • Шаблоны • Кастомные элементы
  26. 26. ПОЧЕМУ ТАК МАЛО?
  27. 27. КАК НЕ МОЖЕМ?!
  28. 28. WEB COMPONENTS Что мы можем использовать на самом деле • Шаблоны • Кастомные элементы • Идеологию
  29. 29. ЧТО ПРИНЕС СУПЕРМЕН Четкое соглашение об именовании Удобный способ следовать соглашению Ништяки для быстрой разработки Возможность не превратить проект в прах и говно через полгода активного кодинга
  30. 30. ОРГАНИЗАЦИЯ КОДА CSS Месиво из селекторов Низкая читабельность Проблемы с переопределением Кроссбраузерность Управление зависимостями
  31. 31. КАКИЕ ПРОБЛЕМЫ РЕШИЛ СУПЕРМЕН Месиво из селекторов Низкая читабельность Проблемы с переопределением CSS
  32. 32. ОРГАНИЗАЦИЯ КОДА JavaScript Спагетти-код (jquery-like) Месиво из событий Тонны коллбэков JS - шаблонизаторы Управление зависимостями
  33. 33. КАКИЕ ПРОБЛЕМЫ РЕШИЛ СУПЕРМЕН JavaScript Спагетти-код (jquery-like) Месиво из событий
  34. 34. ЗАВИСИМОСТИ В этом слове столько же боли как в слове «лего» или «угол мебели» - Парни, а какой версии у нас jQuery? - 1.8 кажется. Или 1.9 Не помню, спроси Диму.
  35. 35. ЗАВИСИМОСТИ Почему так важно контролировать их? • Вы всегда точно знаете какая версия у либы • Вы вовремя обновляетесь (фичи, безопасность) • Инструмент позволяет не таскать их в Git • Деплой становится проще!
  36. 36. ЗАВИСИМОСТИ Но будьте осторожны!
  37. 37. BOWER Тут как с BEM’ом, главное без фанатизма bower.io component.io NPM …чтоугодно…
  38. 38. BOWER Открытая документация Хорошо распространен Большой список библиотек Можно вертеть как хочешь
  39. 39. BOWER 1. Установка npm install bower ! 2. Работаем! bower init
  40. 40. BOWER Конфиг файл .bowerrc
  41. 41. BOWER INSTALL -S JQUERY
  42. 42. ЕЩЕ НЕМНОГО ПАКЕТОВ
  43. 43. ЧТО ПРИНЕС СУПЕРМЕН Четкое соглашение об именовании Удобный способ следовать соглашению Ништяки для быстрой разработки Возможность не превратить проект в прах и говно через полгода активного кодинга Четкий контроль над 3rd-party Еще ништяки для быстрой разработки
  44. 44. КАКИЕ ПРОБЛЕМЫ РЕШИЛ СУПЕРМЕН JavaScript && CSS Управление зависимостями
  45. 45. ПРОБЛЕМЫ БЫЛИ Организация кода Продолжительность загрузки Не отзывчивый интерфейс Скудность возможностей Сайт не был приложением
  46. 46. АНТРАКТ?
  47. 47. ОПТИМИЗАЦИЯ Сократить вес кода Сократить количество запросов Уменьшить расстояние до пользователя Шорт-лист для сайта улитки
  48. 48. СБОРКА ПРОЕКТА • Задействовать зависимости • Скомпилировать SASS/LESS • Минифицировать CSS • Минифицировать JS
  49. 49. СБОРКА ПРОЕКТА • Задействовать зависимости • Скомпилировать SASS/LESS • Минифицировать CSS • Минифицировать JS • Прогнать CSSLint/JSLint • Оптимизировать изображения • Минифицировать HTML • Запустить тесты
  50. 50. GULPJS Главное не используйте Ant brunch grunt …чтоугодно… broccoli
  51. 51. GULPJS Открытая документация Можно вертеть как хочешь Полноценное программирование
  52. 52. CONTENT DELIVERY Весь контент должен быть доступен, битый линк на ресурс создаст неиллюзорный абзац Весь контент должен быть расположен максимально близко к пользователю
  53. 53. CONTENT DELIVERY Первая линия обороны Nginx, gzip, cache Riak, Redis, Memcache O_o
  54. 54. CONTENT DELIVERY Вторая линия обороны CloudFlare Clodo, Selectel MaxCDN NGENIX
  55. 55. ЧТО ПРИНЕС СУПЕРМЕН Доступность фронтенда Скорость загрузки ассетов
  56. 56. ИДЕОЛОГИЯ Как мы работаем с данными?
  57. 57. ИСТОРИЯ Как мы писали веб раньше Серверная логика Серверный рендеринг Клиент «отдыхает»
  58. 58. ИДЕОЛОГИЯ Как мы работаем с данными? Зачем таскать данные которые могут нам не пригодится при каждом рендере страницы? Давайте будем более интерактивны
  59. 59. ИДЕОЛОГИЯ SPA: Single Page Application Работаем с поведением пользователя Загружаем данные on-demand Снижаем объём загружаемого HTML с помощью API и шаблонизации
  60. 60. ДАННЫЕ Как работать с данными лучше? Ради бога выкиньте RPC и тем более XML Работайте с актуальной парадигмой REST и JSON Кэш как всегда всех спасёт
  61. 61. ДАННЫЕ REST Нет серебрянной пули - вы можете видоизменять его под свои требования и задачи GET domain.tld/api/users GET domain.tld/api/users/list GET domain.tld/api/users?list
  62. 62. ДАННЫЕ REST Разделите внешнее API и внутреннее API на разные приложения С умом используйте CORS GET api.domain.tld/users GET <any>.domain.tld/users
  63. 63. ЧТО ПРИНЕС СУПЕРМЕН Доступность фронтенда Скорость загрузки ассетов Удобство работы с данными Скорость загрузки приложения
  64. 64. ШАБЛОНИЗАЦИЯ Зачееем топтаааать мою любооовь, её итак почтиии не стааало. Да, придется сильно поломать мозг если вы привыкли к серверной разработке Другой подход диктует другие правила игры
  65. 65. ШАБЛОНИЗАЦИЯ Таблица на 100 строк. Зачем таскать столько HTML? Давайте не будем ждать серверных, мы хотим писать свою логику уже сейчас
  66. 66. ШАБЛОНИЗАЦИЯ angularjs mustache handlebars jade underscore twig.js
  67. 67. ЧТО ПРИНЕС СУПЕРМЕН Доступность фронтенда Скорость загрузки ассетов Удобство работы с данными Уменьшение трафика Скорость загрузки приложения
  68. 68. САЙТ ТУРБО-УЛИТКА
  69. 69. ПРОБЛЕМЫ БЫЛИ Организация кода Продолжительность загрузки Не отзывчивый интерфейс Скудность возможностей Сайт не был приложением
  70. 70. ПРОБЛЕМЫ БЫЛИ Организация кода Продолжительность загрузки Не отзывчивый интерфейс Скудность возможностей Сайт не был приложением
  71. 71. ВОЗМОЖНОСТИ Что мы теряем? Возможности CSS3 Возможности ECMAScript* Синтаксический сахар Оптимальные алгоритмы
  72. 72. ПОЛИФИЛЛЫ html5please.com/#polyfill хранилища web components (polymer) web sockets (socket.io)
  73. 73. ШИМЫ github.com/es-shims Ништяки из ECMAScript 5 и ECMAScript 6 уже сейчас github.com/paulmillr/es6-shim
  74. 74. БИБЛИОТЕКИ underscorejs Больше возможностей, больше оптимальных алгоритмов lo-dash
  75. 75. ПРЕПРОЦЕССОРЫ HTML Slim Haml Jade CSS SASS SCSS LESS JS CoffeeScript TypeScript LiveScript
  76. 76. ФРЕЙМВОРКИ Основательная разработка Пользовательское приложение «Админка»
  77. 77. ФРЕЙМВОРКИ Основательная разработка Vanilla JS
  78. 78. ФРЕЙМВОРКИ Основательная разработка Vanilla JS Backbone / Marionette Underscore
  79. 79. ФРЕЙМВОРКИ Основательная разработка Vanilla JS es5-shim Handlebars
  80. 80. ФРЕЙМВОРКИ В чём соль? Есть стартовый код - нужно меньше велосипедов Полная свобода действий, вас ни что не ограничивает Придется много думать
  81. 81. ФРЕЙМВОРКИ Пользовательское приложение Twitter Flight es5-shim Handlebars
  82. 82. ФРЕЙМВОРКИ В чём соль? Четкое workflow для разработчика Event-Driven - просто песня для приложения с тоннами действий Думать можно меньше
  83. 83. ФРЕЙМВОРКИ «Админка» Angular JS Встроенный шаблонизатор jQuery Lite Некоторое количество готовых велосипедов
  84. 84. ФРЕЙМВОРКИ В чём соль? Четкое workflow для разработчика Думать придется очень много Обратная сторона - резкая боль в области поясницы при попытки отойти от этого workflow Возможность прийти к авто-генерации
  85. 85. ПРОБЛЕМЫ БЫЛИ Организация кода Продолжительность загрузки Не отзывчивый интерфейс Скудность возможностей Сайт не был приложением
  86. 86. ИСТОРИЯ Как мы писали веб раньше Серверная логика Серверный рендеринг Клиент «отдыхает»
  87. 87. НАШИ ДНИ Как мы делаем сейчас Клиентская логика Клиентский рендеринг Клиент «пашет» Сервер «отдыхает»
  88. 88. PROBLEMS? Нет проблем! Всем няшку! Код чистый и понятный Фичи пишутся, а баги находятся, быстро Интерфейс молниеносен и автономен Сайт - является полноценным приложением
  89. 89. КУДА БЕЖАТЬ
  90. 90. WHATTIME IS IT?!
  91. 91. ФИДБЭЭЭЭК! Если вам не понравилось - обязательно подойдите и скажите мне об этом.
 
 Совсем круто будет - если вы предложите что можно улучшить. Анонимно: ask.fm/psknv
  92. 92. ДО ВСТРЕЧИ! vk.com/smile42ru skype: smile42ru tel: +7 921 569 49 74 a-piskunov.ru Редактор в скриншотах: atom.io Спасибо! Севе Иванову Антону Виллеру Сергею Смирнову Саше Чистякову

×