DevEd 035: Programming with & Learning Gatsby

Share:

Listens: 0

DevEd

Education


This week's episode of the DevEd podcast is joined by Hudson Baker. Hudson has been a developer for five years now, specializing in Angular, and is currently working at BrieBug Software. The panel kickstarts the episode by answering the basic question - What is Gatsby? Sam explains that it is a static site generator which means that it takes in data and converts that into static files that can be hosted on any server. It has a lot of tooling and build process stuff built-in, and uses modern javascript concepts along with GraphQL to build fast-performance static sites. It is also a part of JAMStack. Speaking on what languages and technologies it is based on, Sam elaborates that Gatsby is built with React, the build process is webpack, the content can be written in markdown or any outside sources, and data querying is done using GraphQL. The next topic of discussion is static sites. They talk at length about what static sites are, if they can be written without a static site generator, the difference between Gatsby and other frameworks such as Angular and React, what makes the sites static, how to identify them, and how to make a clear distinction between static and dynamic sites. Next, they discuss that Gatsby can be a good starting point for people interested in learning React because it has a plethora of cool inbuilt tools, plugins and pre-packaged templates which can make the learning process easier, rather than starting to learn React from scratch. From a teaching perspective, React is a better choice if the goal is to teach web applications, whereas Gatsby is good for teaching how to build websites. They talk about the difference between Gatsby and server-side rendering frameworks such as Next.js. Luis explains that in server-side rendering, there is data on one side and template on the other, and each time a request is made to the server, the data and template are assembled on the fly and not at build time. On the contrary, in case of Gatsby, this is done at build time, so everything that is sent from the server is basically pre-calculated. Talking about performance considerations, he says that in server-side rendering there is a price to pay in terms of just-in-time calculations. Sam also chimes in with his views on the comparison and mentions that they are really close performance-wise and feature-wise. They then move on to discussing the learning aspect of Gatsby. Sam explains that if developers possess some knowledge about things like React, GraphQL, CSS in JS, etc., it can be easy to get fast results with Gatsby, however, it is still possible to secure some quick wins by using a simple starter project as a template and building on it. He then talks about the best use of Gatsby being in content-based sites, portfolios, product sales pages and so on. Joe asks how does Gatsby deal with adding other aspects on top of it, to which Sam answers that there may be some tweaking needed to get things done, but overall it works well given that there are a ton of plugins available to get things from external resources. Joe talks about learning GraphQL, and Sam explains how much of it is used in Gatsby. He talks about the positives of Gatsby documentation and the developer community. They end the show with picks. The DevEd podcast is produced by Thinkster.io and published by DevChat.TV. Panel Joe Eames Brooke Avery Sam Julien Jesse Sanders Mike Dane Luis Hernandez Joined by special guest: Hudson Baker Sponsors Thinkster.io Adventures in .NET - Devchat.tv Elixir Mix CacheFly Links Hudson's Twitter Comparison of Gatsby vs Next.js Picks Luis Hernandez: Focused and Diffuse: Two Modes of Thinking Mike Dane: Splitwise Jesse Sanders: Grumpy Cat :( DuckDuckGo Hudson Baker: Storybook Keep Talking and Nobody Explodes Brooke Avery: Star Wars Pinball Sam Julien: Overcooked! Joe Eames: Claudia.js   What is Gatsby? It is a static site generator that takes in data and converts it into static files that can be hosted on any server. It has a lot of tooling and build process stuff built-in, and uses modern javascript concepts along with GraphQL to build fast-performance static sites. What languages and technologies is Gatsby based on? Gatsby is built with React, the build process is webpack, the content can be written in markdown or any outside sources, and data querying is done with GraphQL. What is the difference between Gatsby and server-side rendering frameworks such as Next.js? In server-side rendering, there is data on one side and template on the other, and each time a request is made to the server, the data and template are assembled on the fly and not at build time. On the contrary, in case of Gatsby, this is done at build time, so everything that is sent from the server is pre-calculated. How does Gatsby deal with adding extra aspects on top of the basic functionality? There may be some tweaking required to get things done, but overall it works well given that there are a ton of plugins available to get things from external resources.