Backbone.js

Part 1

Created by Dmytro Yarmak

Evolution of frontend

1. Static HTML

• many years ago
• JS is very rare

2. jQeury

3. MV*

• MVC
• MVP
• MVVV

Reading: JavaScript MV* Patterns

What is MVC?

• Architectural design pattern
• Designed by Trygve Reenskaug - Smalltalk-80 (1979)
• Described in depth in 1995's “Design Patterns: Elements of Reusable Object-Oriented Software” (The "GoF" book),

How MVC helps as?

• It improves application organization through a separation of concerns.
• It enforces the isolation of business data (Models) from user interfaces (Views), with a third component (Controllers) traditionally managing logic and user-input.

Models

• manage the data for an application
• ‘type’ of data you can model — like a User, Photo or Note
• notify its observers that a change has occurred

Views

• visual representation of models
• present a filtered view of models' current state
• building and maintaining a DOM element
• observes model changes to update itself accordingly

Controllers

• intermediary between models and views
• responsible for updating the model when the user manipulates the view
• Backbone.js doesn't actually have true controllers

When Do You Need A JavaScript MV* Framework?

• complex user interface
• avoid spaghetti code
• much of the heavy lifting for viewing or manipulating that data will be occurring in the browser
• app communicates only with an API or back-end data service

Single-page application

• no refresh
• long life-time
• Examples: GMail and Google Docs

Where does MV* framework may be overkill?

• server makes most of the heavy-lifting of Views/pages
• using a little JavaScript or jQuery to make things a little more interactive

The Challenge Of Choice

Too Many Options

TodoMVC

http://todomvc.com/

A Common Application For Learning And Comparison

THE END