modular javascript
DESCRIPTION
As presented at JavaOne 2013TRANSCRIPT
![Page 1: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/1.jpg)
Modular JavaScript
@sander_mak@pbakker
![Page 2: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/2.jpg)
Modularity����������� ������������������ intro
JavaScript����������� ������������������ pitfalls
JS����������� ������������������ Module����������� ������������������ Systems
Java����������� ������������������ +����������� ������������������ JavaScript����������� ������������������ modularity
![Page 3: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/3.jpg)
Why����������� ������������������ Modularity?
![Page 4: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/4.jpg)
Modularity is
key����������� ������������������ to maintainable code
![Page 5: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/5.jpg)
Modularity 101
Encapsulation
Maintainability
Flexible composition
Sanity
![Page 6: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/6.jpg)
Modularity 101
Remember����������� ������������������ Java?
Low����������� ������������������ CouplingHigh����������� ������������������ Cohesion
![Page 7: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/7.jpg)
Modularity in Java
Bundle A
+ package org.myapi
- package org.myapi.impl- package org.util
Bundle B
+ package org.other.api
Bundle C
+ package org.other.impl
Imports
Imports
![Page 8: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/8.jpg)
Modularity in Java
The����������� ������������������ only����������� ������������������ modularity����������� ������������������ solution����������� ������������������ for����������� ������������������ Java����������� ������������������ today
OSGi
![Page 9: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/9.jpg)
Why modularity in JavaScript?
We����������� ������������������ run����������� ������������������ into����������� ������������������ the����������� ������������������ same����������� ������������������ maintainability����������� ������������������ problems����������� ������������������ as����������� ������������������ on����������� ������������������ the����������� ������������������ server����������� ������������������ side...
So...
20%
80%
Java JavaScript
50% 50%
then now
![Page 10: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/10.jpg)
Text
And����������� ������������������ it����������� ������������������ might����������� ������������������ eve
n����������� ������������������
be����������� ������������������ worse....
![Page 11: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/11.jpg)
JavaScript Modularity 101
Globals
![Page 12: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/12.jpg)
Anonymous functions
Anonymous����������� ������������������ functions����������� ������������������ prevent����������� ������������������ putting����������� ������������������ something����������� ������������������ in����������� ������������������ global����������� ������������������ scope
This����������� ������������������ method����������� ������������������ executes,����������� ������������������ but����������� ������������������ is����������� ������������������ not����������� ������������������ visible����������� ������������������ in����������� ������������������ global����������� ������������������ scope
![Page 13: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/13.jpg)
Namespacing: a common approach
This only makes things slightly better...
We still force myLibrary into global scope!
staticnames
![Page 14: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/14.jpg)
Leaking visibility
Do����������� ������������������ not����������� ������������������ make����������� ������������������ private����������� ������������������ methods����������� ������������������ public!
myhelper����������� ������������������ is����������� ������������������ now����������� ������������������ public
public
![Page 15: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/15.jpg)
Leaking visibility
Instead:
myhelper����������� ������������������ is����������� ������������������ now����������� ������������������ private
![Page 16: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/16.jpg)
Comparing����������� ������������������ JavaScript����������� ������������������
Module����������� ������������������ Systems
![Page 17: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/17.jpg)
Module Wish list
Browser����������� ������������������ support
Stable
Available����������� ������������������ now
Specified
Manage dependencies
![Page 18: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/18.jpg)
Module options
Asynchronous����������� ������������������ Module����������� ������������������ Definition
CommonJS
ES6����������� ������������������ Harmony����������� ������������������ Modules
![Page 19: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/19.jpg)
Module comparison
AMD
C.JS
ES6
Spec-by-GitHub
Spec-by-Wiki
Ecmastandard(in����������� ������������������ progress)
Spec? Impls?
RequireJSCurl.js...
BrowserifyNode.js...
Browserfirst
Serverfirst
Both
Environment
-Where can you play with ES6 modules?Traceur?
![Page 20: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/20.jpg)
Module comparison
AMD
C.JS
ES6
Yes
No
No
Async? Format?
ObjectsFunctions...
Objects
Available?
Yes
Yes
NoObjectsFunctions...
![Page 21: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/21.jpg)
Module comparison
AMD
CommonJS
ES6����������� ������������������ HarmonyRevise with latest syntax
![Page 22: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/22.jpg)
Universal����������� ������������������ Module����������� ������������������ Definition
Can’t we have it all?
![Page 23: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/23.jpg)
NO!Pick����������� ������������������ one.And����������� ������������������ stick����������� ������������������ with����������� ������������������ it.
(unless����������� ������������������ you����������� ������������������ are����������� ������������������ a����������� ������������������ library����������� ������������������ author)
![Page 24: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/24.jpg)
Why RequireJS?
Robust����������� ������������������ AMD����������� ������������������ implementation
Browser-based,����������� ������������������ no����������� ������������������ build����������� ������������������ step
Lazy-loading
Optimizer:����������� ������������������ r.js
Backwards����������� ������������������ compat.����������� ������������������ with����������� ������������������ globals
jQuery����������� ������������������ supports����������� ������������������ AMD
![Page 25: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/25.jpg)
RequireJS: end-to-end
index.html
main.js
That.����������� ������������������ Is.����������� ������������������ All.
mymodule-1.2.js
![Page 26: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/26.jpg)
RequireJS: ‘advanced’
RequireRequire
NamedModules
ConditionalDependencies
![Page 27: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/27.jpg)
From legacy to modules
Globals
RequireJS����������� ������������������ Shims
![Page 28: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/28.jpg)
Another example
AngularJS����������� ������������������ Services����������� ������������������ model
Dependency����������� ������������������ Injection
&
What����������� ������������������ about����������� ������������������ well����������� ������������������ defined����������� ������������������ interfaces?
What����������� ������������������ about����������� ������������������ dynamic����������� ������������������ services?
Why����������� ������������������ a����������� ������������������ second����������� ������������������ module����������� ������������������ definition?
![Page 29: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/29.jpg)
Service definition
![Page 30: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/30.jpg)
Dependency Injection
Injecting the service
![Page 31: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/31.jpg)
Modularity����������� ������������������ across����������� ������������������ the����������� ������������������
wire
![Page 32: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/32.jpg)
RESTful����������� ������������������ Web����������� ������������������ Service
JS����������� ������������������ Module JS����������� ������������������ Module JS����������� ������������������ Module
RESTful����������� ������������������ Web����������� ������������������ Service
A typical web application
![Page 33: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/33.jpg)
admin.general.ui
admin.login.rest
admin.orders.ui admin.products.ui
admin.security
customers.rest
frontend.filters
frontend.ui
orders.rest products.rest
orders.mongo customers.mongo products.mongo
search.rest
search.indexer
![Page 34: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/34.jpg)
Demobit.ly/modularjs
![Page 35: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/35.jpg)
What about...
‘The����������� ������������������ Future’
![Page 36: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/36.jpg)
Future-proof modules
Modularizing����������� ������������������ was����������� ������������������ the����������� ������������������ hard����������� ������������������ part.����������� ������������������ Tech����������� ������������������ is����������� ������������������ secondary
‘Transpile’����������� ������������������ ES����������� ������������������ 6����������� ������������������ modules
Google����������� ������������������ Traceur����������� ������������������ or����������� ������������������ Square’s����������� ������������������ ES����������� ������������������ transpiler
But:����������� ������������������ spec����������� ������������������ far����������� ������������������ from����������� ������������������ final
Library����������� ������������������ author:����������� ������������������ UMD
Otherwise,����������� ������������������ just����������� ������������������ pick����������� ������������������ one
![Page 37: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/37.jpg)
Future:����������� ������������������ JavaScript services
https://github.com/osgi/design/raw/master/rfps/rfp-0159-JavaScript-Microservices.pdf
OSGi RFP 159
JavaScript����������� ������������������ Micro����������� ������������������ Services
![Page 38: Modular JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5550f4eab4c9057b478b456b/html5/thumbnails/38.jpg)
Questions?
@sander_mak
@pbakker bit.ly/modularjs