I watched this talk※ by Chris Biscardi at ESNext Conf, where he presented his new JAMstack meta framework, 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 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

yarn create 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 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, Toast uses Snowpack/Rollup. We can set up the Snowpack configuration in our package.json (see sample site code).

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)

EDIT: Chris confirmed that the configuration is indeed in the breadbox package.

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
  • 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.

git clone git@github.com:ChristopherBiscardi/new-toast-site.git
cd new-toast-site
yarn
yarn build
npx serve public

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.

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 for CSS and 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 and his Discord channel Party Corgi. If you have questions or discussion that seem out of place for Toast repo 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)
• 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.