A Fresh Look at

Deno

What is Deno?

  • New JavaScript runtime
  • V8 engine
  • Rust

Why though?

  • No promises (to start out)

Ryan Dahl's regrets with Node:

Artwork: kevinkassimo

Why though?

JS in Web vs in Node

fetch

Artwork: Pablo Barría Urenda

WebSockets

Deno Differences

Secure by default

  • Env access:              --allow-env
  • Network access:     --allow-net
  • File Read access:    --allow-read
  • File Write access:    --allow-write
  • Allow Subprocess:  --allow-run
  • Allow all:                  --allow-all,  -A

Artwork: Brama Udi

## allow access to specific domain
deno run --allow-net=github.com

## allow access to specific folder
deno run --allow-read=/projects

Configurable

Deno Differences

Dependency Management

  • Similar to Browser JS
  • Imported directly from URLs

Artwork: Lucas Lopes Pultz

import { assertEquals } from "https://deno.land/std@0.148.0/testing/asserts.ts";

assertEquals("hello", "hello");
assertEquals("world", "world");

console.log("Asserted! ✓");
  • No package.json or node_modules
  • No index.js
  • ES Modules only
  • Version 1.25 has experimental npm support

Deno Differences

Dependency Management

New Experimental

Deno Differences

  • Typescript support "out of the box"
  • Built in Tooling

formatter 

linter 

testing 

deno fmt

deno lint

deno test

Artwork: hashrock

Deno Differences

Standard Library

  • dotenv
  • fs
  • http
  • datetime
  • crypto
  • async
  • io
  • path
  • permissions
  • streams
  • uuid

Artwork: @dcdunkan

Real World Deno

Deepgram's SDK

Node

Deno

Real World Deno

Managing Dependencies

Artwork: Lucas Lopes Pultz

  • Repetitive
  • Best to maintain a central Dependency file
export * from "./scopes.ts";
export { DefaultOptions } from "./defaultOptions.ts";
export * from "./types/index.ts";
export * from "./deepgram.ts";
export * from "./helpers/index.ts";
export * from "./transcription/index.ts";
export * from "./projects.ts";
export * from "./members.ts";
export * from "./keys.ts";
export * from "./usage.ts";
export * from "./invitation.ts";
export * from "./billing.ts";
export * as querystring from "https://deno.land/x/querystring@v1.0.2/mod.js";

import { MemberList, Message, querystring } from "./deps.ts";

Deno vs X

Benchmarks

Artwork: Lucas Lopes Pultz

Source:  https://github.com/jherr/bun-vs-node-2

Artwork: Lucas Lopes Pultz

Artwork: Lucas Lopes Pultz

Platform Req/S Latency (ms)
Remix + Express 3291 14
Remix + App Server 3378 15
Remix + Bun 6417 8
Astro + Node 3765 14
Astro + Deno 6420 7
Astro + Deno + Preact 11538 4
Astro + Deno + Solid-JS 12337 4
Fresh (Deno + Preact) 15716 3
Qwik 5250 10

Deno Deploy

  • Distributed system
  • Runs JS, TS and WASM at the edge
  • Currently supports 34 regions
  • Very fast
  • Deploy in less than 1 second

Deno Deploy

Fresh

  • A "Next Generation web framework"
  • Built for speed, reliability and simplicity

Why Another Framework?

  • Wanted framework to fit into the Deno developer flow
  • Allow Deno devs better experience building websites
  • Use the tooling available in Deno

Fresh features

  • Island-based client hydration (partial hydration)
  • JIT rendering on the edge
  • No build step
  • No JS shipped to client by default
  • No config
  • TypeScript support out of the box
  • True SSR framework with progressive enhancement on the client
  • Templating and Routing framework

Fresh features

  • Handler & Component

Routing

// routes/plain.tsx

import { HandlerContext, Handlers } from "$fresh/server.ts";

export const handler: Handlers = {
  GET(_req: Request, _ctx: HandlerContext) {
    return new Response("Hello World");
  },
};
// routes/html.tsx

/** @jsx h */
import { h } from "preact";
import { PageProps } from "$fresh/server.ts";

export default function Page(props: PageProps) {
  return <div>You are on the page '{props.url.href}'.</div>;
}

Fresh features

  • Mixed Handler and Component

Routing

// routes/html.tsx

/** @jsx h */
import { h } from "preact";
import { HandlerContext, Handlers, PageProps } from "$fresh/server.ts";

export const handler: Handlers = {
  async GET(_req: Request, ctx: HandlerContext) {
    const resp = await ctx.render();
    resp.headers.set("X-Custom-Header", "Hello World");
    return resp;
  },
};

export default function Page(props: PageProps) {
  return <div>You are on the page '{props.url.href}'.</div>;
}

Questions

Doing Things With Deno UtahJS

By Brian Barrow

Made with Slides.com

Doing Things With Deno UtahJS

  • 47

More from Brian Barrow