View
2.535
Download
1
Category
Tags:
Preview:
DESCRIPTION
As presented at JavaOne 2013
Citation preview
Modular JavaScript
@sander_mak@pbakker
Modularity����������� ������������������ intro
JavaScript����������� ������������������ pitfalls
JS����������� ������������������ Module����������� ������������������ Systems
Java����������� ������������������ +����������� ������������������ JavaScript����������� ������������������ modularity
Why����������� ������������������ Modularity?
Modularity is
key����������� ������������������ to maintainable code
Modularity 101
Encapsulation
Maintainability
Flexible composition
Sanity
Modularity 101
Remember����������� ������������������ Java?
Low����������� ������������������ CouplingHigh����������� ������������������ Cohesion
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
Modularity in Java
The����������� ������������������ only����������� ������������������ modularity����������� ������������������ solution����������� ������������������ for����������� ������������������ Java����������� ������������������ today
OSGi
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
Text
And����������� ������������������ it����������� ������������������ might����������� ������������������ eve
n����������� ������������������
be����������� ������������������ worse....
JavaScript Modularity 101
Globals
Anonymous functions
Anonymous����������� ������������������ functions����������� ������������������ prevent����������� ������������������ putting����������� ������������������ something����������� ������������������ in����������� ������������������ global����������� ������������������ scope
This����������� ������������������ method����������� ������������������ executes,����������� ������������������ but����������� ������������������ is����������� ������������������ not����������� ������������������ visible����������� ������������������ in����������� ������������������ global����������� ������������������ scope
Namespacing: a common approach
This only makes things slightly better...
We still force myLibrary into global scope!
staticnames
Leaking visibility
Do����������� ������������������ not����������� ������������������ make����������� ������������������ private����������� ������������������ methods����������� ������������������ public!
myhelper����������� ������������������ is����������� ������������������ now����������� ������������������ public
public
Leaking visibility
Instead:
myhelper����������� ������������������ is����������� ������������������ now����������� ������������������ private
Comparing����������� ������������������ JavaScript����������� ������������������
Module����������� ������������������ Systems
Module Wish list
Browser����������� ������������������ support
Stable
Available����������� ������������������ now
Specified
Manage dependencies
Module options
Asynchronous����������� ������������������ Module����������� ������������������ Definition
CommonJS
ES6����������� ������������������ Harmony����������� ������������������ Modules
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?
Module comparison
AMD
C.JS
ES6
Yes
No
No
Async? Format?
ObjectsFunctions...
Objects
Available?
Yes
Yes
NoObjectsFunctions...
Module comparison
AMD
CommonJS
ES6����������� ������������������ HarmonyRevise with latest syntax
Universal����������� ������������������ Module����������� ������������������ Definition
Can’t we have it all?
NO!Pick����������� ������������������ one.And����������� ������������������ stick����������� ������������������ with����������� ������������������ it.
(unless����������� ������������������ you����������� ������������������ are����������� ������������������ a����������� ������������������ library����������� ������������������ author)
Why RequireJS?
Robust����������� ������������������ AMD����������� ������������������ implementation
Browser-based,����������� ������������������ no����������� ������������������ build����������� ������������������ step
Lazy-loading
Optimizer:����������� ������������������ r.js
Backwards����������� ������������������ compat.����������� ������������������ with����������� ������������������ globals
jQuery����������� ������������������ supports����������� ������������������ AMD
RequireJS: end-to-end
index.html
main.js
That.����������� ������������������ Is.����������� ������������������ All.
mymodule-1.2.js
RequireJS: ‘advanced’
RequireRequire
NamedModules
ConditionalDependencies
From legacy to modules
Globals
RequireJS����������� ������������������ Shims
Another example
AngularJS����������� ������������������ Services����������� ������������������ model
Dependency����������� ������������������ Injection
&
What����������� ������������������ about����������� ������������������ well����������� ������������������ defined����������� ������������������ interfaces?
What����������� ������������������ about����������� ������������������ dynamic����������� ������������������ services?
Why����������� ������������������ a����������� ������������������ second����������� ������������������ module����������� ������������������ definition?
Service definition
Dependency Injection
Injecting the service
Modularity����������� ������������������ across����������� ������������������ the����������� ������������������
wire
RESTful����������� ������������������ Web����������� ������������������ Service
JS����������� ������������������ Module JS����������� ������������������ Module JS����������� ������������������ Module
RESTful����������� ������������������ Web����������� ������������������ Service
A typical web application
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
Demobit.ly/modularjs
What about...
‘The����������� ������������������ Future’
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
Future:����������� ������������������ JavaScript services
https://github.com/osgi/design/raw/master/rfps/rfp-0159-JavaScript-Microservices.pdf
OSGi RFP 159
JavaScript����������� ������������������ Micro����������� ������������������ Services
Questions?
@sander_mak
@pbakker bit.ly/modularjs
Recommended