real world spa a knockout case study cory house | bitnative.com | @housecor |...
TRANSCRIPT
REAL WORLD SPAA K N O C K O U T C A S E S T U D Y
Cory House | bitnative.com | @housecor | speakerrate.com/talks/27181
HI, I’M CORY.
@housecor
What monthly payment would you
like?
JAVASCRIPT CONFIGURATION OBJECT PATTERN
CONFIG OBJECT PATTERN: A JUSTIFICATIONSeparation 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/
UNOBTRUSIVE JAVASCRIPT: HAVE WE COME FULL CIRCLE?
Inline Unobtrusive
Databinding
DATABINDING ADVANTAGES
Discoverability
Clarity
Less Code – Separation of tightly bound concerns without a strong interface abstracts rather than clarifies.
AND PICK A LANGUAGE?!
AND A TESTING FRAMEWORK…
NETWORK TRANSPORT
AJAX
Go 2-way:
WebSocket
AJAX Long-polling
Adobe® Flash® Socket
AJAX multipart streaming
Forever Iframe
JSONP Polling
Or punt:
SERVICE LAYER
WebAPI
UTILITY LIBRARIES
DATA
NOSQL?
CROSS BROWSER TESTING
Many options: http://bit.ly/16cXevo
XP-More
WebAPI
ORMLite
MSTest
KnockoutJS Durandal RequireJS
KendoUI Knockout.Mapping Knockout-Kendo
Toastr jQuery QUnit
1. Convention
2. Composition
<div data-bind=“compose: ‘viewmodels/vehicle’></div><!-- ko compose: ‘viewmodels/vehicle’ --><!-- /ko -->
3. Dependency Management
4. Routing
REQUIREJS
• Utilizes AMD pattern
• Dynamically load JS
• Inject dependencies
• Watch for circular dependencies
Tech Description Used for…jQuery (1.9 branch)
DOM manipulation library Hardly anything. Ajax calls.
Knockout Two-way binding, templating MVVM framework
Two way bindings, validation
Knockout-Kendo Custom Knockout binding library for KendoUI
Integrates KendoUI with Knockout via custom bindings.
Knockout mapping Converts JSON into an observable Knockout viewmodel
Saves time and keeps viewmodels lean. Simply say: ko.mapping.toJSON to convert all fields on a JS object into observables
KendoUI Web HTML5 UI component library Dialogs (though Durandal could handle this), comboboxes
Json2.js JSON serialization Serializing JS objects to JSON string in older browsers that don’t have native support
Toastr Notifications Showing save confirmations. Can also be used to show errors though not currently.
Durandal Convention based SPA framework for composing views/viewmodels with Knockout. Handles routing, transitions, project structure, etc. Makes Knockout competitive with Google’s AngularJS
Databinding views and viewmodels together via compose binding. Potentially useful for: 1. Routing if we ever start loading
separate pages without a postback2. Dialogs/notifications if we eliminate
KendoUI.3. Many other things. See docs.
RequireJS Dependency management – Bundled with Durandal
DOM WEIGHT
Traditional: Every element is rendered on the server and thus on the client.
Client-side: Elements are rendered real-time as needed.
KEY: CENTRALIZED AJAX CALLS
View
ViewModel
Service
AJAX service
WHY?
Responsive
Rich Interactivity
Separation of concerns
Efficient
Simple - Less abstraction Debugging No compile wait
Faster page load
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
SPA EXPERIENCE COMPLETE
Back to the real world.
Cory House
bitnative.com
@housecor
speakerrate.com/talks/27181