from Hacker News

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

by floodfx on 2/11/22, 4:22 PM with 43 comments

Author here. I really love the programming paradigm behind by Phoenix LiveView applications and wanted to expand the ecosystem to include programmers like myself that love Typescript.

In summary, LiveViewJS reuses all the Phoenix client code and implemented a new backend in Typescript to handle client events and send back updates. Lots more detail and examples in the repo.

Would love any questions and/or feedback. Thanks!

  • by sph on 2/11/22, 9:52 PM

    Javascript is like Ice 9, it turns everything it touches into Ice 9.

    LiveView was invented not to have to deal with Javascript-powered SPA architectures and client-side coding in general, because JS is ass, and here's LiveViewJS to convert to Javascript a technology invented not to deal with Javascript.

    Gary Bernhardt warned us, yet no one listened. shakes fist at cloud

    https://www.destroyallsoftware.com/talks/the-birth-and-death...

  • by searchableguy on 2/11/22, 6:29 PM

    How is the performance and scaling story compared to live view?

    Live view works so well because of elixir and BEAM. The same model may not translate well to other languages depending on their concurrency and recovery pattern. There are also many optimizations in BEAM for keeping latency consistent over throughout alone which is important for live view applications.

    I also wonder if it will be possible to have push only live view application. One of the reasons for this is you can use server events instead of sockets. It would be cool for building visualization or showing metrics from backend.

    Awesome job all around. I love the examples folder.

  • by lucis on 2/11/22, 10:29 PM

    I appreciate projects like this, as LiveView brings some amazing solutions to the game, but I'd guess that even if it was "feature-complete", I would still miss the so many great stuff about the BEAM/Elixir.

    Although, the safety of Typescript is the only thing that stops me from building my next hobbie/side-project with Elixir. After you get the benefits from the type system (specially in the TS ecosystem), it's hard to go back.

    Looking forward to see where the project goes!

  • by darnfish on 2/11/22, 5:09 PM

  • by tbranyen on 2/11/22, 7:43 PM

    Hi floodfx, we should chat at some point if you're on slack/discord/etc. I'm building something extremely similar and there's potential opportunity to share some code/learnings. Personally I feel this design paradigm is the real web 3.0.

    My project is https://diffhtml.org/ and I have started experimenting with middleware to bridge to server and client workers: https://github.com/tbranyen/diffhtml/pull/251. For the server worker, it uses a WebSocket to ferry the VDOM diff patches, custom events, and property access/function calls. A big goal is to allow synchronous "main thread" access from workers, including on the server-side. This would allow you to write your UI code as if you were a client side app. It does this the same way as partytown using a SharedArrayBuffer and Atomics. You can see demo source code here: https://gist.github.com/tbranyen/2f5be81cfb7b3aa1bb443c8ef13....

    I've also toyed around with hot reloading components without the need for a pre-processor like Babel, and the results are hugely promising. Stateful live UI updates from saving a component file to seeing in the browser without all the fuss with complex build steps is liberating.

    I'm probably a few months out from having a usable beta, but I'm going to follow your project closely. Thanks for sharing!

  • by pawelduda on 2/11/22, 7:44 PM

    I think the main reason original LiveView is so great is that it fits really well into the Erlang/Elixir/Phoenix ecosystem. Love to see the idea spreading though!
  • by flessner on 2/11/22, 10:02 PM

    I tried Phoenix LiveView recently and it feels really refreshing. In comparison to Svelte (my preferred tool usually) it feels oddly similar like it occupies the same idea with a completely different execution.

    I personally prefer JS over Elixir and having everything in one language also makes everything easier... maybe there is also a future to fuse some of these concepts into Svelte (I will have to experiment :D )

  • by aloukissas on 2/12/22, 4:21 AM

    Elixir and TS fan here: curious, what would be the use for this, aside of what looks like a very interesting project? The main strength of LV is that is sits on top of the BEAM and OTP which makes it very suitable to scale predictably. Other frameworks have tried to do that (Hotwire or something for Rails iirc), but they lack the benefits of the BEAM. Epic job though!
  • by interactivecode on 2/11/22, 9:57 PM

    I always thought the react programming model could solve most criticisms perfectly with a built in liveview style server part
  • by prophesi on 2/11/22, 5:29 PM

    This is really cool! So basically instead of using LiveEEX templates, you can write it like a SPA with Typescript?
  • by xtlc on 2/12/22, 1:09 AM

    There is htmx: www.htmx.org. maybe also a good source for ideas.
  • by hartator on 2/11/22, 6:08 PM

    Any live demos to play with? Good work.
  • by benburton on 2/11/22, 11:28 PM

    Looked interesting. Thought I would take a deep dive. README references a video behind a subscription paywall? I'm out.