Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
WhataboutJavaScript?
MODULEPATTERN
var
bar = (function(){
// Functionality
return exportObj;
}()),
foo = (function( bar ){
// Functionality
}( ...
Andwhatthestructuredoesitgive
foryourcodebase?
HOWABOUTTHIS?
AMD
•
Designedtoaccommodateasynchronousloading
•
Lazy-loadscripts
•
CanloadmorethanjustJavaScriptfiles
•
Configsettingstos...
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
•
Simpleandcleanmoduledefinitionsyn...
CJSMODULES+COMMONJSCOMPILER
•
Designedforserver-sideJavaScriptandfor
nativedesktopapplications
•
Simpleandcleanmoduledefin...
COMMONJSCOMPILERis the key
http://dsheiko.github.io/cjsc
Let’s get started!
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...
EXAMPLE2
Outputof `build.js`:
{ 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`:
console.log( requ...
EXAMPLE3
Outputof `build.js`:
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" );
con...
EXAMPLE4
Outputof `build.js`:
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-Jav...
EXAMPLE5
`foo.tpl`:
{{title}} spends {{calc}}
`bar.js`:
var mustache = require( "./mustache" ),
tpl = require( "./foo.tpl"...
EXAMPLE5
Outputof `build.js`:
Joe spends 6
WHATHAVEWEJUSTDONE?
We leveraged loading of plain text resource to
obtain a template for further use with a
template engin...
DEBUGGINGCOMPILEDCODE
Generatingsourcemap:
$cjsc bar.js build.js --source-map=build.js.map
JavaScriptconsolereferstoorigin...
RUN-TIMECONFIGURATION
JSONconfigurationsyntax:
{
"<dependency-name>": {
"path": "<dependency-path>",
"globalProperty": "<g...
RUN-TIMECONFIGURATIONEXAMPLE
{
"jQuery": {
"globalProperty": "jQuery"
},
"plugin": {
"path": "./config/vendors/jquery.plug...
ENABLINGCONFIGURATION
$cjsc foo.js build.js --config=config.json
BUILDAUTOMATIONWITHGRUNT
Gruntfile.js:
grunt.loadNpmTasks( "grunt-contrib-cjsc" );
grunt.initConfig({
cjsc:{
debug: {
opti...
BUILDAUTOMATIONWITHGRUNT
Gruntfile.js:
build: {
options: {
minify: true,
banner: "/* License */",
config: {
"backbone": {
...
BUILDAUTOMATIONWITHGRUNT
It gives us two options: cjsc:debug and cjsc:build. The first
one we run during development; it p...
THANKYOU!
COMMONJSCOMPILER
http://dsheiko.github.io/cjsc
COMMONJSCOMPILERGRUNTTASK
https://github.com/dsheiko/grunt-contri...
DMITRYSHEIKO
@sheiko
https://github.com/dsheiko
dsheiko.com
Modular JavaScript with CommonJS Compiler
Modular JavaScript with CommonJS Compiler
Upcoming SlideShare
Loading in …5
×

Modular JavaScript with CommonJS Compiler

2,331 views

Published on

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

Published in: Internet, Technology

Modular JavaScript with CommonJS Compiler

  1. 1. WITH Dmitry Sheiko ModularJavaScript CommonJSCompiler
  2. 2. separates the functionality of a program into independent modules MODULARPROGRAMMING
  3. 3. encapsulates everything required to implement a single aspect of the desired functionality MODULE
  4. 4. Therefore,acomplexproblemcanbe brokenintosimplertasks
  5. 5. Theentiresystem becomeseasierto debug update modify
  6. 6. WhataboutJavaScript?
  7. 7. MODULEPATTERN var bar = (function(){ // Functionality return exportObj; }()), foo = (function( bar ){ // Functionality }( bar ));
  8. 8. Andwhatthestructuredoesitgive foryourcodebase?
  9. 9. HOWABOUTTHIS?
  10. 10. AMD • Designedtoaccommodateasynchronousloading • Lazy-loadscripts • CanloadmorethanjustJavaScriptfiles • Configsettingstosimplifypathresolutionand dependencylisting
  11. 11. AMDIMPROVESPERFORMANCEOF WEBAPPLICATIONby bypassing module loading along with the rest of the page content
  12. 12. AMDHARMSPERFORMANCEOFWEB APPLICATIONby producing numerous HTTP requests
  13. 13. COMMONJSMODULES/1.1 • Designedforserver-sideJavaScriptandfor nativedesktopapplications • Simpleandcleanmoduledefinitionsyntax
  14. 14. CJSMODULES+COMMONJSCOMPILER • Designedforserver-sideJavaScriptandfor nativedesktopapplications • Simpleandcleanmoduledefinitionsyntax • CanloadmorethanjustJavaScriptfiles • Configsettingstosimplifypathresolutionand dependencylisting
  15. 15. COMMONJSCOMPILERis the key http://dsheiko.github.io/cjsc
  16. 16. Let’s get started!
  17. 17. INSTALLINGCOMMONJSCOMPILER $sudo npm i cjsc -g
  18. 18. EXAMPLE1 `foo.js`: console.log( "foo.js: Hello World" ); `bar.js`: require( "./foo" ); console.log( "bar.js: Hello World" );
  19. 19. EXAMPLE1 Compiling`bar.js`: $cjsc bar.js build.js Outputof `build.js`: foo.js: Hello World bar.js: Hello World
  20. 20. WHATHAVEWEJUSTDONE? We loaded one module in another. Both are executed in the compiled code
  21. 21. EXAMPLE2 `foo.js`: var privateState = “lorem“; module.exports = { name: "foo.js" }; `bar.js`: console.log( require( "./foo" ) ); console.log(“privateState:" + typeof privateState );
  22. 22. EXAMPLE2 Outputof `build.js`: { name: "foo.js" } privateState: undefined
  23. 23. WHATHAVEWEJUSTDONE? We accessed an exported object and made certain that private state isn't available outside the module.
  24. 24. EXAMPLE3 `foo.js`: console.log( "foo.js: constructing" ); module.exports = { name: "foo.js" }; `bar.js`: console.log( require( "./foo" ) ); console.log( require( "./foo" ) );
  25. 25. EXAMPLE3 Outputof `build.js`: foo.js: constructing { name: "foo.js" } { name: "foo.js" }
  26. 26. WHATHAVEWEJUSTDONE? We checked that loading a module URL multiple times results in a single cached instance.
  27. 27. EXAMPLE4 `foo.tpl`: Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet `bar.js`: var tpl = require( "./foo.tpl" ); console.log( "foo:" + tpl );
  28. 28. EXAMPLE4 Outputof `build.js`: foo: Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet
  29. 29. WHATHAVEWEJUSTDONE? We found out that while resolving module dependencies CommonJS Compiler exports any content of non-JavaScript or JSON syntax as a string.
  30. 30. 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 ) );
  31. 31. EXAMPLE5 Outputof `build.js`: Joe spends 6
  32. 32. WHATHAVEWEJUSTDONE? We leveraged loading of plain text resource to obtain a template for further use with a template engine (mustache.js).
  33. 33. DEBUGGINGCOMPILEDCODE Generatingsourcemap: $cjsc bar.js build.js --source-map=build.js.map JavaScriptconsolereferstooriginalsources:
  34. 34. RUN-TIMECONFIGURATION JSONconfigurationsyntax: { "<dependency-name>": { "path": "<dependency-path>", "globalProperty": "<global-property>", exports: [ "<variable>", "<variable>" ], require: [ "<dependency-name>", "<dependency-name>" ] } }
  35. 35. RUN-TIMECONFIGURATIONEXAMPLE { "jQuery": { "globalProperty": "jQuery" }, "plugin": { "path": "./config/vendors/jquery.plugin.js", "require": "jQuery", "exports": "jQuery" } }
  36. 36. ENABLINGCONFIGURATION $cjsc foo.js build.js --config=config.json
  37. 37. 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" }},
  38. 38. 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" }}}
  39. 39. 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.
  40. 40. THANKYOU! COMMONJSCOMPILER http://dsheiko.github.io/cjsc COMMONJSCOMPILERGRUNTTASK https://github.com/dsheiko/grunt-contrib-cjsc
  41. 41. DMITRYSHEIKO @sheiko https://github.com/dsheiko dsheiko.com

×