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

1. Single Page Applictions in Drupal
Chris Tankersley
php[world] 2014

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
What is a Single Page Application?
● An application that loads in a single page

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
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
This is heavy

7. 7
No, it's really heavy

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
SPAs Are Great!
● Reduce server load
● More responsive
● Separates server and front-end
● Make the front end people do all the work

10. 10
SPA ALL THE THINGS!

11. 11

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
Drupal 7 Doesn't Support SPAs

14. 14
Or Does It...?

15. 15
It Doesn't Out of the Box

16. 16
Why do you want a Single Page Application?

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
Gmail Makes Sense
http://mashable.com/2014/03/31/email-wrong/

19. 19
My Blog Doesn't

20. 20
Don't create an SPA if...
● You want to reduce page refreshes
● It sounds cool

21. 21
Only create a SPA if it makes sense

22. 22
Parts of a Single Page Application

23. 23
The knee bone is connected to ...
● Controllers
● Chunks and Templates
● Routing
● Data
● Data Transport

24. 24
Controllers
http://en.wikipedia.org/wiki/Game_controller

25. 25
The Logic of our Application

26. 26
Chunks and Templates

27. 27
Routing

28. 28
Data

29. 29
Data Transport
● AJAX
● AJAJ
● AJAH

30. 30
Sample SPA Application
DEMO TIME!

31. 31
Picking a Javascript Framework

32. 32
Backbone

33. 33
EmberJS

34. 34
AngularJS

35. 35
Getting Drupal 7 to work with Single Page
Applications

36. 36
The Services Module

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
Services does a lot of heavy lifting for you

39. 39
DEMO TIME!

40. 40
Getting it into your Drupal Site

41. 41
Use an .html file
● Really easy to do
● Doesn't impact your existing site

42. 42
Add it to a template file
● Start small

43. 43
Just make a small module
● Gives you more control

44. 44
Questions?

45. 45
Thanks!
● https://joind.in/11865
● @dragonmantank
● chris@ctankersley.com