No content

Tomas Fülöpp | www.VACILANDO.be | 2020-12-08 @ 13:50 CET Gatsby & Drupal — striving for parity

Your speaker — what to expect

— a.k.a. Vacilando Tomas Fülöpp Business owner at Vacilando.be IT architect at the Government of Flanders, Belgium Drupal aficionado since 2006 (Vacilando at drupal.org) Staunchly open source, fanatical about solution sustainability and performance Born in Czechoslovakia, Belgian by choice, European at heart https://www.linkedin.com/in/vacilando/

The plan 1. Your speaker and the plan 2. Aims of this presentation 3. Gatsby as a Jamstack family member 4. Complementarity with Drupal 5. Personal experience 6. Pros and cons 7. Summary 8. Resources 9. Questions? — for the next 20 minutes

Aims — of this presentation

— here‘s what I want you to believe Aims Drupal no longer stranger to the decoupled (headless) architecture; many good front-end frameworks available. Gatsby just one of them, possibly unrivalled in the smoothness of integration. Gatsby evolved from a simple Markdown-based SPA builder into a powerful framework able to handle complex projects. One of the challenges for builders is to decide where the dividing line between the backend and frontend should be. It‘s easy to overdo it on either side. Let‘s examine • the roles of both in the case of Gatsby and Drupal, • the shape of the coupling between these two, • conditions where Gatsby may not be a good fit.

Gatsby — who?

— if you thought this was about Jay Sorry! Source: thegreatgatsby.fandom.com

— also great! Gatsby GatsbyJS, or simply Gatsby for the friends. Modern, blazing fast front-end framework based on ReactJS. Open source project • launched in 2016 • by our long-term Drupal colleague, Kyle Mathews. • around 48k stars on GitHub One of the most popular Jamstack projects. On the name -- it's basically because I live literature and I thought "Gatsby" was a great name from a great book about an exciting dynamic time in world history. — Kyle Mathews (Dec. 7, 2020)

— problem The legacy web

— a Jamstack family member Gatsby An example of Jamstack, a web-development architecture based on client-side JavaScript and reusable APIs. Built around the concept of static generators that basically build the whole site as a set of static (HTML / CSS / JS files) and publish them on a Content Delivery Network (CDN). Other well-known Jamstack projects include • NextJS • Hugo • Jekyll • Nuxt • Hexo • Slate • GitBook • etc.

— how it works Jamstack

— Jamstack benefits Gatsby 1. Better performance 2. Higher security 3. Cheaper, easier scaling 4. Better development practice

— better performance Gatsby Sites generated at deploy time and served statically from a globally distributed Content Delivery Network (CDN). So page caching is built in. Prefetching of linked pages. Progressive image loading. Responsive image loading. Offline access. No extraneous code fetching. Etc.

— higher security Gatsby Less surface areas for attacks, leveraged expertise of specialist third-party services. NB The API data source (e.g. your Drupal) still has to be secured!

— cheaper, easier scaling Gatsby No database, replications, runtime caching – just files that can be hosted anywhere. Perfect scenario for serverless hosting such as AWS S3. CMS instance / cost can be much smaller (does not render production website directly). In many cases (no real time backend requests) the CMS can pretty much be shut down between builds.

— better development practice Gatsby Gatsby curates a long list of starters, which are kind of templates allowing a quick start of any type of website. Somewhat comparable to Drupal themes. More targeted develoment and debugging. Preview of changes without having to refresh the browser page in your local development environment. Easy to plug in new components from a library (typically NPM). Updating your Gatsby site is usually as trivial as running „npm update“. All sources can be approached using one single querying system: GraphQL. An IDE for GraphQL – GraphiQL – is included and available in local development. Clear, excellent, open, GitHub-hosted documentation at https://www.gatsbyjs.com/docs/. Usually enough to implement a new feature (no need to hunt around in blogs and case studies).

Complementarity — shape of the coupling

— shape of the coupling Complementarity

