applied progressive decoupling weather.com, angular, and drupal

59
Applied Progressive Decoupling Weather.com, Angular, and Drupal Matt Davis (Mediacurrent) John Kennedy (Acquia) Preston So (Acquia) April 20, 2016

Upload: acquia

Post on 16-Jan-2017

729 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Applied progressive decoupling  weather.com, angular, and drupal

Applied Progressive DecouplingWeather.com, Angular, and Drupal

Matt Davis (Mediacurrent)John Kennedy (Acquia)Preston So (Acquia)

April 20, 2016

Page 2: Applied progressive decoupling  weather.com, angular, and drupal

Welcome!→ Matt Davis (@im_mr_jmd) is Lead Drupal Architect at

Mediacurrent. He is a longtime Drupal developer and avid outdoorsman living in the mountains of Asheville, North Carolina. Matt has been working with Drupal since 2003 and has been a full-time Drupal developer since 2007.

▪ drupal.org/u/mrjmd▪ [email protected]

Page 3: Applied progressive decoupling  weather.com, angular, and drupal

Welcome!→ John Kennedy (@commercejohn) is Product Manager

for Acquia Lightning, an open-source distribution of Drupal 8, and Program Manager for the Drupal 8 Module Acceleration Program (MAP).

▪ drupal.org/u/johnkennedy▪ [email protected]

Page 4: Applied progressive decoupling  weather.com, angular, and drupal

Welcome!→ Preston So (@prestonso) has designed and

developed websites since 2001 and built them in Drupal since 2007. He is Development Manager of Acquia Labs at Acquia and a frequent speaker on front-end and Drupal development.

▪ drupal.org/u/prestonso▪ [email protected]

Page 5: Applied progressive decoupling  weather.com, angular, and drupal

What we’ll cover→ Risks and rewards of decoupling Drupal→ Why progressively decouple Drupal?→ Weather.com’s Progressively Decoupled Panels→ Framework-agnostic progressive decoupling→ Progressive decoupling in Acquia Lightning→ The future of progressively decoupled Drupal

Page 6: Applied progressive decoupling  weather.com, angular, and drupal

Risks and rewards of decoupling Drupal

Page 7: Applied progressive decoupling  weather.com, angular, and drupal

Decoupled Drupal→ Decoupled Drupal is the process of employing a

different front end from Drupal’s own (most often in a JavaScript or native application framework).

→ This decoupled front end speaks to Drupal via RESTful API, using familiar HTTP methods such as GET, POST, PATCH, and DELETE.

Page 8: Applied progressive decoupling  weather.com, angular, and drupal

Decoupled Drupal→ Using Drupal solely as a data service is not a new

concept; Services in Drupal 6 and 7, restWS, and other modules have enabled RESTful Drupal.

→ Although Drupal can be used to back other primarily back-end applications (Rails, .NET, PHP), it is predominantly used to drive native applications and single-page JavaScript applications.

Page 9: Applied progressive decoupling  weather.com, angular, and drupal

Rendering on the client side→ Single-page JavaScript applications tend to depend

on a universal JavaScript framework, which is capable of being executed on both client and server.

→ Popular examples include Angular, Ember, and React. These frameworks perform client-side rerendering without incurring an additional full page request.

→ Native applications usually have their own systems.

Page 10: Applied progressive decoupling  weather.com, angular, and drupal

Static pages

Subscribe to our newsletter You have been successfully subscribed!

E-mail address

Submit

full-page refresh

Drupal

Drupal front endPHP

Data

Templates

HTML

Drupal

Drupal front end

Data

Templates

HTML

Page 11: Applied progressive decoupling  weather.com, angular, and drupal

Dynamic pages with AJAX

Subscribe to our newsletter

E-mail address

Submit

Drupal

Drupal front endPHP

Data

Templates

HTML

Subscribe to our newsletter

Success!

E-mail address

Submit

Subscribe to our newsletter

E-mail address

Submit

AJAX request

AJAX response

Page 12: Applied progressive decoupling  weather.com, angular, and drupal

Dynamic pages with rerendering

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

Page 13: Applied progressive decoupling  weather.com, angular, and drupal

Decoupled Drupal

Drupal

Drupal front end

PHP

Data

Templates

HTML

Drupal

Decoupled front end

PHP

Data

Templates

HTML

Other language

JSONREST API

Page 14: Applied progressive decoupling  weather.com, angular, and drupal

Decoupled Drupal

Drupal

Native Android application

PHP

Data

Templates

App code

Java

JSON

Drupal

Single-page application(universal JavaScript)

PHP

Data

Templates

HTML

JS

JSONREST API REST API

Page 15: Applied progressive decoupling  weather.com, angular, and drupal

Decoupled Drupal

Silex application

Data

Templates

HTML or app code

JSON

Drupal

