SPA Architecture Basics - Colombo JS meetup
-
Upload
hasith-yaggahavita -
Category
Technology
-
view
507 -
download
5
Transcript of 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?