Современный фронтенд за 30 минут
TRANSCRIPT
JavaScript
Написан за 10 дней
В браузерах он и только он
Вместе уже 20 лет
Что думают о JavaScript ?
Что делают с JavaScript ?
Меньше перезагрузок,больше ajax.
Меньше бекенда,больше фронтенда.
Веб-странички теперь SPA.
Что хотят от JavaScript ?
Рынок хочет UXкак в нативных приложениях.
Чем живёт современный фронтенд?
смотри, тут новый тренд на гитхабе
я форкнул ангуляр
это мой новый полифил для fetchc поддержкой IE6
Чем живёт современный фронтенд?
Несколько экосистем.
Чем живёт современный фронтенд?
Несколько экосистем.
Десятки фреймворков.
Чем живёт современный фронтенд?
Несколько экосистем.
Десятки фреймворков.
Тысячи библиотек и утилит.
Чем живёт современный фронтенд?
Несколько экосистем.
Десятки фреймворков.
Тысячи библиотек и утилит.
Ежегодные революционные концепции.
Чем живёт современный фронтенд?
Если выходит что-то новенькое, то:
v0.0.1 – пробуют
Чем живёт современный фронтенд?
Если выходит что-то новенькое, то:
v0.0.1 – пробуют
v0.0.2 – советуют друзьям
Чем живёт современный фронтенд?
Если выходит что-то новенькое, то:
v0.0.1 – пробуют
v0.0.2 – советуют
v0.0.3 – в продакшн
#1 на GitHub – JavaScript
Вершина айсберга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
VanillaJS + jQuery
<script src="jquery.min.js"></script><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 – это областьвнебраузерного JavaScript:
понадобится установка nodejs и npm.
Marionette + Bower + RequireJS
Нужно менеджить загрузкубиблиотек в браузер.
VanillaJS не поддерживает модульность исполняемого кода,
поэтому был создан RequireJS.
RequireJS – это js-утилита, которая загружает фрагменты исполняемого
кода по требованию.
Marionette + Bower + RequireJSФрагменты исполняемого кодаизолируются через замыкания,
загружаются в рантайме,асинхронно и по требованию.
Такие фрагменты должны соответствовать AMD
(Asynchronous Module Definition).
Почти всё, что есть на bower.io,можно подгружать как AMD.
Marionette + Bower + RequireJS + r.js
Ещё есть r.js.
Утилита, которая по RequireJS конфигу собирает все фрагменты и модули
в один минифицированный исполняемый файл.
Теперь весь код можно отправитьна девайс в один запрос.
Marionette + Bower + RequireJS + r.js
Это – Классика
есть и специфический фронтенд
JS Backend: node/io + npm + CommonJS
Серверный JavaScript
Исполняемый кодподключается синхронно
и выполняется на бекенде.
Как в java/python/ruby/php.
JS Backend: node/io + npm + CommonJS
Модули npm поставляютсяв формате CommonJS,
предназначены для выполнения в NodeJs
JS Backend: node/io + npm + CommonJS
Модули npm поставляютсяв формате CommonJS,
предназначены для выполнения в NodeJs
и несовместимы с AMD.
JS Backend: node/io + npm + CommonJS
Ребята захотели npm модули в браузере
и написали Browserify.
Marionette + npm + Browserify
В реализации отказываются от асинхронной загрузки исполняемого кода.
Исходник выглядит чище и приятней.
Такой код нельзя запустить в браузере "как есть", поэтому Browserify парсит исходники и
собирает их в пригодный для браузера файл.
Подход популярен, а в npm сегодня можно найти почти всё то, что есть в bower.
Ведущие разработчики поставляют свой софт какв виде AMD, так и в виде CommonJS модулей.
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: Marionette + bower + npm + Browserify + Gulp
Часто boilerplate заточеныпод конкретные версии софта, поэтому они
стремительно плодятсяи стремительно устаревают.
Сотни их
Yeoman: Marionette + bower + npm + Browserify + Gulp
Апофеоз – заплить свой генератор для http://yeoman.io/
Это специальный пакетный менеджер для скафолдинга приложений.
Часто 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 был принят этим летом.
Но кому он нужен?
Все уже давно пишут на ES7.
В ES7 ещё больше плюшек.
Ожидается, что ES7 будет принят в следующем 2016м году.
ES6/ES7Ребята на JavaScript запилили себе
JavaScript-компилятор,который компиллирует ES6/ES7
в VanillaJS ES5.
ES6/ES7Но один компилятор – это мало.
Поэтому запилили сразу два:Traceur и Babel.
Поддерживаемые фичи публикуют на http://kangax.github.io/compat-table/es7/
ES6/ES7
Традиционно
ES6 Modules
несовместим
ни с AMD
ни с CommonJS
ES6/ES7 + SystemJSSystemJS – универсальный загрузчик модулей
AMD/CommonJS/ES6 с синтаксисом ES6+.
Ваши ES6/7 исходникизагрузятся в браузер как есть
и скомпиллируются у пользователя на лету.
import $ from 'jquery'; // загрузит вам jQueryimport MainAppES6 from 'apps/mainAppES6'; // загрузит ваш ES6+ файл и скомпиллирует его на лету
Потом можно собрать всё в один предкомпиленный и минифицированный бандл.
ES6/ES7 + SystemJS + jspm
Jspm – это менеджер пакетов,специально разработанный для
SystemJS
jspm умеет тащить зависимостиc github, npm и bower.
Весь зоопарк теперь аккуратно лежит в jspm_packages.
JavaScript in 2015