Mobile apps using drupal as base system SumitK DrupalCon Chicago
Single Page Apps with Drupal 8
-
Upload
chris-tankersley -
Category
Technology
-
view
1.162 -
download
1
Transcript of Single Page Apps with Drupal 8
![Page 1: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/1.jpg)
php[world] 2015 1
Single Page Apps with Drupal 8Chris Tankersleyphp[world] 2015
![Page 2: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/2.jpg)
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
![Page 3: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/3.jpg)
php[world] 2015 3
What is a Single Page Application?• An application that loads itself in in a single page
![Page 4: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/4.jpg)
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
![Page 5: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/5.jpg)
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
![Page 6: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/6.jpg)
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
…
![Page 7: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/7.jpg)
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
![Page 8: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/8.jpg)
php[world] 2015 8
SPA ALL THE THINGS!
![Page 9: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/9.jpg)
php[world] 2015 9
![Page 10: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/10.jpg)
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
![Page 11: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/11.jpg)
php[world] 2015 11
Why do you want a Single Page Application?
![Page 12: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/12.jpg)
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
![Page 13: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/13.jpg)
php[world] 2015 13
GMail makes sense
http://3.bp.blogspot.com/-y96KrBvSbuQ/Tgu5oLmVZyI/AAAAAAAAAKE/EFkwE1ZIic8/s1600/threadlist-large.png
![Page 14: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/14.jpg)
php[world] 2015 14
My blog doesn’t
![Page 15: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/15.jpg)
php[world] 2015 15
Don’t create an SPA if…• You just want to reduce page refreshes• You think it sounds cool
![Page 16: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/16.jpg)
php[world] 2015 16
tl;dr: Only create an SPA if it makes sense
![Page 17: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/17.jpg)
php[world] 2015 17
Parts of a Single Page Application
![Page 18: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/18.jpg)
php[world] 2015 18
The knee bone is connected to…• Controllers• Chunks and Templates• Routing• Data• Data Transport
![Page 19: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/19.jpg)
php[world] 2015 19
Controllers
https://en.wikipedia.org/wiki/Game_controller#/media/File:SNES-Controller.jpg
![Page 20: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/20.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);
![Page 21: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/21.jpg)
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 ?>
![Page 22: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/22.jpg)
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;}
![Page 23: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/23.jpg)
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’,
![Page 24: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/24.jpg)
php[world] 2015 24
Data Transport• AJAX• AJAJ• AJAH
![Page 25: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/25.jpg)
php[world] 2015 25
Sample SPA Application
DEMO TIME!
![Page 26: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/26.jpg)
php[world] 2015 26
Picking a JavaScript Framework
![Page 27: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/27.jpg)
php[world] 2015 27
Backbone
![Page 28: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/28.jpg)
php[world] 2015 28
EmberJS
![Page 29: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/29.jpg)
php[world] 2015 29
AngularJS
![Page 30: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/30.jpg)
php[world] 2015 30
Getting Drupal 8 to work with Single Page Applications
![Page 31: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/31.jpg)
php[world] 2015 31
Turn on the Modules
![Page 32: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/32.jpg)
php[world] 2015 32
Set the Permissions
![Page 33: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/33.jpg)
php[world] 2015 33
Rest UI
![Page 34: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/34.jpg)
php[world] 2015 34
Creating New Endpoints with Views
![Page 35: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/35.jpg)
php[world] 2015 35
Setting Accept Types
![Page 36: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/36.jpg)
php[world] 2015 36
Stop!
Demo Time!
![Page 37: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/37.jpg)
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
![Page 38: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/38.jpg)
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
![Page 39: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/39.jpg)
php[world] 2015 39
Getting it into your Drupal site
![Page 40: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/40.jpg)
php[world] 2015 40
Use a .html file• Really easy to do• Doesn’t impact your existing site
![Page 41: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/41.jpg)
php[world] 2015 41
Add it to a template • Start small
![Page 42: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/42.jpg)
php[world] 2015 42
Just make a small module• Gives you more control
![Page 43: Single Page Apps with Drupal 8](https://reader034.fdocuments.net/reader034/viewer/2022042723/58e588581a28abbf5d8b6379/html5/thumbnails/43.jpg)
php[world] 2015 43
Questions?