wordpress & backbone: the dawn of web apps

36
WordPress & BackBone.js The Dawn of Web Apps

Upload: jesper-bylund

Post on 13-Dec-2014

1.840 views

Category:

Software


0 download

DESCRIPTION

A presentation about how to use BackBone.js and Wordpress to create web apps or interactive widgets. Given at Wordcamp 2014 Norrköping

TRANSCRIPT

Page 1: Wordpress & Backbone: The Dawn of Web Apps

WordPress & BackBone.js

The Dawn of Web Apps

Page 2: Wordpress & Backbone: The Dawn of Web Apps

@JesperBylund User Experience Developer

Odd Alice

Page 3: Wordpress & Backbone: The Dawn of Web Apps

WordPress & BackBone.js

The Dawn of Web Apps

Page 4: Wordpress & Backbone: The Dawn of Web Apps

In the beginning there was static content

Page 5: Wordpress & Backbone: The Dawn of Web Apps

Suddenly, mobile emerged

Page 6: Wordpress & Backbone: The Dawn of Web Apps

Everything became function and really cool

form

Page 7: Wordpress & Backbone: The Dawn of Web Apps
Page 8: Wordpress & Backbone: The Dawn of Web Apps
Page 9: Wordpress & Backbone: The Dawn of Web Apps

JavaScript eats the world

Page 10: Wordpress & Backbone: The Dawn of Web Apps

WordPress + BackBone.js

Page 11: Wordpress & Backbone: The Dawn of Web Apps

BackBone.js

Page 12: Wordpress & Backbone: The Dawn of Web Apps

JavaScript framework for RESTful JSON APIs

Page 13: Wordpress & Backbone: The Dawn of Web Apps

Single Page Apps

Page 14: Wordpress & Backbone: The Dawn of Web Apps

Model +

View +

Router

Page 15: Wordpress & Backbone: The Dawn of Web Apps

Model +

View

Page 16: Wordpress & Backbone: The Dawn of Web Apps

Model: JSON object

Page 17: Wordpress & Backbone: The Dawn of Web Apps

View: functions and representations for the

model

Page 18: Wordpress & Backbone: The Dawn of Web Apps

WordPress (JSON API)

Page 19: Wordpress & Backbone: The Dawn of Web Apps

What can WordPress serve? Everything.

Page 20: Wordpress & Backbone: The Dawn of Web Apps

What can WordPress serve? Everything.

Page 21: Wordpress & Backbone: The Dawn of Web Apps

What can WordPress serve? Everything.

Page 22: Wordpress & Backbone: The Dawn of Web Apps

WP API delivers models to BackBone.js

Page 23: Wordpress & Backbone: The Dawn of Web Apps

BackBone.js renders templates from Models

Page 24: Wordpress & Backbone: The Dawn of Web Apps

WordPress templates as backwards compatibility?

Page 25: Wordpress & Backbone: The Dawn of Web Apps

LoL!Nothing works without

JS.

Page 26: Wordpress & Backbone: The Dawn of Web Apps

So how can we use it?

Page 27: Wordpress & Backbone: The Dawn of Web Apps

Demo Time

Page 28: Wordpress & Backbone: The Dawn of Web Apps

Collection (model)

Page 29: Wordpress & Backbone: The Dawn of Web Apps
Page 30: Wordpress & Backbone: The Dawn of Web Apps
Page 31: Wordpress & Backbone: The Dawn of Web Apps

View

Page 32: Wordpress & Backbone: The Dawn of Web Apps
Page 33: Wordpress & Backbone: The Dawn of Web Apps
Page 34: Wordpress & Backbone: The Dawn of Web Apps

But what can we build with this?

Page 35: Wordpress & Backbone: The Dawn of Web Apps

Anything WordPress couldn’t do

Page 36: Wordpress & Backbone: The Dawn of Web Apps

Questions? !

@jesperbylund