modular javascript

59
Modular JavaScript @sander_mak @pbakker

Upload: nljug

Post on 13-Jan-2015

555 views

Category:

Technology


6 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Modular JavaScript

Modular JavaScript

@sander_mak@pbakker

Page 2: Modular JavaScript

Modularity����������� ������������������  intro

JavaScript����������� ������������������  pitfalls

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

Java����������� ������������������  +����������� ������������������  JavaScript����������� ������������������  modularity

Page 3: Modular JavaScript

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

Page 4: Modular JavaScript

Modularity is

key����������� ������������������  

to maintainable code

Page 5: Modular JavaScript

Modularity 101

Remember����������� ������������������  Java?

Low����������� ������������������  CouplingHigh����������� ������������������  Cohesion

Page 6: Modular JavaScript

Modularity in Java

Bundle A

+ package org.myapi

- package org.myapi.impl- package org.util

Bundle B

+ package org.other.api

Bundle C

+ package org.other.impl

Imports

Imports

Page 7: Modular JavaScript

Modularity in Java

The����������� ������������������  only����������� ������������������  modularity����������� ������������������  solution����������� ������������������  for����������� ������������������  Java����������� ������������������  today

OSGi

Page 8: Modular JavaScript

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 9: Modular JavaScript

Text

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

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

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

Page 10: Modular JavaScript

JavaScript Modularity 101

Globals

Page 11: Modular JavaScript

Anonymous functions

Anonymous����������� ������������������  functions����������� ������������������  prevent����������� ������������������  putting����������� ������������������  something����������� ������������������  in����������� ������������������  global����������� ������������������  scope

This����������� ������������������  method����������� ������������������  executes,����������� ������������������  but����������� ������������������  is����������� ������������������  not����������� ������������������  visible����������� ������������������  in����������� ������������������  global����������� ������������������  scope

Page 12: Modular JavaScript

Namespacing: a common approach

This only makes things slightly better...

We still force myLibrary into global scope!

staticnames

Page 13: Modular JavaScript

Namespacing: a common approach

This only makes things slightly better...

We still force myLibrary into global scope!

staticnames

Page 14: Modular JavaScript

Leaking visibility

Do����������� ������������������  not����������� ������������������  make����������� ������������������  private����������� ������������������  methods����������� ������������������  public!

myhelper����������� ������������������  is����������� ������������������  now����������� ������������������  public

public

Page 15: Modular JavaScript

Leaking visibility

Do����������� ������������������  not����������� ������������������  make����������� ������������������  private����������� ������������������  methods����������� ������������������  public!

myhelper����������� ������������������  is����������� ������������������  now����������� ������������������  public

public

Page 16: Modular JavaScript

Leaking visibility

Instead:

myhelper����������� ������������������  is����������� ������������������  now����������� ������������������  private

Page 17: Modular JavaScript

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

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

Page 18: Modular JavaScript

Module Wish list

Browser����������� ������������������  support

Stable

Available����������� ������������������  now

Specified

Manage dependencies

Page 19: Modular JavaScript

Module options

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

CommonJS

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

Page 20: Modular JavaScript

Module comparison

AMD

C.JS

ES6

Spec-by-GitHub

Spec-by-Wiki

Ecmastandard(in����������� ������������������  progress)

Spec? Impls?

RequireJSCurl.js...

BrowserifyNode.js...

Browserfirst

Serverfirst

Both

Environment

-Where can you play with ES6 modules?Traceur?

Page 21: Modular JavaScript

Module comparison

AMD

C.JS

ES6

Yes

No

Async? Format?

ObjectsFunctions...

Objects

Available?

Yes

Yes

NoObjectsFunctions...

Yes

Page 22: Modular JavaScript

Module comparison

AMD

Page 23: Modular JavaScript

Module comparison

AMD

Page 24: Modular JavaScript

Module comparison

AMD

Page 25: Modular JavaScript

Module comparison

AMD

Page 26: Modular JavaScript

Module comparison

AMD

CommonJS

Page 27: Modular JavaScript

Module comparison

AMD

CommonJS

Page 28: Modular JavaScript

Module comparison

AMD

CommonJS

Page 29: Modular JavaScript

Module comparison

AMD

CommonJS

ES6����������� ������������������  Harmony

Page 30: Modular JavaScript

Module comparison

AMD

CommonJS

