SlideShare a Scribd company logo
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
}( bar ));
Andwhatthestructuredoesitgive
foryourcodebase?
HOWABOUTTHIS?
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
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" ) );
console.log(“privateState:" + typeof privateState );
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( require( "./foo" ) );
console.log( require( "./foo" ) );
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" );
console.log( "foo:" + tpl );
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-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
Outputof `build.js`:
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"
}},
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"
}}}
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.
THANKYOU!
COMMONJSCOMPILER
http://dsheiko.github.io/cjsc
COMMONJSCOMPILERGRUNTTASK
https://github.com/dsheiko/grunt-contrib-cjsc
DMITRYSHEIKO
@sheiko
https://github.com/dsheiko
dsheiko.com

More Related Content

Similar to Modular JavaScript with CommonJS Compiler

Angular JS in 2017
Angular JS in 2017Angular JS in 2017
Angular JS in 2017
Ayush Sharma
 
IOC + Javascript
IOC + JavascriptIOC + Javascript
IOC + Javascript
Brian Cavalier
 
Smoothing Your Java with DSLs
Smoothing Your Java with DSLsSmoothing Your Java with DSLs
Smoothing Your Java with DSLs
intelliyole
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 
Warsaw Frontend Meetup #1 - Webpack
Warsaw Frontend Meetup #1 - WebpackWarsaw Frontend Meetup #1 - Webpack
Warsaw Frontend Meetup #1 - Webpack
Radosław Rosłaniec
 
Advanced Node.JS Meetup
Advanced Node.JS MeetupAdvanced Node.JS Meetup
Advanced Node.JS Meetup
LINAGORA
 
Webpack: your final module bundler
Webpack: your final module bundlerWebpack: your final module bundler
Webpack: your final module bundler
Andrea Giannantonio
 
Modules and EmbedJS
Modules and EmbedJSModules and EmbedJS
Modules and EmbedJS
Jens Arps
 
Frontend JS workflow - Gulp 4 and the like
Frontend JS workflow - Gulp 4 and the likeFrontend JS workflow - Gulp 4 and the like
Frontend JS workflow - Gulp 4 and the like
Damien Seguin
 
RequireJS
RequireJSRequireJS
RequireJS
Tim Doherty
 
Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4
Yuriy Shapovalov
 
Exciting JavaScript - Part II
Exciting JavaScript - Part IIExciting JavaScript - Part II
Exciting JavaScript - Part II
Eugene Lazutkin
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practices
manugoel2003
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
David Padbury
 
Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)
Ran Mizrahi
 
Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)
Ran Mizrahi
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
toddbr
 
How and why i roll my own node.js framework
How and why i roll my own node.js frameworkHow and why i roll my own node.js framework
How and why i roll my own node.js framework
Ben Lin
 
Spring Data MongoDB 介紹
Spring Data MongoDB 介紹Spring Data MongoDB 介紹
Spring Data MongoDB 介紹
Kuo-Chun Su
 
JavaFX Enterprise (JavaOne 2014)
JavaFX Enterprise (JavaOne 2014)JavaFX Enterprise (JavaOne 2014)
JavaFX Enterprise (JavaOne 2014)
Hendrik Ebbers
 

Similar to Modular JavaScript with CommonJS Compiler (20)

Angular JS in 2017
Angular JS in 2017Angular JS in 2017
Angular JS in 2017
 
IOC + Javascript
IOC + JavascriptIOC + Javascript
IOC + Javascript
 
Smoothing Your Java with DSLs
Smoothing Your Java with DSLsSmoothing Your Java with DSLs
Smoothing Your Java with DSLs
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
Warsaw Frontend Meetup #1 - Webpack
Warsaw Frontend Meetup #1 - WebpackWarsaw Frontend Meetup #1 - Webpack
Warsaw Frontend Meetup #1 - Webpack
 
Advanced Node.JS Meetup
Advanced Node.JS MeetupAdvanced Node.JS Meetup
Advanced Node.JS Meetup
 
Webpack: your final module bundler
Webpack: your final module bundlerWebpack: your final module bundler
Webpack: your final module bundler
 
Modules and EmbedJS
Modules and EmbedJSModules and EmbedJS
Modules and EmbedJS
 
Frontend JS workflow - Gulp 4 and the like
Frontend JS workflow - Gulp 4 and the likeFrontend JS workflow - Gulp 4 and the like
Frontend JS workflow - Gulp 4 and the like
 
RequireJS
RequireJSRequireJS
RequireJS
 
Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4
 
Exciting JavaScript - Part II
Exciting JavaScript - Part IIExciting JavaScript - Part II
Exciting JavaScript - Part II
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practices
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
 
Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)
 
Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
How and why i roll my own node.js framework
How and why i roll my own node.js frameworkHow and why i roll my own node.js framework
How and why i roll my own node.js framework
 
Spring Data MongoDB 介紹
Spring Data MongoDB 介紹Spring Data MongoDB 介紹
Spring Data MongoDB 介紹
 
JavaFX Enterprise (JavaOne 2014)
JavaFX Enterprise (JavaOne 2014)JavaFX Enterprise (JavaOne 2014)
JavaFX Enterprise (JavaOne 2014)
 

More from Dmitry Sheiko

The Flavor of TypeScript
The Flavor of TypeScriptThe Flavor of TypeScript
The Flavor of TypeScript
Dmitry Sheiko
 
Writing Scalable and Maintainable CSS
Writing Scalable and Maintainable CSSWriting Scalable and Maintainable CSS
Writing Scalable and Maintainable CSS
Dmitry Sheiko
 
Tooling JavaScript to ensure consistency in coding style
Tooling JavaScript to ensure consistency in coding styleTooling JavaScript to ensure consistency in coding style
Tooling JavaScript to ensure consistency in coding style
Dmitry Sheiko
 
JavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right ChoiceJavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right Choice
Dmitry Sheiko
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
Dmitry Sheiko
 
A Quick Start - Version Control with Git
A Quick Start - Version Control with GitA Quick Start - Version Control with Git
A Quick Start - Version Control with Git
Dmitry Sheiko
 
Bringing classical OOP into JavaScript
Bringing classical OOP into JavaScriptBringing classical OOP into JavaScript
Bringing classical OOP into JavaScript
Dmitry Sheiko
 

More from Dmitry Sheiko (7)

The Flavor of TypeScript
The Flavor of TypeScriptThe Flavor of TypeScript
The Flavor of TypeScript
 
Writing Scalable and Maintainable CSS
Writing Scalable and Maintainable CSSWriting Scalable and Maintainable CSS
Writing Scalable and Maintainable CSS
 
Tooling JavaScript to ensure consistency in coding style
Tooling JavaScript to ensure consistency in coding styleTooling JavaScript to ensure consistency in coding style
Tooling JavaScript to ensure consistency in coding style
 
JavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right ChoiceJavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right Choice
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
A Quick Start - Version Control with Git
A Quick Start - Version Control with GitA Quick Start - Version Control with Git
A Quick Start - Version Control with Git
 
Bringing classical OOP into JavaScript
Bringing classical OOP into JavaScriptBringing classical OOP into JavaScript
Bringing classical OOP into JavaScript
 

Recently uploaded

Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
Paul Walk
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
Tarandeep Singh
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
APNIC
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
thezot
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
APNIC
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
davidjhones387
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
xjq03c34
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
k4ncd0z
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 

Recently uploaded (12)

Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 

Modular JavaScript with CommonJS Compiler