real world spa

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 overheadCode coloring Syntax checkingReusableReduced 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 ADVANTAGESDiscoverabilityClarityLess Code – Separation of tightly bound concerns without a strong interface abstracts rather than clarifies.

AND PICK A LANGUAGE?!

AND A TESTING FRAMEWORK…

NETWORK TRANSPORTAJAX

Go 2-way:WebSocketAJAX Long-pollingAdobe® Flash® SocketAJAX multipart streamingForever IframeJSONP 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. Convention2. Composition

<div data-bind=“compose: ‘viewmodels/vehicle’></div><!-- ko compose: ‘viewmodels/vehicle’ --><!-- /ko -->

3. Dependency Management4. 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 WEIGHTTraditional: Every element is rendered on the server and thus on the

client.Client-side: Elements are rendered real-time as needed.

KEY: CENTRALIZED AJAX CALLSView

ViewModel

Service

AJAX service

WHY?ResponsiveRich InteractivitySeparation of concernsEfficientSimple - Less abstraction Debugging No compile waitFaster page load

WHY NOT?Proprietary business logicLow interactivitySlower page loadPage is rarely calledComplex – Too many choices!Debugging pain Runtime errors Cryptic One mistake and nothing loads

SPA EXPERIENCE COMPLETEBack to the real world.

Cory House bitnative.com @housecorspeakerrate.com/talks/27181