Datastar ❤️ Deno Fresh

After doing some research, I've decided to use Deno Fresh with Datastar as my so called full stack framework.

Choosing Datastar

Datastar (D*) is a lightweight and tiny javascript frontend framework that reduces the need to use bloated frameworks like React. Since starting my development journey, I have used Flash, jQuery, Angular, React, and React with Remix. Using D* feels like going back to the future.

Choosing Deno

Using Deno seems like a good idea since you can deploy Deno apps for free using Deno Deploy. Deno's runtime is focused on lean and light weight typescript development.

Choosing Fresh

  • Using Fresh's Plugin system to load and build D* to have the option to add custom D* plugins. Check out this gist
  • Built-in support for JSX allows for a great templating experience.
  • Offers a nice file-based routing system, along with layouts and middleware, enhancing the development experience.
  • Slim and simple.
  • Enables easy creation of SSE (Server-Sent Events). Since D* relies heavily on SSE for interactivity, having a straightforward way to create stream responses is a plus.
  • Keeping the option open to use Islands if needed in the future.
export const handler: Handlers = {
  GET() {
    // Create ReadableStream to stream responses using `controller.enqueue`
    const body = new ReadableStream({
      async start(controller) {
        while (true) {
          await new Promise((resolve) => setTimeout(resolve, 1000));
          controller.enqueue(
            // `mergeFragments` is a custom function tha converts JSX into an SSE D* fragment
            mergeFragments({
              fragments: [
                <div class="foo">
                  foo
                </div>,
              ],
              selector: ".foo",
            }),
          );
        }
      },
      cancel() {
      },
    });
    // Pipe the stream using `TextEncoderStream`
    return new Response(body.pipeThrough(new TextEncoderStream()), {
      headers: {
        "content-type": "text/event-stream",
        "cache-control": "no-cache",
      },
    });
  },
};

Using a Fresher Fresh

  • I'm not using Partials, as D* provides all the functionality that Fresh does.