SPA Architecture Basics - Colombo JS meetup
Download as PPTX, PDF5 likes1,068 views
This document discusses principles of single-page applications (SPAs). It outlines four key principles: 1) Move state out of the DOM, 2) Know responsibilities of behavior, presentation, and structure, 3) Be self-contained modules, and 4) Use the real power of the web by treating URLs as identifiers and enabling communication between components. The document also discusses related concepts like JavaScript frameworks, testing, and optimizations that are important to consider for SPAs.
SPA Architecture Basics - Colombo JS meetup
- 1. What Matters in SPA? Hasith Yaggahavita
- 4. i f y o u e x p e c t J a v a Sc r i p t d o i n g a n y ‘r e a l w o r k ’ Tr e a t i t a s a ‘r e a l l a n g u a g e ’ - Br a n d o n Ke e
- 5. Let’s just recap a bit of JavaScript Concepts!
- 6. 1 A) 201 B) 300 C) ReferenceError D) undefined
- 7. 2 A) Error B) 100 C) 30 D) Non of above
- 8. 3 A) bar foo B) ReferenceError C) bar TypeError D) Non of above
- 9. $ A) My name is: Hasith B) Error C) My name is: null D) Non of above
- 10. 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
- 11. A bit of a history with… Netscape Sun Microsoft W3C ECMA
- 12. Ho w a b o u t t h e ‘j Q u e r y ’ w a y ?
- 13. Ho w a b o u t t h e ‘j Q u e r y ’ w a y ?
- 15. User event Read input Server callback Display data Server call Nested server call Data conversion Nested callback UI update
- 16. T h e DOM – a n u g l y b a l l o f s t a t e
- 17. We n e e d a b e t t e r w a y !!!
- 18. L e t ’s l e a r n s o m e SPA p r i n c i p l e s !
- 19. Principle #1 : Move state out of DOM
- 20. Principle #1 : Move state out of DOM Backbone Batman Spine Sproutcore ASP.NET Webforms GWT Knockout Angular
- 21. Principle #1 : Move state out of DOM Principle #2 : Know your responsibilities
- 22. Principle #2 : Know your responsibilities behavior presentation Structure
- 23. Principle #2 : Know your responsibilities logic.js style.css view.html
- 24. Principle #1 : Move state out of DOM Principle #2 : Know your responsibilities Principle #3 : Be self contained
- 25. T b i l h u s a e s e i l d ne v r g e c l e a r a r p e t t o r ge a p p s b u i l d p s . -J u s t i n M e y e r
- 26. Principle #3: Be self contained AMD ECMAScript 6 CommonJS Fi l e d e p e n d e n c i e s
- 27. Principle #3: Be self contained Te s t a b i l i t y ?
- 28. Principle #3: Be self contained Ob j e c t d e p e n d e n c i e s : Pass in dependent objects
- 29. Principle #3: Be self contained B e mo d u l a r : Package by layer Package by feature
- 30. Principle #1 : Move state out of DOM Principle #2 : Know your responsibilities Principle #3 : Be self contained Principle #4 : Use real power of ‘Web’
- 31. Principle #4: Use real power of ‘Web’ Ma a f o f f o n y t r e a t URL a s a n t e r t h o u g h t , i n s t e a d t h e p r i ma r y r e a s o n r t h e w e b 's s u c c e s s . h t t p ://e m b e r j s .c o m
- 32. Principle #4: Use real power of ‘Web’ http://boilerplatejs.org/samples/productsuite#sales
- 33. Principle #4: Use real power of ‘Web’ Component A http://boilerplatejs.org/samples/productsuite#sales Component B
- 34. Principle #4: Use real power of ‘Web’ Listen(callback) cv Component A Event Mediator Raise(data) Callback(data) http://boilerplatejs.org/samples/productsuite#sales Component B
- 35. Principle #4: Use real power of ‘Web’ cv Component A http://boilerplatejs.org/samples/productsuite#sales/hr/2012 Component B
- 36. Principle #1 : Move state out of DOM Principle #2 : Know your responsibilities Principle #3 : Be self contained Principle #4 : Know the power of ‘Web’
- 37. Avoid vendor locking ... Framework for Styling and Responsive Design (Bootstrap) Server communication (BreezeJS) Routing, Navigation and Page Activation (DurandalJS) JavaScript dependency management (RequireJS) ... Code Quality and Validation (JSLint) MV* for User Interface Components (KnockoutJS) Optimizations/Uglyfication (RequireJS) Rich set of UI widgets (KendoUI)
- 38. 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)? • ….
- 39. Questions?