Benjamin-Philip

Benjamin-Philip

Phoenix LiveView with WebAssembly

Recently Chris McCord’s talk about Phoenix LiveView at ElixirConf EU 2019 just came up in my YouTube feed:

In his talk Chris initially explains how you can write interactive web apps without JS with a catch: that you don’t need to write JS for your app, but that it is used by LiveView anyway. From the user’s point of view this is fine, as it is not they who has to write and maintain that JS.

However with technologies such as wasm and the Rust backed for wasm slowly maturing, it seems to me that it is possible to rewrite the websocket client on LiveView in Rust + Wasm and eliminate all JS with the exception of glue code generated by the compiler.

Since I have never contributed to LV, and thus not aware of the nitty gritties of the websocket client’s implementation, the core team’s overall satisfaction with the client as well as with JS, and the time and effort required to maintain the client, I have a few questions:

  1. Is writing the websocket client even possible with WASM? Is there some technicality which makes a fully functioning wasm client impossible?

  2. Does the core team consider WASM and the Rust backend for WASM or even any other language that compiles to wasm mature enough for use in LV?

  3. Would wasm lead to any performance gains at the client side? Will there be any performance improvements or decreased memory use by using wasm. Would switching to wasm improve LV’s performance in this scenario?

  4. Is handwritten javascript even a maintenence headache for the core team? Are there bugs that arise from the lack of compiler checks in the codebase? Would switching to wasm ease these pains? Would it add a significant amount of extra complexity to maintaining LV?

  5. Apart from the marketing tagline of “No JS in the codebase at all”, is there any sense in using WASM?

Most Liked

derpycoder

derpycoder

In the talk on LiveView native, linked below, this point was raised towards the end.

A common core, written in rust perhaps, can be used to jump start anyone approaching LiveView implementation in any platform.


LiveView is not yet in version 1, so jumping straight to a static typed language without fleshing out the needs of users will just introduce unnecessary friction.

Also, WebAssembly has no direct DOM access, so despite its superior performance, you may find that it is slower than JavaScript for LiveView use case due to extra I/O overhead.

For this reason, currently people are finding most success with WebAssembly for algorithmic / compute-intensive tasks.

And for DOM stuff, LiveView will still need JavaScript, until Webassembly Interfaces becomes standardised!

wanton7

wanton7

Why would it matter to what language underlying tech is using if you don’t have to use it yourself? LiveView isn’t going to use WASM because why would it? There is not need to use some newer tech just because it’s there.

I think LiveView is more about allowing you run your UI code at server side for simplicity than removing JavaScript. One big thing about it is that you don’t have to write an API. Sometimes you still want to use JavaScript & JavaScript libraries in browser when you want something extra. If client would be using WASM it’s possible it could be harder for developers to use and client might be slower than now because my understanding is that communication between WASM and JavaScript isn’t that fast.

WASM isn’t currently in a place where it’s replacement for JavaScript. So you would still need some JavaScript even if you write some parts in WASM. JavaScript has been around for a long time, it’s mature, quite performant with new JavaScript engines and there are lot of libraries for it. For compiler checks (static typing) LiveView team could just switch to using TypeScript.

I don’t understand this JavaScript is bad and shouldn’t be used mentality. It has its quirks but it’s perfectly fine for lot of things especially for browser and if you use TypeScript to create type system top of it works quite well even for larger code bases.

evadne

evadne

Moving client logic from JS VM to WASM does not reduce the total amount of logic. However it would free up the main thread for interactions (an axiom known for 20+ years since 1st desktop was written). A relevant example would be like PDF.js splitting the rendition process into a separate worker (some commercial products use the same strategy).

The main cachet of LV is server-side computation of DOM diffs and client-side patching of DOM utilising a persistent two-way connection. Explicitly and implicitly therefore, LV is coupled with DOM (joined at the hip if you will). There may be merits if we were to move some shadow DOM operations off the main thread for optimisation reasons (speaking from a super high level), however I do not see this sort of complexity provide any tangible benefit for the median use case of LV. Those folks who need it, would probably fare much better using SproutCore, Ember, React or some other 10-year-old “desktop class web apps” framework (so they have matured enough and actually have basic things) and use Phoenix sockets for fast backend interop :stuck_out_tongue:

Why exterminate JS when it has served us so well since 1995?

Where Next?

Popular in Discussions Top

matthias_toepp
I’d love to hear what people think about Wisp, the new Gleam web framework started by Gleam’s primary creator Louis Pilfold. Gleam, alon...
New
owaisqayum
I have a sample string sentence = "Hello, world ... 123 *** ^%&*())^% %%:>" From this string, I want to only keep the integers, ...
New
WolfDan
After doing a port from a c++ library to my project in phoenix I’ve seen that I need a faster way to run this algorithm and I found this ...
New
arpan
Hello everyone :wave: Today I am very excited to announce a project that I have been working on for almost 3 months now. The project is...
New
fireproofsocks
This is more of a general question, but I’m wondering how other people in the community think about the pattern matching in function sign...
New
arcanemachine
https://nitter.net/josevalim/status/1744395345872683471 https://twitter.com/josevalim/status/1744395345872683471
New
nunobernardes99
Hi there Elixir friends :vulcan_salute: In a recent task I was on, I needed to check in two dates which of them is the maximum and which...
New
CharlesO
Erlang :list.nth simple, but 1 - based nth(1, [H|_]) -> H; nth(N, [_|T]) when N > 1 -> nth(N - 1, T). Elixir Enum.at … coo...
New
Ankhers
Just a little information upfront. Generally speaking, if I feel like I need to either break a pipe chain or use an anonymous function in...
New
eteeselink
Hi all, In the last days, two things happened: A blog post titled “They might never tell you it’s broken” made the rounds. It’s about ...
New

Other popular topics Top

lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
klo
Got a question about when to concat vs. prepending items to list then reversing to achieve appending. So i know lists boil down to [1 | ...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New

We're in Beta

About us Mission Statement