Ultra

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"
  }
}

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.

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

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…

All Wouter hooks and functionality is supported: Wouter docs

import React, { Suspense } from "react";
import { Route } from "wouter";

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

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

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

Ultra uses the brand new SWR-1.0.0. This allows building of a cache server side, and repopulating on client side. Please see example here.

SWR options are supported: SWR docs

import { SWRConfig } from "swr";
import ultraCache from "ultra/cache";

const options = (cache) => ({
  provider: () => ultraCache(cache),
  suspense: true,
});

const Ultra = ({ cache }) => {
  return (
    <SWRConfig value={options(cache)}>
      <h1>Hello World</h1>
    </SWRConfig>
  );
};

Ultra is powered by the mighty Oak. We expose both the app and router, which can be configured for any custom middleware or routing your app might need.

Oak docs

import ultra, { app } from "https://deno.land/x/ultra@v0.6/mod.ts";

// logger middleware
app.use(async (context, next) => {
  await next();
  const rt = context.response.headers.get("X-Response-Time");
  console.log(`${context.request.method} ${context.request.url} - ${rt}`);
});

await ultra({
  importmap: await Deno.readTextFile("importmap.json"),
});

Custom routes can all be added, helpful for API’s.

import ultra, { router } from "https://deno.land/x/ultra@v0.6/mod.ts";

// example API route
router.get("/api/:slug", async (context) => {
  // ...
});

await ultra({
  importmap: await Deno.readTextFile("importmap.json"),
});

Classic deployment: Ultra can be deployed via Docker. Here is an example Dockerfile which uses the official Denoland image.

FROM denoland/deno:1.14.0

EXPOSE 3000 

RUN apt-get update && apt-get -y install make

WORKDIR /

COPY . .

RUN make cache

CMD ["make", "start"]

We are currently working on support for Deno Deploy, Cloudflare Workers, and Vercel. Keen to help? Open a PR, please! 🙏