A bite of Toast, the new JAMstack meta-framework
Tags: toast, jamstack
Published: 2020-07-15 05:19:39

<figcaption>📷 Cover image: <a href="https://unsplash.com/@miracletwentyone?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="external">Joseph Gonzalez</a></figcaption>

---

I watched [this talk](https://www.youtube.com/watch?v=nft_3Rp3FFk)※ by Chris Biscardi at ESNext Conf, where he presented his new JAMstack meta framework, [Toast](https://github.com/ChristopherBiscardi/toast), and the reasoning behind its creation.

※) *The live video was taken off. Presumably the talks will be posted separately on the [ESNext Conf YouTube channel](https://www.youtube.com/channel/UCtH4VSu2jpzSVpMly0tNasw/videos) later.*

Toast is described as an **“ESModules-first JAMStack and Serverless meta-framework”**. It’s currently in alpha (0.2.7 at the time of writing), and as the readme says…

> Current stability status: somewhere between a yeet and a yolo

{% github ChristopherBiscardi/toast %}

What makes Toast stand out from existing popular JAMstack frameworks is its **emphasis on modern JavaScript native browser functionalities**. It is unbundled by default—although you can optionally add one—which results in a simple, performant build process. In a way, it’s like if Gatsby were built without webpack and GraphQL※※.

※※) _I think Chris said something to this effect in the talk. The video link has been taken off by the time I’m writing this so I could not cross-check._

Check out the [Vision page](https://github.com/ChristopherBiscardi/toast/blob/master/VISION.md) in their documentation to learn more about Toast’s underlying philosophy and direction.

## How does it work?

That’s a literal question, not a lead into a descriptive paragraph 😬.

As per [the talk slide](https://unbundling-the-jamstack-metaframework.netlify.app), Toast uses Snowpack/Rollup. We can set up the [Snowpack configuration](https://www.snowpack.dev/#all-config-options) in our `package.json` (see [sample site code](https://github.com/ChristopherBiscardi/new-toast-site/blob/toaster/package.json#L29-L43)). 

Beyond that, I was not able to find out:
- where the Snowpack/Rollup config is defined in the source code
- where and how to extend or override the configuration (or if it’s possible at all)

<del>It could be somewhere in the accompanying `breadbox` package, but I did not have the time/energy/knowledge to dwelve into it.</del>

__EDIT:__ Chris confirmed that the configuration _is_ indeed in the [breadbox package](https://github.com/ChristopherBiscardi/toast/tree/master/packages/breadbox).

For now I'll leave it to you, readers, to check it out. 😬😛 In this post I’m only going to discuss basic usage without custom or advanced configuration.

## Installation

My experience creating a new Toast site from the starter was a breeze. 

You can create a new Toast site by doing any one of these:
- starter site, [new-toast-site](https://github.com/ChristopherBiscardi/new-toast-site)
	- Use the “Deploy to Netlify” button (forks the starter site to our Github account, create a new Netlify site, and deploys there)
	- Clone the repo to your local directory
- ~~CLI command yarn create toast~~ Not working now

Run `yarn` to install dependencies, and `yarn build && npx serve public` to serve.

{% github ChristopherBiscardi/new-toast-site %}

## Developing

This is where I came across the first “oops”. Toast has no live/development server, ie. no such thing as `yarn toast develop` or `yarn toast start`.

If you want to develop with live reloading capability (to see the changes as you code), you have to do it in a separate environment. I would develop the components in [Storybook](https://storybook.js.org/docs/guides/guide-react/).

### Fetching data

Toast supports MDX out of the box. The starter site comes with customizable prism code highlighting. Data fetching/processing and page creation happens in https://github.com/ChristopherBiscardi/new-toast-site/blob/toaster/toast.js.

`toast.js` gets posts data from `fetch-mdx-post-files` (the starter site has sample posts in `content/posts` directory), which we can modify if we want to. I have not tried it, but we should be able to fetch data from external API as data source as well.

### Styling etc

The starter site comes with [Emotion](https://github.com/emotion-js/emotion) for CSS and [React Helmet](https://github.com/nfl/react-helmet) for SEO/Metadata. These packages are regular dependencies, so you can replace them with any libraries you want.

The starter site also comes with:
- (Client-side) filtering by tags and keyword
- “Tweet this” on selecting text
- Progress bar indicating reading (= page scroll) progress

## Deploying

It’s already built and ready to deploy ✨. You should be able to deploy the `public` directory anywhere you can host a static site, such as Netlify, Vercel, and Github Pages.

I used the Netlify deploy button, so my site repository is already connected to Netlify, which automatically runs a build anytime I push to `master` branch.

## Ecosystem

As a new framework in alpha essentially run by one person, (understandably) there are no plugins, integrations, or resources like templates and tutorials.

Chris, the creator, is active on [Twitter](https://twitter.com/chrisbiscardi) and his Discord channel [Party Corgi](http://discord.gg/partycorgi). If you have questions or discussion that seem out of place for Toast repo [issues](https://github.com/christopherBiscardi/toast/issues), you can reach him there.

## My impressions

I haven’t got a lot of time to play with Toast (but just enough to make me crave actual toast). I’m personally enjoying it so far and can see myself adding it to my tool belt.

**What I liked:**
- Less data sent to user (good if you are [performance budget-conscious](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/))
- Uses Preact instead of React out of the box
- Faster builds
- (Arguably) more simple, less opinionated than larger React JAMStack frameworks
- Less tooling means less possibility of cryptic webpack errors coming out of nowhere

**Deal-breakers:** (you may not be happy with Toast if you require these)
- Established ecosystem (plugins, tutorials, etc)
- IE11 support ※※※
- Advanced client-side routing ※※※

※※※) _Yes, it’s possible to install polyfill and custom libraries if you’re willing to add hours of extra work._

At the end of the day, I’m glad Toast makes the ecosystem even richer by approaching it from a different perspective from larger React-based JAMStack meta frameworks. Add to that other meta frameworks based on Vue, Svelte, and non-framework JavaScript (11ty), developers are spoiled for choice when it comes to creating with the JAMStack.