Современный фронтенд -- как не утонуть в море хайпа?

Современный
фронтенд:
Как не утонуть
в море хайпа?
vladimir.malyk@gmail.com

Язык фронтенда – JavaScript
Написан за 10 дней
Единственный язык, который
выполняется в браузерах
Исполнилось 20 лет

Что думают о JavaScript ?

Что требуют от JavaScript ?
Меншьше перезагрузок страницы.
Больше ajax.
Все меньше продукта на сервере,
всё больше его во фронтенде.
Веб-странички превращаются в
полноценные приложения
(SPA – Single Page Applications).

Требования рынка опережают
традиционные возможности Web

Рынок хочет UX
как в нативных
приложениях.

Нам понадобилось
приложение
с хорошим UX в браузере
на мобильных устройствах

Чем живёт современный
фронтенд?

фронтенд?
Суета как на Клондайке

фронтенд?
Несколько экосистем.

фронтенд?
Десятки фреймворков.

фронтенд?
Тысячи библиотек и утилит.

фронтенд?
Тысячи библиотек и утилит.
Ежегодные
революционные концепции.

фронтенд?
Если выходит что-то новенькое, то:
v0.0.1 – пробуют
v0.0.2 – советуют друзьям
v0.0.3 – пускают в продакшн

Вершина айсберга JavaScript
shim, polyfill, es5, es6, es7, traceur,
babel, requirejs, commonjs,
systemjs, browserify, webpack,
jspm, gulp, grunt, bower, npm,
nodejs, expressjs, polymer, angular,
react, backbone, marionette, lodash,
underscore, jquery,html5, css3,
sass, less, vanillajs

VanillaJS – чистый JavaScript
Асинхронщина, которая
живёт долго.

VanillaJS – чистый JavaScript
Классов нет, всё состоит из объектов.
Функции – это объекты, которые могут
выполняться.
Изкоробки предложена концепция
компоновки объектов – Прототипы и
прототипное наследование.

Прототипы – это просто

VanillaJS – “асинхронщина”
Функициям управление передаётся
"хаотично" – в завимисти
от того, какие события возникают
во время "долгой жизни" приложения.

В один момент времени управление
предоставляется только одной функции,
поэтому функции должны удерживать
управление минимальное время.

В общем виде, это минимальное время
достигается за счёт того, что:
1. функция стартует долгую i/o операцию;
2. подписывает новую функцию на событие
завершения операции;
3. завершает свою работу и отпускает
управление.

Удобно, когда цепочка таких функций
имеет общую область видимости.
Эту проблему решают замыкания
и инструменты передачи контекста.

VanillaJS => jQuery
<script src="myscripts.js"></script>
Ajax + DOM манипуляции
(виджеты, анимашки).

jQuery => Backbone + Underscore
Шаблоны, Вьюшки, Модельки,
Коллекции, Хэш-роутинг, Шины событий,
Манипуляции данными

Backbone => Marionette
MVC фреймворк поверх Backbone.
Вместо Underscore часто берут Lo-Dash.

Marionette => Marionette + Bower
Наступает в тот момент, когда уже лень
следить за версиями
jQuery-*, backbone-* и bootstrap.
Bower – пакетный менеджер, который
закачает нужные библиотеки в корень
проекта и согласует их по версиям.
Кроме того, Bower – это первый
проблеск внебраузерного JS:
понадобится установка nodejs и npm.

Marionette => Marionette + Bower + RequireJS
Библиотек стало ещё больше – теперь
необходимо менеджить их загрузку в браузер.
VanillaJS, в нынешнем виде,
не умеет модульность исполняемого кода,
поэтому на помощь приходит RequireJS.
RequireJS – это js-утилита, которая загрузит
фрагмент исполняемого кода только тогда, когда
тот понадобится другому исполняемому коду.

Marionette > Marionette + Bower + RequireJS
Фрагменты исполняемого кода будут
изолированы друг от друга через замыкания,
загружаются в рантайме,
асинхронно и по требованию.
Такие фрагменты должны соответствовать
AMD (Asynchronous Module Definition).
Практически всё, что можно найти
на bower.io – можно подгружать как AMD.

Marionette > Marionette + Bower + RequireJS
Ещё есть r.js.
Утилита, которая по RequireJS конфигу
собирает все модули в один
минифицированный исполняемый файл.
Теперь весь код отправится на девайс
в один запрос.
Всё это – Классика.

Backend: node/io + npm + CommonJS
Альтернативная js реальность,
в которой исполняемый код
подключается синхронно
и выполняется на бекенде.
Как в php/python/ruby.
Модули npm поставляются в формате
CommonJS, предназначены для выполнения в
NodeJs,
и несовместимы с AMD.
Ребята захотели npm модули в браузере.
Так родился Browserify.

