Download - Modular JavaScript in an OSGi World - S Mak
![Page 1: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/1.jpg)
Modular JavaScript in����������� ������������������ an����������� ������������������ OSGi����������� ������������������ world
@sander_mak����������� ������������������
![Page 2: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/2.jpg)
JavaScript?
JS����������� ������������������ Module����������� ������������������ Systems
JavaScript����������� ������������������ &����������� ������������������ OSGi
Future����������� ������������������ of����������� ������������������ modular����������� ������������������ webapps
![Page 3: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/3.jpg)
Why����������� ������������������ Modularity?
![Page 4: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/4.jpg)
Modularity is
key����������� ������������������ ����������� ������������������ !
to maintainable code
![Page 5: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/5.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 6: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/6.jpg)
Text
And����������� ������������������ it����������� ������������������ might����������� ������������������ eve
n����������� ������������������
be����������� ������������������ worse....
![Page 7: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/7.jpg)
JavaScript Modularity 101
Globals
![Page 8: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/8.jpg)
Anonymous functions
Anonymous����������� ������������������ functions����������� ������������������ prevent����������� ������������������ putting����������� ������������������ something����������� ������������������ in����������� ������������������ global����������� ������������������ scope
IIFE:����������� ������������������ ’Immediately����������� ������������������ invoked����������� ������������������ function����������� ������������������ expression’����������� ������������������
![Page 9: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/9.jpg)
Poor man’s ‘Modules’
myhelper����������� ������������������ is����������� ������������������ ’private’
![Page 10: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/10.jpg)
Comparing����������� ������������������ JavaScript����������� ������������������
Module����������� ������������������ Systems
![Page 11: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/11.jpg)
Module options
Asynchronous����������� ������������������ Module����������� ������������������ Definition
CommonJS
ES6����������� ������������������ Harmony����������� ������������������ Modules
![Page 12: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/12.jpg)
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
-
![Page 13: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/13.jpg)
Module comparison
!AMD
![Page 14: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/14.jpg)
Module comparison
!AMD
![Page 15: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/15.jpg)
Module comparison
!AMD
![Page 16: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/16.jpg)
Module comparison
!AMD
![Page 17: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/17.jpg)
Module comparison
!AMD
!CommonJS
![Page 18: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/18.jpg)
Module comparison
!AMD
!CommonJS
![Page 19: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/19.jpg)
Module comparison
!AMD
!CommonJS
![Page 20: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/20.jpg)
Module comparison
!AMD
!CommonJS
!ES6����������� ������������������ Harmony
![Page 21: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/21.jpg)
Module comparison
!AMD
!CommonJS
!ES6����������� ������������������ Harmony
![Page 22: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/22.jpg)
Module comparison
!AMD
!CommonJS
!ES6����������� ������������������ Harmony
![Page 23: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/23.jpg)
Module comparison
!AMD
!CommonJS
!ES6����������� ������������������ Harmony
![Page 24: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/24.jpg)
!Universal����������� ������������������ Module����������� ������������������ Definition
Can’t we have it all?
![Page 25: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/25.jpg)
!Universal����������� ������������������ Module����������� ������������������ Definition
Can’t we have it all?
![Page 26: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/26.jpg)
NO!Pick����������� ������������������ one.����������� ������������������ And����������� ������������������ stick����������� ������������������ with����������� ������������������ it.����������� ������������������ !
(unless����������� ������������������ you����������� ������������������ are����������� ������������������ a����������� ������������������ library����������� ������������������ author)
![Page 27: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/27.jpg)
Why RequireJS?
Robust����������� ������������������ AMD����������� ������������������ implementation����������� ������������������
Browser-based,����������� ������������������ no����������� ������������������ build����������� ������������������ step����������� ������������������
Lazy-loading����������� ������������������
Optimizer:����������� ������������������ r.js����������� ������������������
Backwards����������� ������������������ compatible����������� ������������������ with����������� ������������������ globals����������� ������������������
jQuery����������� ������������������ supports����������� ������������������ AMD
![Page 28: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/28.jpg)
RequireJS: end-to-end
!index.html
![Page 29: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/29.jpg)
RequireJS: end-to-end
!index.html
!main.js
![Page 30: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/30.jpg)
RequireJS: end-to-end
!index.html
!main.js
That.����������� ������������������ Is.����������� ������������������ All.
!mymodule-1.2.js
![Page 31: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/31.jpg)
From legacy to modules
Globals
!RequireJS����������� ������������������ Shims
![Page 32: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/32.jpg)
From legacy to modules
Globals
!RequireJS����������� ������������������ Shims
![Page 33: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/33.jpg)
From legacy to modules
Globals
!RequireJS����������� ������������������ Shims
![Page 34: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/34.jpg)
Dependency injection
Dependency����������� ������������������ Injection!=����������� ������������������
Think����������� ������������������ import vs.����������� ������������������ new
Module����������� ������������������ loading
package����������� ������������������ deps
vs.����������� ������������������ OSGi����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ services
![Page 35: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/35.jpg)
Dependency injection
Dependency����������� ������������������ Injection!=����������� ������������������
Think����������� ������������������ import vs.����������� ������������������ new
Module����������� ������������������ loading
Option:
package����������� ������������������ deps
vs.����������� ������������������ OSGi����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ services
![Page 36: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/36.jpg)
Dependency injection
All����������� ������������������ Angular����������� ������������������ modules����������� ������������������ must����������� ������������������ be����������� ������������������ known����������� ������������������ at����������� ������������������ ‘startup’
![Page 37: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/37.jpg)
Dependency injection
AMD����������� ������������������ Module
All����������� ������������������ Angular����������� ������������������ modules����������� ������������������ must����������� ������������������ be����������� ������������������ known����������� ������������������ at����������� ������������������ ‘startup’
![Page 38: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/38.jpg)
Dependency injection
Angular����������� ������������������ Module
All����������� ������������������ Angular����������� ������������������ modules����������� ������������������ must����������� ������������������ be����������� ������������������ known����������� ������������������ at����������� ������������������ ‘startup’
![Page 39: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/39.jpg)
Dependency injection
![Page 40: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/40.jpg)
Dependency injection
Angular����������� ������������������ module����������� ������������������ dependency
![Page 41: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/41.jpg)
Dependency injection
Injecting����������� ������������������ the����������� ������������������ service
![Page 42: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/42.jpg)
JavaScript����������� ������������������ &����������� ������������������ OSGi����������� ������������������
Modularity����������� ������������������ across����������� ������������������ the����������� ������������������ wire
![Page 43: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/43.jpg)
JS����������� ������������������ Module JS����������� ������������������ Module JS����������� ������������������ Module
OSGi services
Apache Felix
OSGi servicesOSGi services
OSGi bundles
REST WebSockets
The high-level idea(l)
![Page 44: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/44.jpg)
OpenSocial����������� ������������������ gadget����������� ������������������ container����������� ������������������
RequireJS����������� ������������������ +����������� ������������������ Angular����������� ������������������ module����������� ������������������ per����������� ������������������ bundle����������� ������������������
RequireJS����������� ������������������ +����������� ������������������ One����������� ������������������ ‘modular’����������� ������������������ frontend����������� ������������������ bundle
We����������� ������������������ evolved����������� ������������������ through����������� ������������������ 3����������� ������������������ implementations
The abstract idea(l)
![Page 45: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/45.jpg)
OpenSocial����������� ������������������ gadgets
Dashboard
Gadget����������� ������������������ 1����������� ������������������ (iFrame)
Gadget����������� ������������������ 2����������� ������������������ (iFrame)
![Page 46: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/46.jpg)
OpenSocial����������� ������������������ gadgets
Amdatu����������� ������������������ OpenSocial����������� ������������������ (Apache����������� ������������������ Shindig)����������� ������������������
OSGi����������� ������������������ bundle����������� ������������������
Serve����������� ������������������ static����������� ������������������ resources����������� ������������������
Register����������� ������������������ Gadget����������� ������������������ as����������� ������������������ service����������� ������������������ (whiteboard)����������� ������������������
Standardized����������� ������������������ XML����������� ������������������ descriptor����������� ������������������
Initial����������� ������������������ HTML����������� ������������������ views����������� ������������������
Preferences
Gadget:
![Page 47: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/47.jpg)
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����������� ������������������
!
!
![Page 48: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/48.jpg)
Angular����������� ������������������ module����������� ������������������ per����������� ������������������ bundle
Towards����������� ������������������ a����������� ������������������ true����������� ������������������ Single����������� ������������������ Page����������� ������������������ Web-application
No����������� ������������������ more����������� ������������������ iFrames...
![Page 49: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/49.jpg)
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
![Page 50: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/50.jpg)
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
![Page 51: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/51.jpg)
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
![Page 52: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/52.jpg)
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����������� ������������������
!
!
![Page 53: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/53.jpg)
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)
![Page 54: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/54.jpg)
Angular����������� ������������������ module����������� ������������������ per����������� ������������������ bundle
Integrated����������� ������������������ single-page����������� ������������������ app����������� ������������������ experience����������� ������������������
Modular/maintainable����������� ������������������ JavaScript����������� ������������������
Use����������� ������������������ modern����������� ������������������ frontend����������� ������������������ toolchains����������� ������������������
!
!
!
!
!
!
!
Lose����������� ������������������ dynamic����������� ������������������ addition����������� ������������������ of����������� ������������������ frontend����������� ������������������ modules����������� ������������������
!
!
![Page 55: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/55.jpg)
What about...
‘The����������� ������������������ Future’
![Page 56: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/56.jpg)
Future:����������� ������������������ ES6 modules
‘Transpile’����������� ������������������ ES����������� ������������������ 6����������� ������������������ modules����������� ������������������
Google����������� ������������������ Traceur����������� ������������������ or����������� ������������������ Square’s����������� ������������������ ES����������� ������������������ transpiler����������� ������������������
But:����������� ������������������ spec����������� ������������������ far����������� ������������������ from����������� ������������������ final����������� ������������������
![Page 57: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/57.jpg)
Future:����������� ������������������ JavaScript services
https://github.com/osgi/design/raw/master/rfps/rfp-0159-JavaScript-Microservices.pdf!
OSGi RFP 159
JavaScript����������� ������������������ Micro����������� ������������������ Services
![Page 58: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/58.jpg)
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
![Page 59: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/59.jpg)
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����������� ������������������
![Page 60: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/60.jpg)
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����������� ������������������
![Page 61: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/61.jpg)
Future:����������� ������������������ Web Components
Google����������� ������������������ Polymer
X-Tags
Poly-fills����������� ������������������
Pre-defined����������� ������������������ custom����������� ������������������
elements����������� ������������������
!
AngularJS����������� ������������������ and����������� ������������������
Ember.js����������� ������������������ will����������� ������������������ migrate����������� ������������������
to����������� ������������������ web����������� ������������������ components
![Page 62: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/62.jpg)
Future:����������� ������������������ Web Components
color-picker.html
![Page 63: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/63.jpg)
Future:����������� ������������������ Web Components
color-picker.html
HTML����������� ������������������ import
![Page 64: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/64.jpg)
Future:����������� ������������������ Web Components
color-picker.html
Custom����������� ������������������ element����������� ������������������ definition
![Page 65: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/65.jpg)
Future:����������� ������������������ Web Components
color-picker.html
2-way����������� ������������������ ����������� ������������������ databinding
![Page 66: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/66.jpg)
Future:����������� ������������������ Web Components
color-picker.html
Registration/initialization����������� ������������������ (Polymer����������� ������������������ specific,����������� ������������������ ultimately����������� ������������������ calls����������� ������������������ into����������� ������������������
Web����������� ������������������ Components����������� ������������������ standard����������� ������������������ API)
![Page 67: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/67.jpg)
Future:����������� ������������������ Web Components
color-picker.html
index.html
![Page 68: Modular JavaScript in an OSGi World - S Mak](https://reader034.vdocuments.us/reader034/viewer/2022052523/5558bdc0d8b42aa52a8b5062/html5/thumbnails/68.jpg)
Questions?
@sander_mak bit.ly/modularjs