Show HN: LiveViewJS – TypeScript back end for LiveView Apps (Phoenix LiveView)

57
Show HN: LiveViewJS – TypeScript back end for LiveView Apps (Phoenix LiveView)

LiveViewJS

Front-end framework for back-end developers

Credit πŸ™Œ

This is a backend implementation of Phoenix LiveView in Typescript. What the Phoenix folks have built is phenominal and I wanted to use that paradigm in Typescript and make it available to others.

Quick Overview of LiveView Approach

How Phoenix desribes LiveView:

LiveView is an exciting new library which enables rich, real-time user experiences with server-rendered HTML. LiveView powered applications are stateful on the server with bidrectional communication via WebSockets, offering a vastly simplified programming model compared to JavaScript alternatives.

In other words, LiveView takes a very different approach than the popular SPA frameworks like React, Vuejs, and Svelt to building rich, highly interactive web applications. Instead of sending down a bundle of javascript, LiveView apps render an HTML page on the first request and then connect via a persistent socket over which client events are sent and updated received. These events may trigger a state update on the server and a re-calculation of what the page should look like. Instead of reloading the page, the client receives a “diff” of the page via the socket and the page’s DOM is updated. (This video by Pragmatic Studio does an amazing job of explaining how LiveView works.)

The programming paradigm is extremely powerful and productive!

Feedback is a 🎁

I am not an expert on Phoenix Liveview, Elixir, Erlang VMs, etc or really most things. Please feel free to open an issue with questios, bugs, etc.

Status – Ξ²

LiveViewJS is in Ξ²eta. The project is still young but the code is stable, tested, and well-documented.

Implemented Phoenix Bindings

The bindings below marked with βœ… are working and tested and most of them have example usage in the examples codebase. Those with ?, I have not gotten around to testing so not sure if they work. Those marked with ❌ are not yet implemented and known not to work.

(See Phoenix Bindings Docs for more details)

Binding Attribute Supported
Params phx-value-* βœ…
Click Events phx-click βœ…
Click Events phx-click-away βœ…
Form Events phx-change βœ…
Form Events phx-submit βœ…
Form Events phx-feedback-for βœ…
Form Events phx-disable-with βœ…
Form Events phx-trigger-action οΉ–
Form Events phx-auto-recover οΉ–
Focus Events phx-blur βœ…
Focus Events phx-focus βœ…
Focus Events phx-window-blur βœ…
Focus Events phx-window-focus βœ…
Key Events phx-keydown βœ…
Key Events phx-keyup βœ…
Key Events phx-window-keydown βœ…
Key Events phx-window-keyup βœ…
Key Events phx-key βœ…
DOM Patching phx-update βœ…
DOM Patching phx-remove οΉ–
JS Interop phx-hook βœ…
Rate Limiting phx-debounce βœ…
Rate Limiting phx-throttle βœ…
Static Tracking phx-track-static ❌

LiveViewJS Changesets

Phoenix’s Ecto ORM library and Phoenix LiveView rely on Ecto Changesets to allow filtering, validation, and other logic to be applied to the data. Changesets are a powerful way to apply logic to data and are used in Phoenix’s ORM and LiveView. LiveViewJS uses Changesets to provide a similar API to Phoenix’s though it is NOT a full-blown ORM.

Detailed documentation on LiveViewJS Changesets.

Usage – Show me some code! ⌨️

Step 0 Install LiveViewJS
npm i liveviewjs

Step 1 Implement a LiveViewComponent

implements
LiveViewComponent,
LiveViewExternalEventListener {

// mount is called before html render on HTTP requests and
// when the socket is connected on the phx-join event
mount(params: LiveViewMountParams, session: Partial, socket: LiveViewSocket) {
// set the default value(s) for the component data
return { brightness: 10 };
};

// Define and render the HTML for your LiveViewComponent
// This function is called after any context change and
// only diffs are sent back to the page to re-render
render(context: LightContext) {
const { brightness } = context;
return html`

Front Porch Light

${brightness}%

`
};

// Handle events sent back from the client… Events
// may update the state (context) of the component and
// cause a re-render
handleEvent(event: LightEvent, params: never, socket: LiveViewSocket) {
const ctx: LightContext = { brightness: socket.context.brightness };
switch (event) {
case ‘off’:
ctx.brightness = 0;
break;
case ‘on’:
ctx.brightness = 100;
break;
case ‘up’:
ctx.brightness = Math.min(ctx.brightness + 10, 100);
break;
case ‘down’:
ctx.brightness = Math.max(ctx.brightness – 10, 0);
break;
}
return ctx;
}

}”>

import { SessionData } from "express-session";
import {html, BaseLiveViewComponent, LiveViewComponent, LiveViewExternalEventListener, LiveViewMountParams, LiveViewSocket } from "liveviewjs";

// define your component's data shape
export interface LightContext {
  brightness: number;
}

// define the component events
export type LightEvent = "on" | "off" | "up" | "down";

// implement your component
export class LightLiveViewComponent extends BaseLiveViewComponent<LightContext, never> implements
  LiveViewComponent<LightContext, never>,
  LiveViewExternalEventListener<LightContext, LightEvent, never> {

  // mount is called before html render on HTTP requests and
  // when the socket is connected on the phx-join event
  mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<LightContext>) {
    // set the default value(s) for the component data
    return { brightness: 10 };
  };

  // Define and render the HTML for your LiveViewComponent
  // This function is called after any context change and
  // only diffs are sent back to the page to re-render
  render(context: LightContext) {
    const { brightness } = context;
    return html`
    <div id="light">
      <h1>Front Porch Light h1>
      <div class="meter">
        <div>${brightness}%div>
        <progress id="light_level" value="${brightness}" max="100">
        progress>
      div>

      <button phx-click="off">
        Off
      button>

      <button phx-click="down">
        Down
      button>

      <button phx-click="up">
        Up
      button>

      <button phx-click="on">
        On
      button>
    div>
    `
  };

  // Handle events sent back from the client...  Events
  // may update the state (context) of the component and
  // cause a re-render
  handleEvent(event: LightEvent, params: never, socket: LiveViewSocket<LightContext>) {
    const ctx: LightContext = { brightness: socket.context.brightness };
    switch (event) {
      case 'off':
        ctx.brightness = 0;
        break;
      case 'on':
        ctx.brightness = 100;
        break;
      case 'up':
        ctx.brightness = Math.min(ctx.brightness + 10, 100);
        break;
      case 'down':
        ctx.brightness = Math.max(ctx.brightness - 10, 0);
        break;
    }
    return ctx;
  }

}

Step 2 – Register your LiveViewComponents and start the HTTP and Socket server with LiveViewServer

Other features to be implemented:

  • Updating HTML Document Title – Vote for Issue 16
  • LiveView Helpers – Vote for Issue 17
  • Temporary Assigns – Vote fo

Read More

Charlie Layers
WRITTEN BY

Charlie Layers

Fill your life with experiences so you always have a great story to tell

you're currently offline