Single Page Applications

In notebook:
FrontEndMasters BackboneJS
Created at:
2016-02-05
Updated:
2016-02-13
Tags:
JavaScript jQuery libraries pattern
Older libraries:
Dojo toolkit
google webtoolkit
prototype
scriptaculous 
that paved the way for single page applications

Underneath it's an object-oriented programming paradigm. To organise well your applications. 

Bookmarkable URLS. 

Fast user interactions - reason to write single page applications

Backbone seeks to remove state from the DOM.

Goes back to the previous jQuery example. (selector > click handler > ajax > display)
It's very entangled. There's no trace (state) of the data sent out, or that it came back. Information loss. jQuery is very DOM centric. So DOM is almost like the state.

If you want to architect a rich application it will collapse sooner or later.

MVC

Object oriented pattern. 
Quick overview of the MVC pattern, without going into the details

MODEL > updates > VIEW > sees > USER > uses > CONTROLLER > manipulates > MODEL

Server Side MVC

Model: Defines and manages the application's data structure. Has no knowledge of any user interface.
View: The user interface. Displays data to the user and captures interactions.
Controller: communicates between the view and model

View rendering is completely separate from the app's business logic

Frameworks like Ruby on Rails, Django

Client Side MVC

Move this paradigm to the browser slightly changes things
Model - Interfaces with a server to get data using AJAX
View - Displays Model data on the page
Controller - accepts user interactions, handles communication between model and the view

So on the browser it starts to resemble more the MVP (model view presenter) pattern:

MODEL <– requests data from model, passes input to model –> PRESENTER <– presents data to view, accepts user input from view –> VIEW <– user interaction

VIEW is the DOM. 

MVP applied to Backbone

COLLECTION, MODEL <– listens to Model, collection events, passes input to model & collection –> VIEW <– renders templates, listens to DOM events (click, drag) –> TEMPLATES, DOM

MVC, MVP, MV*, MVW

Backbone is flexible on all these patterns, you deal with all these with a common a language.
It gives you a toolset, encourages OOP but leaves a lot of the work up to you.

It's not opinionated. Has advantages (flexibility) and drawbacks (frustration, too many decisions).