Successfully reported this slideshow.
Your SlideShare is downloading. ×

Aaron Carlino: Head lessons - virtual stripecon 2021

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 47 Ad
Advertisement

More Related Content

Similar to Aaron Carlino: Head lessons - virtual stripecon 2021 (20)

Advertisement

Aaron Carlino: Head lessons - virtual stripecon 2021

  1. 1. HEAD-LESSONS How you can benefit from Silverstripe’s investment in headless architecture.
  2. 2. AARON CARLINO Principal Product Developer, Silverstripe Ltd. 4 YEARS At Silverstripe 15 YEARS In the community 1,982 Modules created 2-3 Modules that actually work
  3. 3. SOUNDS FAMILIAR... $ $ $ $ “How to build headless apps with Silverstripe” 2017 2020 2021 “How to build headless apps with Silverstripe” “How to build headless apps with Silverstripe”
  4. 4. WHY HEADLESS?
  5. 5. 😁😁 😁
  6. 6. !!!
  7. 7. We’re talking about websites, here.
  8. 8. WHY HEADLESS? ● Guarantee data sovereignty ● More secure ● Better performance ● Low hosting costs ● Component-based design ● Choose best-of-breed services
  9. 9. WHY HEADLESS? ● Guarantee data sovereignty ● More secure ● Better performance ● Low hosting costs ● Component-based design ● Choose best-of-breed services
  10. 10. WHY HEADLESS? ● Guarantee data sovereignty ● More secure ● Better performance ● Low hosting costs ● Component-based design ● Choose best-of-breed services
  11. 11. WHY HEADLESS? ● Guarantee data sovereignty ● More secure ● Better performance ● Low hosting costs ● Component-based design ● Choose best-of-breed services
  12. 12. WHY HEADLESS? ● Guarantee data sovereignty ● More secure ● Better performance ● Low hosting costs ● Component-based design ● Choose best-of-breed services
  13. 13. WHY HEADLESS? ● Guarantee data sovereignty ● More secure ● Better performance ● Low hosting costs ● Component-based design ● Choose best-of-breed services
  14. 14. WHY HEADLESS? ● Guarantee data sovereignty ● More secure ● Better performance ● Low hosting costs ● Component-based design ● Choose best-of-breed services
  15. 15. HOW HEADLESS?
  16. 16. SILVERSTRIPE/GRAPHQL 4.0 ● Exponential performance improvements ● Better developer ergonomics ● Supported the 4.9 release ● 3.0 likely dropped in 4.10.
  17. 17. VALUE PROPOSITION A framework for building websites with React. APPROACH Static by default, dynamic by opt-in BUILD TIME MITIGATION Incremental static builds DESIGN Highly opinionated LEARNING CURVE Steep VALUE PROPOSITION A framework for building websites with React. APPROACH Dynamic by default, static by opt-in BUILD TIME MITIGATION Partial static builds DESIGN Minimally opinionated LEARNING CURVE Moderate
  18. 18. FINDINGS ☑ GOOD: It does what it says on the tin. ❌ NOT-SO-GOOD: It does... what it says on the tin.
  19. 19. BUILDING BLOCKED 15s 1m 15s 8m PREVIEW INCREMENTAL BUILD FULL BUILD * 1,500 pages, Gatsby Cloud + Netlify
  20. 20. PAIN IN THE ASSETS 8GB 70th PERCENTILE * 2.5 GB if you exclude the memes
  21. 21. PLUG-IN PRAY
  22. 22. OUTCOMES ● Better understanding of build times ● POC for previews (with and without Gatbsy Cloud) ● Open source contributions: ○ silverstripe-gatsby ○ gatsby-source-silverstripe ○ gatsby-silverstripe-starter
  23. 23. OUTCOMES ● Better understanding of build times ● POC for previews (with and without Gatbsy Cloud) ● Open source contributions: ○ silverstripe-gatsby ○ satsby-source-silverstripe ○ gatsby-silverstripe-starter
  24. 24. FINDINGS GOOD: Developer experience ● Familiar paradigm ● GraphQL 4 can shine ● Previews are built in ● Design-your-own build time
  25. 25. FINDINGS ❌ NOT-SO-GOOD: ● Hosting requirements ● Non-atomic deployments ● CMS-hosted assets
  26. 26. TECHNICAL CHALLENGES ● Delegating route authority to the CMS ● Automatic template selection ● Automatic query execution ● Persisting state ● Customising the static build ● Content blocks + GraphQL
  27. 27. TECHNICAL CHALLENGES ● Delegating route authority to the CMS ● Automatic template selection ● Automatic query execution ● Persisting state ● Customising the static build ● Content blocks + GraphQL
  28. 28. STARTER KIT
  29. 29. WHAT’S INSIDE ● Automatic template selection ● Automatic query selection ● Bulk query adapter ● Static queries ● Navigation helpers ● Embedded HTML component ● Dynamic imports ● GraphQL schema type definitions ● Scaffold pages / blocks ● Setup script ● Preview ● Static build configuration ● Deployment notifications (Netlify)
  30. 30. AUTOMATIC TEMPLATE / QUERY SELECTION
  31. 31. AUTOMATIC TEMPLATE / QUERY SELECTION
  32. 32. BULK QUERY ADAPTER
  33. 33. STATIC QUERIES
  34. 34. NAVIGATION HELPERS
  35. 35. NAVIGATION HELPERS
  36. 36. NAVIGATION HELPERS
  37. 37. EMBEDDED HTML
  38. 38. DYNAMIC IMPORTS
  39. 39. GRAPHQL SCHEMA BINDINGS
  40. 40. SCAFFOLD PAGES / BLOCKS
  41. 41. SETUP SCRIPT
  42. 42. PREVIEW
  43. 43. STATIC BUILD CONFIGURATION
  44. 44. DEMO?!
  45. 45. Thank you!

×