SlideShare uma empresa Scribd logo
1 de 44
Baixar para ler offline
Single Page Apps with
Drupal 8
Chris Tankersley
php[world] 2015
php[world] 2015 1
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
What is a Single Page Application?
• An application that loads itself in in a single page
php[world] 2015 3
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
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
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
…
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
SPA ALL THE THINGS!
php[world] 2015 8
php[world] 2015 9
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
Why do you want a Single Page
Application?
php[world] 2015 11
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
GMail makes sense
php[world] 2015 13
http://3.bp.blogspot.com/-y96KrBvSbuQ/Tgu5oLmVZyI/AAAAAAAAAKE/EFkwE1ZIic8/s1600/threadlist-large.png
My blog doesn’t
php[world] 2015 14
Don’t create an SPA if…
• You just want to reduce page refreshes
• You think it sounds cool
php[world] 2015 15
tl;dr: Only create an SPA if it makes sense
php[world] 2015 16
Parts of a Single Page Application
php[world] 2015 17
The knee bone is connected to…
• Controllers
• Chunks and Templates
• Routing
• Data
• Data Transport
php[world] 2015 18
Controllers
php[world] 2015 19
https://en.wikipedia.org/wiki/Game_controller#/media/File:SNES-Controller.jpg
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);
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 ?>
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;
}
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’,
Data Transport
• AJAX
• AJAJ
• AJAH
php[world] 2015 24
Sample SPA Application
DEMO TIME!
php[world] 2015 25
Picking a JavaScript Framework
php[world] 2015 26
Backbone
php[world] 2015 27
EmberJS
php[world] 2015 28
AngularJS
php[world] 2015 29
Getting Drupal 8 to work with Single Page
Applications
php[world] 2015 30
Turn on the Modules
php[world] 2015 31
Set the Permissions
php[world] 2015 32
Rest UI
php[world] 2015 33
Creating New Endpoints with Views
php[world] 2015 34
Setting Accept Types
php[world] 2015 35
Stop!
Demo Time!
php[world] 2015 36
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
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
Getting it into your Drupal site
php[world] 2015 39
Use a .html file
• Really easy to do
• Doesn’t impact your existing site
php[world] 2015 40
Add it to a template
• Start small
php[world] 2015 41
Just make a small module
• Gives you more control
php[world] 2015 42
Questions?
php[world] 2015 43
Thank You!
http://ctankersley.com
chris@ctankersley.com
@dragonmantank
https://joind.in/14801
php[world] 2015 44

Mais conteúdo relacionado

Mais procurados

Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleLaravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleKaty Slemon
 
WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API
WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST APIWordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API
WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST APIBrian Hogg
 
Backbone.js
Backbone.jsBackbone.js
Backbone.jsVO Tho
 
Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3Alexandre Malavasi
 
WordPress as the Backbone(.js)
WordPress as the Backbone(.js)WordPress as the Backbone(.js)
WordPress as the Backbone(.js)Beau Lebens
 
Packing for the Web with Webpack
Packing for the Web with WebpackPacking for the Web with Webpack
Packing for the Web with WebpackThiago Temple
 
Here Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPressHere Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPressRami Sayar
 
Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JSCakra Danu Sedayu
 
BackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applicationsBackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applicationsJoseph Khan
 
BackboneJS and friends
BackboneJS and friendsBackboneJS and friends
BackboneJS and friendsScott Cowan
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejsNick Lee
 
Put a little Backbone in your WordPress
Put a little Backbone in your WordPressPut a little Backbone in your WordPress
Put a little Backbone in your WordPressadamsilverstein
 
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowPacking it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowDerek Willian Stavis
 
AngularJS Deep Dives (NYC GDG Apr 2013)
AngularJS Deep Dives (NYC GDG Apr 2013)AngularJS Deep Dives (NYC GDG Apr 2013)
AngularJS Deep Dives (NYC GDG Apr 2013)Nitya Narasimhan
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseAaron Silverman
 
React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix Chen Lerner
 
Unobtrusive JavaScript
Unobtrusive JavaScriptUnobtrusive JavaScript
Unobtrusive JavaScriptVitaly Baum
 

Mais procurados (20)

Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleLaravel 8 export data as excel file with example
Laravel 8 export data as excel file with example
 
WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API
WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST APIWordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API
WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3
 
WordPress as the Backbone(.js)
WordPress as the Backbone(.js)WordPress as the Backbone(.js)
WordPress as the Backbone(.js)
 
Packing for the Web with Webpack
Packing for the Web with WebpackPacking for the Web with Webpack
Packing for the Web with Webpack
 