Native iOS application

PHP

Obj-C PHP

REST API

Page 16: Applied progressive decoupling  weather.com, angular, and drupal

Rewards of 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)

Page 17: Applied progressive decoupling  weather.com, angular, and drupal

Risks of decoupling Drupal→ Additional point of failure (REST API, other hosting)→ No cross-site scripting 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

Page 18: Applied progressive decoupling  weather.com, angular, and drupal

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

Page 19: Applied progressive decoupling  weather.com, angular, and drupal

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.

Page 20: Applied progressive decoupling  weather.com, angular, and drupal

Why progressivelydecouple Drupal?

Page 21: Applied progressive decoupling  weather.com, angular, and drupal

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

Page 22: Applied progressive decoupling  weather.com, angular, and drupal

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

Page 23: Applied progressive decoupling  weather.com, angular, and drupal

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

Page 24: Applied progressive decoupling  weather.com, angular, and drupal

Risks of decoupling 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

Page 25: Applied progressive decoupling  weather.com, angular, and drupal

Rewards of progressive decoupling→ No additional point of failure (REST API, other hosting)→ Cross-site scripting protection and input sanitization→ In-place, in-context editing or 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

Page 26: Applied progressive decoupling  weather.com, angular, and drupal

No additional point of failure→ You will likely need to find an additional place to host

a fully decoupled application. If the REST API fails to give a response, then your application will lack the data it needs.

→ Reserving client-side rendering responsibilities for JavaScript means that Drupal’s server-side output and JavaScript framework can be at the same origin.

Page 27: Applied progressive decoupling  weather.com, angular, and drupal

Security and input sanitization→ Drupal provides extensive protection against cross-

site scripting and cross-site request forgery.

→ Drupal also provides built-in input sanitization on forms submitted to Drupal. Most JavaScript frameworks have their own input sanitization systems.

Page 28: Applied progressive decoupling  weather.com, angular, and drupal

In-place, in-context administration→ Do your editors need Toolbar, Contextual Links, or

Quick Edit?

→ Ensure that your client is aware of what administrative capabilities they could lose when these tools are unavailable in a fully decoupled environment.

Page 29: Applied progressive decoupling  weather.com, angular, and drupal

Layout and display management→ Does your application need Panels (IPE, Panelizer,

Page Manager) or block placement?

→ Interpolating JavaScript framework components into existing Drupal front-end elements means the retention of layout management benefits.

→ Option for fully decoupled: RESTful Panels module (encodes Panels configuration as JSON)

Page 30: Applied progressive decoupling  weather.com, angular, and drupal

Previewable content workflow→ How will your decoupled application handle preview

of unpublished or moderated content?

→ By definition, embargoed content cannot be publicly accessible, but your marketers will want to preview it.

→ Drupal already is adept at content workflow and preview, thus limiting the overhead of customizing your REST API to include unpublished content.

Page 31: Applied progressive decoupling  weather.com, angular, and drupal

Modules affecting the front end→ Many modules provide forms or other front-end

elements as part of their functionality, which fully decoupled applications have no access to.

→ Rather than adding overhead to custom REST API development, progressive decoupling ensures continued access to front-end components of modules.

Page 32: Applied progressive decoupling  weather.com, angular, and drupal

System notifications→ Many editors rely on contextualized system errors as

part of their everyday workflow.

→ Fully decoupled applications are unable to easily consume Drupal’s built-in system notifications.

Page 33: Applied progressive decoupling  weather.com, angular, and drupal

BigPipe and cache tags→ BigPipe enables progressive loads of pages based on

the cacheability of a page’s component, thus abbreviating time to first paint.

→ This cacheability is declared in cache tags, which describe dependencies on data managed by Drupal and allow for cache invalidation of items that rely on granular content contained therein.

Page 34: Applied progressive decoupling  weather.com, angular, and drupal

Accessible markup and UX benefits→ How will your decoupled application handle preview

of unpublished or moderated content?

→ By definition, embargoed content cannot be publicly accessible, but your marketers will want to preview it.

→ Drupal already is adept at content workflow and preview, thus limiting the overhead of customizing your REST API to include unpublished content.

Page 35: Applied progressive decoupling  weather.com, angular, and drupal

Case study: Weather.com→ Weather.com has been progressively decoupling

Drupal using interactive Angular components for years using Progressively Decoupled Panels.

→ Further background: https://www.youtube.com/watch?v=ehsX6_9TgYc; http://www.mediacurrent.com/blog/migrating-weathercom-drupal-presentation-framework

Page 36: Applied progressive decoupling  weather.com, angular, and drupal

Case study: Weather.com

Subscribe

E-mail

Submit

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Success! Here are others that might interest you:

Lorem ipsum dolor sit amet, consectetuer adipiscing.

editor manipulates page layout

