Options For Dynamic DOM Updating For Phoenix Project

I have a GUI with user inputs that affect all other GUI outputs.

If the user changes an input, I need the outputs to dynamically update to show the change without submitting the form.

Hows the best way to do that with Phoenix, the most responsively?

I’m looking at the HTML.Form docs. As near as I can tell, it couldn’t do dynamic DOM updating?

Is there anything else I should consider? Or am I left with something like VueJs or React?

NOTE: This will be for a desktop/mobile app that may or may not be web-based down the line.

Phoenix does not have much JavaScript in it. I do not believe you can do what you want with form builder only.

But I suspect you may not need React/Vue and can use something simple like jQuery. Maybe :slight_smile:

Yeah this is all front-end javascript stuff, it has absolutely nothing at all to do with Phoenix. ^.^

If you want no server connection then javascript is the only way.

If you do not mind a server connection then Unpoly.js would make it almost trivially easy.

1 Like

So it looks like I’ll need to allocate the mind/time space to learn another front end for the project…

I’ve been reviewing the pros/cons/opinions on VueJs, React, Elm, Ember…

Honestly, I don’t have enough grounding in front end libraries to make a educated choice. Nor do I have the time to learn several to find the optimal choice.

If you were going to learn just one front end, that would be robust/versatile for most projects – with a good versatility to simplicity ratio – making the learning curve not too long for the capabilities it delivers – and has a good probability of long-term development – what would that framework be as of 2017?

:scream: there is going to be N+1 opinions on front-end frameworks for every N developers ;).

Honestly, if it’s a limited dynamic functionality that can be fairly done with jQuery stick with that.

1 Like

And even more honestly, there is no real point to jQuery anymore, all evergreen browsers support the same API so just use real javascript directly, it is perfectly succinct and capable as it is.

It’s been awhile since I wrote anything in Javascript. There’s going to be a re-learning curve. So, if I need to learn /re-learn something, perhaps it’s time to learn another front end tool. So far from my cursory googling…

VueJs is lauded to have a fast learning curve.

Google trends looks like React has peaked, and VueJs is going to overtake it eventually in popularity.

Elm… takes a functional approach. Very much inline with Elixir it seems. Fast, reliable they say. No runtime errors. Question is do they have an established enough community? And what’s the learning curve going to compare with something like VueJs?

So, what about using the pure Elixir for updating DOM, without touching any javascript? Check out the Drab library! :slight_smile:

I’d say just learn plain javascript, no API’s. API’s are entirely unnecessary for what you stated that you need, and if you do it right your page can still work on javascript-less setups too. :slight_smile:

Pretty nice, but very heavy, all DOM work is done from JS, you will be doing everything from JS, your page will not work without JS, initial rendering time will not ever be instant, at all, but it does indeed look nice to work in.

React2 has been announced as I recall, and there is already ReactNative that allows you to compile react javascript apps to native code for running on Android/iOS. If you plan to want to go the native route in the future, it is not a bad stepping stone, but it is significantly slower than the native Android/iOS GUI’s. Otherwise React has the same issues as VueJS, it is all javascript, slower, slow time to draw, etc… etc… However it has a HUGE community and about anything already done that you would need.

It is nice to work in, but same issues as VueJS/React in that everything is done in javascript/elm, slow time to initial render, will not work with JS disabled, etc… etc…

Final thoughts

Honestly I’d say use either plain javascript or webcomponents. Like take Google Polymer for webcomponents, it follows the native W3 Webcomponent API with backwards compat for older browsers, and if you do it properly your page will still work (forms, links, actually display stuff, etc…) without javascript, as well as wiring things up to have something auto-update based on something else changed is easier and shorter than with any of the above API’s entirely. Literally you can just put, say, this as your input field: <textbox on-change="{{theValue}}" then somewhere else you can put <span>[[theValue]]</span> to update it on the fly, or you can have it call a function with it like <span>[[doSomethingWith(theValue)]]</span> and everything just works, all by wrapping your main body with a certain tag, and everything will still render just without the javascript parts if javascript is disabled, but your forms will still work, dropdowns, things will still display, etc… etc… It is quite wonderful to work in. :slight_smile:

Also, polymer can well outperform react/vuejs/elm in update speed. It only has a slight hit in initial processing time, which is trivial on browsers that support some of the spec, and about equal with react/vuejs/elm on other browsers (however even before that hit your initial DOM still renders, so you have a much faster time-to-initial-render with it), but later rendering only touches what changes via the wiring, no need to rebuild a virtual dom like with react or elm, and vuejs gets closer to its speed if done in very specific ways that are not always natural with vuejs.

Plus, webcomponents are becoming final standardized now, Chrome has the best native support right now, firefox and edge are both about equal but not as much (mostly missing the shadow dom, which polymer emulates fantastically and fast via its lightweight shadow dom api), so this is the way forward regardless.

1 Like

I’ll recomend VueJS, powerful, pragmatic and sinple.
Excellent documentation, can’t say enough good things about it.

Completely agree. Times were different before .getElementsByClassName and other browser standardized selector methods. And with ES5/6 array functions like .map, .sort, .forEach, etc there’s very little need for JQuery.

This isn’t universally true, and some benchmarks suggest otherwise.

And I like your final thoughts!

1 Like