2013 10-02-backbone-robots-aarhus

972 views

Published on

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.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
972
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

2013 10-02-backbone-robots-aarhus

  1. 1. ROBOTS HATE YOUR SINGLE-PAGE APP, LONG LIVE THE ROBOT Niklas Lindgren SC5 Online Ltd
  2. 2. Hello World! My name is Niklas, I’m on the internet: http://nikc.org/+ http://nikc.org/@ (@nikcorg)
  3. 3. 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>
  4. 4. Robots? https://developers.google.com/webmasters/ajax-crawling/
  5. 5. From Start to Finish TodayThe beginning
  6. 6. Today
  7. 7. Rewind 9 Months The beginning Toying with the idea
  8. 8. Sharing is Caring
  9. 9. Choosing the Building Blocks
  10. 10. Backbone & Underscore
  11. 11. LayoutManager & jQuery / Cheerio http://layoutmanager.org/
  12. 12. Q.js https://github.com/kriskowal/q
  13. 13. Handlebars
  14. 14. A Quick Aside About Modules
  15. 15. UMD https://github.com/umdjs/umd
  16. 16. Cajon https://github.com/requirejs/cajon
  17. 17. RequireJS http://requirejs.org/
  18. 18. Code Sharing Demo https://github.com/nikcorg/commonjs-and-amd
  19. 19. #Include Drupal
  20. 20. Getting the Ball Rolling
  21. 21. Talk HTTP to Me
  22. 22. Wait...Wait...Wait...Wait...OK
  23. 23. Finding Our Way to the Data
  24. 24. This Might Actually Work The beginning Toying with the idea First working prototype
  25. 25. Dear Button, Y U NO CLICK?
  26. 26. Rebooting in the Browser
  27. 27. Rebooting in the Browser var FooView = module.exports = Backbone.Layout.extend({ });
  28. 28. 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 } });
  29. 29. Rebooting in the Browser var FooView = module.exports = Backbone.Layout.extend({ attributes: { "data-reboot-as": "views/foo" } });
  30. 30. Rebooting in the Browser var FooView = module.exports = Backbone.Layout.extend({ attributes: { "data-reboot-as": "views/foo" }, staticInit: function () { // Hello World! } });
  31. 31. Academia Is Perfect For Laboratory Conditions
  32. 32. From Start to Finish TodayThe beginning Toying with the idea First working prototype Real work begins Oh shit. OH YEAH! Oh shit. OH YEAH!
  33. 33. Working With A Less Than Ideal API Drupal Client
  34. 34. Working With A Less Than Ideal API Drupal Client
  35. 35. Node.js #Include Drupal+Magic Drupal Client
  36. 36. The Joy of Existing in More Than One Environment
  37. 37. Self-Contained Views
  38. 38. No Hard Dependencies
  39. 39. There’s Always an Exception
  40. 40. Third Party Integrations
  41. 41. What if I Don't Want a Single-Page App?
  42. 42. What a Shiny Toy! Can I Play With It?
  43. 43. Questions? Twitter: @nikcorg Google+: http://nikc.org/+

×