UWDC - Модули и сборка JavaScript

Video https://www.youtube.com/watch?v=zbbV3JTF8Ds

Transcript

1. View Slide

2. Михаил Давыдов
   JavaScript разработчик
   Модули и
   сборка
   JavaScript
   

   View Slide

3. Моя история.
   С чего я начинал и
   к чему пришел…
   

   View Slide

4. cat **/*.js > build.js!
   

   View Slide

5. 5
   Файлы и cat **/*.js > build.js
   • Это быстро и просто
   • Что плохого
   –  Собирается все без разбора
   –  Возможны конфликты имен переменных
   –  Результат плохо сжимается
   –  Нужно учитывать порядок
   

   View Slide

6. Так жить нельзя!
   – Нужны модули.
   

   View Slide

7. 7
   Мне понадобились модули. Зачем?
   • Разделение логических частей
   • Управление импортом/экспортом
   • Явные зависимости и их контроль
   • Меньше конфликтов переменных
   

   View Slide

8. Модуль? – нет, не слышал!
   Learning JavaScript
   Design Patterns
   http://clck.ru/8aLgX
   

   View Slide

9. include('main.js');!
   

   View Slide

10. 10
    (function ($) {
    var myStuff = {};
    window.stuff = myStuff;
    })(jQuery);
    IIFE и include()
    

    View Slide

11. 11
    include('common.js');
    include('ru.js');
    include('main.js');
    IIFE и include(): Сборка
    includify main.js > build.js
    

    View Slide

12. 12
    IIFE и include()
    • Что хорошего
    –  Модули в замыканиях
    –  Можно наследовать сборки
    • Что плохого
    –  RegExp
    –  Дублирование модулей
    

    View Slide

13. Я встретил её…
    

    View Slide

14. REQUIRE JS
    

    View Slide

15. 15
    RequireJS
    • AMD
    • Асинхронные зависимости
    • Плагины
    • Оптимизация – r.js
    • Большое комьюнити
    

    View Slide

16. 16
    define(['jQuery', 'lodash'],
    function ($, _) {
    var myStuff = {};
    return myStuff;
    });
    RequireJS & AMD: Модули
    

    View Slide

17. 17
    data-main="js/app"
    src="js/require.js">
    
    RequireJS & AMD: Сборка
    node r.js -o build.js
    

    View Slide

18. I
    REQUIRE JS
    Я думал, что это навсегда…
    

    View Slide

19. 19
    define(function () {
    var myStuff = {};
    return myStuff;
    });
    Много церемоний с define()
    1. Нужно писать обертку
    

    View Slide

20. 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
    

    View Slide

21. View Slide

22. 22
    define(function () {
    var myStuff = {};
    return myStuff;
    });
    Много церемоний с define()
    3. Артефакты: Приходится табулировать
    

    View Slide

23. 23
    require('module'); // js?
    require('async!data', cb); // ?
    require(ComicSans); // font?
    require() - God Object?
    1. Возвращает что угодно, как угодно
    2. Не сразу понятен результат
    

    View Slide

24. AMD и CJS
    

    View Slide

25. 25
    И еще AMD
    • Приходится поддерживать AMD
    –  jQuery, underscore, backbone, …
    –  2 версии с AMD и без
    • Пытаются заразить Node.js
    –  node-requirejs
    –  в node и так есть модульная система
    http://clck.ru/4b7dE
    

    View Slide

26. Сейчас мы друзья
    

    View Slide

27. Другие пути
    

    View Slide

28. 28
    Другие пути
    •  browserify
    –  CommonJS – хорошо
    –  слишком много от Node.js – плохо
    •  просто загрузчик
    –  headjs
    –  yepnopejs
    

    View Slide

29. 29
    Из моего опыта
    •  Сегодня все собирается. Даже dev
    •  Читаемость кода очень важна
    –  Нужно исключить неявные конструкции
    •  Сборок бывает много
    –  dev, production, dev-ru, test-en_US
    •  Нужен контроль результата сборки
    –  Проверка целостности
    –  Подробная информация о сборке
    

    View Slide

30. Я создал новый
    инструмент
    

    View Slide

