real world spa

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

Upload: luka

Post on 23-Feb-2016

14 views

Category:

Documents


0 download

DESCRIPTION

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 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: 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

Page 2: Real World SPA

HI, I’M CORY.

@housecor

Page 3: Real World SPA

What monthly payment would you

like?

Page 4: Real World SPA
Page 5: Real World SPA

JAVASCRIPT CONFIGURATION OBJECT PATTERN

Page 6: Real World SPA

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/

Page 8: Real World SPA

STAY DRY BY MAPPING

http://jsfiddle.net/housecor/uAe3k

Page 9: Real World SPA

DATABINDING ADVANTAGESDiscoverabilityClarityLess Code – Separation of tightly bound concerns without a strong interface abstracts rather than clarifies.

Page 10: Real World SPA
Page 11: Real World SPA

AND PICK A LANGUAGE?!

Page 12: Real World SPA

AND A TESTING FRAMEWORK…

Page 13: Real World SPA
Page 14: Real World SPA

NETWORK TRANSPORTAJAX

Go 2-way:WebSocketAJAX Long-pollingAdobe® Flash® SocketAJAX multipart streamingForever IframeJSONP Polling

Or punt:

Page 15: Real World SPA

SERVICE LAYER

WebAPI

Page 16: Real World SPA

UTILITY LIBRARIES

Page 17: Real World SPA

DATA

Page 18: Real World SPA

NOSQL?

Page 19: Real World SPA

CROSS BROWSER TESTING

Many options: http://bit.ly/16cXevo

XP-More

Page 20: Real World SPA

WebAPI

ORMLite

MSTest

KnockoutJS Durandal RequireJS

KendoUI Knockout.Mapping Knockout-Kendo

Toastr jQuery QUnit

Page 21: Real World SPA

1. Convention2. Composition

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

3. Dependency Management4. Routing

Page 22: Real World SPA

REQUIREJS• Utilizes AMD pattern• Dynamically load JS• Inject dependencies• Watch for circular dependencies

Page 23: Real World SPA

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

Page 24: Real World SPA

DOM WEIGHTTraditional: Every element is rendered on the server and thus on the

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

Page 25: Real World SPA

KEY: CENTRALIZED AJAX CALLSView

ViewModel

Service

AJAX service

Page 26: Real World SPA
Page 27: Real World SPA

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

Page 28: Real World SPA

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

Page 29: Real World SPA

SPA EXPERIENCE COMPLETEBack to the real world.

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