Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BEGINNERS GUIDE
TO SPA WITH
DRUPAL +
ANGULARJS
Daniel Kanchev

Drupal Enterprise Hosting Manager

@dvkanchev
Applications
Single 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 - 2008
1. Chrome V8 Engine
2. Safari Nitro Engine
3. Firefox - TraceMonkey
JS Frameworks - 2010
1. 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 Advantages
1. 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
- ...
API 1
API 2
API 3
2.3
3.4
0.8
MEXICO
API 1
API 2
API 3
CDN
Recap
Applications
Single Page
SPA Overview/History
SPA Advantages
SPA Architecture
AngularJS
Overview of
Remember document.getElementById()?
var hello = “Hey, jQueryTO!”;
<div id=“message”></div>
document.getElementBy(‘message’...
jQuery Version
AngularJS Version
HTML
CSS
JavaScript
Services
VIEW MODEL
CONTROLLER
Drupal 8

API
Users
AngularJS Controllers
http://plnkr.co/edit/
jIDk4ygbQPC0cVjNEhTu?p=preview
AngularJS Features
1. Two way data binding
2. Templates
3. Directives
4. Expressions
5. Filters
Recap
AngularJS
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 ...
Custom REST resources in D8:
1. goo.gl/BY3zYf - How to create a Rest Resource in
Drupal 8



2. goo.gl/kCqG20 - GitHub rep...
http://slideshare.net/DanielKanchev
THANK YOU!
@dvkanchev
daniel.k@siteground.com
Drupal8 + AngularJS
Drupal8 + AngularJS
Drupal8 + AngularJS
Drupal8 + AngularJS
Upcoming SlideShare
Loading in …5
×

Drupal8 + AngularJS

1,169 views

Published on

Those are the slides from my Drupal 8 + AngularJS presentation at Drupal IronCamp in Prague in 2016.

The purpose of this presentation is to provide an overview of what are Single Page Applications, why they are becoming so popular and how Drupal 8 REST API could be used together with AngularJS to create SPAs. The talk contains three main sections:

1. Single Page Applications - overview, history, architecture considerations, why using SPAs
2. AngularJS - what is AngularJS and why people like it so much
3. Drupal 8 REST API + AngularJS - capabilities, short overview and demo of a simple SPA based on Drupal 8 + AngularJS

At the end of the talk people will know the following:

- What is a single page application and what are the advantages of using SPAs
- What is AngularJS and how it can be used together with Drupal 8 and the REST API
- During the talk a simple Drupal 8 + AngularJS app will be presented and code samples will be provided

Published in: Technology
  • Be the first to comment

Drupal8 + AngularJS

  1. 1. BEGINNERS GUIDE TO SPA WITH DRUPAL + ANGULARJS
  2. 2. Daniel Kanchev
 Drupal Enterprise Hosting Manager
 @dvkanchev
  3. 3. Applications Single Page
  4. 4. WHAT IS A SINGLE PAGE APPLICATION?
  5. 5. BEFORE SPA - Web 2.0
 - RIAs
 - Flash, SilverLight - AJAX
  6. 6. AJAX: Technology or Generator of many issues?
  7. 7. Crawling scheme: http://domain.com/#products/please-crawl-me-here
  8. 8. New JS Engines - 2008 1. Chrome V8 Engine 2. Safari Nitro Engine 3. Firefox - TraceMonkey
  9. 9. JS Frameworks - 2010 1. BackboneJS 2. AngularJS 3. React
  10. 10. Web innovations- 2012/13 1. HTML 5 - push state 2. CSS 3 - transitions, media queries
  11. 11. Google Blog 
 October 14, 2015 “Deprecating our AJAX crawling scheme”
  12. 12. SPA Advantages 1. Segregation —> Good API 2. Performance —> Caching 3. Better UX 4. HA Setup and Failover
  13. 13. HTTP REQUEST HTTP RESPONSE - Internal Server Error - Service Unavailable - Gateway Timeout
  14. 14. HTTP REQUEST HTTP RESPONSE - Local ISP Issue - DNS Issues - Internet Routing Issues
  15. 15. HTTP REQUEST HTTP RESPONSE - Angular Retry Request - Failover to another API version - Failover to another API instance - Failover to another geo region API
  16. 16. API 1 API 2 API 3 2.3 3.4 0.8 MEXICO
  17. 17. API 1 API 2 API 3 CDN
  18. 18. Recap Applications Single Page
  19. 19. SPA Overview/History SPA Advantages SPA Architecture
  20. 20. AngularJS Overview of
  21. 21. 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:
  22. 22. jQuery Version
  23. 23. AngularJS Version
  24. 24. HTML CSS JavaScript Services VIEW MODEL CONTROLLER Drupal 8
 API Users
  25. 25. AngularJS Controllers http://plnkr.co/edit/ jIDk4ygbQPC0cVjNEhTu?p=preview
  26. 26. AngularJS Features 1. Two way data binding 2. Templates 3. Directives 4. Expressions 5. Filters
  27. 27. Recap AngularJS Overview of
  28. 28. The web before AngularJS
 AngularJS MVC AngularJS Features
  29. 29. Drupal 8 API
 +
 AngularJS
  30. 30. Drupal 8 Setup • Install the needed modules
  31. 31. Drupal 8 Setup • Set permissions for CRUD methods
  32. 32. Drupal 8 Setup • Test retrieving an article with GET in JSON format
  33. 33. LIVE DEMO
  34. 34. Recap Drupal 8 API
 +
 AngularJS
  35. 35. QUESTIONS ?
  36. 36. 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 tutorial
 http://goo.gl/WsYTnV - RESTful services docs
  37. 37. Custom REST resources in D8: 1. goo.gl/BY3zYf - How to create a Rest Resource in Drupal 8
 
 2. goo.gl/kCqG20 - GitHub repo related to the above blog post
  38. 38. http://slideshare.net/DanielKanchev
  39. 39. THANK YOU! @dvkanchev daniel.k@siteground.com

×