chicken

Peko

🐔🦕 The Featherweight Deno Library for Modern JS Apps. 🌏

Serve around the world effortlessly with Deno Deploy!

API DOCS

Summary

First-Class Frontend - Server-Side Render then rapidly Hydrate with preloaded JS modules.
Production-Ready Backend - Reliable and performant with Deno-native Typescript and configurable Response caching.
Software Minimalism - No build-step, just a sleek runtime using only the Deno std library.
Ease of Adoption - Intuitive API & types with zero enforced directory structure.

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

Getting started

Install Deno
$ git clone https://github.com/sebringrose/peko.git
$ cd peko
$ deno run --allow-net --allow-env --allow-read --watch examples/preact/app.ts
Edit ./examples/preact/src for frontend changes and play with ./examples/preact/app.ts for app server logic.

Import Peko into your own project:

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

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

Deployment

Docker & Deno Deploy deployment guides coming soon!

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

How does it work?

Deno http server receives HTTP requests and matches them to your defined app routes. If a route with matching HTTP path and url is found, the route’s middleware function is run followed by the handler function.

Peko contains premade Server-Side Rendering (SSR) and Static Asset handlers that can be easily accessed using Peko.addStaticRoute or Peko.addSSRRoute. The Preact example codebase uses Preact UI components with preact-render-to-string and a simple HTML Document Template Literal for SSR.

Advanced templating can be done with eta - take a look at /examples/eta-templating. Or for an example of a custom SSR handler that implements Peko’s internal Response caching system have a look at /examples/custom-ssr!

Caching only enabled if config.devMode == false. You can manually edit the config using Peko.setConfig({ ... }) or keep the default but set env.ENVIRONMENT = "production" to test caching locally.

Note: Peko.addSSRRoute({ ... }) is the only route function that implements caching by default.

Why is this 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 of development.

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 Peko’s SSRRoute data along with a URL for the root module of your app and add the client-side hydration logic to your HTML template.

Note: Your root app component must be exported as default.

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 a transpiler-free JavaScript 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 other frameworks like 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 bundling and transpilation). This is a deliberate step away from the inflated state that many modern web applications find themselves in. Just make sure your source modules can run directly in the browser without transpilation!