1. HEAD-LESSONS
How you can benefit from Silverstripe’s investment in
headless architecture.

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. 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. WHY HEADLESS?

6. 😁😁
😁

7. !!!

8. We’re talking about
websites, here.

9. WHY HEADLESS?
● Guarantee data sovereignty
● More secure
● Better performance
● Low hosting costs
● Component-based design
● Choose best-of-breed services

10. WHY HEADLESS?
● Guarantee data sovereignty
● More secure
● Better performance
● Low hosting costs
● Component-based design
● Choose best-of-breed services

11. WHY HEADLESS?
● Guarantee data sovereignty
● More secure
● Better performance
● Low hosting costs
● Component-based design
● Choose best-of-breed services

12. WHY HEADLESS?
● Guarantee data sovereignty
● More secure
● Better performance
● Low hosting costs
● Component-based design
● Choose best-of-breed services

13. WHY HEADLESS?
● Guarantee data sovereignty
● More secure
● Better performance
● Low hosting costs
● Component-based design
● Choose best-of-breed services

14. WHY HEADLESS?
● Guarantee data sovereignty
● More secure
● Better performance
● Low hosting costs
● Component-based design
● Choose best-of-breed services

15. WHY HEADLESS?
● Guarantee data sovereignty
● More secure
● Better performance
● Low hosting costs
● Component-based design
● Choose best-of-breed services

16. HOW HEADLESS?

17. SILVERSTRIPE/GRAPHQL
4.0
● Exponential performance
improvements
● Better developer ergonomics
● Supported the 4.9 release
● 3.0 likely dropped in 4.10.

19. 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

20. FINDINGS
☑ GOOD: It does what it says on the tin.
❌ NOT-SO-GOOD: It does... what it says on the tin.

21. BUILDING BLOCKED
15s 1m 15s 8m
PREVIEW INCREMENTAL BUILD FULL BUILD
* 1,500 pages, Gatsby Cloud + Netlify

22. PAIN IN THE ASSETS
8GB
70th PERCENTILE
* 2.5 GB if you exclude the memes

23. PLUG-IN PRAY

24. 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

25. 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

26. FINDINGS
GOOD: Developer experience
● Familiar paradigm
● GraphQL 4 can shine
● Previews are built in
● Design-your-own build time

27. FINDINGS
❌ NOT-SO-GOOD:
● Hosting requirements
● Non-atomic deployments
● CMS-hosted assets

28. TECHNICAL CHALLENGES
● Delegating route authority to the
CMS
● Automatic template selection
● Automatic query execution
● Persisting state
● Customising the static build
● Content blocks + GraphQL

29. TECHNICAL CHALLENGES
● Delegating route authority to the
CMS
● Automatic template selection
● Automatic query execution
● Persisting state
● Customising the static build
● Content blocks + GraphQL

30. STARTER KIT

31. 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)

32. AUTOMATIC TEMPLATE / QUERY
SELECTION

33. AUTOMATIC TEMPLATE / QUERY
SELECTION

34. BULK QUERY ADAPTER

35. STATIC QUERIES

36. NAVIGATION HELPERS

37. NAVIGATION HELPERS

38. NAVIGATION HELPERS

39. EMBEDDED HTML

40. DYNAMIC IMPORTS

41. GRAPHQL SCHEMA BINDINGS

42. SCAFFOLD PAGES / BLOCKS

43. SETUP SCRIPT

44. PREVIEW

45. STATIC BUILD CONFIGURATION

46. DEMO?!

47. Thank you!