Subscribe

E-mail

Submit

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Success! Here are others that might interest you:

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Page 37: Applied progressive decoupling  weather.com, angular, and drupal

Case study: Weather.com

Angular client-side rendered output

Drupal server-side rendered output

editor manipulates page layout

Angular client-side rendered output

Drupal server-side rendered output

Page 38: Applied progressive decoupling  weather.com, angular, and drupal

Weather.com’sProgressively Decoupled Panels

Page 39: Applied progressive decoupling  weather.com, angular, and drupal

Weather.com before Drupal→ 144 origin servers in three data centers

→ 50 million page views per day, half going to origin

→ Forecasts for over 2.9 million locations

→ Hundreds of dynamic weather maps

Page 40: Applied progressive decoupling  weather.com, angular, and drupal

Weather.com major considerations→ Performance and caching

→ Front-end developer team

→ Editorial team

Page 41: Applied progressive decoupling  weather.com, angular, and drupal

Performance and caching→ Split page up into wrapper and panes

→ Same wrapper from origin to everyone

→ Edge computations using ESI

→ Client-side rendering using Angular

Page 42: Applied progressive decoupling  weather.com, angular, and drupal

Front-end developers→ JavaScript developers want to write JavaScript

→ Don’t want to learn Drupal APIs

→ Want to keep up with rapidly evolving ecosystem

Page 43: Applied progressive decoupling  weather.com, angular, and drupal

Editorial team→ Want intuitive ways to create pages

→ Want to work independently

→ Want to create new content and pages without developer involvement

Page 44: Applied progressive decoupling  weather.com, angular, and drupal

Presentation Framework→ Mechanism for putting components onto pages

→ Supports Angular, PHP and static templates

→ Modules served by Drupal or ESI

Page 45: Applied progressive decoupling  weather.com, angular, and drupal

Why Panels?→ Variants and selection rules

→ Reusable and exportable panes

→ Context

→ Drag-and-drop interface

Page 46: Applied progressive decoupling  weather.com, angular, and drupal

Framework-agnostic progressive decoupling

Page 47: Applied progressive decoupling  weather.com, angular, and drupal

Wunderground.com→ Why not use Angular 2?

→ Rebuilding the foundation under the forty-story building

→ Refactoring opens the door to other frameworks as well

Page 48: Applied progressive decoupling  weather.com, angular, and drupal

Goals of framework agnosticism→ Give JavaScript developers flexibility

→ Keep some guard rails in place

→ Preserve strong editorial experience

Page 49: Applied progressive decoupling  weather.com, angular, and drupal

Where is TWC headed?→ Per variant presentation choice

→ Increased experimentation and innovation

Page 50: Applied progressive decoupling  weather.com, angular, and drupal

Progressive decoupling in Drupal 8→ Decoupled Blocks module in development

→ Built on top of blocks

→ Already supports Angular 2 and React, more coming

Page 51: Applied progressive decoupling  weather.com, angular, and drupal

Progressive decoupling in Acquia Lightning

Page 52: Applied progressive decoupling  weather.com, angular, and drupal

Lightning and progressive decoupling→ Current approach

→ Our plans for progressive decoupling integration

→ JavaScript application assembly

Page 53: Applied progressive decoupling  weather.com, angular, and drupal

Current approach→ Utilize Decoupled Blocks module

→ Share standards with JavaScript developers

→ Train authors

Page 54: Applied progressive decoupling  weather.com, angular, and drupal

Our plans for progressive decoupling→ Development sprint next week→ Lightning integration by 1.2→ Panels enhancement→ Component configuration standards→ Component communication standards

Page 55: Applied progressive decoupling  weather.com, angular, and drupal

JavaScript application assembly→ Advantages:

▪ Advanced content management• Layout• Preview

▪ Facilitates large teams▪ Maintenance and security

→ Disadvantages:▪ No server-side JavaScript processing▪ Two-step component publishing process

Page 56: Applied progressive decoupling  weather.com, angular, and drupal

The future of progressively decoupled Drupal

Page 57: Applied progressive decoupling  weather.com, angular, and drupal

Dynamic sites and app-like experiences

→ Future features:▪ Socket.io integration▪ Node.js server-side JavaScript processing▪ Component templates▪ JavaScript framework integration into Drupal core▪ Native compilation

Page 58: Applied progressive decoupling  weather.com, angular, and drupal

Dynamic sites and app-like experiences

→ Future use-cases:▪ Commerce integrations▪ Customer self-service portals▪ Live content streams

Page 59: Applied progressive decoupling  weather.com, angular, and drupal

Thank you!Matt Davis (@im_mr_jmd)drupal.org/u/[email protected]

John Kennedy (@commercejohn)drupal.org/u/[email protected]

Preston So (@prestonso)drupal.org/u/[email protected]