Across the spectrum different approaches to progressively decoupled drupal (acquia webinar) (1)
2 likes678 views
The document discusses progressive decoupling in Drupal, highlighting the benefits and risks associated with both fully decoupled and progressively decoupled architectures. It emphasizes the importance of balancing front-end interactivity with back-end control while addressing the development practices that differ between Drupal and JavaScript frameworks. The presentation includes case studies, such as Weather.com and Acquia Cloud, to illustrate these concepts.
Across the spectrum different approaches to progressively decoupled drupal (acquia webinar) (1)
- 1. ©2016 Acquia Inc. — Confidential and Proprietary Across the Spectrum Different Approaches to Progressively Decoupled Drupal Preston So Development Manager, Acquia Labs October 20, 2016
- 2. ©2016 Acquia Inc. Welcome! Preston So (@prestonso) is Development Manager of Acquia Labs. He has been a web developer and designer since 2001, a creative professional since 2004, and a Drupal developer since 2007. Previously, he led the Entertainment Weekly development team at Time Inc., co-founded the Southern Colorado Drupal User Group (est. 2008), and operated an award-winning web and print design studio. Most recently, Preston delivered keynotes at DrupalCamp Connecticut 2016 and, in Portuguese, at DrupalCamp Campinas 2016 in Brazil. – drupal.org/u/prestonso – preston.so@acquia.com
- 3. ©2016 Acquia Inc. What we’ll cover – The JavaScript renaissance – Why progressively decouple Drupal? – The spectrum of progressive decoupling – Decoupled Blocks and weather.com – Progressive decoupling on rich artist websites – Progressive decoupling in Acquia products – The future of progressively decoupled Drupal
- 4. ©2016 Acquia Inc. The JavaScript renaissance
- 5. Static pages Subscribe to our newsletter You have been successfully subscribed! E-mail address Submit full-page refresh Drupal Drupal front end PHP Data Templates HTML Drupal Drupal front end Data Templates HTML
- 6. Dynamic pages with Ajax Subscribe to our newsletter E-mail address Submit Drupal Drupal front end PHP Data Templates HTML Subscribe to our newsletter Success! E-mail address Submit Subscribe to our newsletter E-mail address Submit AJAX request AJAX response
- 7. Dynamic pages with client-side rendering Subscribe E-mail Submit HTTP request HTTP response Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Success! Here are others that might interest you: Lorem ipsum dolor sit amet, consectetuer adipiscing. Drupal Decoupled front end REST API
- 8. ©2016 Acquia Inc. Rewards of fully decoupled Drupal – Separation of concerns (structure vs. presentation) – Content syndication (write once, publish everywhere) – Differentiated development velocities between front and back end (independent front-end redesigns) – Rich application ecosystem (auxiliary applications such as SPAs, native mobile, and IoT)
- 9. ©2016 Acquia Inc. Risks of fully decoupled Drupal – Additional point of failure (REST API, other hosting) – No cross-site scripting protection or input sanitization – No in-place, in-context editing or administration – No layout and display management – No previewable content workflow – No modules affecting the front end – No system notifications (errors, messages) – No BigPipe progressive loading or cache tags – No accessible markup or user experience benefits
- 10. ©2016 Acquia Inc. When should you decouple Drupal? – A site powering one or more other sites – A site powering one or more other applications – A site powering multiple sites or applications – Standalone applications – Standalone sites
- 11. ©2016 Acquia Inc. For standalone sites and apps … – You don’t need the overhead of a decoupled architecture to power a standalone site or application. – Doing so can lead to workarounds that duplicate, interrupt, or otherwise obfuscate the integrity of end-to-end Drupal. – There is a better solution: progressive decoupling.
- 12. ©2016 Acquia Inc. Why progressively decouple Drupal?
- 13. Fully decoupled Drupal Subscribe E-mail Submit HTTP request HTTP response Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Success! Here are others that might interest you: Lorem ipsum dolor sit amet, consectetuer adipiscing. Drupal JavaScript framework REST API
- 14. Fully decoupled Drupal Subscribe E-mail Submit HTTP request HTTP response Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Success! Here are others that might interest you: Lorem ipsum dolor sit amet, consectetuer adipiscing. Drupal JavaScript framework REST API
- 15. Progressively decoupled Drupal Subscribe E-mail Submit HTTP request HTTP response Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Success! Here are others that might interest you: Lorem ipsum dolor sit amet, consectetuer adipiscing. Drupal REST API Drupal front end JS framework
- 16. ©2016 Acquia Inc. Risks of fully decoupled Drupal – Additional point of failure (REST API, other hosting) – No cross-site scripting protection or input sanitization – No in-place, in-context editing or administration – No layout and display management – No previewable content workflow – No modules affecting the front end – No system notifications (errors, messages) – No BigPipe progressive loading or cache tags – No accessible markup or user experience benefits
- 17. ©2016 Acquia Inc. Rewards of progressively decoupled Drupal – No additional point of failure (REST API, other hosting) – Cross-site scripting protection and input sanitization – In-place, in-context editing and administration – Layout and display management – Previewable content workflow – Modules affecting the front end – System notifications (errors, messages) – BigPipe progressive loading and cache tags – Accessible markup and user experience benefits
- 18. ©2016 Acquia Inc. The spectrum of progressive decoupling
- 19. ©2016 Acquia Inc. — Confidential and Proprietary The spectrum of progressive decoupling
- 20. ©2016 Acquia Inc. — Confidential and Proprietary The spectrum of progressive decoupling Extent of page controlled by JavaScriptLess More Drupal- (PHP-) controlled JavaScript-controlled weather.com Interactivity scoped to blocks; Drupal controls layout Rich artist sites Main content handed over to JS; Drupal provides static routes and initial output Acquia Cloud UI Entire page body handed over to JS; Drupal provides initial state on page load
- 21. ©2016 Acquia Inc. — Confidential and Proprietary The spectrum of progressive decoupling Extent of page controlled by JavaScriptLess More Drupal- (PHP-) controlled JavaScript-controlled weather.com Interactivity scoped to blocks; Drupal controls layout Header Footer Rich artist sites Main content handed over to JS; Drupal provides static routes and initial output Page body Acquia Cloud UI Entire page body handed over to JS; Drupal provides initial state on page load Block Block Block Main content
- 22. ©2016 Acquia Inc. Decoupled Blocks and weather.com
- 23. ©2016 Acquia Inc. weather.com – At weather.com, the requirement for a contiguous Drupal architecture that preserves full administrative control over page appearance is paramount. – But weather.com felt limited in terms of building interactive widgets like forecast previews interspersed within the overall content experience.
- 24. ©2016 Acquia Inc. weather.com personas – Site builders needed to manage the page layout and structure without the aid of a developer. – Front-end developers needed an intuitive framework to build interactive experiences into a Drupal-rendered page.
- 25. ©2016 Acquia Inc. Presentation Framework – Presentation Framework is a Drupal 7 module which integrates Panels panes seamlessly with Angular 1 application components so they can be manipulated by site builders. – But Presentation Framework is tightly coupled to Angular 1 and is not generalized for all frameworks. – https://events.drupal.org/losangeles2015/sessions/weath ercom-novel-presentation-framework
- 26. ©2016 Acquia Inc. Decoupled Blocks – Decoupled Blocks is a Drupal 8 module which uses the new block-based version of Panels in Drupal 8. – It’s a framework-agnostic module which allows JavaScript components to render their components into blocks. – Acquia and Mediacurrent recently sponsored a collaborative sprint with the Lightning team. – https://drupal.org/project/pdb
- 27. ©2016 Acquia Inc. Decoupled Blocks – Decoupled Blocks forges an equilibrium between the site builders manipulating layouts and front-end developers manipulating page behavior.
- 28. ©2016 Acquia Inc. Progressive decoupling on rich artist websites
- 29. ©2016 Acquia Inc. Rich artist websites – A large music company’s approach hands over control of the main page content (between header and footer) to a JavaScript framework. – This approach focuses less on the need to control layout and more on the need to provide application-like interactivity.
- 30. ©2016 Acquia Inc. Benefits – Client-side routing enables an application shell-like experience. The header and footer are static, but Angular manages client-side traversal across routes. – No full-page refreshes occur because the client-side routing allows the header and footer to remain persistent; only relevant portions of the page rerender.
- 31. ©2016 Acquia Inc. Benefits – Drupal routes are a superset of Angular routes such that even if an Angular route is not provided, Drupal can take over as a default fallback. Drupal and Angular exchange routing responsibility. – Unbridled front-end development is possible because this approach frees JavaScript developers to build remarkably interactive pages while leaving intact core Drupal elements as a foundation.
- 32. ©2016 Acquia Inc. Progressive decoupling in Acquia products
- 33. ©2016 Acquia Inc. Acquia Cloud – Acquia Cloud is a fully managed LAMP stack that is optimized for Drupal sites and provides developer tools for managing, monitoring, and deploying websites. – The new Acquia Cloud user interface is a progressively decoupled Angular application on the front end.
- 34. Acquia Cloud UI team → N2 • Irek Mirgaleev Boston • Dmitrii Varvashenia Belarus • Stas Mihnovich Belarus → QA • Nick DelRossi Boston → N3 API • Owen Loy Portland • Kris Olafson PEI • Mark Trapp Portland • Vlad Pavlovic Windsor → N3 UI • Michael Pezzi Toronto • Chris Carignan Kitchener → UX / Elemental CSS • Al Steffen Boston • Erik Baldwin Portland
- 35. ©2016 Acquia Inc. Drupal usage – User authentication – Initial page load – JavaScript libraries – Drupal.settings – CSS-only Drupal theme – Translations – API proxy
- 36. Acquia Cloud UI architecture Angular front end (rendered into Drupal) Drupal (API proxy) Acquia Cloud API (hosting infrastructure) Page load API requests API requests
- 37. ©2016 Acquia Inc. Drupal.settings – Contains all data necessary on initial page load – Contains all translatable strings normally accessible via Drupal.t() but made available to Angular’s translate directive/service.
- 38. ©2016 Acquia Inc. Acquia Lift – Progressively decoupled Ember application – Interacts with the DOM on a static Drupal (or other) page
- 39. ©2016 Acquia Inc. The future of progressively decoupled Drupal
- 40. ©2016 Acquia Inc. — Confidential and Proprietary The spectrum of progressive decoupling Extent of page controlled by JavaScriptLess More Drupal- (PHP-) controlled JavaScript-controlled weather.com Interactivity scoped to blocks; Drupal controls layout Rich artist sites Main content handed over to JS; Drupal provides static routes and initial output Acquia Cloud UI Entire page body handed over to JS; Drupal provides initial state on page load
- 41. ©2016 Acquia Inc. — Confidential and Proprietary The spectrum of progressive decoupling Extent of page controlled by JavaScriptLess More Drupal- (PHP-) controlled JavaScript-controlled weather.com Interactivity scoped to blocks; Drupal controls layout Header Footer Rich artist sites Main content handed over to JS; Drupal provides static routes and initial output Page body Acquia Cloud UI Entire page body handed over to JS; Drupal provides initial state on page load Block Block Block Main content
- 42. ©2016 Acquia Inc. Concerns – Development practices differ wildly between Drupal and JavaScript frameworks, which presume that front-end developers wield full control over layout and structure. – The current lack of harmony between Drupal’s own systems and APIs and those found JavaScript frameworks compounds the gap between the two.
- 43. ©2016 Acquia Inc. Areas of concern – Templating – Rendering – Routing
- 44. ©2016 Acquia Inc. Food for thought – Is progressively decoupled Drupal a means to an end? – What about server-side JavaScript rendering? – Does progressive decoupling achieve the right equilibrium between editorial concerns and an optimal front-end developer experience? – Why (or why not) is full decoupling a better solution in certain use cases? – What about Drupal-aware full decoupling?
- 45. ©2016 Acquia Inc. Special thanks – Jeremy Kutner – Arun Manoharan – Matt Davis – Mike Pezzi – Chris Carignan
- 46. ©2016 Acquia Inc. Thank you! Preston So (@prestonso) drupal.org/u/prestonso preston.so@acquia.com Learn more about Acquia Labs: acquia.com/resources/acquia-labs