Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

GatsbyConf - A Recap

Parent Feed: 

Gatsby Conference took place from March 2nd to 3rd, 2021 and was a free virtual event. Designed as a way for the Gatsby community members from all over the world to connect and listen to various talks, participate in free workshops, as well as hear the four big announcements from the Gatsby team.


Keynote

Kyle Matthews, CEO and founder of Gatsby, opened the conference with the keynote. Kyle told us that people come to Gatsby for the websites, but stay for the ecosystem, much like Drupals’ “come for the code, stay for the community.” Kyle mentioned that great developer experience (DX) enables a great user experience (UX), which is why they are focused on improving their developer tools. Kyle then explained that the Jamstack provides a very good developer experience, however, content management systems (CMSs) provide marketers with a far better experience than the Jamstack. Gatsby aims to cater to both: developers and marketers.

GatsbyConf. Great DX enables great UX. Powerful, developer tools and workflows; Fast sites powered by static assets and CDNs; Unified data access to your content via plugins.
 

Gatsby enables marketers and developers to achieve the same fast, effective workflows. Whether that’s branching and editing some part of the website, or collaborating with colleagues on new content pages, previewing the updates, and then publishing those changes to the web.

Kyle then went on to make the four big announcements:

  • Gatsby Cloud Hosting powered by Fastly, a world-class content delivery network (CDN)
  • Gatsby v3.0, bringing faster builds
  • Gatsby Source Plugin improvements: WordPress with GraphQL, Shopify, and Contentful
  • Gatsby Image, next-gen image component bringing better Lighthouse scores and improved DX
     

GatsbyConf. Gatsby Image; Gatsby Cloud Hosting; Gatsby v3.0; Contentful Source Plugin; WordPress Source Plugin; Shopify Source Plugin

Learn


Dustin Schau then gave an update entitled the “State of Gatsby: What’s New and What’s Coming” - whereby he mentioned that the web of old was static with fault-tolerant HTML, styling and images. There were a lot of benefits of the static web, but then came the CMS revolution which transformed what the web can do. The rise of the CMS enabled building a website without being an expert and allowing content creators to own the complete experience of their website.

Then came the rise of the decoupled CMS which ushered in a new era for the web, user expectations have changed, making rich web experiences the norm and not the outlier. Gatsby enables you to build up rich user experiences with your content from any decoupled CMS as “there’s a plugin for that.”

Gatsby gives you performance and speed by default. It enables you to deliver a great user experience that’s fast and performant which ultimately leads to a website that generates more revenue. Gatsby also has a very high level of accessibility, as well as being optimised for search engines (SEO).
 

Lighthouse data from HTTPArchive (Performance) - Gatsby; Drupal; WordPress; Nuxt.js; Next.js
 

Dustin then demonstrated some of the new features coming to Gatsby such as “serverless functions.” Serverless functions allow developers to move away from monolithic hosting and take advantage of microservices, encapsulating single-purpose code into a function that is then hosted on managed infrastructure. Dustin showcased the usage of a serverless function that would send SMS messages using the Twilio service for his wedding website powered by Gatsby Cloud.


Dive Deeper and Learn More


We then had the pleasure of hearing presentations from Gatsby experts who gave an in-depth explanation of each of the new changes:

  • Laurie Barth - NextGen Images
  • Joel Smith - Gatsby Cloud
  • Lennart Jorgens and Patrick Sullivan - Gatsby v3.0
  • Jack Sellwood and Shane Thomas - Shopify

GatsbyConf. Dive Deeper and Learn More. Next Gen Images: Laurie Barth. Gatbsy Cloud: Joel Smith. Gatsby v3.0: Lennart Jörgens and Patrick Sullivan. Shopify: Jack Sellwood and Shane Thomas.

Laurie took us through a guided tour of the new Image component, demonstrating how powerful it is and how it improves the Lighthouse performance score for existing websites, which will not only improve the site load time but will also help the overall ranking of the website on search engines such as Google. The new Image component is performant by default, outputting the HTML5 picture element tag with a range of source sets for different browser widths (mobile, tablet, and desktop) as well as outputting WEBP and the option to also output AVIF image formats for browsers which support it. The API for the Image component also includes support for aspect ratios, lazy loading, placeholder images, and transformation options without CSS filters.

