Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Single Page Applications in Drupal

1,043 views

Published on

It's no denying that rich Javascript applications (sometimes called One Page Applications) are a big thing, but what if you want to leverage Drupal on the backend, or have an existing site? Tools like Angular.JS and EmberJS are great when you have an API, but Drupal 7 doesn't really have an API layer. I'll explore the parts of a one page application and how to integrate it into either an existing or a new Drupal site, and the pitfalls that one must watch out for.

Sample code for the demos are available at https://github.com/dragonmantank/spa-drupal

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Single Page Applications in Drupal

  1. 1. Single Page Applictions in Drupal Chris Tankersley php[world] 2014
  2. 2. 2 Who Am I? ● A PHP Developer for 10 Years ● Drupal Dev for 4 years ● Lots of projects no one uses, and a few some do ● https://github.com/dragonmantank
  3. 3. 3 What is a Single Page Application? ● An application that loads in a single page
  4. 4. 4 What is a Single Page Application? 1)Loads all the necessary HTML, JS, and CSS needed in a single page load 2)Loads all the necessary HTML, JS, and CSS needed to bootstrap an application in a single page load
  5. 5. 5 Traditional Application Flow Browser Server User requests a page Server returns page 1)Server gets request 2)Server calls PHP 3)PHP builds the HTML User requests a page Server returns page 1)Server gets request 2)Server calls PHP 3)PHP builds the HTML
  6. 6. 6 This is heavy
  7. 7. 7 No, it's really heavy
  8. 8. 8 Single Page Application Flow Browser Server User requests a page Server returns page 1)Server gets request 2)Server returns base HTML Browser requests data Server returns page 1)Server gets request 2)Server calls PHP 3)PHP builds the JSON Browser requests data Server returns page 1)Server gets request 2)Server calls PHP 3)PHP builds the JSON Browser requests data Server returns page 1)Server gets request 2)Server calls PHP 3)PHP builds the JSON
  9. 9. 9 SPAs Are Great! ● Reduce server load ● More responsive ● Separates server and front-end ● Make the front end people do all the work
  10. 10. 10 SPA ALL THE THINGS!
  11. 11. 11
  12. 12. 12 It's not all great ● Users have to have JS enabled ● SEO SUUUUUUUUUUCKS ● This will probably break navigation ● This will probably break your analytics ● Your host may not support it
  13. 13. 13 Drupal 7 Doesn't Support SPAs
  14. 14. 14 Or Does It...?
  15. 15. 15 It Doesn't Out of the Box
  16. 16. 16 Why do you want a Single Page Application?
  17. 17. 17 Create an SPA If... ● You want a more desktop-app-like experience ● A lot of data coming and going ● You want/have a good API backend ● The interface lends itself to being a SPA
  18. 18. 18 Gmail Makes Sense http://mashable.com/2014/03/31/email-wrong/
  19. 19. 19 My Blog Doesn't
  20. 20. 20 Don't create an SPA if... ● You want to reduce page refreshes ● It sounds cool
  21. 21. 21 Only create a SPA if it makes sense
  22. 22. 22 Parts of a Single Page Application
  23. 23. 23 The knee bone is connected to ... ● Controllers ● Chunks and Templates ● Routing ● Data ● Data Transport
  24. 24. 24 Controllers http://en.wikipedia.org/wiki/Game_controller
  25. 25. 25 The Logic of our Application
  26. 26. 26 Chunks and Templates
  27. 27. 27 Routing
  28. 28. 28 Data
  29. 29. 29 Data Transport ● AJAX ● AJAJ ● AJAH
  30. 30. 30 Sample SPA Application DEMO TIME!
  31. 31. 31 Picking a Javascript Framework
  32. 32. 32 Backbone
  33. 33. 33 EmberJS
  34. 34. 34 AngularJS
  35. 35. 35 Getting Drupal 7 to work with Single Page Applications
  36. 36. 36 The Services Module
  37. 37. 37 What does it do? „A standardized solution of integrating external applications with Drupal. Service callbacks may be used with multiple interfaces like REST, XMLRPC, JSON, JSON-RPC, SOAP, AMF, etc. This allows a Drupal site to provide web services via multiple interfaces while using the same callback code.“
  38. 38. 38 Services does a lot of heavy lifting for you
  39. 39. 39 DEMO TIME!
  40. 40. 40 Getting it into your Drupal Site
  41. 41. 41 Use an .html file ● Really easy to do ● Doesn't impact your existing site
  42. 42. 42 Add it to a template file ● Start small
  43. 43. 43 Just make a small module ● Gives you more control
  44. 44. 44 Questions?
  45. 45. 45 Thanks! ● https://joind.in/11865 ● @dragonmantank ● chris@ctankersley.com

×