SPA: Key Questions

673 views

Published on

Key questions that should be resolved when developing a single page web application.

Published in: Software, Technology

SPA: Key Questions

  1. 1. Single Page Web Application KEY QUESTIONS 1
  2. 2. 2 What are the key questions when developing an SPA? What are the key questions when developing an SPA?
  3. 3. What’s an SPA? 1. A page is not completely reloaded 2. HTML is generated by client side JS 3. Client side state is stored with JS objects 3 Web Page SPA Complexity Low High
  4. 4. .NET Web Evolution 3 GENERATION OF ASP.NET APPLICATIONS 4
  5. 5. .NET Web: Generation #1 ASP.NET Web Forms / 2002 – Now 5 Page Web Form Code Behind Life Cycle ClientServer No special JS structuring GET / POST
  6. 6. .NET Web: Generation #2 ASP.NET MVC / 2009 – Now 6 Page Controller ClientServer Primitive JS structuring GET / POST
  7. 7. .NET Web: Generation #3 ASP.NET Web API / 2012 – Now 7 Page REST API ClientServer Strong JS structuring Mobile App GET / POST / PUT / DELETE
  8. 8. The Key Questions 8
  9. 9. 1. Base JS “Bricks” 1.1. WHAT IS A MINIMAL STRUCTURAL UNIT? 1.2. HOW TO MANAGE DEPENDENCIES AMONG UNITS? 9
  10. 10. JS Module Pattern 10 Provides both private and public encapsulation for classes The Module Pattern (by Addy Osmani)
  11. 11. JS Module Example 11 ▪ Closure is used for private state ▪ “Public” object is returned ▪ Created by IIFE
  12. 12. JS Module Dependencies 12
  13. 13. JS Module Extending 13
  14. 14. Pseudo Class as a JS Module 14
  15. 15. Backbone collection as a JS Module 15
  16. 16. JS Module Standards: AMD 16 define(id?, dependencies?, factory) AMD Specification (on Git Hub) Writing Modular JavaScript With AMD, CommonJS & ES Harmony (by Addy Osmani)
  17. 17. JS Module Quality Criterion 17 How easily could a JS Module be covered by UNIT TESTS?
  18. 18. 2. Frameworks 2.1. WHAT IS A STACK OF BASE FRAMEWORKS? 18
  19. 19. Criteria to Frameworks Stack 1. Extending of base JS functions 2. DOM processing 3. HTML templates 4. AJAX / REST handling 5. MV* 6. Routing 7. JS Modules management 19
  20. 20. Top JS MV* Frameworks 20 Knockout.js Ember.js Angular.js Backbone.js
  21. 21. Sample of Frameworks Stack 21 Backbone.js Underscore.js jQuery Require.js
  22. 22. 3. Architecture 3.1. HOW TO STRUCTURE GUI? 3.2. HOW TO KEEP DATA? 3.3. HOW TO PUT THINGS TOGETHER? 22
  23. 23. Web Module 1. Works independently from other web modules 2. Works within the “sandbox” 3. Has limited knowledge regarding the whole application 4. Is managed by a web module manager 23 Scalable JavaScript Application Architecture (by Nicholas Zakas) Web Module = HTML + CSS + JS
  24. 24. Web Modules: Base Idea 24 Web Module 1 Web Module 2 Web Modules Manager  Manages a web module life cycle  Manages collaboration among modules Web Module Context  Everything a web module knows about the application  Manage user’s interaction  Don’t know about each other Web Module ↓ an independent part of GUI
  25. 25. Web Modules: Hierarchical Implementation 25 Root Web Module Web Module 1 Web Module 1-1 Web Module 1-2 Application Web Module 2 Web Module 2-1 Web Module 2-2
  26. 26. Parent & Child Web Modules 26 Parent Child Communication between parent and child Child'slife cycle management 1: Register(context, eventHandlers) 3: Invoke a child'smethod() 2: Unregister() 4: Raise an event()
  27. 27. Web Module: Quality Criterion 27 How much is a web module depended from the other web modules?
  28. 28. Data Aggregate 28 Customer Order Item REST API Web Module 1 Web Module 2
  29. 29. 29
  30. 30. Thank You! 30

×