Joel introduced the new Gatsby Cloud hosting, allowing for instantaneous global deployments using the Fastly CDN network. A modern website is a content-rich client experience built on a component-driven design that is continuously delivered through serverless tooling. Joel showed a short demo of how quickly you can deploy a change to Gatsby Cloud hosting. He then went on to explain the pricing changes to Gatsby Cloud hosting to better accommodate for traffic and build speed requirements that you need for your website.

Shane Thomas and Jack Sellwood talked about the future of e-commerce and how brands love Gatsby, with the improved changes to the Gatsby Shopify plugin. This will enable more businesses to showcase and sell their products online with the speed of Gatsby. Brands grow with Gatsby, millisecond page loads leads to lower bounce rates and SEO-friendly markup leads to more discoverability. With Gatsby’ incremental builds and CMS preview capabilities, brands can rely on building out their new seasonal product-line and internally test it amongst stakeholders long before the go-live date.

Gatsby Connf. Brands grow with Gatsby. Millisecond page loads mean lower bounce rates.

Level Up


Patrick Sullivan and Lennart Jörgens introduced Gatsby v3.0. Patrick explained how Gatsby had over 2000 pull-requests (PRs) merged from over 1000 contributors ranging from over 60 different countries in 2020 – that’s the power of open-source. Lennart broke down the new changes to Gatsby v3.0 with a very informative demo. Support for dynamic URL path pages using curly brackets to pass information down into the Gatsby page functions. Server-side rendering in development (Dev SSR), an experimental feature that will aid developers in testing new features for more dynamic websites that fetch information from the server on load time which is not statically built out, for example, pages that require an authenticated user which then show the logged-in username somewhere on the page. Patrick informed everyone that the migration guide to version 3.0 can be found at https://gatsby.dev/2-3 along with the Image migration guide.

Once the big announcements were made, the conference then split into two tracks of talks from the Gatsby community. Stew West gave a lightning talk entitled “Building Super Fast Search with Gatsby, Google Sheets and GraphQL” which showcases the BlueValue project from Harte Research Institute for Gulf of Mexico Studies. Stew explained how easy it was to utilise the Gatsby plugin system to build out the prototype, then iterate with real data. Using the gatsby-source-google-sheets plugin, Stew and the team were able to provide a simplified CMS using Google Sheets to power the statically built Gatsby website.

What is super great about most Gatsby plugins? They come with amazing docs and they just work! Docs and examples for the win!!

Gamer vs Gatsby

Kyle Gill, Senior Developer for Gatsby took on David 'Kosmic' Livingston, the seven-time World Record holder for fastest completion of the original Super Mario Bros. Kyle planned to bootstrap a Gatsby site from scratch, add styles, some React components, GraphQL queries and pull data from a Gatsby plugin then deploy a production level CDN on Gatsby Cloud while competing against Kosmic who would speed run through Super Mario Bros. It was an epic display of skill and grit, Kosmic jumped right in, using warp zones to skip levels and a trick to slide down a pipe and reach a hidden warp zone. While Kyle had a few shortcuts of his own with VSCode snippets and terminal functions, Kosmic made a small mistake in the final boss fight leaving him to restart the level, giving Kyle the much-needed few seconds to help him win the race.

Kyle Gill, Senior Developer for Gatsby vs David 'Kosmic' Livingston.

Lead

On the second day of the conference, after the big Mario Gatsby race, we then had several different workshops ranging from beginner-friendly “Getting Started with Gatsby” by Megan Sullivan and Obinna Ekwuno, to the more advanced workshops like “The Gatsby WordPress Integration Workshop” by Shane Thomas and Jason Bahl.

I followed along with the workshop titled “Creating an E-commerce Site Using Gatsby” by Tamas Piros, Developer-Experience Engineer at Cloudinary. Tamas walked us through creating a headless e-commerce website using Gatsby with services like Cloudinary and Snipcart.

Short Q&A session with Kyle and Dustin

At the end of the scheduled workshops, we had a short Q&A session with Kyle and Dustin, in which they answered all the questions from the community in regards to the new features and the roadmap to Gatsby's future. They also announced winners of several prizes including a PlayStation 5, unfortunately, I did not win but congratulations to those who did win a prize.

You can find all presentations on Gatsbys’ YouTube account at:

If you want to know more about how we can help you with your Gatsby project, and help take your web presence to the next level - get in touch with us today.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web