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.
VoIP Service and Marketing using Odoo and Asterisk PBX
Single Page Apps with Drupal 8
1. Single Page Apps with
Drupal 8
Chris Tankersley
php[world] 2015
php[world] 2015 1
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. What is a Single Page Application?
• An application that loads itself in in a single page
php[world] 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
application in a single page load
php[world] 2015 4
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. 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. 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
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. Why do you want a Single Page
Application?
php[world] 2015 11
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. GMail makes sense
php[world] 2015 13
http://3.bp.blogspot.com/-y96KrBvSbuQ/Tgu5oLmVZyI/AAAAAAAAAKE/EFkwE1ZIic8/s1600/threadlist-large.png
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’,
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. 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