ultra

Deno, ESM + React: No build, no bundle, all streaming

Ultra is a web framework that leans hard into your browser's native
features. Embrace the future of ES Modules, Import Maps, and Web
Streams. All while supporting some of the non-standards that many normal
people love for some reason (JSX and TypeScript).

It's driven by the following hot-takes:

  • ESM is non-negotiable in {currentYear}
  • SSR is non-negotiable in {currentYear}
  • Bundling is an anti-pattern in {currentYear}
  • Data can be requested anywhere, and is accessible on the server, always
  • Lazy routing with dynamic imports trumps FS routing
  • Less magic in tooling and frameworks is a good thing
  • Simplify your workflow and tech stack at all costs - life is too short
  • Streams are neat
View Demo View Github

Quick start

The most minimal setup of Ultra can be found at
/examples/boilerplate.
There are more
/examples
as well.

Native first

Everything is ES Modules. Server side rendering is default. Have the quickest
TTFB by using the React streaming server renderer.

# HTTP/2 200  

* Received 381 B chunk
* Received 8 B chunk
* Received 6 B chunk
* Received 6 B chunk
* Received 1 B chunk
* Received 5 B chunk
* Received 2 B chunk
* Received 7 B chunk

Import Maps are used to manage 3rd party
dependencies. No bundling, building or complex package managers needed.

{
  "imports": {
    "react": "https://esm.sh/react@alpha",
    "react-dom": "https://esm.sh/react-dom@alpha"
  }
}

import React from "react";

export default const Graveyard = () => {
  const gravestones = [
    ".cjs",
    "require()",
    "node_modules",
    "package.json",
    "webpack.config",
    "babel.config",
    "create-react-app",
    "next.js",
  ];

  return (
    <ul className="graveyard">
      {gravestones.map((grave) => (
        <li>
          <figure>
            <img src="/grave.svg" alt="Gravestone" />
            <figcaption>{grave}</figcaption>
          </figure>
        </li>
      ));}
    </ul>
  )
};

Under the hood: We use esbuild +
SWC to transpile jsx/tsx in realtime. Your single ES modules
stay single ES modules, but as minified vanilla js, with your import maps
inlined.

Transpile: graveyard.jsx in 6ms

// Transpiled example of graveyard.jsx
import e from"https://esm.sh/react@alpha";const a=()=>e.createElement("ul",{className:"graveyard"},[".cjs","require()","node_modules","package.json","webpack.config","babel.config","create-react-app","next.js"].map(r=>e.createElement("li",null,e.createElement("figure",null,e.createElement("img",{src:"/grave.svg",alt:"Gravestone"}),e.createElement("figcaption",null,r)))));export default a;

Note: In development, modules are transpiled every request. In production,
transpiled modules are stored in an LRU cache. ?

Routing

Stop poking around at your filesystem. Routing can be defined anywhere in your
app, and dynamic imports will ensure only relevant route files are downloaded at
any given time.

Powered by Wouter. Ah, what a breath of
fresh air...

import { Suspense } from "react";
import { Router } from "wouter";

const Home = lazy(() => import("./home.jsx"));

const App = () => {
  <Router>
    <Suspense path="/home" fallback={<Loading />}>
      <Home />
    </Suspense>
  </Router>;
};

Data fetching

SWR lets us fetch data anywhere in our
components, works with Suspense everywhere.

Caveat: Suspense data fetching is still in it's early days... watch this
space.

import { Suspense } from "react";
import useSWR from "swr";

const Profile = () => {
  const { data } = useSWR("/api/user", fetcher, { suspense: true });
  return <div>hello, {data.name}</div>;
};

const App = () => {
  return (
    <Suspense fallback={<Loading />}>
      <Profile />
    </Suspense>
  );
};