Date post: | 13-Jan-2015 |
Category: |
Technology |
Upload: | nljug |
View: | 546 times |
Download: | 6 times |
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
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
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
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
Async? Format?
ObjectsFunctions...
Objects
Available?
Yes
Yes
NoObjectsFunctions...
Yes
Module comparison
AMD
Module comparison
AMD
Module comparison
AMD
Module comparison
AMD
Module comparison
AMD
CommonJS
Module comparison
AMD
CommonJS
Module comparison
AMD
CommonJS
Module comparison
AMD
CommonJS
ES6����������� ������������������ Harmony
Module comparison
AMD
CommonJS
ES6����������� ������������������ Harmony
Module comparison
AMD
CommonJS
ES6����������� ������������������ Harmony
Module comparison
AMD
CommonJS
ES6����������� ������������������ Harmony
Universal����������� ������������������ Module����������� ������������������ Definition
Can’t we have it all?
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����������� ������������������ compatible����������� ������������������ with����������� ������������������ globals
jQuery����������� ������������������ supports����������� ������������������ AMD
RequireJS: end-to-end
index.html
RequireJS: end-to-end
index.html
main.js
RequireJS: end-to-end
index.html
main.js
That.����������� ������������������ Is.����������� ������������������ All.
mymodule-1.2.js
RequireJS: ‘advanced’
RequireRequire:Lazy����������� ������������������ loading
RequireJS: ‘advanced’
RequireRequire:Lazy����������� ������������������ loading
NamedModules
RequireJS: ‘advanced’
RequireRequire:Lazy����������� ������������������ loading
NamedModules
ConditionalDependencies
From legacy to modules
Globals
RequireJS����������� ������������������ Shims
From legacy to modules
Globals
RequireJS����������� ������������������ Shims
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
Service definition
AMD Module
Service definition
Angular Module
Dependency Injection
Dependency Injection
Angular module dependency
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
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