Put a little

Backbone in

your

WordPress

httptunedinnetwcto2014

Backbone is Awesome

Includes Underscorejs also awesome

WordPress makes Backbone easier

Outline

Backbone is Awesome

Philosophically Backbone is an

attempt to discover the minimal set

of data-structuring (models and

collections) and user interface (views

and URLs) primitives that are

generally useful when building web

applications with JavaScript

Prototypes Models Collections Views

Plus Events Routes History

Getting and Saving Data

Bootstrapping

AJAXAJAJ

JSON REST API

Backbone Basics

Highly interactive pages - front end or admin

Single page application with more than one state

Helps keep your code maintainable

Gets your truth out of the DOM

Really simple well documented easy to understand

Modular - use what you need

Bundled with WordPress

Why use Backbone

httpbackbonejsorgexamples

Rdio Hulu Gawker Foursquare Disqus Khan Academy Basecamp Stripe AirBnB Pandora Code School CloudApp Trello and on

Backbone in WordPress corehellip

Some Examples

Backbone is Awesome

Philosophically Backbone is an

attempt to discover the minimal set

of data-structuring (models and

collections) and user interface (views

and URLs) primitives that are

generally useful when building web

applications with JavaScript

Prototypes Models Collections Views

Plus Events Routes History

Getting and Saving Data

Bootstrapping

AJAXAJAJ

JSON REST API

Backbone Basics

Highly interactive pages - front end or admin

Single page application with more than one state

Helps keep your code maintainable

Gets your truth out of the DOM

Really simple well documented easy to understand

Modular - use what you need

Bundled with WordPress

Why use Backbone

httpbackbonejsorgexamples

Rdio Hulu Gawker Foursquare Disqus Khan Academy Basecamp Stripe AirBnB Pandora Code School CloudApp Trello and on

Backbone in WordPress corehellip

Some Examples

Prototypes Models Collections Views

Plus Events Routes History

Getting and Saving Data

Bootstrapping

AJAXAJAJ

JSON REST API

Backbone Basics

Highly interactive pages - front end or admin

Single page application with more than one state

Helps keep your code maintainable

Gets your truth out of the DOM

Really simple well documented easy to understand

Modular - use what you need

Bundled with WordPress

Why use Backbone

httpbackbonejsorgexamples

Rdio Hulu Gawker Foursquare Disqus Khan Academy Basecamp Stripe AirBnB Pandora Code School CloudApp Trello and on

Backbone in WordPress corehellip

Some Examples

Highly interactive pages - front end or admin

Single page application with more than one state

Helps keep your code maintainable

Gets your truth out of the DOM

Really simple well documented easy to understand

Modular - use what you need

Bundled with WordPress

Why use Backbone

httpbackbonejsorgexamples

Rdio Hulu Gawker Foursquare Disqus Khan Academy Basecamp Stripe AirBnB Pandora Code School CloudApp Trello and on

Backbone in WordPress corehellip

Some Examples

httpbackbonejsorgexamples

Rdio Hulu Gawker Foursquare Disqus Khan Academy Basecamp Stripe AirBnB Pandora Code School CloudApp Trello and on

Backbone in WordPress corehellip

Some Examples

Backbone in WordPress

Core

media

revisions

themes

what next

Collections _map _where _pluck _filter

Functions _memoize _throttle _debounce _once

_delay _defer

Utility _pick _extend _defaults

httpunderscorejsorg

Underscore is Awesome

Collections _map _where _pluck _filter

Functions _memoize _throttle _debounce _once

_delay _defer

Utility _pick _extend _defaults

httpunderscorejsorg

Underscore is Awesome

Underscore Examples

Underscore Examples

WordPress and Backbone

WordPress JSON REST API

wp_localize_script

wp_ajax_(action)

wp_createverify_nonce

wp_remote_get

getset_transient

wp_send_json_successerror

wptemplate wpBackboneviewsubview

Coding Backbone is fun

Coding Backbone is fun

annotated source codebackbonejsorgdocsbackbonehtml

simple and extendable - meant

to be flexible

clean structure templates code

data binding

Underscore Examples

WordPress and Backbone

WordPress JSON REST API

wp_localize_script

wp_ajax_(action)

wp_createverify_nonce

wp_remote_get

getset_transient

wp_send_json_successerror

wptemplate wpBackboneviewsubview

Coding Backbone is fun

Coding Backbone is fun

annotated source codebackbonejsorgdocsbackbonehtml

simple and extendable - meant

