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 конфигу
собирает все фрагменты и модули
в один минифицированный
исполняемый файл.
Теперь весь код можно отправить
на девайс в один запрос.
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
и всего на свете.
42. ES6 Harmony & ES6 Modules
ES6 был принят этим летом.
Но кому он нужен?
Все уже давно пишут на ES7.
В ES7 ещё больше плюшек.
Ожидается, что ES7 будет принят
в следующем 2016м году.
44. ES6/ES7
Но один компилятор – это мало.
Поэтому запилили сразу два:
Traceur и Babel.
Поддерживаемые фичи публикуют на
http://kangax.github.io/compat-table/es7/
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.