Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17

3 945 vues

Publié le

Слайды доклада Дениса "Webpack: 7 бед — один ответ", MoscowJS 17

Publié dans : Logiciels
  • Soyez le premier à commenter

"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17

  1. 1. webpack 7 бед - один ответ Денис Измайлов Ведущий разработчик Компания Netris 27 ноября 2014
  2. 2. • CommonJS? • AMD? • Require.js? • Browserify?
  3. 3. Начнём издалека
  4. 4. Начало • Глобальные проблемы веб-разработки • Локальные проблемы проектов • Способы решения 4
  5. 5. Глобальные проблемы веб-разработки • Многообразие решений • Версии • Форматы 5
  6. 6. Глобальные проблемы веб-разработки 1. Многообразие решений (одних и тех же задач) • jQuery/Angular/React • Underscore/lodash/Lazy • MVC/MVVM/Flux 6
  7. 7. Глобальные проблемы веб-разработки 2. Версии • 1.8 • 2.1 • 3.2 • 4.5 • …10, 24, 38… 7
  8. 8. Глобальные проблемы веб-разработки 3. Форматы (пре-процессинг) • LESS, SCSS, Stylus, … • Handlebars, jade, EJS, … 8
  9. 9. Локальные проблемы проектов • Сложность роста • Функциональная • Технологическая • Зависимости • Версии 9
  10. 10. Локальные проблемы проектов • Функциональный рост • Регистрация • Личный кабинет • Загрузка фотографий • Аналитика • Поддержка языков 10
  11. 11. Локальные проблемы проектов • Технологический рост • Bootstrap • jQuery • Knockout • Handlebars • React 11
  12. 12. Локальные проблемы проектов • Зависимости • Загружены ли стили? • А шаблоны? • А библиотека? • А нужный jQuery-плагин? • А локализация для него? • А стили?… 12
  13. 13. Локальные проблемы проектов • Версии • Один плагин требует jQuery 1.8 • Второй плагин требует jQuery 2.1 • Что делать? 13
  14. 14. Способ решения Изолированные модули 14
  15. 15. Реализации • AMD • CommonJS 15
  16. 16. AMD • Asynchronous Module Definition • Пример 1: define(["jquery"], function ($) { return { // … }; }); 16
  17. 17. AMD • Asynchronous Module Definition • Пример 2 (CommonJS wrapping): define(function (require, module, exports) { var $ = require("jquery"); module.exports = { // … }; }); 17
  18. 18. CommonJS • www.commonjs.org • Нативно в Node.js/Rhino • Пример: var $ = require("jquery"); module.exports = { // … }; 18
  19. 19. CommonJS Преимущества перед AMD: • читабельность • “писабельность” • изоморфизм: var _ = require("lodash"); var data = require("./stock.json"); module.exports = _.where(data, function (item) { return item[‘count’] > 0; }); 19
  20. 20. AMD & CommonJS • создавать изолированные модули • использовать их • не думать о порядке загрузки • подключать любую статику • собирать всё в один JS-файл • использовать разные версии библиотек 20
  21. 21. Итого • Глобальные проблемы веб-разработки • многообразие решения, версии, форматы • Локальные проблемы проектов • функциональный и технологический • управление зависимостями и версиями • Способы решения • AMD • CommonJS - лучшее 21
  22. 22. Так что же теперь?
  23. 23. Что воплотит наши фантазии в жизнь?
  24. 24. Что лучшее мы имеем на сегодняшний день?
  25. 25. Любая логика
  26. 26. Любые форматы
  27. 27. Ваш проект быстро собирается
  28. 28. Ваш проект быстро запускается
  29. 29. Cамые современные инструменты разработки
  30. 30. webpack • Плагины • Загрузчики • Асинхронная сборка • Чанки (chunks) • Инструменты разработки 31
  31. 31. API для плагинов • Логика сборки и поиска модулей • Самое сердце процесса • Рассмотрим примеры: • DefinePlugin • BowerWebpackPlugin • ExtractTextPlugin 32
  32. 32. DefinePlugin • Определение констант • Настройка: … plugins: [ DefinePlugin({ "NODE_ENV": "production" }) … 33
  33. 33. DefinePlugin • Определение констант • Использование: if (NODE_ENV === "development") { console.log("Debug info"); } if (NODE_ENV === "production") { console.log("App started"); } 34
  34. 34. DefinePlugin • Определение констант • Собранный код: if ("production" === "development") { console.log("Debug info"); } if ("production" === "production") { console.log("App started"); } • После минификации: console.log("App started"); 35
  35. 35. BowerWebpackPlugin • Прозрачное использование bower-компонент • Настройка: … plugins: [ new BowerWebpackPlugin({ modulesDirectories: ["bower_components"], manifestFiles: ["bower.json"], includes: /.*/, excludes: /.*.less$/ }) … 36
  36. 36. BowerWebpackPlugin • Прозрачное использование bower-компонент • Использование: $ bower install jquery —save в коде: var $ = require("jquery"); $("body").html("Hello MoscowJS!"); • Уже более 20000 пакетов 37
  37. 37. ExtractTextPlugin • Позволяет извлекать данные и собирать их в один файл • Настройка: … module: { loaders: { test: /.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") } }, plugins: [ new ExtractTextPlugin("style.css") ] … 38
  38. 38. Загрузчики • Прозрачное подключение статики: • JSON • CoffeeScript, • Handlebars/jade/EJS, … • CSS/LESS/SASS/Stylus и т.д. 39
  39. 39. Загрузчики Настройка: … module: { loaders: [ { test: /.css$/, loader: "style-loader!css-loader"}, { test: /.json$/, loader: "json-loader"}, { test: /.hbs$/, loader: "handlebars-loader"}, { test: /.coffee$/, loader: "coffee-loader"}, { test: /.(eot|woff|ttf|svg|png|jpg)$/, loader: "url-loader?limit=30000" + "&name=[name]-[hash].[ext]" }, ] } … 40
  40. 40. Загрузчики Использование: var $ = require("jquery"); var pageTemplate = require("./page.hbs"); var offices = require("./offices.json"); require("bootstrap/bootstrap.min.css"); require("./page.css"); $("#content").html(pageTemplate(offices)); 41
  41. 41. Пример подключения JSX Установка: $ npm install jsx-loader —save-dev 42
  42. 42. Пример подключения JSX Настройка: resolve: { extensions: ["", ".js", ".jsx"], }, module: { loaders: [ { test: /.jsx$/, loader: "jsx-loader"} ] } … 43
  43. 43. Пример подключения JSX Использование: var React = require("react"); // loads toolbar.jsx var Toolbar = require("./toolbar"); React.render( React.createElement(Toolbar, null), document.getElementById("toolbar") ); 44
  44. 44. webpack-dev-server • Инструмент для ускорения разработки • Автоматическое обновления страницы без пересборки проекта • Можно запускать, как модуль или CLI 45
  45. 45. webpack-dev-server • Как это работает: • Веб-сервер на основе assets-директории • При подключении файла-сборки, устанавливает соединение через socket.io • Как только что-то изменилось - автоматически обновляется страница 46
  46. 46. Hot Module Replacement • Обновления изменённых частей в реальном времени • Без перезагрузки страниц • Это опция webpack-dev-server 47
  47. 47. Hot Module Replacement Как это работает с React: • В окне IDE изменяете код компонента • В это время через открытое socket-соединение передаётся информация об изменённой части • Происходит “горячая” замена компонента (unmount + mount) • На странице обновляется только компонент 48
  48. 48. Итого • AMD и CommonJS • Более 30 готовых плагинов • Более 50 готовых загрузчиков • Асинхронной сборка • Чанки (chunks) • Развитые инструменты разработки 49
  49. 49. Были ли альтернативы? • 2009 - Require.js • 2010 - Browserify • 2012 - webpack 50
  50. 50. Как насчёт поддержки? • Высокая активность разработчиков • Коммиты в github: 51
  51. 51. Так можно доверять? • Команда Facebook использует webpack для веб- интерфейса Instagram • Twitter использует webpack для своих проектов (Fronteers 2014, Nicholas Gallagher) 52
  52. 52. Заключение • Глобальные проблемы веб-разработки • Многообразие, версия, форматов • Локальные проблемы проектов • Функциональный и технологический рост • Управление зависимостями и версиями • Решение • CommonJS и webpack 53
  53. 53. Документация и примеры: http://webpack.github.io
  54. 54. Вопросы? webpack: 7 бед - один ответ Денис Измайлов http://www.facebook.com/denis.izmaylov http://www.github.com/DenisIzmaylov

×