Modular JavaScript with CommonJS Compiler

2,053 views
1,902 views

Published on

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

Published in: Internet, Technology
3 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total views
2,053
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
21
Comments
3
Likes
5
Embeds 0
No embeds

No notes for slide

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

×