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
120
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
230
Promise – это не больно
azproduction
0
170
Components Now!
azproduction
3
110
ШРИ - JavaScript Event Model
azproduction
0
160
ШРИ - Code Style
azproduction
0
81
HTML5 Camp - JavaScript на фронте и в тылу
azproduction
0
210
Code Fest - Работает? Стабильно? Эффективно?
azproduction
0
83
Шаблонизация
azproduction
0
91
КРиПИ - Node.js – серверный JavaScript
azproduction
0
99
Other Decks in Education
See All in Education
Project Sprint 学生版(入門編)
copilot
PRO
0
160
LTをすべき100の理由
eltociear
1
250
財務分析 - 入門編
lsuzuki
0
360
6ヶ月間の授業でここまでできた。コンテスト参加に向けての授業内容と生徒の様子を紹介!
asial_corp
0
400
第1回全国商業高校Webアプリコンテスト総括
asial_corp
0
400
Multimodal Interaction - Lecture 3 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1k
Dolce and Gabbana Light Blue Perfume
vicjon
0
390
論文の読み方 / How to survey
kaityo256
PRO
175
120k
Digijulkaisut
matleenalaakso
1
8.5k
Padlet opetuksessa
matleenalaakso
3
11k
HCL Notes 14.0 「スタイルの変更」で「3 設定の確認」を深掘り
harunakano
0
1.9k
Data Management and Analytics Specialisation
signer
PRO
0
980
Featured
See All Featured
Designing with Data
zakiwarfel
95
4.8k
Designing Experiences People Love
moore
136
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
How GitHub (no longer) Works
holman
304
140k
Visualization
eitanlees
135
14k
Optimizing for Happiness
mojombo
370
69k
Designing for Performance
lara
601
67k
It's Worth the Effort
3n
180
27k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
KATA
mclloyd
14
12k
How to name files
jennybc
64
92k
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 разработчик
[email protected]
azproduction Спасибо
Lazy Module Declaration http://lmdjs.org