Михаил Давыдов
JavaScript разработчик
Модули и
сборка
JavaScript
Моя история.
С чего я начинал и
к чему пришел…
cat **/*.js > build.js!
5
Файлы и cat **/*.js > build.js
• Это быстро и просто
• Что плохого
–  Собирается все без разбора
–  Возможны конфликты и...
Так жить нельзя!
– Нужны модули.
7
Мне понадобились модули. Зачем?
• Разделение логических частей
• Управление импортом/экспортом
• Явные зависимости и их ...
Модуль? – нет, не слышал!
Learning JavaScript
Design Patterns
http://clck.ru/8aLgX
include('main.js');!
10
(function ($) {
var myStuff = {};
window.stuff = myStuff;
})(jQuery);
IIFE и include()
11
include('common.js');
include('ru.js');
include('main.js');
IIFE и include(): Сборка
includify main.js > build.js
12
IIFE и include()
• Что хорошего
–  Модули в замыканиях
–  Можно наследовать сборки
• Что плохого
–  RegExp
–  Дублирова...
Я встретил её…
REQUIRE JS
15
RequireJS
• AMD
• Асинхронные зависимости
• Плагины
• Оптимизация – r.js
• Большое комьюнити
16
define(['jQuery', 'lodash'],
function ($, _) {
var myStuff = {};
return myStuff;
});
RequireJS & AMD: Модули
17
<script
data-main="js/app"
src="js/require.js">
</script>
RequireJS & AMD: Сборка
node r.js -o build.js
I REQUIRE JS
Я думал, что это навсегда…
19
define(function () {
var myStuff = {};
return myStuff;
});
Много церемоний с define()
1. Нужно писать обертку
20
define("dojo/_base/html", [
"./kernel",
"../dom",
"../dom-style",
"../dom-attr",
"../dom-prop",
"../dom-class",
"../dom...
22
define(function () {
var myStuff = {};
return myStuff;
});
Много церемоний с define()
3. Артефакты: Приходится табулиро...
23
require('module'); // js?
require('async!data', cb); // ?
require(ComicSans); // font?
require() - God Object?
1. Возвр...
AMD и CJS
25
И еще AMD
• Приходится поддерживать AMD
–  jQuery, underscore, backbone, …
–  2 версии с AMD и без
• Пытаются заразить ...
Сейчас мы друзья
Другие пути
28
Другие пути
•  browserify
–  CommonJS – хорошо
–  слишком много от Node.js – плохо
•  просто загрузчик
–  headjs
–  yep...
29
Из моего опыта
•  Сегодня все собирается. Даже dev
•  Читаемость кода очень важна
–  Нужно исключить неявные конструкци...
Я создал новый
инструмент
LMD – Lazy Module Declaration
LMD
Модули – CommonJS
Остальное делает сборщик
33
var $ = require('$'),
myStuff = {};
module.exports = myStuff;
Модули – CommonJS/Modules 1.0*
http://clck.ru/4b7gO
34
Профит
•  Ненавязчивый формат
–  Нет лишней писанины
–  Единообразие вида модулей
•  Обратная совместимость с Node.js
–...
35
{
"root": "../js",
"output": "../index.js",
"modules": {
"main": "main.js",
"i18n": "locale/ru.json"
},
"css": true,
"i...
Проблема: Много конфигов
37
{
"extends": "index.json",
"output": "../index-en.js"
"modules": {
"i18n": "locale/en.json"
}
}
Операции над конфигами
...
38
{
"modules": {
"i18n": "locale/en.json"
}
}
Операции над конфигами
2. Миксины конфигов
lmd index+en 
–output=index-en.j...
39
{
"root": "../js",
"modules": {
"main": "main.js"
},
"depends": "*.lmd.json"
}
Операции над конфигами
3. Зависимости мо...
40
Профит
•  Минус – нужно писать конфиг
•  JSON можно легко реиспользовать
•  Количество конфигов сократилось
•  Меньше п...
Явные плагины
Гибкие плагины
Очень гибкие плагины
44
{
"image": true,
"promise": true,
"cache": true,
"stats": true
}
Явный способ подключения плагинов
http://clck.ru/4b7t6...
45
// javascript
require('module');
// css
require.css('path/to.css', callback);
// image+promise
require.image('path/img....
46
Профит
•  require() делает одну работу
•  Результат require() стал предсказуемым
•  Код стало проще воспринимать
______ __ __ !
/ ___ /  /  !
  ____   ____    !
 _____  _____  _ !
/_____/ /_____/ /_/ !
!
http://clck.ru/4dU-0!
$ lmd -c cfg.json ✘!
-o result.js ✘!
!
$ lmd make cfg ✔!
$ lmd make cfg+ru ✔!
$ lmd info cfg ✔!
$ lmd ✔!atch !fg!⇥ ⇥! c!w!
LMD GUI
Встроенная аналитика
http://clck.ru/4b8My
Интеграция с Grunt.js
https://npmjs.org/package/grunt-lmd
52
Профит LMD
•  Максимум автоматизации
–  Сборщик LMD
–  Аналитика
•  Максимум явного кода
–  require.*()
•  Минимум писа...
Михаил Давыдов
JavaScript разработчик
i@azproduction.ru
azproduction
Спасибо
Lazy Module Declaration
http://lmdjs.org
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Upcoming SlideShare
Loading in...5
×

Modules and assembling of JavaScript (in russian)

590

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
590
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Modules and assembling of JavaScript (in russian)

  1. 1. Михаил Давыдов JavaScript разработчик Модули и сборка JavaScript
  2. 2. Моя история. С чего я начинал и к чему пришел…
  3. 3. cat **/*.js > build.js!
  4. 4. 5 Файлы и cat **/*.js > build.js • Это быстро и просто • Что плохого –  Собирается все без разбора –  Возможны конфликты имен переменных –  Результат плохо сжимается –  Нужно учитывать порядок
  5. 5. Так жить нельзя! – Нужны модули.
  6. 6. 7 Мне понадобились модули. Зачем? • Разделение логических частей • Управление импортом/экспортом • Явные зависимости и их контроль • Меньше конфликтов переменных
  7. 7. Модуль? – нет, не слышал! Learning JavaScript Design Patterns http://clck.ru/8aLgX
  8. 8. include('main.js');!
  9. 9. 10 (function ($) { var myStuff = {}; window.stuff = myStuff; })(jQuery); IIFE и include()
  10. 10. 11 include('common.js'); include('ru.js'); include('main.js'); IIFE и include(): Сборка includify main.js > build.js
  11. 11. 12 IIFE и include() • Что хорошего –  Модули в замыканиях –  Можно наследовать сборки • Что плохого –  RegExp –  Дублирование модулей
  12. 12. Я встретил её…
  13. 13. REQUIRE JS
  14. 14. 15 RequireJS • AMD • Асинхронные зависимости • Плагины • Оптимизация – r.js • Большое комьюнити
  15. 15. 16 define(['jQuery', 'lodash'], function ($, _) { var myStuff = {}; return myStuff; }); RequireJS & AMD: Модули
  16. 16. 17 <script data-main="js/app" src="js/require.js"> </script> RequireJS & AMD: Сборка node r.js -o build.js
  17. 17. I REQUIRE JS Я думал, что это навсегда…
  18. 18. 19 define(function () { var myStuff = {}; return myStuff; }); Много церемоний с define() 1. Нужно писать обертку
  19. 19. 20 define("dojo/_base/html", [ "./kernel", "../dom", "../dom-style", "../dom-attr", "../dom-prop", "../dom-class", "../dom-construct", "../dom-geometry" ], function (dojo, dom, style, attr, prop, cls, ctr, geom) { }); Много церемоний с define() 2. Куча зависимостей – ад http://clck.ru/4b7ew
  20. 20. 22 define(function () { var myStuff = {}; return myStuff; }); Много церемоний с define() 3. Артефакты: Приходится табулировать
  21. 21. 23 require('module'); // js? require('async!data', cb); // ? require(ComicSans); // font? require() - God Object? 1. Возвращает что угодно, как угодно 2. Не сразу понятен результат
  22. 22. AMD и CJS
  23. 23. 25 И еще AMD • Приходится поддерживать AMD –  jQuery, underscore, backbone, … –  2 версии с AMD и без • Пытаются заразить Node.js –  node-requirejs –  в node и так есть модульная система http://clck.ru/4b7dE
  24. 24. Сейчас мы друзья
  25. 25. Другие пути
  26. 26. 28 Другие пути •  browserify –  CommonJS – хорошо –  слишком много от Node.js – плохо •  просто загрузчик –  headjs –  yepnopejs
  27. 27. 29 Из моего опыта •  Сегодня все собирается. Даже dev •  Читаемость кода очень важна –  Нужно исключить неявные конструкции •  Сборок бывает много –  dev, production, dev-ru, test-en_US •  Нужен контроль результата сборки –  Проверка целостности –  Подробная информация о сборке
  28. 28. Я создал новый инструмент
  29. 29. LMD – Lazy Module Declaration LMD
  30. 30. Модули – CommonJS Остальное делает сборщик
  31. 31. 33 var $ = require('$'), myStuff = {}; module.exports = myStuff; Модули – CommonJS/Modules 1.0* http://clck.ru/4b7gO
  32. 32. 34 Профит •  Ненавязчивый формат –  Нет лишней писанины –  Единообразие вида модулей •  Обратная совместимость с Node.js –  Без плагинов, регистрации и SMS •  Оберткой модулей занимается сборщик
  33. 33. 35 { "root": "../js", "output": "../index.js", "modules": { "main": "main.js", "i18n": "locale/ru.json" }, "css": true, "ie": false, "worker": true } Конфиг сборки http://clck.ru/4b7gq
  34. 34. Проблема: Много конфигов
  35. 35. 37 { "extends": "index.json", "output": "../index-en.js" "modules": { "i18n": "locale/en.json" } } Операции над конфигами 1. Наследование конфигов http://clck.ru/4b7j2
  36. 36. 38 { "modules": { "i18n": "locale/en.json" } } Операции над конфигами 2. Миксины конфигов lmd index+en –output=index-en.js http://clck.ru/4b7pI
  37. 37. 39 { "root": "../js", "modules": { "main": "main.js" }, "depends": "*.lmd.json" } Операции над конфигами 3. Зависимости модулей main.lmd.json хранит зависимости main.js http://clck.ru/4b7sw
  38. 38. 40 Профит •  Минус – нужно писать конфиг •  JSON можно легко реиспользовать •  Количество конфигов сократилось •  Меньше писать сборочных скриптов •  Легче понять результат сборки
  39. 39. Явные плагины
  40. 40. Гибкие плагины
  41. 41. Очень гибкие плагины
  42. 42. 44 { "image": true, "promise": true, "cache": true, "stats": true } Явный способ подключения плагинов http://clck.ru/4b7t6 Сборщик проверит плагины
  43. 43. 45 // javascript require('module'); // css require.css('path/to.css', callback); // image+promise require.image('path/img.png') .then(callback); LMD require – не God Object http://clck.ru/4b7tO
  44. 44. 46 Профит •  require() делает одну работу •  Результат require() стал предсказуемым •  Код стало проще воспринимать
  45. 45. ______ __ __ ! / ___ / / ! ____ ____ ! _____ _____ _ ! /_____/ /_____/ /_/ ! ! http://clck.ru/4dU-0!
  46. 46. $ lmd -c cfg.json ✘! -o result.js ✘! ! $ lmd make cfg ✔! $ lmd make cfg+ru ✔! $ lmd info cfg ✔! $ lmd ✔!atch !fg!⇥ ⇥! c!w!
  47. 47. LMD GUI
  48. 48. Встроенная аналитика http://clck.ru/4b8My
  49. 49. Интеграция с Grunt.js https://npmjs.org/package/grunt-lmd
  50. 50. 52 Профит LMD •  Максимум автоматизации –  Сборщик LMD –  Аналитика •  Максимум явного кода –  require.*() •  Минимум писанины –  CommonJS –  CLI & GUI •  Минимум копипаста –  Операции над кофигами https://github.com/azproduction/lmd
  51. 51. Михаил Давыдов JavaScript разработчик i@azproduction.ru azproduction Спасибо
  52. 52. Lazy Module Declaration http://lmdjs.org
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×