Here Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPressHere Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPress
 
Vue js for beginner
Vue js for beginner Vue js for beginner
Vue js for beginner
 
Intro to Vue
Intro to Vue Intro to Vue
Intro to Vue
 
Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JS
 
BackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applicationsBackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applications
 
BackboneJS and friends
BackboneJS and friendsBackboneJS and friends
BackboneJS and friends
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
 
Put a little Backbone in your WordPress
Put a little Backbone in your WordPressPut a little Backbone in your WordPress
Put a little Backbone in your WordPress
 
Intro to Sails.js
Intro to Sails.jsIntro to Sails.js
Intro to Sails.js
 
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowPacking it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to now
 
AngularJS Deep Dives (NYC GDG Apr 2013)
AngularJS Deep Dives (NYC GDG Apr 2013)AngularJS Deep Dives (NYC GDG Apr 2013)
AngularJS Deep Dives (NYC GDG Apr 2013)
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
 
React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix
 
Unobtrusive JavaScript
Unobtrusive JavaScriptUnobtrusive JavaScript
Unobtrusive JavaScript
 

Semelhante a Single Page Apps with Drupal 8

Single page apps with drupal 7
Single page apps with drupal 7Single page apps with drupal 7
Single page apps with drupal 7Chris Tankersley
 
Single Page Applications in Drupal
Single Page Applications in DrupalSingle Page Applications in Drupal
Single Page Applications in DrupalChris Tankersley
 
PHP on Windows and on Azure
PHP on Windows and on AzurePHP on Windows and on Azure
PHP on Windows and on AzureMaarten Balliauw
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointSPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointMark Rackley
 
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...Fwdays
 
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...Sébastien Levert
 
Streamlining Your Applications with Web Frameworks
Streamlining Your Applications with Web FrameworksStreamlining Your Applications with Web Frameworks
Streamlining Your Applications with Web Frameworksguestf7bc30
 
Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...IT Event
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introductionshaojung
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introductionshaojung
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introductionshaojung
 
Automating your php infrastructure with the zend server api
Automating your php infrastructure with the zend server apiAutomating your php infrastructure with the zend server api
Automating your php infrastructure with the zend server apiYonni Mendes
 
How and why we evolved a legacy Java web application to Scala... and we are s...
How and why we evolved a legacy Java web application to Scala... and we are s...How and why we evolved a legacy Java web application to Scala... and we are s...
How and why we evolved a legacy Java web application to Scala... and we are s...Katia Aresti
 
Wordcamp Toronto Presentation
Wordcamp Toronto PresentationWordcamp Toronto Presentation
Wordcamp Toronto PresentationRoy Sivan
 
C# Advanced L09-HTML5+ASP
C# Advanced L09-HTML5+ASPC# Advanced L09-HTML5+ASP
C# Advanced L09-HTML5+ASPMohammad Shaker
 
WordPress and Client Side Web Applications WCTO
WordPress and Client Side Web Applications WCTOWordPress and Client Side Web Applications WCTO
WordPress and Client Side Web Applications WCTORoy Sivan
 
SharePoint Fest Seattle - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Seattle - SharePoint Framework, Angular & Azure FunctionsSharePoint Fest Seattle - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Seattle - SharePoint Framework, Angular & Azure FunctionsSébastien Levert
 

Semelhante a Single Page Apps with Drupal 8 (20)

Single page apps with drupal 7
Single page apps with drupal 7Single page apps with drupal 7
Single page apps with drupal 7
 
Single Page Applications in Drupal
Single Page Applications in DrupalSingle Page Applications in Drupal
Single Page Applications in Drupal
 
PHP on Windows and on Azure
PHP on Windows and on AzurePHP on Windows and on Azure
PHP on Windows and on Azure
 
PHP on Windows
PHP on WindowsPHP on Windows
PHP on Windows
 
PHP on Windows
PHP on WindowsPHP on Windows
PHP on Windows
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointSPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
 
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
 
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...
 
Streamlining Your Applications with Web Frameworks
Streamlining Your Applications with Web FrameworksStreamlining Your Applications with Web Frameworks
Streamlining Your Applications with Web Frameworks
 
Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introduction
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introduction
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introduction
 
Automating your php infrastructure with the zend server api
Automating your php infrastructure with the zend server apiAutomating your php infrastructure with the zend server api
Automating your php infrastructure with the zend server api
 
How and why we evolved a legacy Java web application to Scala... and we are s...
How and why we evolved a legacy Java web application to Scala... and we are s...How and why we evolved a legacy Java web application to Scala... and we are s...
How and why we evolved a legacy Java web application to Scala... and we are s...
 
