SamaraJS 2015. Современный фронтенд за 30 минут. От простого к сложному: jquery, backbone, underscore/lodash, marionette, bower, requirejs, npm, commonjs, browserify, grunt/gulp, boilerplate, yeoman, webpack, es6/es7, jspm

1. Современный
фронтенд
за 30 минут
vladimir.malyk@gmail.com

2. JavaScript
Написан за 10 дней
В браузерах он и только он
Вместе уже 20 лет

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

4. Что делают с JavaScript ?
Меньше перезагрузок,
больше ajax.
Меньше бекенда,
больше фронтенда.
Веб-странички теперь SPA.

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

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

7. смотри, тут новый
тренд на гитхабе

8. я форкнул ангуляр
это мой новый
полифил для fetch
c поддержкой IE6

9. Чем живёт современный
фронтенд?
Несколько экосистем.

10. Чем живёт современный
фронтенд?
Несколько экосистем.
Десятки фреймворков.

11. Чем живёт современный
фронтенд?
Несколько экосистем.
Десятки фреймворков.
Тысячи библиотек и утилит.

12. Чем живёт современный
фронтенд?
Несколько экосистем.
Десятки фреймворков.
Тысячи библиотек и утилит.
Ежегодные
революционные концепции.

13. Чем живёт современный
фронтенд?
Если выходит что-то новенькое, то:
v0.0.1 – пробуют

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

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

16. #1 на GitHub – JavaScript

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

19. VanillaJS + jQuery
<script src="jquery.min.js"></script>
<script src="myscripts.js"></script>
Ajax + DOM манипуляции
виджеты, анимации, плагины

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

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

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

23. Marionette + Bower + RequireJS
Нужно менеджить загрузку
библиотек в браузер.
VanillaJS не поддерживает модульность
исполняемого кода,
поэтому был создан RequireJS.
RequireJS – это js-утилита, которая
загружает фрагменты исполняемого
кода по требованию.

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

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

26. Marionette + Bower + RequireJS + r.js
Это – Классика

27. есть и специфический фронтенд

28. JS Backend: node/io + npm + CommonJS
Серверный JavaScript
Исполняемый код
подключается синхронно
и выполняется на бекенде.
Как в java/python/ruby/php.

29. JS Backend: node/io + npm + CommonJS
Модули npm поставляются
в формате CommonJS,
предназначены для выполнения в NodeJs

30. JS Backend: node/io + npm + CommonJS
Модули npm поставляются
в формате CommonJS,
предназначены для выполнения в NodeJs
и несовместимы с AMD.

31. JS Backend: node/io + npm + CommonJS
Ребята захотели npm модули в браузере
и написали Browserify.

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

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

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

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

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

37. Boilerplate: Marionette + bower + npm + Browserify + Gulp
Часто boilerplate заточены
под конкретные версии софта, поэтому они
стремительно плодятся
и стремительно устаревают.
Сотни их

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

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

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

42. ES6 Harmony & ES6 Modules
ES6 был принят этим летом.
Но кому он нужен?
Все уже давно пишут на ES7.
В ES7 ещё больше плюшек.
Ожидается, что ES7 будет принят
в следующем 2016м году.

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

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

45. ES6/ES7
Традиционно
ES6 Modules
несовместим
ни с AMD
ни с CommonJS

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

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

48. JavaScript in 2015