Gatsby will be the best “no code” tool

Gatsby Admin enables non-developers to configure their sites

# Blocks enables non-developers to code, visually
Most “no code” tools fall on two ends of a spectrum: they either make users choose full templates or draw rectangles. [Blocks UI](https://blocks-ui.com/) is unique because it actually edits the underlying code and works at the level of components.

Rather than selecting a “template” (although that is also possible with Gatsby themes) users are drag-and-dropping components to build a website. Those actions are then translated live into actual code in your files.

Blocks enables non-technical folks (e.g. WordPress users) to code websites visually. That means they can hire developers or use [[Gatsby]]’s rich ecosystem of plugins to add custom functionality. Contrary to every other tool, this does not require weird escape hatches–full extensibility and customizability are the default.

Once we integrate Blocks with [[Gatsby]], [[Gatsby will be the best “no code” tool]].




Gatsby is inventing a new category of websites

Gatsby + WordPress is a great combination

How Gatsby works

Sketching exercises

Blocks enables non-developers to code, visually

Gatsby recipes enables non-developers to setup their sites

# Gatsby
> _Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. ([gatsbyjs.org](https://www.gatsbyjs.org/))_

I started working at Gatsby in February of 2020. (see [I am joining Gatsby](https://mxstbr.com/thoughts/gatsby)) Here are some of the thoughts I have had related to it since then:

- [[Gatsby is inventing a new category of websites]]
- [[Gatsby will be the best “no code” tool]]
- [[Gatsby + WordPress is a great combination]]
- [[The benefits of static websites]]
- [[How Gatsby works]]
- [[Sketching exercises]]




Gatsby

# Gatsby + WordPress is a great combination
WordPress as a CMS is fantastic, lots of end-users know and love it. However, the dynamic nature of any website you build with it is not ideal, particularly since a large number of WordPress sites do not need to be rendered for every request.

[[The benefits of static websites]] are key for most use cases WordPress users have. At the moment, they have to spend a lot of time fine-tuning performance and SEO. [[Gatsby]] comes with all of that out of the box, and is cheaper to host and scales infinitely.

Specific to [[Gatsby]], it is easier (and will only get easier) to hire JavaScript engineers than to hire PHP engineers nowadays. The development experience is also much better.

Further, [[Gatsby will be the best “no code” tool]].




# Gatsby Admin enables non-developers to configure their sites
> _Gatsby Admin is an interface to configure your [[Gatsby]] site, including pages, layouts, plugin and theme management, theme file shadowing, GraphQL, and more._ ([Gatsby Admin RFC](https://github.com/gatsbyjs/gatsby/pull/22713))

At the moment for users to configure their [[Gatsby]] sites they have to edit code (the `gatsby-config.js` file). Apart from that requiring some knowledge of coding, we can also create better experiences for e.g. using themes.

With [[Gatsby]] Admin, we will enable everybody to configure their Gatsby sites. Combined with [[Blocks enables non-developers to code, visually]], [[Gatsby will be the best “no code” tool]].




About these notes

The benefits of a dynamic website

# Gatsby is inventing a new category of websites
Imagine a static site generator that can rebuild a website with fresh data in less than five seconds (or even one second).

Combined with a CDN that deploys to hundreds of locations around the world in ~200ms ([Fastly](https://www.fastly.com/network-map)), new data would be live for all visitors in less than ten seconds.

That would make it possible for many (now) dynamic sites to be built as static ones, with all [[The benefits of static websites]] (performance, scalability, uptime, cost,…) included! 

While it’s technically a set of static HTML files on a CDN in the end, the architecture is neither truly static or dynamic, but something in-between.

That is what [[Gatsby]] is working towards—and [we are getting close](https://www.gatsbyjs.org/blog/2020-01-27-announcing-gatsby-builds-and-reports/). 🤯

----

I was sold on this idea when I realised that we could have architected [[Spectrum]], a public real-time chat app, like this. Here is what I wrote in our Slack at the time:

> _If build + deployment of new content is fast and stable enough (< 1s?) new content is available super quickly everywhere around the world, no matter where the db is—it’s just a bunch of static HTML files after all. In theory, we could’ve built Spectrum with that architecture and made it much more scalable, performant and stable!_

 🤯🤯🤯




# Gatsby recipes enables non-developers to setup their sites
> _Gatsby Recipes is framework for automating common [[Gatsby]] tasks. Recipes are MDX files which when run by our interpretor, perform common actions like installing NPM packages, installing plugins, creating pages, etc._ ([Gatsby Recipes RFC](https://github.com/gatsbyjs/gatsby/pull/22610))

Recipes are to frontend projects what terraform is to cloud infrastructure. They make it simple to automate common tasks declaratively, for example to setup analytics or a CMS.

They are written in MDX and the Gatsby CLI and Admin “execute” that with a custom parser. The same markdown can then also be rendered in the docs to provide “tutorials” for common tasks.




# Gatsby will be the best “no code” tool
[[Gatsby recipes enables non-developers to setup their sites]]. [[Gatsby Admin enables non-developers to configure their sites]]. [[Blocks enables non-developers to code, visually]].

Once we integrate those tightly with [[Gatsby]] (Cloud), we will have the best tool for non-technical users to build websites.

This will also make [[Gatsby + WordPress is a great combination]] an even stronger case.




# How Gatsby works
[[Gatsby]]’s architecture is based on nodes, where a node is the smallest possible unit of data. Sources and plugins add nodes, which can be edited by transformers, queried via GraphQL and eventually turned into pages.

For example, a markdown file would be a node, which is sourced by the `gatsby-source-filesystem` and transformed by `gatsby-transfomer-remark`  into HTML.




# Sketching exercises
I learned about sketching exercises at [[Gatsby]] from [Shannon Soper](https://twitter.com/shannonb_ux) and they blew my mind. The amount of new ideas and inputs ([[Get more parts on the table]]) we got out of them was incredible. It’s like brainstorming, but it works.

Here is how to do a sketching session:

1. Everybody spends five minutes drawing a sketch of what they think the project in question could look like.
2. Everybody presents their sketch in 2 minutes, and then it gets discussed.
3. Repeat

By having every person involved draw a sketch you can quickly get a bunch of varied ideas on the table. We started seeing patterns immediately, and also got a bunch of great new input.

By repeating the process, everybody can copy the best ideas from everybody else and incorporate them with theirs to arrive at a first “consensus” and then take it further.




# The benefits of static websites
* **Performance**: static HTML files served from a CDN at the edge (i.e. at hundreds of locations around the world) are the fastest way to deliver content to your users
* **Scalability**: rather than having to muck around with scaling servers or databases, your website will scale to infinite visitors without any work required on your part
* **100% Uptime**: your users will always be able to access the site and its content super quickly, no matter how your backend is doing
* **SEO**: search engines include performance and uptime in their ranking algorithms
* **Security**: static sites cannot get hacked and the backend can be decoupled and hidden to the world at large
* **Cost**: no need to pay $$$ for a huge db




@mxstbr's working notes

Gatsby

Links to this note

What do you think?