1. REAL WORLD SPA A KNOCKOUT CASE STUDY Cory House | bitnative.com | @housecor | speakerrate.com/talks/27181

2. HI, I’M CORY. @housecor

3. What monthly payment would you like?

5. JAVASCRIPT CONFIGURATION OBJECT PATTERN

6. CONFIG OBJECT PATTERN: A JUSTIFICATION Separation of concerns Caching Minimizes string parsing overhead Code coloring Syntax checking Reusable Reduced payload Less abstraction More at bitnative.com/2013/10/06/javascript-configuration-object-pattern/bitnative.com/2013/10/06/javascript-configuration-object-pattern/

7. UNOBTRUSIVE JAVASCRIPT: HAVE WE COME FULL CIRCLE?

8. STAY DRY BY MAPPING http://jsfiddle.net/housecor/uAe3k

9. DATABINDING ADVANTAGES Discoverability Clarity Less Code – Separation of tightly bound concerns without a strong interface abstracts rather than clarifies.

11. AND PICK A LANGUAGE?!

12. AND A TESTING FRAMEWORK…

14. NETWORK TRANSPORT AJAX Go 2-way: WebSocket AJAX Long-polling Adobe® Flash® Socket AJAX multipart streaming Forever Iframe JSONP Polling Or punt:

15. SERVICE LAYER WebAPI

16. UTILITY LIBRARIES

17. DATA

18. NOSQL?

19. CROSS BROWSER TESTING Many options: http://bit.ly/16cXevo XP-More

21. 1.Convention 2.Composition 3.Dependency Management 4.Routing

22. REQUIREJS Utilizes AMD pattern Dynamically load JS Inject dependencies Watch for circular dependencies

24. DOM WEIGHT Traditional: Every element is rendered on the server and thus on the client. Client-side: Elements are rendered real-time as needed.

25. KEY: CENTRALIZED AJAX CALLS

27. WHY? Responsive Rich Interactivity Separation of concerns Efficient Simple - Less abstraction  Debugging  No compile wait Faster page load

28. WHY NOT? Proprietary business logic Low interactivity Slower page load Page is rarely called Complex – Too many choices! Debugging pain  Runtime errors  Cryptic  One mistake and nothing loads

29. SPA EXPERIENCE COMPLETE Back to the real world. Cory House bitnative.com @housecor speakerrate.com/talks/27181