— undoubtedly Drupal CMS functionalities • Content management – content types / entities, fields, taxonomy, media, etc. • Editing – WYSIWYG, paragraphs, etc. • Revisions (content versioning) Multilingual capabilities (cf the preceding presentation by Nick today) Slug generation – simple to do in Gatsby, but the Drupal module Pathauto has added value such as integration with modules such as Redirect and Token. Back-end user management. Back-end authentication. API (JSON:API) Token Etc.

— undoubtedly Gatsby Front-end (HTML, CSS, JS, fonts, ...) Front-end caching Prefetching Assets optimalization Image optimalization Easy connecting to and consuming external sources such as S3, Google Sheets, Google Analytics, databases, JSON, YAML, file system, other CMS (Drupal, Contentful, Prismic, WordPress, etc.) – see https://www.gatsbyjs.com/docs/content-and-data/ All accessible via GraphQL. Structured data annotation (Open Graph, JSON-LD, ...)

— undoubtedly II Gatsby Analytics XML sitemaps Captcha robots.txt security.txt Webmentions SEO Etc.

— Drupal ¿ Gatsby Unclear or imperfect End-user authentication easy to implement, though coupling with the Drupal authentication (if required) is a problem. One solution might be in using a third-party authentication for both Drupal and Gatsby (e.g. Auth0). Search easy to implement in Gatsby (e.g. using Algolia) but Drupal‘s own search config (Search API) is even simpler, and there‘s a disconnect between the two. Room for improvement. Preview – great in Gatsby development, there‘s even a Drupal module, but it‘s not as seamless as in the monolithic Drupal. Closely connected with the problem of providing revisions via the Drupal API. Forms – by definition require backend involvement; often solved by using serverless tools (e.g. Netlify forms). Redirect functionality – it‘s easy to define redirects in Gatsby, but it will be useful to plug into the excellent Drupal Redirect module functionality • Patches are almost ready for the Redirect module — follow tickets #3057679 and #3073966!

Experience — getting personal

— mid-life crisis 473 000 000 Devoted to Drupal for almost 473 million seconds (that means starting with Drupal 4.6!) Got used to watching scores of new hip players coming up and vanishing again. Who leaves a partner after 15 years of happy life? And yet....

Game changer No, I am not leaving Drupal anytime soon ☺ Drupal is still way the best CMS to my knowledge (although CMS competition is intensifying). But Gatsby is definitely a game changer. Not just the built-in speed, scalability, security, and simple hosting. It‘s also modern, elegant and fresh! ( Talk about a mid-life crisis ☺ ) Clear-cut example of a decoupled setup that has more pros than cons.

Pros and cons — input of the devil‘s advocate

— devil‘s advocate in red The good Performance – nothing can beat static files on CDN. / Drupal is able to cache on – and expire from – a CDN. Security – virtually no worry about Drupal / PHP / MySQL and other backend vulnerabilities. / There‘s no such thing as no security worries! Stability – no worries about traffic surges or DOS attacks on a site that replicated all around the world. / Even static site hosts can be crippled by attacks. Fun to build. Your devs will adore you. / That‘s not really a deliverable. Additionally to Drupal, Gatsby can easily connect to a myriad other data sources. And all data source are accessible uniformly via GraphQL. / Two words for you: External Entities.

— devil‘s advocate in red The good Access to a huge Gatsby / ReactJS / JS ecosystem of plugins. Way more than Drupal alone. / Does Drupal not have enough contrib modules? Access to a vast pool of ReactJS / JS developers – less pressure on finding Drupal talent. / Hey, I‘m available for hire! Simple and full-featured access to Drupal content thanks to the excellent JSON:API module / There are edge cases like revisions ... Affordable or even free hosting on Netlify, AWS S3 and CloudFront, GitHub pages, Azure, etc. Or your HTML server! • Particularly interesting: Gatsby Cloud – extremely streamlined for Gatsby. • True magic: Surge – allows you to publish a Gatsby site on your own domain with 2 simple commands. / Never heard of Jeff Geerling‘s Raspberry PI Dramble? Hosting companies specialized on Jamstack offer useful extra functionalities. E.g. the Netlify cookieless analytics, Gatsby cache plugin speeding up builds, image optimalization at no extra price, etc. / ... making it harder for you to leave them.

