MagMutual.com: On the JAMStack with Gatsby and Drupal 8

MagMutual On the JAMStack with Gatsby and Drupal 8 July 16, 2020

Today’s Team Ben Robertson Customer Success Gatsby Bob Kepford Director of Development Mediacurrent

Mediacurrent: Open Source Expansion Partner

Who We Are We are drupal pioneers, digital strategy experts, open source advocates, researchers, designers, and innovators who solve technology challenges .

Our Mission To bring together the most talented team members to improve technology for our clients

The way to build the web for everyone

Our Mission To create a better web for everyone, where security, performance, accessibility, and modern tooling are defaults, not afterthoughts.

Decoupled architectures can be a great approach for sites that require functionality beyond what Drupal normally supports. When you decouple, you have the opportunity to choose the best tool for individual technical requirements. This session will be an inside look at our decoupled approach for MagMutual.com: combining open-source frameworks like Gatsby, Drupal 8, and Serverless, as well as third-party services for user management, a learning management system, and private APIs to build a robust custom platform. |8

This Session is For Developers Developers interested in decoupled Drupal, static sites, & the JAM Stack. Marketer Marketers looking for more flexibility in UX and branding. Separating their vision for the web from the CMS lifecycle IT Professional IT pros interested in building flexible resilient systems that give their teams security and flexibility |9

Learning Objectives Objective 1 Objective 2 Objective 3 Breaking complex problems into smaller more discrete components Drupal 8 as your content hub using JSON API and search API with Elasticsearch GatsbyJS with authentication, search, and a mix of static and dynamic content | 10

MagMutual For nearly four decades, MagMutual has been a leading provider of medical professional liability insurance. | 11

MagMutual MagMutual Over 30,000 physicians and healthcare organizations rely on MagMutual.com for learning resources, products, and services covering all aspects of healthcare liability | 12

| 13

We Listened to Their Needs ● ● ● ● Rebrand Future proof Improve UX for policyholders Speed gains for authenticated and anon users | 14

We Listened to Their Needs ● ● ● ● Single source of truth for user data Online learning integration Progressive learning tracks Maintainable and reliable SSO | 15

MagMutual The Challenge ● Complex Drupal 7 codebase ● Technical debt ● Extensive business logic ● AJAX (Asynchronous JavaScript And XML) based UX ● Data sync between Drupal other systems ● Diﬃcult to understand code base ● Brittle and error prone custom D7 modules ● Drupal as authentication provider The Solution ● Reviewing Architecture ● Volatility based decomposition ● Separation of concerns ● Using the right tools for each component of the system Drupal & Gatsby | 16

Legacy Architecture CMS / Drupal User Data / Drupal Website / Drupal Search / Apache Solr Business Logic / Drupal Integrations / Drupal IAM (Identity and Access Management) / Drupal SimpleSAML | 17

The Components CMS User Data Website Search Business Logic Integrations IAM (Identity and Access Management) | 18

New Architecture CMS / Drupal Website / Gatsby User Data / Apollo GraphQL AWS Deployment / Serverless Search / Elasticsearch Business Logic, Integrations / Lambda IAM (Identity and Access Management) / Auth0 | 19

Before After | 20

| 21

| 22

| 23

| 24

| 25

Insert account dashboard screenshot here | 26

Website: Gatsby Why Gatsby? ● ● ● ● ● Speed + performance was a big concern on the old site Security Open Source advantage Developer eﬃciency The content mesh! | 27

CMS: A Boring Drupal 8 site Drupal 8 is full featured ● ● ● ● ● JSON API JSON API Extras Build Hooks (Netlify) Search API Paragraphs | 28

Rain Admin Wins ● ● ● Improved editor UX Paragraph previews Clean look | 29

Rain Admin | 30

Authentication: Auth0 Features ● ● ● ● ● SSO Universal login Integrations Protocols Extensibility | 31

Server-Side Logic: AWS Lambda Use cases ● ● ● ● Form handlers Creating users in Auth0 API Access callbacks Launching third party services | 32

Apollo GraphQL Features ● ● ● ● ● Abstract REST API’s away from the front end Unify your APIs Normalize data with schemas Adapt to changing needs Built in documentation | 33

Search: Elasticsearch Features & Integrations ● ● ● ● Drupal Elasticsearch AWS Connector AWS Elasticsearch AWS Lambda rate limiting Gatsby SearchKit plugin | 34

Serverless Framework Features ● ● ● ● ● ● Deployment Mocking Testing Logging Local development Project structure | 35

Living with it - Support

Living with it - Support The Cons ● More things to support ● More to know ● Harder to debug integration points ● Onboarding The Pros ● Less bugs ● Focus on new features ● Drupal and Gatsby are simple to maintain ● Apollo GraphQL is a huge win ● Improved performance ● Less time to market with new features ● Added another authentication provider with little effort ● Adding new design assets is faster and easier | 37

Questions Does something resonate with you today? Get in touch with us. mediacurrent.com/contact-us mediacurrent.com/resources

Your Feedback is Valuable! | 39

Thank you! Mediacurrent.com Mediacurrent @Mediacurrent @Mediacurrent @Mediacurrent MediacurrentDrupal

MagMutual On the JAMStack with Gatsby and Drupal 8 July 16, 2020