Show HN: TS LiveView

github.com

8 pointsaabbcc12413 comments

LiveView enables rich, real-time user experiences with server-rendered HTML.

So you can write complex realtime webapp without bloating the client side. It responses pre-rendered HTML upon first GET request, then use websocket to patch the DOM for later interactions.

Just like Phoenix LiveView but in Typescript!

The core library only consist of 441 LOC (excluded types and imports). Plus most logics are shifted on the server side, hence only minimal works is required on the client side.

I made this tool because I was frustrated by the initial load time for an Ionic 4 app, and the deep 'DOM expansion' after the web components got mounted.

LiveView is very lightweight, the client-side js (liveview + morphdom) is only 8K minified. For reference, a blank Ionic Angular build is 4.2M

Below are more size comparison:

| Tools | Runtime Code Size (minified) |

|----------|------------------------------|

| TS LiveView + morphdom | 8K |

| (Phoenix) LiveView.js + morphdom | 29K |

| Vue 2.5.20 | 88K |

| React 16.6.3 + React DOM | 112K |

| Ember 3.0.0.beta.2 | 468K |

| React + Ionic * | 2.1M |

| Stencil + Ionic * | 3.0M |

| Angular + Ionic * | 4.2M |

* : all Ionic build excluded the svg, assets, *.map and PWA json files

Reply on news.ycombinator.com