Post on 15-Feb-2017
Single Page Apps with Drupal 7 Chris Tankersley ZendCon 2015
ZendCon 2015 1
Who Am I
• PHP Programmer for over 10 years • Drupal developer for 5 years • h>ps://github.com/dragonmantank
ZendCon 2015 2
What is a Single Page Application?
• An applicaFon that loads itself in in a single page
ZendCon 2015 3
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
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
This is heavy
ZendCon 2015 6
No, it’s really heavy
ZendCon 2015 7
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
…
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
SPA ALL THE THINGS!
ZendCon 2015 10
ZendCon 2015 11
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
Drupal 7 doesn’t support SPAs
ZendCon 2015 13
… or does it?
ZendCon 2015 14
It doesn’t out of the box
ZendCon 2015 15
Why do you want a Single Page Application?
ZendCon 2015 16
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
GMail makes sense
ZendCon 2015 18
h>p://3.bp.blogspot.com/-‐y96KrBvSbuQ/Tgu5oLmVZyI/AAAAAAAAAKE/EFkwE1ZIic8/s1600/threadlist-‐large.png
My blog doesn’t
ZendCon 2015 19
Don’t create an SPA if…
• You just want to reduce page refreshes • You think it sounds cool
ZendCon 2015 20
tl;dr: Only create an SPA if it makes sense
ZendCon 2015 21
Parts of a Single Page Application
ZendCon 2015 22
The knee bone is connected to…
• Controllers • Chunks and Templates • RouFng • Data • Data Transport
ZendCon 2015 23
Controllers
ZendCon 2015 24
h>ps://en.wikipedia.org/wiki/Game_controller#/media/File:SNES-‐Controller.jpg
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);
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 ?>
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; }
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’,
Data Transport
• AJAX • AJAJ • AJAH
ZendCon 2015 29
Sample SPA Application
DEMO TIME!
ZendCon 2015 30
Picking a JavaScript Framework
ZendCon 2015 31
Backbone
ZendCon 2015 32
EmberJS
ZendCon 2015 33
AngularJS
ZendCon 2015 34
Getting Drupal 7 to work with Single Page Applications
ZendCon 2015 35
The Services Module
ZendCon 2015 36
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
Services does a lot of heavy lifting for you
ZendCon 2015 38
Stop!
Demo Time!
ZendCon 2015 39
Getting it into your Drupal site
ZendCon 2015 40
Use a .html file
• Really easy to do • Doesn’t impact your exisFng site
ZendCon 2015 41
Add it to a template
• Start small
ZendCon 2015 42
Just make a small module
• Gives you more control
ZendCon 2015 43
Questions?
ZendCon 2015 44
Thank You!
h>p://ctankersley.com chris@ctankersley.com
@dragonmantank
h>p://joind.in/talk/view/15586
ZendCon 2015 45