Wordcamp Toronto Presentation
Wordcamp Toronto PresentationWordcamp Toronto Presentation
Wordcamp Toronto Presentation
 
C# Advanced L09-HTML5+ASP
C# Advanced L09-HTML5+ASPC# Advanced L09-HTML5+ASP
C# Advanced L09-HTML5+ASP
 
Node azure
Node azureNode azure
Node azure
 
WordPress and Client Side Web Applications WCTO
WordPress and Client Side Web Applications WCTOWordPress and Client Side Web Applications WCTO
WordPress and Client Side Web Applications WCTO
 
SharePoint Fest Seattle - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Seattle - SharePoint Framework, Angular & Azure FunctionsSharePoint Fest Seattle - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Seattle - SharePoint Framework, Angular & Azure Functions
 

Mais de Chris Tankersley

Docker is Dead: Long Live Containers
Docker is Dead: Long Live ContainersDocker is Dead: Long Live Containers
Docker is Dead: Long Live ContainersChris Tankersley
 
Bend time to your will with git
Bend time to your will with gitBend time to your will with git
Bend time to your will with gitChris Tankersley
 
Using PHP Functions! (Not those functions, Google Cloud Functions)
Using PHP Functions! (Not those functions, Google Cloud Functions)Using PHP Functions! (Not those functions, Google Cloud Functions)
Using PHP Functions! (Not those functions, Google Cloud Functions)Chris Tankersley
 
Dead Simple APIs with OpenAPI
Dead Simple APIs with OpenAPIDead Simple APIs with OpenAPI
Dead Simple APIs with OpenAPIChris Tankersley
 
Killer Docker Workflows for Development
Killer Docker Workflows for DevelopmentKiller Docker Workflows for Development
Killer Docker Workflows for DevelopmentChris Tankersley
 
Docker for Developers - PHP Detroit 2018
Docker for Developers - PHP Detroit 2018Docker for Developers - PHP Detroit 2018
Docker for Developers - PHP Detroit 2018Chris Tankersley
 
BASHing at the CLI - Midwest PHP 2018
BASHing at the CLI - Midwest PHP 2018BASHing at the CLI - Midwest PHP 2018
BASHing at the CLI - Midwest PHP 2018Chris Tankersley
 
You Were Lied To About Optimization
You Were Lied To About OptimizationYou Were Lied To About Optimization
You Were Lied To About OptimizationChris Tankersley
 
Docker for PHP Developers - php[world] 2017
Docker for PHP Developers - php[world] 2017Docker for PHP Developers - php[world] 2017
Docker for PHP Developers - php[world] 2017Chris Tankersley
 
Docker for PHP Developers - Madison PHP 2017
Docker for PHP Developers - Madison PHP 2017Docker for PHP Developers - Madison PHP 2017
Docker for PHP Developers - Madison PHP 2017Chris Tankersley
 
Docker for Developers - php[tek] 2017
Docker for Developers - php[tek] 2017Docker for Developers - php[tek] 2017
Docker for Developers - php[tek] 2017Chris Tankersley
 
Why Docker? Dayton PHP, April 2017
Why Docker? Dayton PHP, April 2017Why Docker? Dayton PHP, April 2017
Why Docker? Dayton PHP, April 2017Chris Tankersley
 
OOP Is More Then Cars and Dogs - Midwest PHP 2017
OOP Is More Then Cars and Dogs - Midwest PHP 2017OOP Is More Then Cars and Dogs - Midwest PHP 2017
OOP Is More Then Cars and Dogs - Midwest PHP 2017Chris Tankersley
 
From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017Chris Tankersley
 
Docker for Developers - Sunshine PHP
Docker for Developers - Sunshine PHPDocker for Developers - Sunshine PHP
Docker for Developers - Sunshine PHPChris Tankersley
 
Coming to Terms with OOP In Drupal - php[world] 2016
Coming to Terms with OOP In Drupal - php[world] 2016Coming to Terms with OOP In Drupal - php[world] 2016
Coming to Terms with OOP In Drupal - php[world] 2016Chris Tankersley
 
How We Got Here: A Brief History of Open Source
How We Got Here: A Brief History of Open SourceHow We Got Here: A Brief History of Open Source
How We Got Here: A Brief History of Open SourceChris Tankersley
 

Mais de Chris Tankersley (20)

Docker is Dead: Long Live Containers
Docker is Dead: Long Live ContainersDocker is Dead: Long Live Containers
Docker is Dead: Long Live Containers
 
