Современныйфронтенд:

Как не утонутьв море хайпа?

vladimir.malyk@gmail.com

Язык фронтенда – JavaScript

Написан за 10 дней

Единственный язык, который выполняется в браузерах

Исполнилось 20 лет

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

Что требуют от JavaScript ?

Меншьше перезагрузок страницы.

Больше ajax.

Все меньше продукта на сервере, всё больше его во фронтенде.

Веб-странички превращаются в полноценные приложения(SPA – Single Page Applications).

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

Что требуют от JavaScript ?

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

Что требуют от JavaScript ?

Нам понадобилось приложение

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

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

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

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

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

Несколько экосистем.

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

Несколько экосистем.

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

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

Несколько экосистем.

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

Тысячи библиотек и утилит.

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

Несколько экосистем.

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

Тысячи библиотек и утилит.

Ежегодные революционные концепции.

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

Если выходит что-то новенькое, то:

v0.0.1 – пробуют

v0.0.2 – советуют друзьям

v0.0.3 – пускают в продакшн

#1 на GitHub – JavaScript

Вершина айсберга 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 – “асинхронщина”

Функициям управление передаётся "хаотично" – в завимисти

от того, какие события возникаютво время "долгой жизни" приложения.

VanillaJS – “асинхронщина”

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

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

VanillaJS – “асинхронщина”

В общем виде, это минимальное время достигается за счёт того, что:

1. функция стартует долгую i/o операцию;

2. подписывает новую функцию на событие завершения операции;

3. завершает свою работу и отпускает управление.

VanillaJS – “асинхронщина”

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

Эту проблему решают замыканияи инструменты передачи контекста.

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 Harmony & ES6 Modules

Хотите писать на ES6?

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

ES6 Harmony & ES6 Modules

Зря. Люди уже давно пишут на 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 + 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.

Документация по 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