modular javascript in an osgi world - s mak
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.TRANSCRIPT
![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