FrontTalks #1: Михаил Давыдов – LMD

Я устал от AMD, пристально изучал другие сборщики и загрузчики – все не то... и мне пришлось сделать сборщик модулей моей мечты. В докладе будет о том, какие варианты рассматривались и что получилось в итоге.

Transcript

1. #FrontTalks
2. Михаил Давыдов JavaScript разработчик LMD
3. cat **/*.js > build.js!
4. 4 Плоские модули и cat **/*.js > build.js • Это быстро и просто • Что плохого –  Собирается все без разбора –  Возможны конфликты имен переменных –  Результат плохо сжимается –  Нужно учитывать порядок
5. REQUIRE JS
6. 6 define(['jQuery', 'lodash'], function ($, _) { var myStuff = {}; return myStuff; }); RequireJS & AMD: Модули
7. 7 <script data-main="js/app" src="js/require.js"> </script> RequireJS & AMD: Сборка node r.js -o build.js
8. I REQUIRE JS Я думал, что это навсегда…
9. 9 define(function () { var myStuff = {}; return myStuff; }); Много церемоний с define() 1. Нужно писать обертку
10. 10 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
12. 12 define(function () { var myStuff = {}; return myStuff; }); Много церемоний с define() 3. Артефакты: Приходится табулировать
13. 13 require('module'); // js? require('async!data', cb); // ? require(ComicSans); // font? require() - God Object 1. Возвращает что угодно, как угодно 2. Не понятен результат
14. 14 И еще AMD • Приходится поддерживать AMD –  jQuery, underscore, backbone, … –  2 версии с AMD и без • Пытаются заразить Node.js –  node-requirejs –  в node и так есть модульная система http://clck.ru/4b7dE
16. Другие пути
17. 17 Другие пути •  browserify –  CommonJS – хорошо –  слишком много от Node.js – плохо •  просто загрузчик –  headjs –  yepnopejs
18. 18 Из моего опыта •  Сегодня все собирается. Даже dev •  Читаемость кода очень важна –  Нужно исключить неявные конструкции •  Сборок бывает много –  dev, production, dev-ru, test-en_US •  Нужен контроль результата сборки –  Проверка целостности –  Подробная информация о сборке
19. LMD – Lazy Module Declaration LMD
20. Модули – CommonJS Остальное делает сборщик
21. 21 var $ = require('$'), myStuff = {}; module.exports = myStuff; Модули – CommonJS/Modules 1.0* http://clck.ru/4b7gO
22. Проблема: Много конфигов
23. 23 { "extends": "index.json", "output": "../index-en.js" "modules": { "i18n": "locale/en.json" }, "depends": "*.lmd.json" } Операции над конфигами http://clck.ru/4b7j2 main.lmd.json хранит зависимости main.js
24. 24 Конфиги в формате JSON •  Минус – нужно писать конфиг •  JSON можно легко реиспользовать •  Количество конфигов сократилось •  Меньше писать сборочных скриптов •  Легче понять результат сборки
25. Явные плагины
26. Гибкие плагины
27. Очень гибкие плагины
28. 28 Плагины по формату LMD •  require() делает одну работу •  Результат require() стал предсказуемым •  require.css('style', function () {}) •  require.async('module').then(function () {}) •  Код стало проще воспринимать
29. ______ __ __ ! /\ ___\ /\ \ /\ \ ! \ \ \____ \ \ \____ \ \ \ ! \ \_____\ \ \_____\ \ \_\ ! \/_____/ \/_____/ \/_/ ! ! http://clck.ru/4dU-0!
30. LMD GUI
31. Интеграция с Grunt.js https://npmjs.org/package/grunt-lmd
32. 32 Профит LMD •  Максимум автоматизации –  Сборщик LMD –  Аналитика •  Максимум явного кода –  require.*() •  Минимум писанины –  CommonJS –  CLI & GUI •  Минимум копипаста –  Операции над кофигами https://github.com/azproduction/lmd
33. Михаил Давыдов JavaScript разработчик i@azproduction.ru azproduction Спасибо
34. Lazy Module Declaration http://lmdjs.org