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

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

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

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