Transcript Slides - BitNative

REAL WORLD SPA
A KNOCKOUT CASE STUDY
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 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/
UNOBTRUSIVE JAVASCRIPT:
HAVE WE COME FULL CIRCLE?
Inline
Unobtrusive
Databinding
STAY DRY BY MAPPING
http://jsfiddle.net/housecor/uAe3k
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
XP-More
Many options: http://bit.ly/16cXevo
WebAPI
KnockoutJS
Durandal
RequireJS
ORMLite
KendoUI
Knockout.Mapping
Knockout-Kendo
MSTest
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
Knockout mapping
Converts JSON into an observable Knockout
viewmodel
Integrates KendoUI with Knockout via custom
bindings.
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
Json2.js
JSON serialization
Toastr
Notifications
Durandal
RequireJS
Dialogs (though Durandal could handle this),
comboboxes
Serializing JS objects to JSON string in older
browsers that don’t have native support
Showing save confirmations. Can also be used to
show errors though not currently.
Convention based SPA framework for composing
Databinding views and viewmodels together via
views/viewmodels with Knockout. Handles routing, compose binding. Potentially useful for:
transitions, project structure, etc. Makes Knockout 1. Routing if we ever start loading separate pages
competitive with Google’s AngularJS
without a postback
2. Dialogs/notifications if we eliminate KendoUI.
3. Many other things. See docs.
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