The document discusses the concept of single-page applications (SPAs) and their advantages, such as reduced server load and improved responsiveness. It highlights the challenges of using SPAs with Drupal 7, noting that it does not support them out of the box, and provides guidance on when to consider creating an SPA. Additionally, it outlines the components necessary for building SPAs and explains how to integrate them with Drupal using the services module.

1. Single Page Apps with
Drupal 7
Chris
Tankersley
ZendCon
2015
ZendCon
2015
1

2. Who Am I
• PHP
Programmer
for
over
10
years
• Drupal
developer
for
5
years
• h>ps://github.com/dragonmantank
ZendCon
2015
2

3. What is a Single Page Application?
• An
applicaFon
that
loads
itself
in
in
a
single
page
ZendCon
2015
3

4. What is a Single Page Application?
• Loads
all
the
necessary
HTML,
CSS,
and
JS
needed
in
a
single
page
load
• Loads
all
the
necessary
HTML,
CSS,
and
JS
needed
to
bootstrap
an
applicaFon
in
a
single
page
load
ZendCon
2015
4

5. Traditional Application Workflow
ZendCon
2015
5
Browser
Server
User
requests
a
page
Server
returns
a
response
1) Server
gets
the
request
2) Server
calls
PHP
3) PHP
builds
the
HTML
Browser
Server
User
requests
a
page
Server
returns
a
response
1) Server
gets
the
request
2) Server
calls
PHP
3) PHP
builds
the
HTML

6. This is heavy
ZendCon
2015
6

7. No, it’s really heavy
ZendCon
2015
7

8. Single Page Application workflow
ZendCon
2015
8
Browser
Server
User
requests
a
page
Server
returns
a
response
1) Server
gets
the
request
2) Server
returns
base
HTML
Browser
requests
data
Server
returns
a
response
1) Server
gets
the
request
2) Server
calls
PHP
3) PHP
returns
JSON
Browser
requests
data
Server
returns
a
response
1) Server
gets
the
request
2) Server
calls
PHP
3) PHP
returns
JSON
…

9. SPAs are great!
• Reduce
server
load
• More
responsive
• Separates
the
server
and
the
front
end
• Make
the
front
end
people
do
all
the
work
ZendCon
2015
9

10. SPA ALL THE THINGS!
ZendCon
2015
10

11. ZendCon
2015
11

12. It’s not all great
• Users
have
to
have
JS
enabled
• SEO
SUUUUUUUUUUUUUUCKS
• This
will
probably
break
navigaFon
• This
will
probably
break
your
analyFcs
• Your
host
might
not
support
it
ZendCon
2015
12

13. Drupal 7 doesn’t support SPAs
ZendCon
2015
13

14. … or does it?
ZendCon
2015
14

15. It doesn’t out of the box
ZendCon
2015
15

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

17. Create an SPA if…
• You
want
a
more
desktop-­‐like
experience
• A
lot
of
data
is
coming
and
going
• You
want/have
a
good
API
backend
• The
interface
lends
itself
to
being
an
SPA
ZendCon
2015
17

18. GMail makes sense
ZendCon
2015
18
h>p://3.bp.blogspot.com/-­‐y96KrBvSbuQ/Tgu5oLmVZyI/AAAAAAAAAKE/EFkwE1ZIic8/s1600/threadlist-­‐large.png

19. My blog doesn’t
ZendCon
2015
19

20. Don’t create an SPA if…
• You
just
want
to
reduce
page
refreshes
• You
think
it
sounds
cool
ZendCon
2015
20

21. tl;dr: Only create an SPA if it makes sense
ZendCon
2015
21

22. Parts of a Single Page Application
ZendCon
2015
22

23. The knee bone is connected to…
• Controllers
• Chunks
and
Templates
• RouFng
• Data
• Data
Transport
ZendCon
2015
23

24. Controllers
ZendCon
2015
24
h>ps://en.wikipedia.org/wiki/Game_controller#/media/File:SNES-­‐Controller.jpg

25. The logic of our application
ZendCon
2015
25
function node_page_default() {
$select = db_select('node', 'n')
->fields('n', array('nid', 'sticky', 'created'))
->condition('n.promote', 1)
->condition('n.status', 1)
->orderBy('n.sticky', 'DESC')
->orderBy('n.created', 'DESC')
->extend('PagerDefault')
->limit(variable_get('default_nodes_main', 10))
->addTag('node_access');
$nids = $select->execute()->fetchCol();
if (!empty($nids)) {
$nodes = node_load_multiple($nids);
$build = node_view_multiple($nodes);

26. Chunks and Templates
ZendCon
2015
26
<?php print render($page['header']); ?>
<div id="wrapper">
<div id="container" class="clearfix">
<div id="header">
<div id="logo-floater">
<?php if ($logo || $site_title): ?>
<?php if ($title): ?>
<div id="branding"><strong><a href="<?php print $front_page ?>">
<?php if ($logo): ?>
<img src="<?php print $logo ?>" alt="<?php print
$site_name_and_slogan ?>" title="<?php print $site_name_and_slogan ?>"
id="logo" />
<?php endif; ?>
<?php print $site_html ?>

27. Routing
ZendCon
2015
27
function hook_menu() {
$items['example'] = array(
'title' => 'Example Page',
'page callback' => 'example_page',
'access arguments' => array('access content'),
'type' => MENU_SUGGESTED_ITEM,
);
$items['example/feed'] = array(
'title' => 'Example RSS feed',
'page callback' => 'example_feed',
'access arguments' => array('access content'),
'type' => MENU_CALLBACK,
);
return $items;
}

28. Data
ZendCon
2015
28
function node_schema() {
$schema['node'] = array(
'description' => 'The base table for nodes.',
'fields' => array(
'nid' => array(
'description' => 'The primary identifier for a node.',
'type' => 'serial',
'unsigned' => TRUE,
'not null' => TRUE,
),
// Defaults to NULL in order to avoid a brief period of potential
// deadlocks on the index.
'vid' => array(
'description' => 'The current {node_revision}.vid version identifier.',
'type' => 'int’,

29. Data Transport
• AJAX
• AJAJ
• AJAH
ZendCon
2015
29

30. Sample SPA Application
DEMO
TIME!
ZendCon
2015
30

31. Picking a JavaScript Framework
ZendCon
2015
31

32. Backbone
ZendCon
2015
32

33. EmberJS
ZendCon
2015
33

34. AngularJS
ZendCon
2015
34

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

36. The Services Module
ZendCon
2015
36

37. What does it do?
“A
standardized
soluFon
of
integraFng
external
applicaFons
with
Drupal.
Service
callbacks
may
be
used
with
mulFple
interfaces
like
REST,
XMLRPC,
JSON,
JSON-­‐RPC,
SOAP,
AMF,
etc.
This
allows
a
Drupal
site
to
provide
web
services
via
mulFple
interfaces
while
using
the
same
callback
code.”
ZendCon
2015
37

38. Services does a lot of heavy lifting for you
ZendCon
2015
38

39. Stop!
Demo
Time!
ZendCon
2015
39

40. Getting it into your Drupal site
ZendCon
2015
40

41. Use a .html file
• Really
easy
to
do
• Doesn’t
impact
your
exisFng
site
ZendCon
2015
41

42. Add it to a template
• Start
small
ZendCon
2015
42

43. Just make a small module
• Gives
you
more
control
ZendCon
2015
43

44. Questions?
ZendCon
2015
44

45. Thank You!
h>p://ctankersley.com
chris@ctankersley.com
@dragonmantank
h>p://joind.in/talk/view/15586
ZendCon
2015
45