Introduction into a developing approach where you can keep your JavaScript modular without any performance loss

1. WITH
Dmitry Sheiko
ModularJavaScript
CommonJSCompiler

2. separates the functionality of a program
into independent modules
MODULARPROGRAMMING

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

4. Therefore,acomplexproblemcanbe
brokenintosimplertasks

5. Theentiresystem
becomeseasierto
debug
update
modify

6. WhataboutJavaScript?

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

8. Andwhatthestructuredoesitgive
foryourcodebase?

10. HOWABOUTTHIS?

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

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

14. AMDHARMSPERFORMANCEOFWEB
APPLICATIONby producing numerous
HTTP requests

15. COMMONJSMODULES/1.1
•
Designedforserver-sideJavaScriptandfor
nativedesktopapplications
•
Simpleandcleanmoduledefinitionsyntax

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

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

18. Let’s get started!

19. INSTALLINGCOMMONJSCOMPILER
$sudo npm i cjsc -g

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

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

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

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

24. EXAMPLE2
Outputof `build.js`:
{ name: "foo.js" }
privateState: undefined

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

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

27. EXAMPLE3
Outputof `build.js`:
foo.js: constructing
{ name: "foo.js" }
{ name: "foo.js" }

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

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

30. EXAMPLE4
Outputof `build.js`:
foo: Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet

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

32. 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 ) );

33. EXAMPLE5
Outputof `build.js`:
Joe spends 6

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

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

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

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

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

39. 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"
}},

40. BUILDAUTOMATIONWITHGRUNT
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"
}}}

41. BUILDAUTOMATIONWITHGRUNT
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.

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

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