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


Top Related