Skip to content

Latest commit

 

History

History
78 lines (52 loc) · 3.95 KB

toolkit.md

File metadata and controls

78 lines (52 loc) · 3.95 KB
Raw

ts-liveview

ts-liveview helps to deliver fast and interactive user interface directly from the node.js server.

(Without MBs of javascript to be downloaded and executed on the client side.)

The client-side runtime of ts-liveview is below 12KB (2.2KB bundled, minified and gzipped).

ts-liveview supports JSX but it doesn't rely on Virtual DOM. Instead, precise DOM operations are derived from application-specific event handlers, and sent to the browser client(s) for realtime UI updates.

Get Started

npm init ts-liveview my-app
cd my-app
pnpm install	# or `yarn install` or `npm install`
pnpm dev    	# or `yarn dev`     or `npm run dev`

Details refer to create-ts-liveview

Features

  • Support hybrid rendering mode
    • Boot-time pre-rendering [0]
    • Request-time server-rendering [1]
    • Run-time live update [2]
  • Enable interactive UI with minimal amount of javascript to be downloaded
  • Still functional when javascript is disabled on client device [3]
  • Support to develop with JSX, AST, or html template
  • Efficient wire format
  • Lightweight WebSocket-based protocols (0.5K to 1.9K minified, 128x to 33x smaller than socket.io)
  • Reliable connection (Auto send accumulated messages when network resume)

Remarks:

[0] Pay the AST-to-HTML conversion time-cost once at boot-time instead of at each request-time

[1] Response contentful html page directly to GET request

[2] Triggered by events from server or other clients

[3] For screen-reader, text-based browser, and people tried with privacy invading scripts

Why JSX?

Previous versions of ts-liveview use template string to build html. It allows the engine to quickly construct the html output for morphdom to patch the DOM.

With the template string based approach, html injection could be avoided when explicitly using helper function to sanitize the dynamic content. However it requires the developer to be careful, which could be bug-prone.

Why no virtual-dom diff?

Current version updates the DOM using document query selector, this reduce the memory requirement on the server to supports simultaneous connections.

The application can be built on top of reactive model powered by S.js, RxJS, or OOP with getter and setter. Example using getter and setting see thermostat.tsx.

Examples / Demo

Inspired from

License

This is free and open-source software (FOSS) with BSD-2-Clause License