2013 10-02-backbone-robots-aarhus
44
ROBOTS HATE YOUR SINGLE-PAGE APP, LONG LIVE THE ROBOT Niklas Lindgren SC5 Online Ltd
-
Upload
sc5io -
Category
Technology
-
view
802 -
download
0
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 of 2013 10-02-backbone-robots-aarhus
ROBOTS HATE YOUR SINGLE-PAGE APP, LONG LIVE THE ROBOT
Niklas LindgrenSC5 Online Ltd
Hello World!
My name is Niklas, I’m on the internet:
http://nikc.org/+
http://nikc.org/@
(@nikcorg)
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>
Robots?
https://developers.google.com/webmasters/ajax-crawling/
From Start to Finish
TodayThe beginning
Today
Rewind 9 Months
The beginning
Toying with the idea
Sharing is Caring
Choosing the Building Blocks
Backbone&
Underscore
LayoutManager&
jQuery / Cheerio
http://layoutmanager.org/
Q.js
https://github.com/kriskowal/q
Handlebars
A Quick Aside About Modules
UMDhttps://github.com/umdjs/umd
Cajonhttps://github.com/requirejs/cajon
RequireJShttp://requirejs.org/
Code Sharing Demohttps://github.com/nikcorg/commonjs-and-amd
#Include Drupal
Getting the Ball Rolling
Talk HTTP to Me
Wait...Wait...Wait...Wait...OK
Finding Our Way to the Data
This Might Actually Work
The beginning
Toying with the idea
First working prototype
Dear Button,
Y U NO CLICK?
Rebooting in the Browser
Rebooting in the Browser
var FooView = module.exports = Backbone.Layout.extend({
});
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
}
});
Rebooting in the Browser
var FooView = module.exports = Backbone.Layout.extend({
attributes: {
"data-reboot-as": "views/foo"
}
});
Rebooting in the Browser
var FooView = module.exports = Backbone.Layout.extend({
attributes: {
"data-reboot-as": "views/foo"
},
staticInit: function () {
// Hello World!
}
});
Academia Is Perfect For Laboratory Conditions
From Start to Finish
TodayThe beginning
Toying with the idea
First working prototype
Real work begins
Oh shit.
OH YEAH!
Oh shit.
OH YEAH!
Working With A Less Than Ideal API
Drupal Client
Working With A Less Than Ideal API
Drupal Client
Node.js
#Include Drupal+Magic
Drupal Client
The Joy of Existing in More Than One Environment
Self-Contained Views
No Hard Dependencies
There’s Always an Exception
Third Party Integrations
What if I Don't Want a Single-Page App?
What a Shiny Toy! Can I Play With It?
Questions?
Twitter: @nikcorgGoogle+: http://nikc.org/+
