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

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

include('main.js');!

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

REQUIRE JS

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17 RequireJS & AMD: Сборка node r.js -o build.js

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

AMD и CJS

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Другие пути

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

LMD – Lazy Module Declaration LMD

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

LMD GUI

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Михаил Давыдов JavaScript разработчик [email protected] azproduction Спасибо

Slide 54

Slide 54 text

Lazy Module Declaration http://lmdjs.org