Agenda – Single Page Application (SPA) – What is Backbone?

View Github Repository Open presentation in a new window

derrickwilliams

See all presentation from derrickwilliams

Agenda – Single Page Application (SPA) – What is Backbone?

0 0

anglebrackets-slides

On Github derrickwilliams / anglebrackets-slides

Agenda

  • Single Page Application (SPA) w/ Backbone.js & .NET WebAPI
  • SPA - Ups and downs
  • JS testing w/ QUnit

Single Page Application (SPA)

  • Breaks conventional full web request-response workflow
  • Some concepts already present in current portal implementations
  • Most (if not all) view rendering is handled client-side
  • Server becomes processor of business data
  • Client -> server communication through XHR (jQuery.ajax)

Why SPA?

  • More desktop-like application experience
  • More responsive and interactive user experience
  • Better decoupling of front-end and back-end responsibilities

Why NOT SPA?

  • Shift in how we think about page rendering and server interaction
  • JS dependant (sorry, you have to learn javascript and learn it well!)
  • Implementation can lead to horrible application and code structure

What is Backbone?

  • Javascript MVC (sorta)
  • Models - data retrieval and persistence
  • Views - presentation logic
  • Templates - used by views for UI rendering
  • Collections - represent multiple models
  • Router - routes "request" to proper UI representation

Why Backbone?

  • Offers structure without much imposition
  • Can pick and choose where to use
  • Easier to fit into an existing applicaton
  • Light-weight, unopinionated nature allows for great modular composition of application
  • Lots of "plugins" out there (Marionette, Backbone.localStore, Backbone.couchdb, Validator)

Alernatives

  • Angular, Knockout, Ember,...
  • todomvc.com
  • More like frameworks (more opinionated and less flexible

Javascript Testing w/ Selenium

  • Requires the full application to be loaded into browser
  • Essentially testing everything
  • Flaky, unstable, slow
  • Limited browser support

Qunit

  • Allows for testing at component level
  • Built by jQuery team
  • Familiar feel to using jQuery
  • Easy setup and small learning curve
  • Tests can run in any browser that jQuery supports
  • Fast, especially if isolated from from talking to outside world (mocking network requests)

Qunit

  • Assertions
  • Modules
  • Fixtures
  • DOM & Event testing