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 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://...
What is a Single Page Application?
•  An	
  applicaFon	
  that	
  loads	
  itself	
  in	
  in	
  a	
  single	
  page	
  
Z...
What is a Single Page Application?
•  Loads	
  all	
  the	
  necessary	
  HTML,	
  CSS,	
  and	
  JS	
  needed	
  in	
  a	...
Traditional Application Workflow
ZendCon	
  2015	
   5	
  
Browser	
   Server	
  
User	
  requests	
  a	
  page	
  
Server...
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...
SPAs are great!
•  Reduce	
  server	
  load	
  
•  More	
  responsive	
  
•  Separates	
  the	
  server	
  and	
  the	
  f...
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	
 ...
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	
  comin...
GMail makes sense
ZendCon	
  2015	
   18	
  
h>p://3.bp.blogspot.com/-­‐y96KrBvSbuQ/Tgu5oLmVZyI/AAAAAAAAAKE/EFkwE1ZIic8/s1...
My blog doesn’t
ZendCon	
  2015	
   19	
  
Don’t create an SPA if…
•  You	
  just	
  want	
  to	
  reduce	
  page	
  refreshes	
  
•  You	
  think	
  it	
  sounds	
 ...
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	
  T...
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')
->...
Chunks and Templates
ZendCon	
  2015	
   26	
  
<?php print render($page['header']); ?>
<div id="wrapper">
<div id="contai...
Routing
ZendCon	
  2015	
   27	
  
function hook_menu() {
$items['example'] = array(
'title' => 'Example Page',
'page call...
Data
ZendCon	
  2015	
   28	
  
function node_schema() {
$schema['node'] = array(
'description' => 'The base table for nod...
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.	
  Servi...
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	
  ...
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	
  
...
Upcoming SlideShare
Loading in …5
×

Single page apps with drupal 7

522 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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Single page apps with drupal 7

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

×