Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UWDC - Модули и сборка JavaScript
Search
Mikhail Davydov
September 23, 2013
Education
0
190
UWDC - Модули и сборка JavaScript
Video
https://www.youtube.com/watch?v=zbbV3JTF8Ds
Mikhail Davydov
September 23, 2013
Tweet
Share
More Decks by Mikhail Davydov
See All by Mikhail Davydov
Back To Text UI
azproduction
3
270
Promise – это не больно
azproduction
0
190
Components Now!
azproduction
3
140
ШРИ - JavaScript Event Model
azproduction
0
190
ШРИ - Code Style
azproduction
0
100
HTML5 Camp - JavaScript на фронте и в тылу
azproduction
0
280
Code Fest - Работает? Стабильно? Эффективно?
azproduction
0
150
Шаблонизация
azproduction
0
130
КРиПИ - Node.js – серверный JavaScript
azproduction
0
120
Other Decks in Education
See All in Education
2025年度春学期 統計学 第9回 確からしさを記述する ー 確率 (2025. 6. 5)
akiraasano
PRO
0
140
Constructing a Custom TeX Ecosystem for Educational Institutions—Beyond Academic Typesetting
doratex
1
18k
2025年度春学期 統計学 第11回 分布の「型」を考える ー 確率分布モデルと正規分布 (2025. 6. 19)
akiraasano
PRO
0
160
シリコンバレーでスタートアップを共同創業したファウンディングエンジニアとしての学び
tomoima525
1
470
2025/06/05_読み漁り学習
nag8
0
190
”育てる”から”育つ”仕組みへ!スクラムによる新入社員教育
arapon
0
120
生成AI
takenawa
0
14k
データ分析
takenawa
0
14k
Alumnote inc. Company Deck
yukinumata
0
1.5k
万博マニアックマップを支えるオープンデータとその裏側
barsaka2
0
750
(キラキラ)人事教育担当のつらみ~教育担当として知っておくポイント~
masakiokuda
0
130
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
signer
PRO
2
1.8k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Scaling GitHub
holman
462
140k
Thoughts on Productivity
jonyablonski
69
4.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Agile that works and the tools we love
rasmusluckow
329
21k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
For a Future-Friendly Web
brad_frost
179
9.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Transcript
None
Михаил Давыдов 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-construct",
"../dom-geometry" ], function (dojo, dom, style, attr, prop, cls, ctr, geom) { }); Много церемоний с define() 2. Куча зависимостей – ад http://clck.ru/4b7ew
None
22 define(function () { var myStuff = {}; return myStuff;
}); Много церемоний с define() 3. Артефакты: Приходится табулировать
23 require('module'); // js? require('async!data', cb); // ? require(ComicSans); //
font? require() - God Object? 1. Возвращает что угодно, как угодно 2. Не сразу понятен результат
AMD и CJS
25 И еще AMD • Приходится поддерживать AMD – jQuery, underscore,
backbone, … – 2 версии с AMD и без • Пытаются заразить Node.js – node-requirejs – в node и так есть модульная система http://clck.ru/4b7dE
Сейчас мы друзья
Другие пути
28 Другие пути • browserify – CommonJS – хорошо –
слишком много от Node.js – плохо • просто загрузчик – headjs – yepnopejs
29 Из моего опыта • Сегодня все собирается. Даже dev
• Читаемость кода очень важна – Нужно исключить неявные конструкции • Сборок бывает много – dev, production, dev-ru, test-en_US • Нужен контроль результата сборки – Проверка целостности – Подробная информация о сборке
Я создал новый инструмент
LMD – Lazy Module Declaration LMD
Модули – CommonJS Остальное делает сборщик
33 var $ = require('$'), myStuff = {}; module.exports =
myStuff; Модули – CommonJS/Modules 1.0* http://clck.ru/4b7gO
34 Профит • Ненавязчивый формат – Нет лишней писанины –
Единообразие вида модулей • Обратная совместимость с Node.js – Без плагинов, регистрации и SMS • Оберткой модулей занимается сборщик
35 { "root": "../js", "output": "../index.js", "modules": { "main": "main.js",
"i18n": "locale/ru.json" }, "css": true, "ie": false, "worker": true } Конфиг сборки http://clck.ru/4b7gq
Проблема: Много конфигов
37 { "extends": "index.json", "output": "../index-en.js" "modules": { "i18n": "locale/en.json"
} } Операции над конфигами 1. Наследование конфигов http://clck.ru/4b7j2
38 { "modules": { "i18n": "locale/en.json" } } Операции над
конфигами 2. Миксины конфигов lmd index+en \ –output=index-en.js http://clck.ru/4b7pI
39 { "root": "../js", "modules": { "main": "main.js" }, "depends":
"*.lmd.json" } Операции над конфигами 3. Зависимости модулей main.lmd.json хранит зависимости main.js http://clck.ru/4b7sw
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.png') .then(callback); LMD require – не God Object http://clck.ru/4b7tO
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.*() • Минимум писанины – CommonJS – CLI & GUI • Минимум копипаста – Операции над кофигами https://github.com/azproduction/lmd
Михаил Давыдов JavaScript разработчик i@azproduction.ru azproduction Спасибо
Lazy Module Declaration http://lmdjs.org