Modular JavaScript with CommonJS Compiler

  • 1,385 views
Uploaded on

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

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

More in: Internet , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Just simple omit 'paths.requireLib=../../require' and 'include=requireLib' arguments.
    Are you sure you want to
    Your message goes here
  • r.js? Sure, and you have RequireJS (the entire library to handle async. dependencies) for pre-compiled (thus - synchronous) modules. Not really about YAGNI. Instead one can go with Browserify or my tool and be fine without any external library
    Are you sure you want to
    Your message goes here
  • 'Why AMD isn’t cool
    AMD loader creates HTTP request per dependency hurting the performance of the application.'

    http://requirejs.org/docs/optimization.html#onejs
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,385
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
11
Comments
3
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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?
  • 9. HOWABOUTTHIS?
  • 10. AMD • Designedtoaccommodateasynchronousloading • Lazy-loadscripts • CanloadmorethanjustJavaScriptfiles • Configsettingstosimplifypathresolutionand dependencylisting
  • 11. AMDIMPROVESPERFORMANCEOF WEBAPPLICATIONby bypassing module loading along with the rest of the page content
  • 12. AMDHARMSPERFORMANCEOFWEB APPLICATIONby producing numerous HTTP requests
  • 13. COMMONJSMODULES/1.1 • Designedforserver-sideJavaScriptandfor nativedesktopapplications • Simpleandcleanmoduledefinitionsyntax
  • 14. CJSMODULES+COMMONJSCOMPILER • Designedforserver-sideJavaScriptandfor nativedesktopapplications • Simpleandcleanmoduledefinitionsyntax • CanloadmorethanjustJavaScriptfiles • Configsettingstosimplifypathresolutionand dependencylisting
  • 15. COMMONJSCOMPILERis the key http://dsheiko.github.io/cjsc
  • 16. Let’s get started!
  • 17. INSTALLINGCOMMONJSCOMPILER $sudo npm i cjsc -g
  • 18. EXAMPLE1 `foo.js`: console.log( "foo.js: Hello World" ); `bar.js`: require( "./foo" ); console.log( "bar.js: Hello World" );
  • 19. EXAMPLE1 Compiling`bar.js`: $cjsc bar.js build.js Outputof `build.js`: foo.js: Hello World bar.js: Hello World
  • 20. WHATHAVEWEJUSTDONE? We loaded one module in another. Both are executed in the compiled code
  • 21. EXAMPLE2 `foo.js`: var privateState = “lorem“; module.exports = { name: "foo.js" }; `bar.js`: console.log( require( "./foo" ) ); console.log(“privateState:" + typeof privateState );
  • 22. EXAMPLE2 Outputof `build.js`: { name: "foo.js" } privateState: undefined
  • 23. WHATHAVEWEJUSTDONE? We accessed an exported object and made certain that private state isn't available outside the module.
  • 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. EXAMPLE3 Outputof `build.js`: foo.js: constructing { name: "foo.js" } { name: "foo.js" }
  • 26. WHATHAVEWEJUSTDONE? We checked that loading a module URL multiple times results in a single cached instance.
  • 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. EXAMPLE4 Outputof `build.js`: foo: Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet
  • 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. 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. EXAMPLE5 Outputof `build.js`: Joe spends 6
  • 32. WHATHAVEWEJUSTDONE? We leveraged loading of plain text resource to obtain a template for further use with a template engine (mustache.js).
  • 33. DEBUGGINGCOMPILEDCODE Generatingsourcemap: $cjsc bar.js build.js --source-map=build.js.map JavaScriptconsolereferstooriginalsources:
  • 34. RUN-TIMECONFIGURATION JSONconfigurationsyntax: { "<dependency-name>": { "path": "<dependency-path>", "globalProperty": "<global-property>", exports: [ "<variable>", "<variable>" ], require: [ "<dependency-name>", "<dependency-name>" ] } }
  • 35. RUN-TIMECONFIGURATIONEXAMPLE { "jQuery": { "globalProperty": "jQuery" }, "plugin": { "path": "./config/vendors/jquery.plugin.js", "require": "jQuery", "exports": "jQuery" } }
  • 36. ENABLINGCONFIGURATION $cjsc foo.js build.js --config=config.json
  • 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. 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. 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. THANKYOU! COMMONJSCOMPILER http://dsheiko.github.io/cjsc COMMONJSCOMPILERGRUNTTASK https://github.com/dsheiko/grunt-contrib-cjsc
  • 41. DMITRYSHEIKO @sheiko https://github.com/dsheiko dsheiko.com