spa architecture basics - colombo js meetup

What Matters in SPA?Hasith Yaggahavita

if you expect JavaScript doing any ‘real work’

Treat it as a ‘real language’

- Brandon Keepers

Let’s just recap a bit of JavaScript Concepts!

1

A) 201 B) 300

C) ReferenceError D) undefined

2

A) Error B) 100

C) 30 D) Non of above

B) ReferenceError

C) bar TypeError

D) Non of above

3

A) bar foo

B) Error

C) My name is: null D) Non of above

$

A) My name is: Hasith

What should you absolutely know?

• Behavior of variables (e.g. global, scoped)• Semicolon injection• Function scopes• Variable/function hoisting• Parameter passing• Operator behavior (e.g. === vs ==)• null, undefined, false, NaN, ReferenceError• Lamda nature• Closures and static scoping• Module Pattern• Prototypical Inheritance

A bit of a history with…

NetscapeSunMicrosoftW3CECMA

How about the ‘jQuery’ way?

How about the ‘jQuery’ way?

User event

Read input

Server call

Display data

Nested server callData conversion

Nested callback

UI update

Server callback

The DOM – an ugly ball of state

We need a better way !!!

Let’s learn some SPA principles!

Principle #1 : Move state out of DOM

Principle #1 : Move state out of DOM

KnockoutAngular

BackboneBatmanSpineSproutcore

ASP.NET WebformsGWT

Principle #1 : Move state out of DOMPrinciple #2 : Know your responsibilities

Principle #2 : Know your responsibilities

Structure

presentationbehavior

Principle #2 : Know your responsibilities

view.htmllogic.js

style.css

Principle #1 : Move state out of DOMPrinciple #2 : Know your responsibilitiesPrinciple #3 : Be self contained

The secret to build large apps is never build large apps.

-Justin Meyer

Principle #3: Be self contained

File dependencies

Com

mon

JS

AMD

ECM

AScr

ipt 6

Principle #3: Be self contained

Testability?

Principle #3: Be self contained

Object dependencies: Pass in dependent objects

Principle #3: Be self contained

Package by featurePackage by layer

Be modular:

Principle #1 : Move state out of DOMPrinciple #2 : Know your responsibilitiesPrinciple #3 : Be self containedPrinciple #4 : Use real power of ‘Web’

Principle #4: Use real power of ‘Web’

Many treat URL as an afterthought, instead of the primary reason for the web's success.

http://emberjs.com

Principle #4: Use real power of ‘Web’

http://boilerplatejs.org/samples/productsuite#sales

Principle #4: Use real power of ‘Web’ Component B

http://boilerplatejs.org/samples/productsuite#salesComponent A

Principle #4: Use real power of ‘Web’ Component B

http://boilerplatejs.org/samples/productsuite#sales

cv

Component AEvent M

ediator

Listen(callback)

Raise(data)

Callback(data)

Principle #4: Use real power of ‘Web’ Component B

http://boilerplatejs.org/samples/productsuite#sales

cv

Component A

Listen to

RouteChange Route

/hr/2012

Principle #1 : Move state out of DOMPrinciple #2 : Know your responsibilitiesPrinciple #3 : Be self containedPrinciple #4 : Know the power of ‘Web’

Avoid vendor locking

Routing, Navigation and Page Activation (DurandalJS)

JavaScript dependency management (RequireJS)

Framework for Styling and Responsive Design (Bootstrap)

MV* for User Interface Components (KnockoutJS)O

ptimizations/U

glyfication (RequireJS)

Rich set of UI widgets (KendoUI)

Server communication (BreezeJS)

. . . . . .

Code Quality and Validation (JSLint)

It doesn’t end there…

• JavaScript async programming style (callbacks, promises)• What’s the toolset I need to use (IDE, jsLint, debugger, REST tools…)?• How do I unit test my JavaScript code (CI, unit, integration)?• How can I implement cross cutting aspects like theming, i18n?• What about security of my JS frontend?• How can I do optimizations for better performance?• Use of an abstraction language (coffeescript, typescript, less)?• ….

Questions?