Drupal & AngularJS - DrupalCamp Spain 2014
1 like1,832 views
This document discusses decoupling Drupal from AngularJS by moving business logic from Drupal to the client using JavaScript. It provides reasons for decoupling, including that theming in Drupal can be tedious and tricky, it serves as an alternative to Edge Side Includes (ESI) delivered by reverse proxies, and it allows for easier Drupal core upgrades. Key aspects of AngularJS like directives, controllers, and two-way data binding are demonstrated. AngularJS is presented as a good option for decoupling due to its model-view-controller separation and built-in data binding, unlike jQuery and Backbone which lack these features.
![[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://cdn.slidesharecdn.com/ss_thumbnails/srijanwednesdaywebinars-angularjs-141001063445-phpapp02-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to Drupal & AngularJS - DrupalCamp Spain 2014 (20)
More from Juampy NR (12)
Recently uploaded (19)
Drupal & AngularJS - DrupalCamp Spain 2014
- 1. Drupal & AngularJS DrupalCamp Spain 2014 Juampy Novillo Requena Mateu Aguilo Bosh
- 2. About us (@e0ipso & @juampy72) Drupal enthusiasts Developers at Lullabot
- 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. 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. <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. ¿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. 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. 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. 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. AngularJS fetches the data and renders the header. Drupal + Varnish take care of the rest of the page.
- 11. Same header embedded in a different site Assync calls to different servers: - Data server - Server with the AngularJS app
- 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. As long as we respect the structure of the APIs being consumed by client apps, the backend can evolve.
- 14. AngularJS is an MVC JavaScript framework which elegantly separates controller, business and model logic in your application.
- 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. 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. 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. ¿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. Full example: contact form Source article