Marionette => Marionette + npm + Browserify
В реализации отказываются от асинхронной
загрузки исполняемого кода. Исходник выглядит
чище и приятней.
Такой код нельзя запустить в браузере "как есть",
поэтому Browserify парсит исходники и
собирает их в пригодный для браузера файл.
Подход популярен – в npm есть почти всё то,
что есть в bower.
Разаботчики поставляют свой софт как в виде
AMD, так и в виде CommonJS модулей.

Marionette => Marionette + npm + Browserify
Побочная плюшка – теперь ваш код сможет
отрендерить DOM как на бекенде внутри NodeJS,
так и в браузере.
Это назвали "Изоморфный Web" и слепили под
это специально заточенный фреймворк – Meteor.

Marionette + npm + Browserify + Grunt
Grunt – таск ранер.
Это утилита, которая автоматизирует вам
рутинные операции.
Например: следить за изменениями в исходниках,
автоматически собирать новый бандл
и перезагрузить страничку браузера.
Вместо Grunt сегодня отказываются в пользу
проворного Gulp. А ещё есть Broccoli.

Marionette + bower + npm + Browserify + Gulp
Некоторые не около-js-ные вещи,
например разные css плюшки,
реже попадают в npm.
Поэтому часто пакеты тащат
одновременно и из bower и из npm.
Склеивают это всё через
написание правил Gulp.

Boilerplate: Marionette + bower + npm + Browserify + Gulp
У каждого уважающего себя
фронденд-разработчика свой "коронный"
набор утилит и способов их склейки.
Фронтендщики обязательно публикуют их на
своём гитхабе с приставкой "boilerplate".
Сотни их – разных boilerplate с "коронным"
набором утилит и "коронным" workflow.

Yeoman: Marionette + bower + npm + Browserify + Gulp
Часто boilerplate заточены
под конкретные версии софта, поэтому они
стремительно плодятся
и стремительно устаревают.
Апофеоз – заплить свой генератор для
http://yeoman.io/
Это специальный пакетный менеджер для
скафолдинга приложений.

Marionette + bower + npm + Gulp +
КоронныйЗоопаркУтилит + AMD + CommonJS +
Webpack!!11
Webpack написали чтобы упаковать любой
фронтенд зоопарк.
Позволяют упаковать в один бандл как AMD,
так и CommonJS, код с GitHub, стили, шаблоны,
графику и вашу собаку.
Написаны плагины для подгрузки и упаковки
CSS, LESS, SASS, Stylus, CoffeeScript, JSX, JSON
и всего на свете.

Всё это было модно полгода назад.

Встречайте!
ES6 Harmony!
ES6 Modules!

ES6 Harmony & ES6 Modules
Пару недель назад была принята
новая спецификая JS (ES6)
с нативной поддержкой модулей
в новом формате!
Множественные улучшения языка JS:
модули
классы
генераторы
функции-стрелки
и многое другое

Хотите писать на ES6?
Ждёте появленя поддержки ES6 в браузерах?

Зря. Люди уже давно пишут на ES7.
В ES7 ещё больше плюшек.
Ожидается, что он будет принят
в следующем 2016м году.

ES6/ES7
Фронтенд на несуществующем языке
это норма.
Настолько сильно перегрет
современный фронтенд.

ES6/ES7
Ребята на JavaScript запилили себе
JavaScript-компилятор,
который компиллирует ES6/ES7
в VanillaJS ES5.

ES6/ES7
Но один компилятор – это мало.
Поэтому запилили сразу два:
Traceur и Babel.
Поддерживаемые фичи здесь:
http://kangax.github.io/compat-table/es7/

ES6/ES7
Итак, теперь на повестке дня
AMD + CommonJS + ES6 Modules.

ES6/ES7 + SystemJS
SystemJS – универсальный загрузчик модулей
AMD/CommonJS/ES6 с синтаксисом ES6+.
Ваши ES6/7 исходники загрузятся в браузер
как есть и скомпилируются на лету.
Если хочется – можно собрать всё в один
предкомпиленный и минифицированный бандл.
import $ from 'jquery'; // загрузит вам jQuery
import MainAppES6 from 'apps/mainAppES6'; // загрузит
ваш ES6+ файл и скомпилирует его на лету

ES6/ES7 + SystemJS + jspm
Jspm это менеджер пакетов,
специально разработанный для
SystemJS
jspm умеет тащить зависимости
c github, npm и bower.
Весь зоопарк теперь аккуратно лежит в
jspm_packages.

Документация по JS:
http://dmitrysoshnikov.com/ecmascript/ru-chapter-1-execution-contexts/
Обзор новых возможностей ES6:
https://github.com/lukehoban/es6features
Старт с es6 и jspm за 10 минут (видео):
http://glenmaddern.com/articles/javascript-in-2015

Современный фронтенд -- как не утонуть в море хайпа?

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Современный фронтенд -- как не утонуть в море хайпа?

Similar to Современный фронтенд -- как не утонуть в море хайпа? (20)

Современный фронтенд -- как не утонуть в море хайпа?