Modular JavaScript with CommonJS Compiler

WITH
Dmitry Sheiko
ModularJavaScript
CommonJSCompiler

separates the functionality of a program
into independent modules
MODULARPROGRAMMING

encapsulates everything required to
implement a single aspect of the desired
functionality
MODULE

Therefore,acomplexproblemcanbe
brokenintosimplertasks

Theentiresystem
becomeseasierto
debug
update
modify

MODULEPATTERN
var
bar = (function(){
// Functionality
return exportObj;
}()),
foo = (function( bar ){
// Functionality
}( bar ));

Andwhatthestructuredoesitgive
foryourcodebase?

Modular JavaScript with CommonJS Compiler

AMD
•
Designedtoaccommodateasynchronousloading
•
Lazy-loadscripts
•
CanloadmorethanjustJavaScriptfiles
•
Configsettingstosimplifypathresolutionand
dependencylisting

AMDIMPROVESPERFORMANCEOF
WEBAPPLICATIONby bypassing
module loading along with the rest of
the page content

AMDHARMSPERFORMANCEOFWEB
APPLICATIONby producing numerous
HTTP requests

COMMONJSMODULES/1.1
•
Designedforserver-sideJavaScriptandfor
nativedesktopapplications
•
Simpleandcleanmoduledefinitionsyntax

CJSMODULES+COMMONJSCOMPILER
•
Designedforserver-sideJavaScriptandfor
nativedesktopapplications
•
Simpleandcleanmoduledefinitionsyntax
•
CanloadmorethanjustJavaScriptfiles
•
Configsettingstosimplifypathresolutionand
dependencylisting

COMMONJSCOMPILERis the key
http://dsheiko.github.io/cjsc

INSTALLINGCOMMONJSCOMPILER
$sudo npm i cjsc -g

EXAMPLE1
`foo.js`:
console.log( "foo.js: Hello World" );
`bar.js`:
require( "./foo" );
console.log( "bar.js: Hello World" );

EXAMPLE1
Compiling`bar.js`:
$cjsc bar.js build.js
Outputof `build.js`:
foo.js: Hello World
bar.js: Hello World

WHATHAVEWEJUSTDONE?
We loaded one module in another. Both are
executed in the compiled code

EXAMPLE2
`foo.js`:
var privateState = “lorem“;
module.exports = { name: "foo.js" };
`bar.js`:
console.log( require( "./foo" ) );
console.log(“privateState:" + typeof privateState );

EXAMPLE2
{ name: "foo.js" }
privateState: undefined

WHATHAVEWEJUSTDONE?
We accessed an exported object and made
certain that private state isn't available outside
the module.

EXAMPLE3
`foo.js`:
console.log( "foo.js: constructing" );
module.exports = { name: "foo.js" };
`bar.js`:

EXAMPLE3
foo.js: constructing
{ name: "foo.js" }
{ name: "foo.js" }

WHATHAVEWEJUSTDONE?
We checked that loading a module URL multiple
times results in a single cached instance.

EXAMPLE4
`foo.tpl`:
Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet
`bar.js`:
var tpl = require( "./foo.tpl" );
console.log( "foo:" + tpl );

EXAMPLE4
foo: Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet

WHATHAVEWEJUSTDONE?
We found out that while resolving module
dependencies CommonJS Compiler exports any
content of non-JavaScript or JSON syntax as a
string.

EXAMPLE5
`foo.tpl`:
{{title}} spends {{calc}}
`bar.js`:
var mustache = require( "./mustache" ),
tpl = require( "./foo.tpl" ),
view = { title: "Joe", calc: function () { return 2 + 4;}};
console.log( mustache.render( tpl, view ) );

EXAMPLE5
Joe spends 6

WHATHAVEWEJUSTDONE?
We leveraged loading of plain text resource to
obtain a template for further use with a
template engine (mustache.js).

DEBUGGINGCOMPILEDCODE
Generatingsourcemap:
$cjsc bar.js build.js --source-map=build.js.map
JavaScriptconsolereferstooriginalsources:

RUN-TIMECONFIGURATION
JSONconfigurationsyntax:
{
"<dependency-name>": {
"path": "<dependency-path>",
"globalProperty": "<global-property>",
exports: [ "<variable>", "<variable>" ],
require: [ "<dependency-name>", "<dependency-name>" ]
}
}

RUN-TIMECONFIGURATIONEXAMPLE
{
"jQuery": {
"globalProperty": "jQuery"
},
"plugin": {
"path": "./config/vendors/jquery.plugin.js",
"require": "jQuery",
"exports": "jQuery"
}
}

ENABLINGCONFIGURATION
$cjsc foo.js build.js --config=config.json

BUILDAUTOMATIONWITHGRUNT
Gruntfile.js:
grunt.loadNpmTasks( "grunt-contrib-cjsc" );
grunt.initConfig({
cjsc:{
debug: {
options: {
sourceMap: "./wwwroot/build/js/*.map",
config: {
"backbone": {
"path": "./wwwroot/vendors/backbone/backbone"
}}},
files: {
"./wwwroot/build/js/app.js": "./wwwroot/js/app.js"
}},

Gruntfile.js:
build: {
options: {
minify: true,
banner: "/* License */",
config: {
"backbone": {
"path": "path": "./wwwroot/vendors/backbone/backbone"
}}},
files: {
"./wwwroot/build/js/app.js": "./wwwroot/js/app.js"
}}}

It gives us two options: cjsc:debug and cjsc:build. The first
one we run during development; it provides source maps
for debugging and doesn't compress output. The second
option we use when preparing production build.

THANKYOU!
COMMONJSCOMPILER
http://dsheiko.github.io/cjsc
COMMONJSCOMPILERGRUNTTASK
https://github.com/dsheiko/grunt-contrib-cjsc

DMITRYSHEIKO
@sheiko
https://github.com/dsheiko
dsheiko.com

Modular JavaScript with CommonJS Compiler

Recommended

More Related Content

Similar to Modular JavaScript with CommonJS Compiler (20)

More from Dmitry Sheiko (7)

Recently uploaded (20)

Modular JavaScript with CommonJS Compiler