single page apps with drupal 8

php[world] 2015 1

Single Page Apps with Drupal 8Chris Tankersleyphp[world] 2015

php[world] 2015 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 3

What is a Single Page Application?• An application that loads itself in in a single page

php[world] 2015 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 5

Traditional Application WorkflowBrowser Server

User requests a page

Server returns a response

1) Server gets the request2) Server calls PHP3) PHP builds the HTML

Browser Server

User requests a page

Server returns a response

1) Server gets the request2) Server calls PHP3) PHP builds the HTML

php[world] 2015 6

Single Page Application workflowBrowser Server

User requests a page

Server returns a response1) Server gets the request2) Server returns base HTML

Browser requests data

Server returns a response

1) Server gets the request2) Server calls PHP3) PHP returns JSON

Browser requests data

Server returns a response

1) Server gets the request2) Server calls PHP3) PHP returns JSON

…

php[world] 2015 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 8

SPA ALL THE THINGS!

php[world] 2015 9

php[world] 2015 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 11

Why do you want a Single Page Application?

php[world] 2015 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 13

GMail makes sense

http://3.bp.blogspot.com/-y96KrBvSbuQ/Tgu5oLmVZyI/AAAAAAAAAKE/EFkwE1ZIic8/s1600/threadlist-large.png

php[world] 2015 14

My blog doesn’t

php[world] 2015 15

Don’t create an SPA if…• You just want to reduce page refreshes• You think it sounds cool

php[world] 2015 16

tl;dr: Only create an SPA if it makes sense

php[world] 2015 17

Parts of a Single Page Application

php[world] 2015 18

The knee bone is connected to…• Controllers• Chunks and Templates• Routing• Data• Data Transport

php[world] 2015 19

Controllers

https://en.wikipedia.org/wiki/Game_controller#/media/File:SNES-Controller.jpg

php[world] 2015 20

The logic of our applicationfunction 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);

php[world] 2015 21

Chunks and Templates<?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 ?>

php[world] 2015 22

Routingfunction 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;}

php[world] 2015 23

Datafunction 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’,

php[world] 2015 24

Data Transport• AJAX• AJAJ• AJAH

php[world] 2015 25

Sample SPA Application

DEMO TIME!

php[world] 2015 26

Picking a JavaScript Framework

php[world] 2015 27

Backbone

php[world] 2015 28

EmberJS

php[world] 2015 29

AngularJS

php[world] 2015 30

Getting Drupal 8 to work with Single Page Applications

php[world] 2015 31

Turn on the Modules

php[world] 2015 32

Set the Permissions

php[world] 2015 33

Rest UI

php[world] 2015 34

Creating New Endpoints with Views

php[world] 2015 35

Setting Accept Types

php[world] 2015 36

Stop!

Demo Time!

php[world] 2015 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 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 39

Getting it into your Drupal site

php[world] 2015 40

Use a .html file• Really easy to do• Doesn’t impact your existing site

php[world] 2015 41

Add it to a template • Start small

php[world] 2015 42

Just make a small module• Gives you more control

php[world] 2015 43

Questions?

php[world] 2015 44

Thank You!http://ctankersley.comchris@ctankersley.com

@dragonmantank

https://joind.in/14801