chicken

Peko

🪶 Featherweight toolkit for the modern stateless web. Built with Deno. 🦕

Serve the world with Deno Deploy 🌏

API DOCS

  Routing     Events     Request handling     Response caching  

Philosophy

  • First-class frontend - Server-side render then client-side hydrate with the same code. Bundling optional.
  • Production-ready backend - TypeScript, Response caching (and security checks in devMove coming soon).
  • Software Minimalism - Sleek runtime using only the Deno std library.
  • Ease of Adoption - Intuitive API with no enforced front-end tooling or project structure.

Read on, star/fork/clone away and feel free to contribute any ideas!

Get started

Build and launch a secure and feature-rich webapp in one file.

OR try the examples:

  1. Deno is sick. Install it.

  2. $ git clone https://github.com/sebringrose/peko.git
  3. $ cd peko
  4. $ deno run --allow-net --allow-env --allow-read --watch examples/preact/app.ts

Note: Lit-html VS Code plugin recommended if using HTM & Preact.

OR Import Peko into your own project:

import * as Peko from "https://deno.land/x/peko/mod.ts"

And if you want to use Peko's types:

import { ... } from "https://deno.land/x/peko/lib/types.ts"

Deployment

Example Deno Deploy Docker
Preact ✅ ✅
Custom-ssr ✅ ✅
Eta-templating ❌ ✅
Vue ❌ ❌

This project aims to be ready for production soon but it is not complete with extensive testing yet! Use at your own risk.

Routing

Http Requests are matched to a mutable array of Routes. Routes can be added or removed at runtime via the addRoute and removeRoute exports.

Events

Realtime app logic can be built with Events. Events are created by Emitters via the .emit method. Emitters can be subscribed to manually Emitter.subscribe or given to the sseHandler to stream Event data to connected clients (see examples/sse).

Request handling

The included staticHandler, ssrHandler and sseHandler serve static assets, render JavaScript apps and stream server-sent events respectively. There are premade addStaticRoute, addSSRRoute and addSSERoute exports that implement their respective handlers but you can import the handlers or create your own and plug them into a basic Route (see examples/custom-ssr).

Response caching

In stateless computing, memory should only be used for source code and disposable cache data. Response caching ensures that we only store data that can be regenerated or refetched. The addSSRRoute export uses the createResponseCache utility export to memoize the ssrHandler so that Requests can be served from the cache and not unecessarily rerendered.

Tip: Caching Responses from external data services helps keep your app fast and reduce network overhead in serving Requests!

Note: addSSRRoute only caches Responses when config.devMode === false (which is the default config). It is recommended to use the setConfig export to set devMode from an environment variable (see examples/config.ts).

This is cool...

Because it provides all of the SEO and UX benefits of SSR without any JavaScript transpilation or bundling required - the server and browser use the exact same code! This completely eliminates part of the traditional JavaScript SSR toolchain, increasing project maintainability and simplicity.

Better yet, Peko is not build for any specific frontend framework or library. You can use React, Preact, Vue... you name it. Simply plug your rendering function into an SSRRoute along with the client-side hydration logic to be injected into your HTML template (if you need it).

It is all possible because of the unique combination of powerful new JavaScript tools. Deno, unlike Node.js, is built to the ECMAScript specification. This makes it compatible with browser JavaScript and vice versa which elimates the need to generate separate client and server JavaScript bundles (the support for URL imports is the secret sauce). UI libraries like Preact combined with htm offer lightning fast client-side hydration with an ES6-friendly markup syntax. On top of this Deno has native TypeScript support, a rich runtime API and a standard library full of great tools as well as a passionate community supporting it.

Differences between Next.js, etc.

Peko is built with one radical design decision: it isn't built to support the infinite universe of npm packages (as these often require heavy build processes). This is a deliberate step away from the inflated state that many modern web applications find themselves in. Just make sure your frontend modules can run in the browser and you're golden!