Real World Single Page App - A Knockout Case Study
- 1. REAL WORLD SPA A Knockout Case Study Cory House @housecor .com
- 2. Learn From My Mistakes
- 3. Knowledge Survey Have you built a SPA? Know Ember, Angular, Backbone? Worked with Knockout, Durandal, Require, Fiddler, AJAX?
- 4. Here’s the Focus 1. App walk-through 2. 10 Lessons Learned 3. Does this even make sense?
- 5. What monthly payment would you like?
- 6. App Demo
- 7. New App: Two Goals 1. Cross Platform 2. Speed
- 9. Decisions are Hard. And we were wrong. A lot.
- 10. Sea of Decisions
- 11. but…
- 13. Light Unopinionated Library Rich Opinionated Framework
- 14. Light Unopinionated Library Rich Opinionated Framework
- 17. And Pick a Promise Library… Q RSVP Bluebird jQuery
- 18. And a Testing Framework…
- 20. Data
- 21. Network Transport AJAX Go 2-way: WebSocket AJAX Long-polling Adobe® Flash® Socket AJAX multipart streaming Forever Iframe JSONP Polling Or punt:
- 22. NoSQL?
- 24. 1999 2007 2013 Inline Unobtrusive Databinding
- 25. Unobtrusive JavaScript Movement: Dead? 1999 Inline 2007 Unobtrusive Knockout Angular 2013 Databinding
- 26. Databinding Advantages Discoverability Clarity Less Code
- 27. Consider the Maintenance Programmer Physically separating concerns that are logically intertwined without an explicit interface obfuscates rather than aids understanding.
- 28. Bundle & Minify Maybe not?
- 29. Heavy Load 93 JS 19 HTML 5 CSS 11 Images ---------------- 132 HTTP requests?!
- 30. The Full SPA 93 JS files 53 viewmodels 9 libraries 39 Popup windows 56 HTML files 94 RESTful endpoints
- 31. Why Minify and Bundle? 1. Reduce HTTP requests to reduce load on server 2. Speed page load 3. Obfuscate code
- 32. Why Not Minify and Bundle? 1. Prod no longer matches dev 2. Risk of introducing obscure bugs 3. Debugging in prod is more complex 4. Complexity (and thus risk) must be justified
- 33. How’s Performance? It Depends. Chrome IE8 Empty cache 6 13 Warm cache 3 3 Load first deal 1 2 Load second deal 1 2 Recalculate payment 1 2 To nearest second
- 34. We’re blind to errors! That’s malpractice.
- 36. ‘Twas Blind, but Now I See…
- 37. Fast in Chrome? Meaningless.
- 38. Old IE, The Laggard 10x slower 5x slower
- 39. 1000 rows… In memory? No problem. In a table? Uh oh.
- 40. DOM Weight Traditional Duplicate elements rendered Client-side Single template
- 41. Cross Browser Testing Many options: http://bit.ly/16cXevo XP-More
- 42. Unix or Windows Mindset? No right answer.
- 43. Our Tech Stack
- 44. WebAPI ORMLite MSTest KnockoutJS Durandal RequireJS KendoUI Knockout.Mapping & Knockout-Kendo Toastr jQuery Q.js QUnit Our Stack
- 45. Why Use Knockout with Durandal? 14% of our customers :_(
- 46. 1. Convention 2. Composition <div data-bind=“compose: ‘viewmodels/vehicle’></div> <!-- ko compose: ‘viewmodels/vehicle’ --><!-- /ko --> 3. Routing
- 47. A Torrid Love Affair…
- 51. WebAPI ORMLite MSTest KnockoutJS Durandal RequireJS KendoUI Knockout.Mapping & Knockout-Kendo Toastr jQuery Q.js QUnit Our Stack
- 52. If We Used AngularJS instead… WebAPI ORMLite MSTest AngularJS KendoUI
- 53. TypeScript or Test Or refactor at your own risk
- 54. My Awesome JS Refactoring Tool
- 55. And a Testing Framework…
- 56. What I’m testing: Service endpoints Business logic That the data displays (implied)
- 57. Architect Your JS like C#. DAL, BLL, Presentation…
- 58. Create a Client-Side “DAL” JSON.stringify Centralized service layer Single wrapper around $.ajax View ViewModel Service AJAX service
- 59. Keep Your Viewmodels Thin Create Business objects! Instantiate them in your viewmodels A 1,000+ line viewmodel is as smelly as a 1,000 class.
- 60. Where Should I Put the Business Logic? Avoid here. Prefer Here
- 61. Config Object Pattern Dynamism belongs in JSON
- 62. JavaScript Configuration Object Pattern JavaScript belongs in static .js files Not strings in C#, Java, etc. 1 language per file Inject dynamism via JSON from the server.
- 63. JavaScript Configuration Object Pattern
- 64. Config Object Pattern: A Justification Separation of concerns Caching Minimizes string parsing overhead Code coloring Syntax checking Reusable Reduced payload Less abstraction bitnative.com/2013/10/06/javascript-configuration-object-pattern/
- 65. Manage Dependencies Keep the global namespace clear.
- 66. RequireJS Utilizes AMD pattern Dynamically load JS Inject dependencies Watch for circular dependencies
- 67. Stay DRY Don’t repeat viewmodels on server & client
- 68. var firstName = ko.observable(user.firstName); var middleName = ko.observable(user.middleName); var lastName = ko.observable(user.lastName); … Instead: var user = ko.mapping.fromJS(user);
- 69. How Do I Stay DRY? Use KO mapping plugin Inject nullos via the Configuration Object Pattern Ko.utils.
- 70. Does This Even Make Sense?
- 71. 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
- 72. Why? Responsive Rich Interactivity Separation of concerns Efficient Simple - Less abstraction Debugging No compile wait Faster page load
- 74. SPA Experience Complete Cory House bitnative.com @housecor spkr8.com/t/35431