to be flexible

clean structure templates code

data binding

WordPress and Backbone

WordPress JSON REST API

wp_localize_script

wp_ajax_(action)

wp_createverify_nonce

wp_remote_get

getset_transient

wp_send_json_successerror

wptemplate wpBackboneviewsubview

Coding Backbone is fun

Coding Backbone is fun

annotated source codebackbonejsorgdocsbackbonehtml

simple and extendable - meant

to be flexible

clean structure templates code

data binding

Coding Backbone is fun

Coding Backbone is fun

annotated source codebackbonejsorgdocsbackbonehtml

simple and extendable - meant

to be flexible

clean structure templates code

data binding

Coding Backbone is fun

annotated source codebackbonejsorgdocsbackbonehtml

simple and extendable - meant

to be flexible

clean structure templates code

data binding

Considerations

Accessibility

nojs

Internationalization

Building a Demo App

Backbone driven plugin to

display user directory

Grabs data by scraping

WordCamp attendee

page

Data stored in CPT

passed via JSON REST

API

httpsgithubcomadamsilversteinbackbone-directory

Mockup

Model Person

Collection PersonCollection

Views PersonDisplay PersonDetail Search Bar Grid

Router routes details=name search=search

Structure

Person Model

Person Collection

Views

Router

Fetch

PHP

wp-

jsonpostsfilter[posts_per_page]=80ampfilter[or

der]=ASCampfilter[offset]=0amptype=backbonedire

ctory

Fetch

Building a Demo App

Backbone driven plugin to

display user directory

Grabs data by scraping

WordCamp attendee

page

Data stored in CPT

passed via JSON REST

API

httpsgithubcomadamsilversteinbackbone-directory

Mockup

Model Person

Collection PersonCollection

Views PersonDisplay PersonDetail Search Bar Grid

Router routes details=name search=search

Structure

Person Model

Person Collection

Views

Router

Fetch

PHP

wp-

jsonpostsfilter[posts_per_page]=80ampfilter[or

der]=ASCampfilter[offset]=0amptype=backbonedire

ctory

Fetch

Mockup

Model Person

Collection PersonCollection

Views PersonDisplay PersonDetail Search Bar Grid

Router routes details=name search=search

Structure

Person Model

Person Collection

Views

Router

Fetch

PHP

wp-

jsonpostsfilter[posts_per_page]=80ampfilter[or

der]=ASCampfilter[offset]=0amptype=backbonedire

ctory

Fetch

Model Person

Collection PersonCollection

Views PersonDisplay PersonDetail Search Bar Grid

Router routes details=name search=search

Structure

Person Model

Person Collection

Views

Router

Fetch

PHP

wp-

jsonpostsfilter[posts_per_page]=80ampfilter[or

der]=ASCampfilter[offset]=0amptype=backbonedire

ctory

Fetch

Person Model

Person Collection

Views

Router

Fetch

PHP

wp-

jsonpostsfilter[posts_per_page]=80ampfilter[or

der]=ASCampfilter[offset]=0amptype=backbonedire

ctory

Fetch

Person Collection

Views

Router

Fetch

PHP

wp-

jsonpostsfilter[posts_per_page]=80ampfilter[or

der]=ASCampfilter[offset]=0amptype=backbonedire

ctory

Fetch

Views

Router

Fetch

PHP

wp-

jsonpostsfilter[posts_per_page]=80ampfilter[or

der]=ASCampfilter[offset]=0amptype=backbonedire

ctory

Fetch

Router

Fetch

PHP

wp-

jsonpostsfilter[posts_per_page]=80ampfilter[or

der]=ASCampfilter[offset]=0amptype=backbonedire

ctory

Fetch

Fetch

PHP

wp-

jsonpostsfilter[posts_per_page]=80ampfilter[or

der]=ASCampfilter[offset]=0amptype=backbonedire

ctory

Fetch

PHP

wp-

jsonpostsfilter[posts_per_page]=80ampfilter[or

der]=ASCampfilter[offset]=0amptype=backbonedire

ctory

Fetch

wp-

jsonpostsfilter[posts_per_page]=80ampfilter[or

der]=ASCampfilter[offset]=0amptype=backbonedire

ctory

Fetch

Templates - Person

Templates - Person Detail

Result

Start Using Backbone

Wireframes

Models Collections

Views templatesrendering

Data bootstrap data new data updates

Events

Routing History

Should You Use

Backbone

Backbone - httpbackbonejsorg

Underscore - httpunderscorejsorg

