MagMutual.com: On the JAMStack with Gatsby and Drupal 8
0 likes1,699 views
The document discusses Mediacurrent's decoupled approach for the website magmutual.com using technologies like Gatsby, Drupal 8, and serverless architectures to address challenges such as complex legacy systems and performance issues. It highlights the importance of a flexible, user-focused platform that integrates learning resources and enhances user experiences through modern tooling. The session is aimed at developers and IT professionals interested in building resilient, scalable web solutions.
MagMutual.com: On the JAMStack with Gatsby and Drupal 8
- 1. MagMutual On the JAMStack with Gatsby and Drupal 8 July 16, 2020
- 2. Today’s Team Customer Success Gatsby Ben Robertson Bob Kepford Director of Development Mediacurrent
- 4. Who We Are We are drupal pioneers, digital strategy experts, open source advocates, researchers, designers, and innovators who solve technology challenges .
- 5. Our Mission To bring together the most talented team members to improve technology for our clients
- 6. The way to build the web for everyone
- 7. Our Mission To create a better web for everyone, where security, performance, accessibility, and modern tooling are defaults, not afterthoughts.
- 8. 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. | 8 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.
- 9. This Session is For | 9 Developers Marketer IT Professional IT pros interested in building flexible resilient systems that give their teams security and flexibility Marketers looking for more flexibility in UX and branding. Separating their vision for the web from the CMS lifecycle Developers interested in decoupled Drupal, static sites, & the JAM Stack.
- 10. 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 Learning Objectives | 10 Objective 1 Objective 2 Objective 3
- 11. | 11 MagMutual For nearly four decades, MagMutual has been a leading provider of medical professional liability insurance.
- 12. | 12 MagMutual Over 30,000 physicians and healthcare organizations rely on MagMutual.com for learning resources, products, and services covering all aspects of healthcare liability MagMutual
- 13. | 13
- 14. | 14 ● Rebrand ● Future proof ● Improve UX for policyholders ● Speed gains for authenticated and anon users We Listened to Their Needs
- 15. | 15 ● Single source of truth for user data ● Online learning integration ● Progressive learning tracks ● Maintainable and reliable SSO We Listened to Their Needs
- 16. | 16Drupal & Gatsby The Challenge ● Complex Drupal 7 codebase ● Technical debt ● Extensive business logic ● AJAX (Asynchronous JavaScript And XML) based UX ● Data sync between Drupal other systems ● Difficult 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 MagMutual
- 17. | 17 CMS / Drupal Integrations / Drupal Business Logic / Drupal User Data / Drupal Search / Apache Solr IAM (Identity and Access Management) / Drupal SimpleSAML Legacy Architecture Website / Drupal
- 18. | 18 CMS IntegrationsBusiness Logic User Data Search IAM (Identity and Access Management) The Components Website
- 19. | 19 CMS / Drupal Search / Elasticsearch IAM (Identity and Access Management) / Auth0 New Architecture Website / Gatsby User Data / Apollo GraphQL Business Logic, Integrations / Lambda AWS Deployment / Serverless
- 21. | 21
- 22. | 22
- 23. | 23
- 24. | 24
- 25. | 25
- 26. | 26 Insert account dashboard screenshot here
- 27. ● Speed + performance was a big concern on the old site ● Security ● Open Source advantage ● Developer efficiency ● The content mesh! Why Gatsby? | 27 Website: Gatsby
- 28. ● JSON API ● JSON API Extras ● Build Hooks (Netlify) ● Search API ● Paragraphs Drupal 8 is full featured | 28 CMS: A Boring Drupal 8 site
- 29. ● Improved editor UX ● Paragraph previews ● Clean look Wins | 29 Rain Admin
- 30. | 30 Rain Admin
- 31. ● SSO ● Universal login ● Integrations ● Protocols ● Extensibility Features Authentication: Auth0 | 31
- 32. ● Form handlers ● Creating users in Auth0 ● API Access callbacks ● Launching third party services Use cases Server-Side Logic: AWS Lambda | 32
- 33. ● Abstract REST API’s away from the front end ● Unify your APIs ● Normalize data with schemas ● Adapt to changing needs ● Built in documentation Features Apollo GraphQL | 33
- 34. ● Drupal Elasticsearch AWS Connector ● AWS Elasticsearch ● AWS Lambda rate limiting ● Gatsby SearchKit plugin Features & Integrations Search: Elasticsearch | 34
- 35. ● Deployment ● Mocking ● Testing ● Logging ● Local development ● Project structure Features Serverless Framework | 35
- 36. Living with it - Support
- 37. | 37 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 Living with it - Support
- 38. Questions Does something resonate with you today? Get in touch with us. mediacurrent.com/contact-us mediacurrent.com/resources
- 39. | 39| 39 Your Feedback is Valuable!