I was replying to a post asking about phoenix and vue integration and gave this thought there, interested to ask this to a wider group…
Simple example git repo to demo at bottom of post
For me if your rendering server side, I see little benefit to loading in a complete js framework like react or angular or vue … all these frameworks are designed primarily to work as SPA and completely hand off the UI to the js, they are very large dependencies to download, and trying to keep them in sync between your fully handed off js app and the backend model… is a pain.
I mentioned that everytime I have to work with server side rendered pages (via any backend like elixir and phoenix, java and thymeleaf, .net and razor etc) I use what has always been popular in .Net circles… Knockout.js, an mvvm style js framework for dynamic UI … however ko just does one thing data-binding data to the view. No massive dependency trees, just bind the websocket traffic to ko … and use phoenix for everything else, routing, auth etc ect etc
KO.js a tiny dependency, that simply binds the server rendered variables directly to observed ko functions (they work the same as liveviews morphdom). All knockout does is data binding, it creates watched js functions that bind UI interactions to data model changes and visa versa.
Since recently discovering phoenix and live view and easily being able to create and pickup the data off the websocket and bind directly via knockout, its simple, and doesn’t even require node or npm to run it is just a script. I know react, vue and angular are what the cool kids use, but they are trying to solve most of what phoenix already solves, who needs an SPA with Phoenix? All I ever need for server rendered templates is a system to handle user interface updates as the data streams in.
Knockouts has computed functions and custom bindings that give you a ton of extra power to trigger UI updates directly off the data changing in the socket,
In my view ko offers alot when paired with liveview especially as your not giving over my whole UI over to react say and letting phoenix shine.
I get a fully responsive UI driven by websockets and js without dealing with a whole framework, the server renders updates and UI updates live via a set of powerful and simple bindings to handle 99.9% of everything I need to do in the UI
Its always been my go to choice for handling server rendered pages where I can parse the initial server data directly into the watched functions on page load so I don’t need to any initial http requests. Then I push the websockets into those watched ko functions for instant UI updates.
I don’t even bind ko into one class (although most ko docs show setting up ko as a viewmodel class), I just create indivual watched data elements, like this:
var myData = ko.observable( );
This is a standalone function and holds a value, I could also use observable array for a stream of results. I use them almost like functional program calls, often just use the ko if statement that says if myData has a value its true otherwise if null its false, and then do things like simple switching on or off the Dom element if that value exists. Like this:
data-bind=“if: myData”
Or loop through data and create UI elements with data-bind= "foreach: myDataArray"
Anyone else doing this?
https://knockoutjs.com/
http://learn.knockoutjs.com/
https://knockoutjs.com/examples/
Simple example repo here
^ based off the chat app tutorial at dwyl/phoenix-chat-example
