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
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 toastThanks
-
Rust
- for their RFC process, which heavily informed ours
-
John Otander
- for their work on MDX
-
Fred Schott
- for their work on Snowpack
- Preact
- Rollup
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 toastNot 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.
Try it out:
git clone git@github.com:ChristopherBiscardi/new-toast-site.git
cd new-toast-site
yarn
yarn build
npx serve publicInfo
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
- Benjamin Lannon wrote a Toast starter that includes automatic image upload to cloudinary via jlengstorf's rehype plugin
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.
Top comments (0)