31. LMD – Lazy Module Declaration
    LMD
    

    View Slide

32. Модули – CommonJS
    Остальное делает сборщик
    

    View Slide

33. 33
    var $ = require('$'),
    myStuff = {};
    module.exports = myStuff;
    Модули – CommonJS/Modules 1.0*
    http://clck.ru/4b7gO
    

    View Slide

34. 34
    Профит
    •  Ненавязчивый формат
    –  Нет лишней писанины
    –  Единообразие вида модулей
    •  Обратная совместимость с Node.js
    –  Без плагинов, регистрации и SMS
    •  Оберткой модулей занимается сборщик
    

    View Slide

35. 35
    {
    "root": "../js",
    "output": "../index.js",
    "modules": {
    "main": "main.js",
    "i18n": "locale/ru.json"
    },
    "css": true,
    "ie": false,
    "worker": true
    }
    Конфиг сборки
    http://clck.ru/4b7gq
    

    View Slide

36. Проблема: Много конфигов
    

    View Slide

37. 37
    {
    "extends": "index.json",
    "output": "../index-en.js"
    "modules": {
    "i18n": "locale/en.json"
    }
    }
    Операции над конфигами
    1. Наследование конфигов
    http://clck.ru/4b7j2
    

    View Slide

38. 38
    {
    "modules": {
    "i18n": "locale/en.json"
    }
    }
    Операции над конфигами
    2. Миксины конфигов
    lmd index+en \
    –output=index-en.js
    http://clck.ru/4b7pI
    

    View Slide

39. 39
    {
    "root": "../js",
    "modules": {
    "main": "main.js"
    },
    "depends": "*.lmd.json"
    }
    Операции над конфигами
    3. Зависимости модулей
    main.lmd.json хранит зависимости main.js
    http://clck.ru/4b7sw
    

    View Slide

40. 40
    Профит
    •  Минус – нужно писать конфиг
    •  JSON можно легко реиспользовать
    •  Количество конфигов сократилось
    •  Меньше писать сборочных скриптов
    •  Легче понять результат сборки
    

    View Slide

41. Явные плагины
    

    View Slide

42. Гибкие плагины
    

    View Slide

43. Очень гибкие плагины
    

    View Slide

44. 44
    {
    "image": true,
    "promise": true,
    "cache": true,
    "stats": true
    }
    Явный способ подключения плагинов
    http://clck.ru/4b7t6
    Сборщик проверит плагины
    

    View Slide

45. 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
    

    View Slide

46. 46
    Профит
    •  require() делает одну работу
    •  Результат require() стал предсказуемым
    •  Код стало проще воспринимать
    

    View Slide

47. ______ __ __ !
    /\ ___\ /\ \ /\ \ !
    \ \ \____ \ \ \____ \ \ \ !
    \ \_____\ \ \_____\ \ \_\ !
    \/_____/ \/_____/ \/_/ !
    !
    http://clck.ru/4dU-0!
    

    View Slide

48. $ lmd -c cfg.json\ ✘!
    -o result.js ✘!
    !
    $ lmd make cfg ✔!
    $ lmd make cfg+ru ✔!
    $ lmd info cfg ✔!
    $ lmd ✔!
    atch !
    fg!
    ⇥ ⇥
    ! c!
    w!
    

    View Slide

49. LMD GUI
    

    View Slide

50. Встроенная аналитика
    http://clck.ru/4b8My
    

    View Slide

51. Интеграция с Grunt.js
    https://npmjs.org/package/grunt-lmd
    

    View Slide

52. 52
    Профит LMD
    •  Максимум автоматизации
    –  Сборщик LMD
    –  Аналитика
    •  Максимум явного кода
    –  require.*()
    •  Минимум писанины
    –  CommonJS
    –  CLI & GUI
    •  Минимум копипаста
    –  Операции над кофигами
    https://github.com/azproduction/lmd
    

    View Slide

53. Михаил Давыдов
    JavaScript разработчик
    i@azproduction.ru
    azproduction
    Спасибо
    

    View Slide

54. Lazy Module Declaration
    http://lmdjs.org
    

    View Slide