Code School Backbone course -

httpswwwcodeschoolcompathsjavascriptbackbo

ne-js

Developing Backbone Applications -

httpswwwcodeschoolcompathsjavascriptbackbo

ne-js

JSON REST API - httpswordpressorgpluginsjson-

rest-api

TLC Transients - githubcommarkjaquithWP-TLC-

Transients

wpBackboneViewSubview -

httpwordpresstv20141103mark-jaquith-

backbone-views-in-wordpress

WP JSON REST API - httpsgithubcomWP-

APIWP-API

Resources

Templates - Person Detail

Result

Start Using Backbone

Wireframes

Models Collections

Views templatesrendering

Data bootstrap data new data updates

Events

Routing History

Should You Use

Backbone

Backbone - httpbackbonejsorg

Underscore - httpunderscorejsorg

Code School Backbone course -

httpswwwcodeschoolcompathsjavascriptbackbo

ne-js

Developing Backbone Applications -

httpswwwcodeschoolcompathsjavascriptbackbo

ne-js

JSON REST API - httpswordpressorgpluginsjson-

rest-api

TLC Transients - githubcommarkjaquithWP-TLC-

Transients

wpBackboneViewSubview -

httpwordpresstv20141103mark-jaquith-

backbone-views-in-wordpress

WP JSON REST API - httpsgithubcomWP-

APIWP-API

Resources

Result

Start Using Backbone

Wireframes

Models Collections

Views templatesrendering

Data bootstrap data new data updates

Events

Routing History

Should You Use

Backbone

Backbone - httpbackbonejsorg

Underscore - httpunderscorejsorg

Code School Backbone course -

httpswwwcodeschoolcompathsjavascriptbackbo

ne-js

Developing Backbone Applications -

httpswwwcodeschoolcompathsjavascriptbackbo

ne-js

JSON REST API - httpswordpressorgpluginsjson-

rest-api

TLC Transients - githubcommarkjaquithWP-TLC-

Transients

wpBackboneViewSubview -

httpwordpresstv20141103mark-jaquith-

backbone-views-in-wordpress

WP JSON REST API - httpsgithubcomWP-

APIWP-API

Resources

Start Using Backbone

Wireframes

Models Collections

Views templatesrendering

Data bootstrap data new data updates

Events

Routing History

Should You Use

Backbone

Backbone - httpbackbonejsorg

Underscore - httpunderscorejsorg

Code School Backbone course -

httpswwwcodeschoolcompathsjavascriptbackbo

ne-js

Developing Backbone Applications -

httpswwwcodeschoolcompathsjavascriptbackbo

ne-js

JSON REST API - httpswordpressorgpluginsjson-

rest-api

TLC Transients - githubcommarkjaquithWP-TLC-

Transients

wpBackboneViewSubview -

httpwordpresstv20141103mark-jaquith-

backbone-views-in-wordpress

WP JSON REST API - httpsgithubcomWP-

APIWP-API

Resources

Should You Use

Backbone

Backbone - httpbackbonejsorg

Underscore - httpunderscorejsorg

Code School Backbone course -

httpswwwcodeschoolcompathsjavascriptbackbo

ne-js

Developing Backbone Applications -

httpswwwcodeschoolcompathsjavascriptbackbo

ne-js

JSON REST API - httpswordpressorgpluginsjson-

rest-api

TLC Transients - githubcommarkjaquithWP-TLC-

Transients

wpBackboneViewSubview -

httpwordpresstv20141103mark-jaquith-

backbone-views-in-wordpress

WP JSON REST API - httpsgithubcomWP-

APIWP-API

Resources

Backbone - httpbackbonejsorg

Underscore - httpunderscorejsorg

Code School Backbone course -

httpswwwcodeschoolcompathsjavascriptbackbo

ne-js

Developing Backbone Applications -

httpswwwcodeschoolcompathsjavascriptbackbo

ne-js

JSON REST API - httpswordpressorgpluginsjson-

rest-api

TLC Transients - githubcommarkjaquithWP-TLC-

Transients

wpBackboneViewSubview -

httpwordpresstv20141103mark-jaquith-

backbone-views-in-wordpress

WP JSON REST API - httpsgithubcomWP-

APIWP-API

Resources

Aboutbull Save assembly code onto cassettes

bull Good at JavaScript amp bug squashing

bull Love contributing to WordPress Core

bull Revisions Component Maintainer

bull Managing Engineer at 10up

httptunedinnetwcto2014