Слайды доклада "CommonJS для браузера", Антон Шувалов, MoscowJS 15

1. CommonJS в браузере Шувалов Антон
1

2. Что такое CommonJS?
2

3. Как работает CommonJS?
3

4. Как работает CommonJS
'use strict';
var $ = require('jquery');
var counter = 0;
exports.inc = function (count) {
counter += count || 1;
};
exports.get = function () {
return counter;
}
4

5. Как работает CommonJS
(function (require, exports, …) {
var
var
exports.
exports.
}
5
})(require, exports, …)

6. $ browserify index.js > bundle.js
6

7. Вложенные зависимости
Jonathan:proxy.js jong$ pkgcount --duplicates
NAME COUNT
abbrev@1.0.5 25
accepts@1.0.7 9
amdefine@0.1.0 105
ansi-regex@0.1.0 8
ansi-regex@0.2.1 16
ansi-styles@1.0.0 26
ansi-styles@1.1.0 8
argparse@0.1.15 34
asn1@0.1.11 26
assert-plus@0.1.2 26
ast-types@0.4.8 17
async@0.2.10 60
async@0.9.0 60
…и еще 200 строк
7

8. Плоские зависимости
// get-val.js
module.exports = function init($) {
return function(el){
return $(el).val();
}
};
8

9. Плоские зависимости
// get-val.js
module.exports = function init($) {
return function(el){
return $(el).val();
}
};
// index.js
var $ = require('jquery');
var $getVal = require('get-val')($);
var password = $getVal('.password');
9

10. Плоские зависимости
// index.js
var Backbone = require('Backbone');
var $ = Backbone.$ = require('jquery');
10

11. (function (factory) {
"use strict";
if (typeof define === 'function' && define.amd) {
// using AMD
define(['jquery'], factory);
} else if (typeof exports !== 'undefined') {
// using CommonJS
module.exports = factory2;
} else {
// no AMD/CommonJS; invoke directly
factory(jQuery);
}
})(function($) {
"use strict";
// plugin code
});
http://dontkry.com/posts/code/browserify-and-the-universal-module-definition.html
11
Поддержка

12. NPM
8 629 620 downloads in the last day
121 187 099 downloads in the last week
475 001 308 downloads in the last month
12

13. CommonJS в браузере:
- Простота
- Нет шаблонного кода
- Миллионы готовых модулей в NPM
13

14. |_~(˘▾˘~)
- http://github.com/shuvalov-anton
- http://twitter.com/shuvalov_anton
- http://shuvalov.info
14