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 (~10kb Preact example).
Production-ready backend - reliablility and performance with Typescript and configurable page caching.
Software minimalism - no build-step, just a sleek runtime using only the Deno std library.
Ease of adoption - intuitive functions & zero fixed project 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.js
Edit ./examples/preact/src for frontend changes and play with ./examples/preact/app.js 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 page requests and renders your frontend source modules to HTML. The Preact example codebase uses Preact UI components and preact-render-to-string for Server-Side Rendering (SSR). The HTML is injected into an HTML template along with any custom defined tags and request metadata before being served to the user’s browser client.

If env.ENVIRONMENT === "production" page renders are also cached so subsequent requests can be served instantly until the page’s configurable cache lifetime is reached.

Why is this cool?

Because it provides all of the SEO and UX benefits of SSR with no 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!