Drupal & AngularJS
DrupalCamp Spain 2014
Juampy Novillo Requena
Mateu Aguilo Bosh
About us (@e0ipso & @juampy72)
Drupal enthusiasts Developers at Lullabot
Glossary (1)
Front end developer / Themer
Someone who works in the presentational aspects of a
website.
Back end developer...
Glossary (2)
Decouple
tr. separate, disengage, or dissociate (something) from
something else.
For Drupal: move areas of bu...
<html>
…
<div id=”the-js-page”></div>
…
</html>
title: “Ooops”,
link: “/search”,
image: “img.jpg”
Raw data sent to
the cli...
¿Why decoupling?
1. Theming in Drupal is tedious and tricky.
2. As an alternative to ESI in pages delivered
by reverse pro...
1. Theming in Drupal is tedious and tricky
Hi themer! Here are hundred of thousands of
divs; and the CSS is scattered amon...
Against ...
Hi themer, make a
request to the
service $http('/mydata.json')
in JavaScript in order
to obtain the data.
You ...
2. As an alternative to ESI in pages
delivered by reverse proxies
Given a page, allow that certain areas are
dynamic but k...
AngularJS fetches the data
and renders the header.
Drupal + Varnish
take care of the rest
of the page.
Same header
embedded in a
different site
Assync calls to
different servers:
- Data server
- Server with the
AngularJS app
3. Easier core upgrades
@daniel_jacobson, ex CTO at National Public
Radio (www.npr.org).
Built a backend system which offe...
As long as we
respect the structure
of the APIs
being consumed by
client apps, the
backend can evolve.
AngularJS is an MVC
JavaScript framework
which elegantly
separates controller,
business and model
logic in your
applicatio...
AngularJS basics: directive
A Directive is a marker on a DOM element that tell AngularJS's
HTML compiler to attach a speci...
AngularJS basics (2): controller
A Controller is a JavaScript constructor function that is
used to augment the Angular Sco...
2-way data binding
The view can update the model and the model
can update the view. Out of the box.
LIVE DEMO
http://jsfid...
¿What about JQuery & Backbone?
There is no MVC separation as in AngularJS in
JQuery and Backbone.
They both lack 2-way dat...
Full example: contact form
Source article
Hugs. Questions?
http://about.me/juampy
@juampy72
http://humanbits.es
@e0ipso
Upcoming SlideShare
Loading in …5
×

Drupal & AngularJS - DrupalCamp Spain 2014

1,528 views

Published on

http://2014.drupalcamp.es/drupal-angularjs

Published in: Internet, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,528
On SlideShare
0
From Embeds
0
Number of Embeds
107
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Drupal & AngularJS - DrupalCamp Spain 2014

  1. 1. Drupal & AngularJS DrupalCamp Spain 2014 Juampy Novillo Requena Mateu Aguilo Bosh
  2. 2. About us (@e0ipso & @juampy72) Drupal enthusiasts Developers at Lullabot
  3. 3. Glossary (1) Front end developer / Themer Someone who works in the presentational aspects of a website. Back end developer / Programmer Someone who works in the architecture of a website.
  4. 4. Glossary (2) Decouple tr. separate, disengage, or dissociate (something) from something else. For Drupal: move areas of business logic from Drupal to the client using JavaScript.
  5. 5. <html> … <div id=”the-js-page”></div> … </html> title: “Ooops”, link: “/search”, image: “img.jpg” Raw data sent to the client. Ooops /search Backend: Drupal Client: Browser
  6. 6. ¿Why decoupling? 1. Theming in Drupal is tedious and tricky. 2. As an alternative to ESI in pages delivered by reverse proxies. 3. Easier core upgrades.
  7. 7. 1. Theming in Drupal is tedious and tricky Hi themer! Here are hundred of thousands of divs; and the CSS is scattered among these files. Remember that if you touch core I will rip your head off. Good luck! :-D http://a1.s6img.com/cdn/box_004/post_14/539443_1823194_lz.jpg
  8. 8. Against ... Hi themer, make a request to the service $http('/mydata.json') in JavaScript in order to obtain the data. You can write your own CSS and HTML from scratch. http://www.vote29.com/newmyblog/wp-content/uploads/2012/09/moka-happy-dog3.jpg
  9. 9. 2. As an alternative to ESI in pages delivered by reverse proxies Given a page, allow that certain areas are dynamic but keep the rest been delivered by a reverse proxy like Varnish.
  10. 10. AngularJS fetches the data and renders the header. Drupal + Varnish take care of the rest of the page.
  11. 11. Same header embedded in a different site Assync calls to different servers: - Data server - Server with the AngularJS app
  12. 12. 3. Easier core upgrades @daniel_jacobson, ex CTO at National Public Radio (www.npr.org). Built a backend system which offered an API to several client applications. This backend system has been on for 12 years. http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere
  13. 13. As long as we respect the structure of the APIs being consumed by client apps, the backend can evolve.
  14. 14. AngularJS is an MVC JavaScript framework which elegantly separates controller, business and model logic in your application.
  15. 15. AngularJS basics: directive A Directive is a marker on a DOM element that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element. http://jsfiddle.net/e0ipso/9eXD9/ LIVE DEMO
  16. 16. AngularJS basics (2): controller A Controller is a JavaScript constructor function that is used to augment the Angular Scope. LIVE DEMO http://jsfiddle.net/e0ipso/t2N8b/2/
  17. 17. 2-way data binding The view can update the model and the model can update the view. Out of the box. LIVE DEMO http://jsfiddle.net/e0ipso/PF3cP/1/
  18. 18. ¿What about JQuery & Backbone? There is no MVC separation as in AngularJS in JQuery and Backbone. They both lack 2-way data binding. Example in AngularJS / jQuery / Backbone.
  19. 19. Full example: contact form Source article
  20. 20. Hugs. Questions? http://about.me/juampy @juampy72 http://humanbits.es @e0ipso

×