SlideShare a Scribd company logo

Современный фронтенд за 30 минут.

•
•
Vladimir Malyk
Vladimir Malyk

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

1 of 48
Download to read offline
Современный фронтенд за 30 минут vladimir.malyk@gmail.com
JavaScript Написан за 10 дней В браузерах он и только он Вместе уже 20 лет
Что думают о JavaScript ?
Что делают с JavaScript ? Меньше перезагрузок, больше ajax. Меньше бекенда, больше фронтенда. Веб-странички теперь SPA.
Что хотят от JavaScript ? Рынок хочет UX как в нативных приложениях.
Чем живёт современный фронтенд?
смотри, тут новый тренд на гитхабе
я форкнул ангуляр это мой новый полифил для fetch c поддержкой 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
Современный фронтенд за 30 минут.
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/ Это специальный пакетный менеджер для скафолдинга приложений.
Marionette + bower + npm + Gulp + КоронныйНабор + AMD + CommonJS + Webpack!!11 Webpack написали чтобы упаковать любой фронтенд зоопарк. Позволяет упаковать в один бандл как AMD, так и CommonJS, код с GitHub, стили, шаблоны, графику и вашу собаку. Написаны плагины для подгрузки и упаковки CSS, LESS, SASS, Stylus, CoffeeScript, JSX, JSON и всего на свете.
Всё это было модно полгода назад.
Современный фронтенд за 30 минут.
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 + 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.
JavaScript in 2015

More Related Content

Современный фронтенд за 30 минут.

  • 2. JavaScript Написан за 10 дней В браузерах он и только он Вместе уже 20 лет
  • 3. Что думают о JavaScript ?
  • 4. Что делают с JavaScript ? Меньше перезагрузок, больше ajax. Меньше бекенда, больше фронтенда. Веб-странички теперь SPA.
  • 5. Что хотят от JavaScript ? Рынок хочет UX как в нативных приложениях.
  • 8. я форкнул ангуляр это мой новый полифил для fetch c поддержкой IE6
  • 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 Это – Классика
  • 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/
  • 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.