drupal8 + angularjs

BEGINNERS GUIDE TO SPA WITH

DRUPAL + ANGULARJS

Daniel KanchevDrupal Enterprise Hosting Manager

@dvkanchev

ApplicationsSingle Page

WHAT IS A SINGLE PAGE APPLICATION?

BEFORE SPA - Web 2.0- RIAs- Flash, SilverLight - AJAX

AJAX:Technology or Generator of

many issues?

Crawling scheme:http://domain.com/#products/please-crawl-me-here

New JS Engines - 20081. Chrome V8 Engine

2. Safari Nitro Engine 3. Firefox - TraceMonkey

JS Frameworks - 20101. BackboneJS 2. AngularJS

3. React

Web innovations- 2012/13

1. HTML 5 - push state 2. CSS 3 - transitions, media queries

Google Blog October 14, 2015

“Deprecating our AJAX crawling scheme”

SPA Advantages1. Segregation —> Good API 2. Performance —> Caching 3. Better UX 4. HA Setup and Failover

HTTP REQUEST

HTTP RESPONSE

- Internal Server Error - Service Unavailable - Gateway Timeout

HTTP REQUEST

HTTP RESPONSE

- Local ISP Issue - DNS Issues - Internet Routing Issues

HTTP REQUEST

HTTP RESPONSE

- Angular Retry Request - Failover to another API version - Failover to another API instance - Failover to another geo region

API

API 1 API 2

API 3

2.3

3.4

0.8

MEXICO

API 1

API 2

API 3

CDN

RecapApplications

Single Page

SPA Overview/History SPA Advantages SPA Architecture

AngularJSOverview of

Remember document.getElementById()?var hello = “Hey, jQueryTO!”;

<div id=“message”></div> document.getElementBy(‘message’).textContent = hello;

<div id=“message”></div> $(‘’#message).text( hello );

<div>{{hello}}</div>

Old school way to dynamically update text:

Then that was replaced by $(selector):

And now with AngularJS:

jQuery Version

AngularJS Version

HTML

CSS

JavaScript

Services

VIEW MODEL

CONTROLLER

Drupal 8 APIUsers

AngularJS Controllers

http://plnkr.co/edit/jIDk4ygbQPC0cVjNEhTu?p=preview

AngularJS Features1. Two way data binding 2. Templates 3. Directives 4. Expressions 5. Filters

RecapAngularJS

Overview of

The web before AngularJS AngularJS MVC

AngularJS Features

Drupal 8 API+

AngularJS

Drupal 8 Setup• Install the needed modules

Drupal 8 Setup• Set permissions for CRUD methods

Drupal 8 Setup• Test retrieving an article with GET in JSON format

LIVE DEMO

Recap

Drupal 8 API+

AngularJS

QUESTIONS ?

Resources:http://www.angularjsbook.com/ https://goo.gl/9o6rJK - AngularJS vs. Angular2 https://goo.gl/CcBW4g - AngularJS + Drupal 8 YouTube tutorial https://goo.gl/0RV07I - DrupalCon LA session http://goo.gl/mwhJ2x - drupalize.me tutorialhttp://goo.gl/WsYTnV - RESTful services docs

Custom REST resources in D8:1. goo.gl/BY3zYf - How to create a Rest Resource in Drupal 82. goo.gl/kCqG20 - GitHub repo related to the above blog post

http://slideshare.net/DanielKanchev

THANK YOU!@dvkanchev

daniel.k@siteground.com