Intro to BackboneJS + Intermediate Javascript

Javascript applications and the
quest for Sanity

Facts about Javascript

Javascript was spawned and mutated (not born and nurtured) in the dank halls of
Netscape tor.

The Good Parts

Javascript is a flexible, loosley typed language.

It can be and has been bent in many different ways.
eg check out http://dailyjs.com/2012/11/26/js101-proto/

The Good Parts

Javascript gives us ways to expand and manipulate it.

Eg) Namespaces

Single Global Variables

Object Literals

Nested namespaces

The Good Parts

eg) Closures

Passing information back and forth

Returning Functions

Reference instead of Create
via http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

The Bad Part

Gets Messy Quickly

Why?

SCOPE and @#%*(@#$* Global Variables

Not always consistent

eg) Semicolon insertion

The Bad Part

Really easy to let it get away from you.

Structures and Exploration

http://forum.woodenboat.com/showthread.php?112363-
Voronoi-Diagrams-in-Nature

You want to make a web app?

Lets forget about the code for a minute.

What are you trying to solve?

Who is going to use your application?

Where does your tool live?

How much time do you have to make it?

What does it actually do?

Let’s build something now...?

Model View Controller

http://www.codinghorror.com/blog/2008/05/understanding-model-view-controller.html

Intro to Backbone

What is Backbone?

Backbone is an awesome frameworks for organizing javascript projects.

Set of tools that help you manage complexity.

Set of methods and formalized conventions that are a given in modern Javascript

Powerful way to approach building Single Page Applications

Backbone Building Blocks

Model

Collection

View

Router

Backbone Model

Represents your data and what it’s
supposed to do.

The idea of the thing, not the thing.

Holds defaults, holds checking
functions.

Backbone Collection

Collections hold groups of model data.

Says how these models are stored and
where they go when they die.

Orders the data and lets you get informa-
tion about it.

Backbone View

Views are how the data and differ-
ent parts of your application are
represented.

How do you render out your ToDo,
or your portfolio piece?

What are the different parts of
your app? (This is why we sketch,
by the way!)

Backbone Router

Routers help you manage states.

States are how your application know
what’s what.

Our different states:
Standing
Sitting
Lying down
Sleeping
Dreaming

How are those states represented?

Framework to form

Challenge is to translate the framework that Backbone gives us into the final applica-
tion.

Lets look at:

Data

Templates

Behaviour

Data and your app

Most modern applications require a database.

Localstorage is an HTML5 spec that lets you keep and persist info all within the client
side, i.e. the browser. But doesn’t let you share across.

Backbone lets you drop in localstorage first, and worry about the DB later.

eg) Meaning Clock started off as a localstorage app before I wrote the NodeJS server
with a MongoDB database.

This is why we make lists. They will help you decide what is best for you.

Backbone.sync

Backbone.sync is a method to synchronize your collections and models across
systems.

So, how do I make this work with my server and data?

var methodMap = {
’create’: ’POST’
, ’update’: ’PUT’
, ’delete’: ’DELETE’
, ’read’: ’GET’
};

Comes with a default way to manage data via the CRUD method.
Great for Node or Ruby on Rails.

Can be overridden if you want something custom.

Templates

Templates are how you separate HTML from JS.
Make sense of the different KNOWN (again, sketching) states of your app.

MyApp.js

Index.jade

Underscore.js

Framework for dealing with data.

Powers a lot of the BackboneJS tools, and is hugely worth learning.

Strong way to work with models and views.

That el thing

The el element refers to a DOM element in the backbone.view

Few different ways to deal with it.

$el is an easy to use jquery object

this.el is the standard Javascript DOM object.

I often do

this.$el.someJqueryFunction().anotherChainedjQueryFunction();

another option is this

$(this.el).html(this.template);

This reners the template defined in
el: $(‘#inviteToEnter’)
, template: _.template($(“#blankMeaning”).html())
to #inviteToEnter

Lets Look At Some Code
My Own App, The Meaning Clock A much better programmed app, todoMVC

Javascript

Things to remember

Backbone is a FRAMEWORK, not a solution per se.
It helps you organize your thinking and avoid getting overwhelmed if you use it right.

Think and Sketch first, code later.
It’s hugely valuable to do both, but drawing your app to scale on a piece of paper
and pretending to interact with it is a hell of a lot more time effective than coding the
wrong thing eight times.

Use documentation and resources
See the github repo for resources,
http://github.com/readywater/backbonejs_workshop

Andrew Lovett-Barron

@readywater

http://readywater.ca

http://relaystudio.com

http://github.com/readywater

Intro to BackboneJS + Intermediate Javascript

Recommended

More Related Content

What's hot (19)

Viewers also liked (6)

Similar to Intro to BackboneJS + Intermediate Javascript (20)

More from Andrew Lovett-Barron (6)

Recently uploaded (20)

Intro to BackboneJS + Intermediate Javascript