WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User...
Transcript of WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User...
![Page 1: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/1.jpg)
WordPress & BackBone.js
The Dawn of Web Apps
![Page 2: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/2.jpg)
@JesperBylund User Experience Developer
Odd Alice
![Page 3: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/3.jpg)
WordPress & BackBone.js
The Dawn of Web Apps
![Page 4: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/4.jpg)
In the beginning there was static content
![Page 5: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/5.jpg)
Suddenly, mobile emerged
![Page 6: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/6.jpg)
Everything became function and really cool
form
![Page 7: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/7.jpg)
![Page 8: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/8.jpg)
![Page 9: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/9.jpg)
JavaScript eats the world
![Page 10: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/10.jpg)
WordPress + BackBone.js
![Page 11: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/11.jpg)
BackBone.js
![Page 12: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/12.jpg)
JavaScript framework for RESTful JSON APIs
![Page 13: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/13.jpg)
Single Page Apps
![Page 14: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/14.jpg)
Model +
View +
Router
![Page 15: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/15.jpg)
Model +
View
![Page 16: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/16.jpg)
Model: JSON object
![Page 17: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/17.jpg)
View: functions and representations for the
model
![Page 18: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/18.jpg)
WordPress (JSON API)
![Page 19: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/19.jpg)
What can WordPress serve? Everything.
![Page 20: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/20.jpg)
What can WordPress serve? Everything.
![Page 21: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/21.jpg)
What can WordPress serve? Everything.
![Page 22: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/22.jpg)
WP API delivers models to BackBone.js
![Page 23: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/23.jpg)
BackBone.js renders templates from Models
![Page 24: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/24.jpg)
WordPress templates as backwards compatibility?
![Page 25: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/25.jpg)
LoL!Nothing works without
JS.
![Page 26: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/26.jpg)
So how can we use it?
![Page 27: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/27.jpg)
Demo Time
![Page 28: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/28.jpg)
Collection (model)
![Page 29: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/29.jpg)
![Page 30: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/30.jpg)
![Page 31: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/31.jpg)
View
![Page 32: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/32.jpg)
![Page 33: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/33.jpg)
![Page 34: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/34.jpg)
But what can we build with this?
![Page 35: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/35.jpg)
Anything WordPress couldn’t do
![Page 36: WordPress & BackBone · 2014-04-29 · BackBone.js The Dawn of Web Apps @JesperBylund User Experience Developer Odd Alice. WordPress & BackBone.js The Dawn of Web Apps. In the beginning](https://reader034.fdocuments.us/reader034/viewer/2022050400/5f7d8ca7313cc668057fd717/html5/thumbnails/36.jpg)
Questions? !
@jesperbylund