Single Page Applictions in Drupal 
Chris Tankersley 
php[world] 2014
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...
3 
What is a Single Page Application? 
● An application that loads in a single page
4 
What is a Single Page Application? 
1)Loads all the necessary HTML, JS, and CSS 
needed in a single page load 
2)Loads ...
5 
Traditional Application Flow 
Browser Server 
User requests a page 
Server returns page 
1)Server gets request 
2)Serve...
6 
This is heavy
7 
No, it's really heavy
8 
Single Page Application Flow 
Browser Server 
User requests a page 
Server returns page 
1)Server gets request 
2)Serve...
9 
SPAs Are Great! 
● Reduce server load 
● More responsive 
● Separates server and front-end 
● Make the front end people...
10 
SPA ALL THE THINGS!
11
12 
It's not all great 
● Users have to have JS enabled 
● SEO SUUUUUUUUUUCKS 
● This will probably break navigation 
● Th...
13 
Drupal 7 Doesn't Support SPAs
14 
Or Does It...?
15 
It Doesn't Out of the Box
16 
Why do you want a Single Page Application?
17 
Create an SPA If... 
● You want a more desktop-app-like 
experience 
● A lot of data coming and going 
● You want/have...
18 
Gmail Makes Sense 
http://mashable.com/2014/03/31/email-wrong/
19 
My Blog Doesn't
20 
Don't create an SPA if... 
● You want to reduce page refreshes 
● It sounds cool
21 
Only create a SPA if it makes sense
22 
Parts of a Single Page Application
23 
The knee bone is connected to ... 
● Controllers 
● Chunks and Templates 
● Routing 
● Data 
● Data Transport
24 
Controllers 
http://en.wikipedia.org/wiki/Game_controller
25 
The Logic of our Application
26 
Chunks and Templates
27 
Routing
28 
Data
29 
Data Transport 
● AJAX 
● AJAJ 
● AJAH
30 
Sample SPA Application 
DEMO TIME!
31 
Picking a Javascript Framework
32 
Backbone
33 
EmberJS
34 
AngularJS
35 
Getting Drupal 7 to work with Single Page 
Applications
36 
The Services Module
37 
What does it do? 
„A standardized solution of integrating external 
applications with Drupal. Service callbacks may 
b...
38 
Services does a lot of heavy lifting for you
39 
DEMO TIME!
40 
Getting it into your Drupal Site
41 
Use an .html file 
● Really easy to do 
● Doesn't impact your existing site
42 
Add it to a template file 
● Start small
43 
Just make a small module 
● Gives you more control
44 
Questions?
45 
Thanks! 
● https://joind.in/11865 
● @dragonmantank 
● chris@ctankersley.com
Upcoming SlideShare
Loading in …5
×

Single Page Applications in Drupal

832 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
832
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×