Bend time to your will with git
Bend time to your will with gitBend time to your will with git
Bend time to your will with git
 
Using PHP Functions! (Not those functions, Google Cloud Functions)
Using PHP Functions! (Not those functions, Google Cloud Functions)Using PHP Functions! (Not those functions, Google Cloud Functions)
Using PHP Functions! (Not those functions, Google Cloud Functions)
 
Dead Simple APIs with OpenAPI
Dead Simple APIs with OpenAPIDead Simple APIs with OpenAPI
Dead Simple APIs with OpenAPI
 
Killer Docker Workflows for Development
Killer Docker Workflows for DevelopmentKiller Docker Workflows for Development
Killer Docker Workflows for Development
 
You Got Async in my PHP!
You Got Async in my PHP!You Got Async in my PHP!
You Got Async in my PHP!
 
Docker for Developers - PHP Detroit 2018
Docker for Developers - PHP Detroit 2018Docker for Developers - PHP Detroit 2018
Docker for Developers - PHP Detroit 2018
 
Docker for Developers
Docker for DevelopersDocker for Developers
Docker for Developers
 
They are Watching You
They are Watching YouThey are Watching You
They are Watching You
 
BASHing at the CLI - Midwest PHP 2018
BASHing at the CLI - Midwest PHP 2018BASHing at the CLI - Midwest PHP 2018
BASHing at the CLI - Midwest PHP 2018
 
You Were Lied To About Optimization
You Were Lied To About OptimizationYou Were Lied To About Optimization
You Were Lied To About Optimization
 
Docker for PHP Developers - php[world] 2017
Docker for PHP Developers - php[world] 2017Docker for PHP Developers - php[world] 2017
Docker for PHP Developers - php[world] 2017
 
Docker for PHP Developers - Madison PHP 2017
Docker for PHP Developers - Madison PHP 2017Docker for PHP Developers - Madison PHP 2017
Docker for PHP Developers - Madison PHP 2017
 
Docker for Developers - php[tek] 2017
Docker for Developers - php[tek] 2017Docker for Developers - php[tek] 2017
Docker for Developers - php[tek] 2017
 
Why Docker? Dayton PHP, April 2017
Why Docker? Dayton PHP, April 2017Why Docker? Dayton PHP, April 2017
Why Docker? Dayton PHP, April 2017
 
OOP Is More Then Cars and Dogs - Midwest PHP 2017
OOP Is More Then Cars and Dogs - Midwest PHP 2017OOP Is More Then Cars and Dogs - Midwest PHP 2017
OOP Is More Then Cars and Dogs - Midwest PHP 2017
 
From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017
 
Docker for Developers - Sunshine PHP
Docker for Developers - Sunshine PHPDocker for Developers - Sunshine PHP
Docker for Developers - Sunshine PHP
 
Coming to Terms with OOP In Drupal - php[world] 2016
Coming to Terms with OOP In Drupal - php[world] 2016Coming to Terms with OOP In Drupal - php[world] 2016
Coming to Terms with OOP In Drupal - php[world] 2016
 
How We Got Here: A Brief History of Open Source
How We Got Here: A Brief History of Open SourceHow We Got Here: A Brief History of Open Source
How We Got Here: A Brief History of Open Source
 

Último

Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 

Último (20)

Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
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
  • 8. SPA ALL THE THINGS! php[world] 2015 8
  • 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
  • 15. Don’t create an SPA if… • You just want to reduce page refreshes • You think it sounds cool php[world] 2015 15
  • 16. tl;dr: Only create an SPA if it makes sense php[world] 2015 16
  • 17. Parts of a Single Page Application php[world] 2015 17
  • 18. The knee bone is connected to… • Controllers • Chunks and Templates • Routing • Data • Data Transport php[world] 2015 18
  • 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. 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. 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. 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. Data Transport • AJAX • AJAJ • AJAH php[world] 2015 24
  • 25. Sample SPA Application DEMO TIME! php[world] 2015 25
  • 26. Picking a JavaScript Framework php[world] 2015 26
  • 30. Getting Drupal 8 to work with Single Page Applications php[world] 2015 30
  • 31. Turn on the Modules php[world] 2015 31
  • 34. Creating New Endpoints with Views php[world] 2015 34
  • 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
  • 39. Getting it into your Drupal site php[world] 2015 39
  • 40. Use a .html file • Really easy to do • Doesn’t impact your existing site php[world] 2015 40
  • 41. Add it to a template • Start small php[world] 2015 41
  • 42. Just make a small module • Gives you more control php[world] 2015 42