Single page apps with drupal 7

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

  • Be the first to like this

No Downloads
Views
Total views
354
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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  

×