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 8

2,046 views

Published on

It's no denying that rich Javascript applications (sometimes called single-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 Backbone are great when you have an API, and with Drupal 8, APIs will be first-class citizens. I'll explore the parts of a single-page application and how to integrate it into either an existing or a new Drupal site, as well as 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 8

  1. 1. Single Page Apps with Drupal 8 Chris Tankersley php[world] 2015 php[world] 2015 1
  2. 2. Who Am I • PHP Programmer for over 10 years • Drupal developer for 5 years • Maintainer of Social Media Bar • Reigning, Defending, PHP Magic the Gathering Champion • https://github.com/dragonmantank php[world] 2015 2
  3. 3. What is a Single Page Application? • An application that loads itself in in a single page php[world] 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 application in a single page load php[world] 2015 4
  5. 5. Traditional Application Workflow php[world] 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. Single Page Application workflow php[world] 2015 6 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 …
  7. 7. SPAs are great! • Reduce server load • More responsive • Separates the server and the front end • Make the front end people do all the work php[world] 2015 7
  8. 8. SPA ALL THE THINGS! php[world] 2015 8
  9. 9. php[world] 2015 9
  10. 10. It’s not all great • Users have to have JS enabled • SEO SUUUUUUUUUUUUUUCKS • This will probably break navigation • This will probably break your analytics • Your host might not support it php[world] 2015 10
  11. 11. Why do you want a Single Page Application? php[world] 2015 11
  12. 12. 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 php[world] 2015 12
  13. 13. GMail makes sense php[world] 2015 13 http://3.bp.blogspot.com/-y96KrBvSbuQ/Tgu5oLmVZyI/AAAAAAAAAKE/EFkwE1ZIic8/s1600/threadlist-large.png
  14. 14. My blog doesn’t php[world] 2015 14
  15. 15. Don’t create an SPA if… • You just want to reduce page refreshes • You think it sounds cool php[world] 2015 15
  16. 16. tl;dr: Only create an SPA if it makes sense php[world] 2015 16
  17. 17. Parts of a Single Page Application php[world] 2015 17
  18. 18. The knee bone is connected to… • Controllers • Chunks and Templates • Routing • Data • Data Transport php[world] 2015 18
  19. 19. Controllers php[world] 2015 19 https://en.wikipedia.org/wiki/Game_controller#/media/File:SNES-Controller.jpg
  20. 20. The logic of our application php[world] 2015 20 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);
  21. 21. Chunks and Templates php[world] 2015 21 <?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 ?>
  22. 22. Routing php[world] 2015 22 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; }
  23. 23. Data php[world] 2015 23 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’,
  24. 24. Data Transport • AJAX • AJAJ • AJAH php[world] 2015 24
  25. 25. Sample SPA Application DEMO TIME! php[world] 2015 25
  26. 26. Picking a JavaScript Framework php[world] 2015 26
  27. 27. Backbone php[world] 2015 27
  28. 28. EmberJS php[world] 2015 28
  29. 29. AngularJS php[world] 2015 29
  30. 30. Getting Drupal 8 to work with Single Page Applications php[world] 2015 30
  31. 31. Turn on the Modules php[world] 2015 31
  32. 32. Set the Permissions php[world] 2015 32
  33. 33. Rest UI php[world] 2015 33
  34. 34. Creating New Endpoints with Views php[world] 2015 34
  35. 35. Setting Accept Types php[world] 2015 35
  36. 36. Stop! Demo Time! php[world] 2015 36
  37. 37. Notes for working with the REST API • No more headers. It’s all through ?_format=* • You have to know all your base routes • Use hal_json as a format to make finding links easier php[world] 2015 37
  38. 38. Why HAL? • Open spec for describing generic REST resources • Supports XML and JSON • Exposes useful links to other bits of resources you might need • http://phlyrestfully.readthedocs.org/en/latest/halprimer.html php[world] 2015 38
  39. 39. Getting it into your Drupal site php[world] 2015 39
  40. 40. Use a .html file • Really easy to do • Doesn’t impact your existing site php[world] 2015 40
  41. 41. Add it to a template • Start small php[world] 2015 41
  42. 42. Just make a small module • Gives you more control php[world] 2015 42
  43. 43. Questions? php[world] 2015 43
  44. 44. Thank You! http://ctankersley.com chris@ctankersley.com @dragonmantank https://joind.in/14801 php[world] 2015 44

×