38
Modular JavaScript @sander_mak @pbakker

Modular JavaScript

Embed Size (px)

DESCRIPTION

As presented at JavaOne 2013

Citation preview

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

Encapsulation

Maintainability

Flexible composition

Sanity

Page 6: Modular JavaScript

Modularity 101

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

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

Page 7: 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 8: Modular JavaScript

Modularity in Java

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

OSGi

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

Text

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

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

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

Page 11: Modular JavaScript

JavaScript Modularity 101

Globals

Page 12: Modular JavaScript

Anonymous functions

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

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

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

Instead:

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

Page 16: Modular JavaScript

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

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

Page 17: Modular JavaScript

Module Wish list

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

Stable

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

Specified

Manage dependencies

Page 18: Modular JavaScript

Module options

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

CommonJS

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

Page 19: 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 20: Modular JavaScript

Module comparison

AMD

C.JS

ES6

Yes

No

No

Async? Format?

ObjectsFunctions...

Objects

Available?

Yes

Yes

NoObjectsFunctions...

Page 21: Modular JavaScript

Module comparison

AMD

CommonJS

ES6����������� ������������������  HarmonyRevise with latest syntax

Page 22: Modular JavaScript

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

Can’t we have it all?

Page 23: Modular JavaScript

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

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

Page 24: Modular JavaScript

Why RequireJS?

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

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

Lazy-loading

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

Backwards����������� ������������������  compat.����������� ������������������  with����������� ������������������  globals

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

Page 25: Modular JavaScript

RequireJS: end-to-end

index.html

main.js

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

mymodule-1.2.js

Page 26: Modular JavaScript

RequireJS: ‘advanced’

RequireRequire

NamedModules

ConditionalDependencies

Page 27: Modular JavaScript

From legacy to modules

Globals

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

Page 28: Modular JavaScript

Another example

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

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

&

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

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

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

Page 29: Modular JavaScript

Service definition

Page 30: Modular JavaScript

Dependency Injection

Injecting the service

Page 31: Modular JavaScript

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

wire

Page 32: Modular JavaScript

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

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

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

A typical web application

Page 33: Modular JavaScript

admin.general.ui

admin.login.rest

admin.orders.ui admin.products.ui

admin.security

customers.rest

frontend.filters

frontend.ui

orders.rest products.rest

orders.mongo customers.mongo products.mongo

search.rest

search.indexer

Page 34: Modular JavaScript

Demobit.ly/modularjs

Page 35: Modular JavaScript

What about...

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

Page 36: 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 37: 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 38: Modular JavaScript

Questions?

@sander_mak

@pbakker bit.ly/modularjs