modular javascript in an osgi world - s mak

68
Modular JavaScript in an OSGi world @sander_mak

Upload: mfrancis

Post on 17-May-2015

1.503 views

Category:

Technology


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

Page 1: Modular JavaScript in an OSGi World - S Mak

Modular JavaScript in����������� ������������������  an����������� ������������������  OSGi����������� ������������������  world

@sander_mak����������� ������������������  

Page 2: Modular JavaScript in an OSGi World - S Mak

JavaScript?

JS����������� ������������������  Module����������� ������������������  Systems

JavaScript����������� ������������������  &����������� ������������������  OSGi

Future����������� ������������������  of����������� ������������������  modular����������� ������������������  webapps

Page 3: Modular JavaScript in an OSGi World - S Mak

Why����������� ������������������  Modularity?

Page 4: Modular JavaScript in an OSGi World - S Mak

Modularity is

key����������� ������������������  ����������� ������������������  !

to maintainable code

Page 5: Modular JavaScript in an OSGi World - S Mak

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

Text

And����������� ������������������  it����������� ������������������  might����������� ������������������  eve

n����������� ������������������  

be����������� ������������������  worse....

Page 7: Modular JavaScript in an OSGi World - S Mak

JavaScript Modularity 101

Globals

Page 8: Modular JavaScript in an OSGi World - S Mak

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

Poor man’s ‘Modules’

myhelper����������� ������������������  is����������� ������������������  ’private’

Page 10: Modular JavaScript in an OSGi World - S Mak

Comparing����������� ������������������  JavaScript����������� ������������������  

Module����������� ������������������  Systems

Page 11: Modular JavaScript in an OSGi World - S Mak

Module options

Asynchronous����������� ������������������  Module����������� ������������������  Definition

CommonJS

ES6����������� ������������������  Harmony����������� ������������������  Modules

Page 12: Modular JavaScript in an OSGi World - S Mak

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

Module comparison

!AMD

Page 14: Modular JavaScript in an OSGi World - S Mak

Module comparison

!AMD

Page 15: Modular JavaScript in an OSGi World - S Mak

Module comparison

!AMD

Page 16: Modular JavaScript in an OSGi World - S Mak

Module comparison

!AMD

Page 17: Modular JavaScript in an OSGi World - S Mak

Module comparison

!AMD

!CommonJS

Page 18: Modular JavaScript in an OSGi World - S Mak

Module comparison

!AMD

!CommonJS

Page 19: Modular JavaScript in an OSGi World - S Mak

Module comparison

!AMD

!CommonJS

Page 20: Modular JavaScript in an OSGi World - S Mak

Module comparison

!AMD

!CommonJS

!ES6����������� ������������������  Harmony

Page 21: Modular JavaScript in an OSGi World - S Mak

Module comparison

!AMD

!CommonJS

!ES6����������� ������������������  Harmony

Page 22: Modular JavaScript in an OSGi World - S Mak

Module comparison

!AMD

!CommonJS

!ES6����������� ������������������  Harmony

Page 23: Modular JavaScript in an OSGi World - S Mak

Module comparison

!AMD

!CommonJS

!ES6����������� ������������������  Harmony

Page 24: Modular JavaScript in an OSGi World - S Mak

!Universal����������� ������������������  Module����������� ������������������  Definition

Can’t we have it all?

Page 25: Modular JavaScript in an OSGi World - S Mak

!Universal����������� ������������������  Module����������� ������������������  Definition

Can’t we have it all?

Page 26: Modular JavaScript in an OSGi World - S Mak

NO!Pick����������� ������������������  one.����������� ������������������  And����������� ������������������  stick����������� ������������������  with����������� ������������������  it.����������� ������������������  !

(unless����������� ������������������  you����������� ������������������  are����������� ������������������  a����������� ������������������  library����������� ������������������  author)

Page 27: Modular JavaScript in an OSGi World - S Mak

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

RequireJS: end-to-end

!index.html

Page 29: Modular JavaScript in an OSGi World - S Mak

RequireJS: end-to-end

!index.html

!main.js

Page 30: Modular JavaScript in an OSGi World - S Mak

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

From legacy to modules

Globals

!RequireJS����������� ������������������  Shims

Page 32: Modular JavaScript in an OSGi World - S Mak

From legacy to modules

Globals

!RequireJS����������� ������������������  Shims

Page 33: Modular JavaScript in an OSGi World - S Mak

From legacy to modules

Globals

!RequireJS����������� ������������������  Shims

Page 34: Modular JavaScript in an OSGi World - S Mak

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

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

Dependency injection

All����������� ������������������  Angular����������� ������������������  modules����������� ������������������  must����������� ������������������  be����������� ������������������  known����������� ������������������  at����������� ������������������  ‘startup’

Page 37: Modular JavaScript in an OSGi World - S Mak

Dependency injection

AMD����������� ������������������  Module

All����������� ������������������  Angular����������� ������������������  modules����������� ������������������  must����������� ������������������  be����������� ������������������  known����������� ������������������  at����������� ������������������  ‘startup’

Page 38: Modular JavaScript in an OSGi World - S Mak

Dependency injection

Angular����������� ������������������  Module

All����������� ������������������  Angular����������� ������������������  modules����������� ������������������  must����������� ������������������  be����������� ������������������  known����������� ������������������  at����������� ������������������  ‘startup’

Page 39: Modular JavaScript in an OSGi World - S Mak

Dependency injection

Page 40: Modular JavaScript in an OSGi World - S Mak

Dependency injection

Angular����������� ������������������  module����������� ������������������  dependency

Page 41: Modular JavaScript in an OSGi World - S Mak

Dependency injection

Injecting����������� ������������������  the����������� ������������������  service

Page 42: Modular JavaScript in an OSGi World - S Mak

JavaScript����������� ������������������  &����������� ������������������  OSGi����������� ������������������  

Modularity����������� ������������������  across����������� ������������������  the����������� ������������������  wire

Page 43: Modular JavaScript in an OSGi World - S Mak

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

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

OpenSocial����������� ������������������  gadgets

Dashboard

Gadget����������� ������������������  1����������� ������������������  (iFrame)

Gadget����������� ������������������  2����������� ������������������  (iFrame)

Page 46: Modular JavaScript in an OSGi World - S Mak

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

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

Angular����������� ������������������  module����������� ������������������  per����������� ������������������  bundle

Towards����������� ������������������  a����������� ������������������  true����������� ������������������  Single����������� ������������������  Page����������� ������������������  Web-application

No����������� ������������������  more����������� ������������������  iFrames...

Page 49: Modular JavaScript in an OSGi World - S Mak

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

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

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

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

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

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

What about...

‘The����������� ������������������  Future’

Page 56: Modular JavaScript in an OSGi World - S Mak

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

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

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

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

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

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

Future:����������� ������������������  Web Components

color-picker.html

Page 63: Modular JavaScript in an OSGi World - S Mak

Future:����������� ������������������  Web Components

color-picker.html

HTML����������� ������������������  import

Page 64: Modular JavaScript in an OSGi World - S Mak

Future:����������� ������������������  Web Components

color-picker.html

Custom����������� ������������������  element����������� ������������������  definition

Page 65: Modular JavaScript in an OSGi World - S Mak

Future:����������� ������������������  Web Components

color-picker.html

2-way����������� ������������������  ����������� ������������������  databinding

Page 66: Modular JavaScript in an OSGi World - S Mak

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

Future:����������� ������������������  Web Components

color-picker.html

index.html

Page 68: Modular JavaScript in an OSGi World - S Mak

Questions?

@sander_mak bit.ly/modularjs