Modular JavaScript in an OSGi World - S Mak

Post on 17-May-2015

1.494 views 1 download

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 of Modular JavaScript in an OSGi World - S Mak

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