Upload
mfrancis
View
1.503
Download
1
Embed Size (px)
DESCRIPTION
What percentage of your web-app is written in JavaScript? Don’t be surprised if it’s more than half of your codebase. With the advent of HTML5 and single-page-applications driven by RESTful backends, the amount of JavaScript keeps growing. On the Java side, OSGi allows us to create modular, flexible applications. But how does this translate to the client-side? Isn’t a ‘single-page-application’ fundamentally at odds with modularity? In this session we take a look at the currently available tools for modularity in JavaScript. There are several ways you can combine existing JavaScript module systems with OSGi-based development on the backend. We discuss tradeoffs between these different approaches based on real-world experience with large JavaScript front-ends and OSGi back-ends. In particular an example combining OSGi, RequireJS and AngularJS is presented. Along with practical advice based on current technology, we also look forward at relevant upcoming standards such as Web Components. After this session you’ll have a solid grasp of modular JavaScript development in an OSGi world. Bio: After getting his master's degree in Software Technology, Sander became a software developer/architect. Currently he works as Senior Software Engineer for Luminis Technologies, specializing in modular Java and JavaScript development. Additionally, data analysis and machine learning are part of his ever growing list of interests. Sander loves sharing knowledge, for example through his blog (at http://branchandbound.net) and by writing for the Dutch Java Magazine. He speaks regularly at various international developer conferences (including JavaOne, J-Fall, JEEConf), sharing his passion for Java, alternative JVM languages and related technologies.
Citation preview
Modular JavaScript in����������� ������������������ an����������� ������������������ OSGi����������� ������������������ world
@sander_mak����������� ������������������
JavaScript?
JS����������� ������������������ Module����������� ������������������ Systems
JavaScript����������� ������������������ &����������� ������������������ OSGi
Future����������� ������������������ of����������� ������������������ modular����������� ������������������ webapps
Why����������� ������������������ Modularity?
Modularity is
key����������� ������������������ ����������� ������������������ !
to maintainable code
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
IIFE:����������� ������������������ ’Immediately����������� ������������������ invoked����������� ������������������ function����������� ������������������ expression’����������� ������������������
Poor man’s ‘Modules’
myhelper����������� ������������������ is����������� ������������������ ’private’
Comparing����������� ������������������ JavaScript����������� ������������������
Module����������� ������������������ Systems
Module options
Asynchronous����������� ������������������ Module����������� ������������������ Definition
CommonJS
ES6����������� ������������������ Harmony����������� ������������������ Modules
Module comparison
AMD
C.JS
ES6
Spec-by-����������� ������������������ GitHub
Spec-by-����������� ������������������ Wiki
Ecma����������� ������������������ standard����������� ������������������ (in����������� ������������������ progress)
Spec? Impls?
RequireJS����������� ������������������ Curl.js����������� ������������������ ...
Browserify����������� ������������������ Node.js����������� ������������������ ...
Browser����������� ������������������ first
Server����������� ������������������ first
Both
Environment
-
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
From legacy to modules
Globals
!RequireJS����������� ������������������ Shims
From legacy to modules
Globals
!RequireJS����������� ������������������ Shims
From legacy to modules
Globals
!RequireJS����������� ������������������ Shims
Dependency injection
Dependency����������� ������������������ Injection!=����������� ������������������
Think����������� ������������������ import vs.����������� ������������������ new
Module����������� ������������������ loading
package����������� ������������������ deps
vs.����������� ������������������ OSGi����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ services
Dependency injection
Dependency����������� ������������������ Injection!=����������� ������������������
Think����������� ������������������ import vs.����������� ������������������ new
Module����������� ������������������ loading
Option:
package����������� ������������������ deps
vs.����������� ������������������ OSGi����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ services
Dependency injection
All����������� ������������������ Angular����������� ������������������ modules����������� ������������������ must����������� ������������������ be����������� ������������������ known����������� ������������������ at����������� ������������������ ‘startup’
Dependency injection
AMD����������� ������������������ Module
All����������� ������������������ Angular����������� ������������������ modules����������� ������������������ must����������� ������������������ be����������� ������������������ known����������� ������������������ at����������� ������������������ ‘startup’
Dependency injection
Angular����������� ������������������ Module
All����������� ������������������ Angular����������� ������������������ modules����������� ������������������ must����������� ������������������ be����������� ������������������ known����������� ������������������ at����������� ������������������ ‘startup’
Dependency injection
Dependency injection
Angular����������� ������������������ module����������� ������������������ dependency
Dependency injection
Injecting����������� ������������������ the����������� ������������������ service
JavaScript����������� ������������������ &����������� ������������������ OSGi����������� ������������������
Modularity����������� ������������������ across����������� ������������������ the����������� ������������������ wire
JS����������� ������������������ Module JS����������� ������������������ Module JS����������� ������������������ Module
OSGi services
Apache Felix
OSGi servicesOSGi services
OSGi bundles
REST WebSockets
The high-level idea(l)
OpenSocial����������� ������������������ gadget����������� ������������������ container����������� ������������������
RequireJS����������� ������������������ +����������� ������������������ Angular����������� ������������������ module����������� ������������������ per����������� ������������������ bundle����������� ������������������
RequireJS����������� ������������������ +����������� ������������������ One����������� ������������������ ‘modular’����������� ������������������ frontend����������� ������������������ bundle
We����������� ������������������ evolved����������� ������������������ through����������� ������������������ 3����������� ������������������ implementations
The abstract idea(l)
OpenSocial����������� ������������������ gadgets
Dashboard
Gadget����������� ������������������ 1����������� ������������������ (iFrame)
Gadget����������� ������������������ 2����������� ������������������ (iFrame)
OpenSocial����������� ������������������ gadgets
Amdatu����������� ������������������ OpenSocial����������� ������������������ (Apache����������� ������������������ Shindig)����������� ������������������
OSGi����������� ������������������ bundle����������� ������������������
Serve����������� ������������������ static����������� ������������������ resources����������� ������������������
Register����������� ������������������ Gadget����������� ������������������ as����������� ������������������ service����������� ������������������ (whiteboard)����������� ������������������
Standardized����������� ������������������ XML����������� ������������������ descriptor����������� ������������������
Initial����������� ������������������ HTML����������� ������������������ views����������� ������������������
Preferences
Gadget:
OpenSocial����������� ������������������ gadgets
Every����������� ������������������ gadget����������� ������������������ isolated����������� ������������������ (CSS,����������� ������������������ JS����������� ������������������ freedom)����������� ������������������
Frontend����������� ������������������ dynamics����������� ������������������ match����������� ������������������ OSGi����������� ������������������
!
!
Every����������� ������������������ gadget����������� ������������������ isolated����������� ������������������ (CSS/JS����������� ������������������ sharing)
iFrames����������� ������������������ suck:����������� ������������������ sub-optimal����������� ������������������ user����������� ������������������ experience����������� ������������������
OpenSocial����������� ������������������ is����������� ������������������ dead����������� ������������������
!
!
Angular����������� ������������������ module����������� ������������������ per����������� ������������������ bundle
Towards����������� ������������������ a����������� ������������������ true����������� ������������������ Single����������� ������������������ Page����������� ������������������ Web-application
No����������� ������������������ more����������� ������������������ iFrames...
Angular����������� ������������������ module����������� ������������������ per����������� ������������������ bundle
/META-INF/MANIFEST.MF����������� ������������������ /static/js/module.js����������� ������������������ /static/js/..*.js����������� ������������������ /static/templates����������� ������������������ /static/css����������� ������������������
/META-INF/MANIFEST.MF����������� ������������������ /static/js/module.js����������� ������������������ /static/js/..*.js����������� ������������������ /static/templates����������� ������������������ /static/css����������� ������������������ !
Bundle 1
Bundle 2
/META-INF/MANIFEST.MF����������� ������������������ /static/js/angular.js����������� ������������������ /static/js/require.js����������� ������������������
Main frontend bundle
Angular����������� ������������������ module����������� ������������������ per����������� ������������������ bundle
/META-INF/MANIFEST.MF����������� ������������������ /static/js/module.js����������� ������������������ /static/js/..*.js����������� ������������������ /static/templates����������� ������������������ /static/css����������� ������������������
/META-INF/MANIFEST.MF����������� ������������������ /static/js/module.js����������� ������������������ /static/js/..*.js����������� ������������������ /static/templates����������� ������������������ /static/css����������� ������������������ !
Bundle 1
Bundle 2
/META-INF/MANIFEST.MF����������� ������������������ /static/js/angular.js����������� ������������������ /static/js/require.js����������� ������������������
Main frontend bundle
Angular����������� ������������������ module����������� ������������������ per����������� ������������������ bundle
/META-INF/MANIFEST.MF����������� ������������������ /static/js/module.js����������� ������������������ /static/js/..*.js����������� ������������������ /static/templates����������� ������������������ /static/css����������� ������������������
/META-INF/MANIFEST.MF����������� ������������������ /static/js/module.js����������� ������������������ /static/js/..*.js����������� ������������������ /static/templates����������� ������������������ /static/css����������� ������������������ !
Bundle 1
Bundle 2
/META-INF/MANIFEST.MF����������� ������������������ /static/js/angular.js����������� ������������������ /static/js/require.js����������� ������������������
Main frontend bundle
Generates
Angular����������� ������������������ module����������� ������������������ per����������� ������������������ bundle
Integrated����������� ������������������ single-page����������� ������������������ app����������� ������������������ experience����������� ������������������
Modular/maintainable����������� ������������������ JavaScript����������� ������������������
Separate����������� ������������������ bundles����������� ������������������ for����������� ������������������ frontend����������� ������������������ modules����������� ������������������
!!
!
Dynamically����������� ������������������ generated����������� ������������������ JS����������� ������������������ defies����������� ������������������ optimization����������� ������������������
Addition����������� ������������������ of����������� ������������������ frontend����������� ������������������ bundle����������� ������������������ requires����������� ������������������ reload����������� ������������������
Frontend����������� ������������������ bundles����������� ������������������ have����������� ������������������ ‘hidden’����������� ������������������ dependencies����������� ������������������
Concerns����������� ������������������ like����������� ������������������ (global)����������� ������������������ navigation����������� ������������������ tricky����������� ������������������
!
!
Single����������� ������������������ frontend����������� ������������������ bundle
Single����������� ������������������ Page����������� ������������������ Web-application:����������� ������������������ UI-based����������� ������������������ tooling����������� ������������������ all����������� ������������������ the����������� ������������������ way
/META-INF/MANIFEST.MF����������� ������������������ /static/module1/*.js����������� ������������������ /static/module1/css/*.css����������� ������������������ /static/module1/templates/*.html����������� ������������������ !/static/module2/*.js����������� ������������������ /static/module2/css/*.css����������� ������������������ /static/module2/templates/*.html����������� ������������������ !/static/main.js����������� ������������������
Frontend bundle
!/META-INF/MANIFEST.MF����������� ������������������ /static/main.js����������� ������������������ /static/main.css����������� ������������������
Gulp/ Grunt
!Bower
!etc.
Concatenation Minification generate AppCache manifest
CSS Auto prefixing
Processed Frontend bundle
CSS pre-processor (SASS/LESS)
Angular����������� ������������������ module����������� ������������������ per����������� ������������������ bundle
Integrated����������� ������������������ single-page����������� ������������������ app����������� ������������������ experience����������� ������������������
Modular/maintainable����������� ������������������ JavaScript����������� ������������������
Use����������� ������������������ modern����������� ������������������ frontend����������� ������������������ toolchains����������� ������������������
!
!
!
!
!
!
!
Lose����������� ������������������ dynamic����������� ������������������ addition����������� ������������������ of����������� ������������������ frontend����������� ������������������ modules����������� ������������������
!
!
What about...
‘The����������� ������������������ Future’
Future:����������� ������������������ ES6 modules
‘Transpile’����������� ������������������ ES����������� ������������������ 6����������� ������������������ modules����������� ������������������
Google����������� ������������������ Traceur����������� ������������������ or����������� ������������������ Square’s����������� ������������������ ES����������� ������������������ transpiler����������� ������������������
But:����������� ������������������ spec����������� ������������������ far����������� ������������������ from����������� ������������������ final����������� ������������������
Future:����������� ������������������ JavaScript services
https://github.com/osgi/design/raw/master/rfps/rfp-0159-JavaScript-Microservices.pdf!
OSGi RFP 159
JavaScript����������� ������������������ Micro����������� ������������������ Services
Future:����������� ������������������ JavaScript services
https://github.com/osgi/design/raw/master/rfps/rfp-0159-JavaScript-Microservices.pdf!
OSGi RFP 159
JavaScript����������� ������������������ Micro����������� ������������������ Services
->����������� ������������������ No����������� ������������������ activity����������� ������������������ since����������� ������������������ August����������� ������������������ 2013
Future:����������� ������������������ Web Components
W3C����������� ������������������ working����������� ������������������ draft
Custom����������� ������������������ elements����������� ������������������ -����������� ������������������ ‘the����������� ������������������ DOM����������� ������������������ is����������� ������������������ the����������� ������������������ framework’����������� ������������������
Templates/Shadow����������� ������������������ DOM����������� ������������������ -����������� ������������������ iFrameless����������� ������������������ encapsulation����������� ������������������
HTML����������� ������������������ imports����������� ������������������ -����������� ������������������ native����������� ������������������ #include����������� ������������������ for����������� ������������������ the����������� ������������������ web����������� ������������������
Native����������� ������������������ 2-way����������� ������������������ databinding����������� ������������������ -����������� ������������������ convenient����������� ������������������ &����������� ������������������ fast����������� ������������������
Future:����������� ������������������ Web Components
Not����������� ������������������ strictly����������� ������������������ about����������� ������������������ JS����������� ������������������ modularity:����������� ������������������ ����������� ������������������ supposed����������� ������������������ to����������� ������������������ piggyback����������� ������������������ on����������� ������������������ ES6����������� ������������������ modules
W3C����������� ������������������ working����������� ������������������ draft
Custom����������� ������������������ elements����������� ������������������ -����������� ������������������ ‘the����������� ������������������ DOM����������� ������������������ is����������� ������������������ the����������� ������������������ framework’����������� ������������������
Templates/Shadow����������� ������������������ DOM����������� ������������������ -����������� ������������������ iFrameless����������� ������������������ encapsulation����������� ������������������
HTML����������� ������������������ imports����������� ������������������ -����������� ������������������ native����������� ������������������ #include����������� ������������������ for����������� ������������������ the����������� ������������������ web����������� ������������������
Native����������� ������������������ 2-way����������� ������������������ databinding����������� ������������������ -����������� ������������������ convenient����������� ������������������ &����������� ������������������ fast����������� ������������������
Future:����������� ������������������ Web Components
Google����������� ������������������ Polymer
X-Tags
Poly-fills����������� ������������������
Pre-defined����������� ������������������ custom����������� ������������������
elements����������� ������������������
!
AngularJS����������� ������������������ and����������� ������������������
Ember.js����������� ������������������ will����������� ������������������ migrate����������� ������������������
to����������� ������������������ web����������� ������������������ components
Future:����������� ������������������ Web Components
color-picker.html
Future:����������� ������������������ Web Components
color-picker.html
HTML����������� ������������������ import
Future:����������� ������������������ Web Components
color-picker.html
Custom����������� ������������������ element����������� ������������������ definition
Future:����������� ������������������ Web Components
color-picker.html
2-way����������� ������������������ ����������� ������������������ databinding
Future:����������� ������������������ Web Components
color-picker.html
Registration/initialization����������� ������������������ (Polymer����������� ������������������ specific,����������� ������������������ ultimately����������� ������������������ calls����������� ������������������ into����������� ������������������
Web����������� ������������������ Components����������� ������������������ standard����������� ������������������ API)
Future:����������� ������������������ Web Components
color-picker.html
index.html
Questions?
@sander_mak bit.ly/modularjs