ES6����������� ������������������  Harmony

Page 31: Modular JavaScript

Module comparison

AMD

CommonJS

ES6����������� ������������������  Harmony

Page 32: Modular JavaScript

Module comparison

AMD

CommonJS

ES6����������� ������������������  Harmony

Page 33: Modular JavaScript

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

Can’t we have it all?

Page 34: Modular JavaScript

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

Can’t we have it all?

Page 35: Modular JavaScript

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

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

Page 36: Modular JavaScript

Why RequireJS?

Robust����������� ������������������  AMD����������� ������������������  implementation

Browser-based,����������� ������������������  no����������� ������������������  build����������� ������������������  step

Lazy-loading

Optimizer:����������� ������������������  r.js

Backwards����������� ������������������  compatible����������� ������������������  with����������� ������������������  globals

jQuery����������� ������������������  supports����������� ������������������  AMD

Page 37: Modular JavaScript

RequireJS: end-to-end

index.html

Page 38: Modular JavaScript

RequireJS: end-to-end

index.html

main.js

Page 39: Modular JavaScript

RequireJS: end-to-end

index.html

main.js

That.����������� ������������������  Is.����������� ������������������  All.

mymodule-1.2.js

Page 40: Modular JavaScript

RequireJS: ‘advanced’

RequireRequire:Lazy����������� ������������������  loading

Page 41: Modular JavaScript

RequireJS: ‘advanced’

RequireRequire:Lazy����������� ������������������  loading

NamedModules

Page 42: Modular JavaScript

RequireJS: ‘advanced’

RequireRequire:Lazy����������� ������������������  loading

NamedModules

ConditionalDependencies

Page 43: Modular JavaScript

From legacy to modules

Globals

RequireJS����������� ������������������  Shims

Page 44: Modular JavaScript

From legacy to modules

Globals

RequireJS����������� ������������������  Shims

Page 45: Modular JavaScript

From legacy to modules

Globals

RequireJS����������� ������������������  Shims

Page 46: Modular JavaScript

Another example

AngularJS����������� ������������������  Services����������� ������������������  model

Dependency����������� ������������������  Injection

&

What����������� ������������������  about����������� ������������������  well����������� ������������������  defined����������� ������������������  interfaces?

What����������� ������������������  about����������� ������������������  dynamic����������� ������������������  services?

Why����������� ������������������  a����������� ������������������  second����������� ������������������  module����������� ������������������  definition?

Page 47: Modular JavaScript

Service definition

Page 48: Modular JavaScript

Service definition

AMD Module

Page 49: Modular JavaScript

Service definition

Angular Module

Page 50: Modular JavaScript

Dependency Injection

Page 51: Modular JavaScript

Dependency Injection

Angular module dependency

Page 52: Modular JavaScript

Dependency Injection

Injecting the service

Page 53: Modular JavaScript

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

wire

Page 54: Modular JavaScript

RESTful����������� ������������������  Web����������� ������������������  Service

JS����������� ������������������  Module JS����������� ������������������  Module JS����������� ������������������  Module

RESTful����������� ������������������  Web����������� ������������������  Service

A typical web application

Page 55: Modular JavaScript

Demobit.ly/modularjs

Page 56: Modular JavaScript

What about...

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

Page 57: Modular JavaScript

Future-proof modules

Modularizing����������� ������������������  was����������� ������������������  the����������� ������������������  hard����������� ������������������  part.����������� ������������������  Tech����������� ������������������  is����������� ������������������  secondary

‘Transpile’����������� ������������������  ES����������� ������������������  6����������� ������������������  modules

Google����������� ������������������  Traceur����������� ������������������  or����������� ������������������  Square’s����������� ������������������  ES����������� ������������������  transpiler

But:����������� ������������������  spec����������� ������������������  far����������� ������������������  from����������� ������������������  final

Library����������� ������������������  author:����������� ������������������  UMD

Otherwise,����������� ������������������  just����������� ������������������  pick����������� ������������������  one

Page 58: Modular JavaScript

Future:����������� ������������������  JavaScript services

https://github.com/osgi/design/raw/master/rfps/rfp-0159-JavaScript-Microservices.pdf

OSGi RFP 159

JavaScript����������� ������������������  Micro����������� ������������������  Services

Page 59: Modular JavaScript

Questions?

@sander_mak

@pbakker bit.ly/modularjs