Headless Drupal

Presentation on headless Drupal given to Drupal414 meetup in Milwaukee on August 21, 2014 and the Madison Drupal Meetup on Nov. 12, 2014.

1. Headless Drupal Madison Drupal Meetup // Nov. 12, 2014
2. Daniel Stout • Madison, WI • Web developer at Great Wolf Resorts, Inc. • https://danielstout.com • @danielrstout
3. What is Headless Drupal? • Front-end: JavaScript application • Backend: Drupal as data engine • Bypasses Drupal theme layer • Uses web services to get data • Possible w/ Drupal 6 & 7, built-in capabilities with Drupal 8
4. Benefits • Needed when using data, not just HTML • Allows for modern MVC JavaScript apps • Easier to maintain, easier to debug • Browser is the dev environment • Easy to deploy • Hiring for front-end? Drupal not required?
5. Client-side explosion • Many frameworks • Too much choice? • # is trending downward • Consolidation around fewer frameworks
6. Evaluating Frameworks • Community support • Organization support ◦ ex: AngularJS & Google • Documentation • API • Performance
7. Backbone.js • Lightweight • Single-page applications • Widely used • Actively developed • RESTful JSON interface
8. AngularJS • Single-page applications • Widely used • Actively developed • Brings the backend to the client-side ◦ Lightweight applications
9. Spine • Great Wolf Resorts’ choice for MVC • A lighter-weight, opinionated Backbone • Single-page apps • Written in CoffeeScript ◦ Syntax similar to Ruby • Popular with Ruby developers • Also: Express framework with Node.js ◦ Minimal framework ◦ Unopinionated / Flexible
10. RESTful JSON • Use web service to pull from Drupal • JSON returned and ingested by JavaScript • Great Wolf’s architecture: ◦ JavaScript app makes AJAX calls ◦ Room rates pulled via Aperture (Java) to Opera Web Services (OWS) ◦ Use .tpl.php only to make Views calls directly to assemble Drupal data
11. Implement it now! • Drupal 8 ◦ Provides core REST module ◦ Web services built-in ◦ Views supports REST export • Drupal 7 ◦ Services module (Kyle Browning @ Acquia) https://www.drupal.org/project/services ◦ RESTWS module (entity-driven, basis for D8) https://www.drupal.org/project/restws
12. Future & Drupal • Data needs will increase • Drupal 8 is well positioned • Hybrid sites work • Static sites still supported • So, more data, less static
13. Demos • https://secure.greatwolf. com/sandusky/reservations#/suites • http://dev-headless-drupal-8.gotpantheon. com/headless/angular/ Github example code: • https://github.com/joshkoenig/headless- drupal-angular
14. Whoa, Nelly! It’s Headless Drupal! https://github.com/davidhwang/horseman