— cause‘s advocate in green The bad Every edit in Drupal requires a rebuild. Simple to automate using a hook. But there‘s no fine-grained invalidation (cf cache tags in Drupal). Since this year Gatsby offers incremental builds, but the front-end refresh remains a challenge for sites with some 100 000 or more pages. / But does every edit really need to be published immediately on your site? Easy to limit access to pages and features in Gatsby, but coupling it with Drupal user roles and perms is a challenge. / Do users and roles really need to be mirrorred on the front-end for your site — or is it just a nice-to-have? Not ideal for sites focusing on authenticated users (less security and speed advantages, complex setup) / You can still use it for all your publicly available (sections of) sites. Compared to Drupal you will face less configuration and more coding. You will have to learn JavaScript as a basis, Gatsby for the concept, GraphQL to write queries, bits of ReactJS as needed, extra benefit from Typescript, etc. / Thanks to the ReactJS components the code is very structured and clean. Learning Gatsby is fun! Gatsby still suffers from an outdated stigma of a SPA static generator based on local Markdown files... / Just check it out and you‘ll be hooked!

Summary —

In conclusion We‘ve identified a number of roles that remain firmly on one or the other side. An ideal division of the Drupal and Gatsby roles remains elusive as both systems evolve rapidly. Drupal shines not only as a CMS with an API. Thanks to its ecosystem of modules it can serve as much more than just a back-end content source. Everything exposed through the API is potentially useful at the Gatsby front-end. Gatsby shines on everything that happens in the front end, with the added security, performance, easy and cheap hosting, modern feel / fun, easy connection and querying of data sources, great documentation, huge ecosystem of plugins and starters, vast pool of available resources. Gatsby‘s advantages decline for sites • with more than 100k pages (1 million is not impossible though, cf an earlier presentation today) • requiring immediate propagation of changes to the front-end • focusing on authenticated users (Possible approaches: stay with the monolithic Drupal, or a custom ReactJS / VueJS front-end.)

— the definitive shape on the coupling Scientific visualization

Resources — for you to peruse later

— to get you started Selected resources https://www.netlify.com/jamstack/ https://github.com/gatsbyjs/gatsby https://www.gatsbyjs.com/docs/quick-start/ https://www.gatsbyjs.com/docs/content-and-data/ • https://www.gatsbyjs.com/docs/sourcing-from-drupal/ https://www.gatsbyjs.com/docs/recipes/querying-data/ • https://www.gatsbyjs.com/docs/running-queries-with-graphiql/ https://www.gatsbyjs.com/features/cms/gatsby-vs-drupal https://www.gatsbyjs.com/blog/tags/drupal/ https://www.gatsbyjs.com/use-cases/drupal/ https://vacilando.org/article/gatsby-drupal-quest-ideal-coupling https://www.gatsbyjs.com/plugins https://www.gatsbyjs.com/starters https://www.gatsbyjs.com/blog/2020-04-22-announcing-incremental- builds/ https://www.gatsbyjs.com/plugins/gatsby-plugin-next-seo/ https://auth0.com/blog/securing-gatsby-with-auth0/ https://www.gatsbyjs.com/docs/adding-search-with-algolia/ https://www.gatsbyjs.com/docs/deploying-and-hosting/ • https://www.netlify.com/products/ • https://www.netlify.com/blog/2020/04/23/enable-gatsby- incremental-builds-on-netlify/ • https://github.com/chrisdwheatley/netlify-plugin-image-optim • https://www.gatsbyjs.com/cloud/ https://www.drupal.org/project/jsonapi https://www.drupal.org/project/gatsby

Questions — welcome

What did you think? Locate this session at the DrupalCon Europe website: https://events.drupal.org/europe2020/schedule More questions? — get hold of me @vacilandois www.linkedin.com/in/vacilando

Join us for contribution opportunities Friday, December 11, 2020 Mentored Contribution First Time Contributor Workshop General Contribution #DrupalContributions