spa architecture basics - colombo js meetup
TRANSCRIPT
![Page 1: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/1.jpg)
What Matters in SPA?Hasith Yaggahavita
![Page 2: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/2.jpg)
![Page 3: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/3.jpg)
![Page 4: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/4.jpg)
if you expect JavaScript doing any ‘real work’
Treat it as a ‘real language’
- Brandon Keepers
![Page 5: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/5.jpg)
Let’s just recap a bit of JavaScript Concepts!
![Page 6: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/6.jpg)
1
A) 201 B) 300
C) ReferenceError D) undefined
![Page 7: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/7.jpg)
2
A) Error B) 100
C) 30 D) Non of above
![Page 8: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/8.jpg)
B) ReferenceError
C) bar TypeError
D) Non of above
3
A) bar foo
![Page 9: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/9.jpg)
B) Error
C) My name is: null D) Non of above
$
A) My name is: Hasith
![Page 10: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/10.jpg)
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
![Page 11: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/11.jpg)
A bit of a history with…
NetscapeSunMicrosoftW3CECMA
![Page 12: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/12.jpg)
How about the ‘jQuery’ way?
![Page 13: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/13.jpg)
How about the ‘jQuery’ way?
![Page 14: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/14.jpg)
![Page 15: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/15.jpg)
User event
Read input
Server call
Display data
Nested server callData conversion
Nested callback
UI update
Server callback
![Page 16: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/16.jpg)
The DOM – an ugly ball of state
![Page 17: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/17.jpg)
We need a better way !!!
![Page 18: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/18.jpg)
Let’s learn some SPA principles!
![Page 19: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/19.jpg)
Principle #1 : Move state out of DOM
![Page 20: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/20.jpg)
Principle #1 : Move state out of DOM
KnockoutAngular
BackboneBatmanSpineSproutcore
ASP.NET WebformsGWT
![Page 21: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/21.jpg)
Principle #1 : Move state out of DOMPrinciple #2 : Know your responsibilities
![Page 22: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/22.jpg)
Principle #2 : Know your responsibilities
Structure
presentationbehavior
![Page 23: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/23.jpg)
Principle #2 : Know your responsibilities
view.htmllogic.js
style.css
![Page 24: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/24.jpg)
Principle #1 : Move state out of DOMPrinciple #2 : Know your responsibilitiesPrinciple #3 : Be self contained
![Page 25: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/25.jpg)
The secret to build large apps is never build large apps.
-Justin Meyer
![Page 26: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/26.jpg)
Principle #3: Be self contained
File dependencies
Com
mon
JS
AMD
ECM
AScr
ipt 6
![Page 27: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/27.jpg)
Principle #3: Be self contained
Testability?
![Page 28: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/28.jpg)
Principle #3: Be self contained
Object dependencies: Pass in dependent objects
![Page 29: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/29.jpg)
Principle #3: Be self contained
Package by featurePackage by layer
Be modular:
![Page 30: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/30.jpg)
Principle #1 : Move state out of DOMPrinciple #2 : Know your responsibilitiesPrinciple #3 : Be self containedPrinciple #4 : Use real power of ‘Web’
![Page 31: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/31.jpg)
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
![Page 32: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/32.jpg)
Principle #4: Use real power of ‘Web’
http://boilerplatejs.org/samples/productsuite#sales
![Page 33: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/33.jpg)
Principle #4: Use real power of ‘Web’ Component B
http://boilerplatejs.org/samples/productsuite#salesComponent A
![Page 34: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/34.jpg)
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)
![Page 35: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/35.jpg)
Principle #4: Use real power of ‘Web’ Component B
http://boilerplatejs.org/samples/productsuite#sales
cv
Component A
Listen to
RouteChange Route
/hr/2012
![Page 36: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/36.jpg)
Principle #1 : Move state out of DOMPrinciple #2 : Know your responsibilitiesPrinciple #3 : Be self containedPrinciple #4 : Know the power of ‘Web’
![Page 37: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/37.jpg)
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)
![Page 38: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/38.jpg)
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)?• ….
![Page 39: SPA Architecture Basics - Colombo JS meetup](https://reader037.vdocuments.us/reader037/viewer/2022110307/5562b0d9d8b42a6e4f8b54e8/html5/thumbnails/39.jpg)
Questions?