Downloaded 10 times
Uploaded byJuampy NR
Drupal & AngularJS - DrupalCamp Spain 2014
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.
More Related Content
![[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://cdn.slidesharecdn.com/ss_thumbnails/srijanwednesdaywebinars-angularjs-141001063445-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Drupal & AngularJS - DrupalCamp Spain 2014
Drupal & AngularJS - DrupalCamp Spain 2014
- 1. Drupal & AngularJS DrupalCampSpain 2014 Juampy Novillo Requena Mateu Aguilo Bosh
- 2. About us (@e0ipso& @juampy72) Drupal enthusiasts Developers at Lullabot
- 3. Glossary (1) Front enddeveloper / 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. Themingin Drupal is tedious and tricky. 2. As an alternative to ESI in pages delivered by reverse proxies. 3. Easier core upgrades.
- 7. 1. Theming inDrupal 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 analternative 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 thedata and renders the header. Drupal + Varnish take care of the rest of the page.
- 11. Same header embedded ina different site Assync calls to different servers: - Data server - Server with the AngularJS app
- 12. 3. Easier coreupgrades @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 aswe respect the structure of the APIs being consumed by client apps, the backend can evolve.
- 14. AngularJS is anMVC JavaScript framework which elegantly separates controller, business and model logic in your application.
- 15. AngularJS basics: directive ADirective 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 Theview 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: contactform Source article
- 20.