loading...
Cover image for A bite of Toast, the new JAMstack meta-framework

A bite of Toast, the new JAMstack meta-framework

ekafyi profile image Eka Updated on ・4 min read
📷 Cover image: Joseph Gonzalez

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

GitHub logo ChristopherBiscardi / toast

The best place to stack your jam

Toast

The best place to stack your JAM.


Current stability status: somewhere between a yeet and a yolo


About Toast

Toast is a modern, ESModules-first, site compiler. It avoids bundlers completely by default (although you can integrate bundlers if you need to).

You can read about the high level vision or the current goals of the project.

What types of sites is Toast useful for?

We don't know yet. It's mostly being used for blogs currently.

What browsers does Toast support?

Notably the use of browser-native features like ESModules in the default client-side JavaScript means no IE 11 support.

Getting Started

The following command will bootstrap a new toast app for you.

yarn create toast

Thanks




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)
It could be somewhere in the accompanying `breadbox` package, but I did not have the time/energy/knowledge to dwelve into it.

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.

Toast Example Site

This repo is an implementation of the experimental Toast package. It will be updated as Toast is updated with new features.

Toast

Try it out:

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

Info

This site includes

  • First-class MDX support
  • Server-side rendered syntax highlighting
  • Codeblock highlighting
  • MDXProvider usage
  • babel-plugin-preval examples
  • static/ folder usage
  • src/pages for .js files
  • When selecting text on the page, a tweetable selection will pop up.
  • Styling is done with emotion although this can be replaced with Tailwind or whatever you prefer
  • Preact

More Examples

Existing Toast sites can be found in the wild at the following locations. Feel free to check out the network traffic to see what an ESM-first approach looks like in practice.

Feedback

Please file issues. Toast…

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.

Posted on by:

ekafyi profile

Eka

@ekafyi

Web developer, late bloomer. Can center an element with grace and style (pun intended). Mostly sensible (citation needed).

Discussion

markdown guide