Beyond Static: Building a Dynamic Application with Gatsby

1. Jesus Manuel Olivas / octahedroid
Beyond Static: Building a
Dynamic Application with Gatsby
● 1
#DrupalConGlobal

2. Jesus Manuel Olivas
jmolivas.com
@jmolivas
———————————————
octahedroid.com
Co-Founder
● 2

3. We are a professional services and
consulting agency specializing in modern
front-end tools, cloud native architectures,
automation and CMS integrations.
● 3

4. Drupal Persona
● 4

5. Agenda
> Web Development and JAMstack
> Static content and build time
> Decoupled Drupal and Gatsby
> Hybrid pages using client side calls
> Protected content behind user authentication
> Update Drupal Profile and Content Nodes from Gatsby
● 5

6. Traditional monolithic stack
Visitor Server Database
● 6

7. Server render (traditional)
Server Client
● 7

8. SPA (client side)
Server Client
● 8

9. Agenda
> Web Development and JAMstack
> Static content and build time
> Decoupled Drupal and Gatsby
> Hybrid pages using client side calls
> Protected content behind user authentication
> Update Drupal Profile and Node pages from Gatsby
● 9

10. The Modern Stack (JAMstack)
Visitor CDN
● 10

11. JAMstack (pre-render markup)
Server ClientBuild Server
● 11

12. Performance Reliability Security Hosting
Benefits of JAMstack
● 12

13. Agenda
> Web Development and JAMstack
> Static content and build time
> Decoupled Drupal and Gatsby
> Hybrid pages using client side calls
> Protected content behind user authentication
> Update Drupal Profile and Node pages from Gatsby
● 13

14. ● 14
GatsbyJS
Gatsby is a free and open source
framework based on React that
helps developers build blazing
fast websites and apps

15. GatsbyJS
● 15

16. Decoupled CMS
A Decoupled CMS, is a content
management system, that
makes content accessible via a
RESTful or GraphQL API for display
and consumption on any device.
● 16

17. Why Drupal ?
> Current legacy sites
> Battled tested and well known GUI
> Complex data structure Node,
Paragraphs, Media, Taxonomies
> User and Content management
and workflow capabilities
● 17

18. Why Gatsby ?
> Add external data or content
> Add 3rd-party API services
> Better developer experience
> Iterate faster, deliver better work
> Separation of concerns
● 18

19. Agenda
> Web Development and JAMstack
> Static content and build time
> Decoupled Drupal and Gatsby
> Hybrid pages using client side calls
> Protected content behind user authentication
> Update Drupal Profile and Node pages from Gatsby
● 19

20. ● 20
Search using Views and Solr

21. ● 21
Search using Views and Solr
> Add view to expose data client side
> Connect the view with Solr engine
> Enable GraphQL Views module
> Call GraphQL endpoint via client side from
Gatsby application

23. ● 23
Hybrid Blog (Client + Static)

24. Client side call from Decoupled CMS
● Only if new content entered and published using
the Decoupled CMS is available after the latest
build execution.
● Client side routes to load new pages from
Decoupled CMS.
● 24

25. Static
● Content entered and published using the
Decoupled CMS available before the latest build
execution.
● Only X nodes show on first page to improve
performance.
● 25

26. Client side call from Static file
● Provide pagination using a JSON file loaded client
side to avoid impacting first page load.
● This JSON file can be break into several files to
improve performance.
● 26

27. Agenda
> Web Development and JAMstack
> Static content and build time
> Decoupled Drupal and Gatsby
> Hybrid pages using client side calls
> Protected content behind user authentication
> Update Drupal Profile and Node pages from Gatsby
● 27

28. User Authentication
Allowing users to
authenticate and identify
themselves.
Provide personalized features
as private content or
customized experiences.
● 28

29. ● 29

30. ● 30

31. Agenda
> Web Development and JAMstack
> Static content and build time
> Decoupled Drupal and Gatsby
> Hybrid pages using client side calls
> Protected content behind user authentication
> Update Drupal Profile and Node pages from Gatsby
● 31

32. Improve Workflow
Allow users to review and
publish content directly from
Gatsby
Allow users to update content
from Gatsby
● 32

33. ● 33

34. ● 34

35. ● 35

36. Drupal Persona
● 36

37. Thank you.
Any Questions?
@jmolivas | @octahedroidHQ | octahedroid.com
● 37