2013 10-02-backbone-robots-aarhus
DESCRIPTION
SC5 and A-Lehdet just launched a responsive and adaptive website for Tuulilasi, the Finnish media authority for tech reviews of cars and other gadgets. This website relies heavily on search engine traffic, so we needed to support server side rendering. On the other hand we really wanted to use a single page app, but we didn't want to duplicate efforts. This talk shows why the ability to share code between the browser and the server is the best thing since sliced bread. We leveraged this possibility to develop a platform that allows us to run the same application in both environments, ultimately achieving a single page app that also caters to robots.TRANSCRIPT
![Page 1: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/1.jpg)
ROBOTS HATE YOUR SINGLE-PAGE APP, LONG LIVE THE ROBOT
Niklas LindgrenSC5 Online Ltd
![Page 2: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/2.jpg)
Hello World!
My name is Niklas, I’m on the internet:
http://nikc.org/+
http://nikc.org/@
(@nikcorg)
![Page 3: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/3.jpg)
A Single-Page App
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>My Awesome Single-Page App</title>
<script src=”/js/app.js”></script>
</head>
<body/>
</html>
![Page 4: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/4.jpg)
Robots?
https://developers.google.com/webmasters/ajax-crawling/
![Page 5: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/5.jpg)
From Start to Finish
TodayThe beginning
![Page 6: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/6.jpg)
Today
![Page 7: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/7.jpg)
Rewind 9 Months
The beginning
Toying with the idea
![Page 8: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/8.jpg)
Sharing is Caring
![Page 9: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/9.jpg)
Choosing the Building Blocks
![Page 10: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/10.jpg)
Backbone&
Underscore
![Page 11: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/11.jpg)
![Page 12: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/12.jpg)
LayoutManager&
jQuery / Cheerio
http://layoutmanager.org/
![Page 13: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/13.jpg)
Q.js
https://github.com/kriskowal/q
![Page 14: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/14.jpg)
Handlebars
![Page 15: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/15.jpg)
A Quick Aside About Modules
![Page 16: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/16.jpg)
UMDhttps://github.com/umdjs/umd
![Page 17: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/17.jpg)
Cajonhttps://github.com/requirejs/cajon
![Page 18: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/18.jpg)
RequireJShttp://requirejs.org/
![Page 19: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/19.jpg)
Code Sharing Demohttps://github.com/nikcorg/commonjs-and-amd
![Page 20: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/20.jpg)
#Include Drupal
![Page 21: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/21.jpg)
Getting the Ball Rolling
![Page 22: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/22.jpg)
Talk HTTP to Me
![Page 23: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/23.jpg)
Wait...Wait...Wait...Wait...OK
![Page 24: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/24.jpg)
Finding Our Way to the Data
![Page 25: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/25.jpg)
This Might Actually Work
The beginning
Toying with the idea
First working prototype
![Page 26: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/26.jpg)
Dear Button,
Y U NO CLICK?
![Page 27: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/27.jpg)
Rebooting in the Browser
![Page 28: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/28.jpg)
Rebooting in the Browser
var FooView = module.exports = Backbone.Layout.extend({
});
![Page 29: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/29.jpg)
Rebooting in the Browser
var FooView = module.exports = Backbone.Layout.extend({
events: {
"change select": "onClick",
"submit": "onSubmit"
},
onClick: function (ev) {
// Magic
},
onSubmit: function (ev) {
// More magic
}
});
![Page 30: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/30.jpg)
Rebooting in the Browser
var FooView = module.exports = Backbone.Layout.extend({
attributes: {
"data-reboot-as": "views/foo"
}
});
![Page 31: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/31.jpg)
Rebooting in the Browser
var FooView = module.exports = Backbone.Layout.extend({
attributes: {
"data-reboot-as": "views/foo"
},
staticInit: function () {
// Hello World!
}
});
![Page 32: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/32.jpg)
Academia Is Perfect For Laboratory Conditions
![Page 33: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/33.jpg)
From Start to Finish
TodayThe beginning
Toying with the idea
First working prototype
Real work begins
Oh shit.
OH YEAH!
Oh shit.
OH YEAH!
![Page 34: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/34.jpg)
Working With A Less Than Ideal API
Drupal Client
![Page 35: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/35.jpg)
Working With A Less Than Ideal API
Drupal Client
![Page 36: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/36.jpg)
Node.js
#Include Drupal+Magic
Drupal Client
![Page 37: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/37.jpg)
The Joy of Existing in More Than One Environment
![Page 38: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/38.jpg)
Self-Contained Views
![Page 39: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/39.jpg)
No Hard Dependencies
![Page 40: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/40.jpg)
There’s Always an Exception
![Page 41: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/41.jpg)
Third Party Integrations
![Page 42: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/42.jpg)
What if I Don't Want a Single-Page App?
![Page 43: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/43.jpg)
What a Shiny Toy! Can I Play With It?
![Page 44: 2013 10-02-backbone-robots-aarhus](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b514ae4a79597a458b4572/html5/thumbnails/44.jpg)
Questions?
Twitter: @nikcorgGoogle+: http://nikc.org/+