I have been looking at the awesome LiveView (awesome job @chrismccord!) and especially the examples, trying to figure out how I would apply this to real life projects I work on, especially the big and complicated UI-wise.
As many others here probably do, we are heavily using React.js, and often pairing it with GraphQL + Apollo at the moment, especially GraphQL subscriptions which come in handy in building real-time live UIs.
The more complicated projects are often similar to what Discourse UI does (this forum), rather than relatively simple single component like thermostat, counters or even user edit forms from the example repo: https://github.com/chrismccord/phoenix_live_view_example
So, just like on this page, we may have a header with top-right avatar of user. The avatar would typically display a notifications icon (or none), possibly with count of unread notifications. You click on the avatar and menu with notifications and/or links to profile edit pages appears.
In the main area of the page there some sort of main component, let’s say it’s a list of things, like a thread on forum. The items can be added/updated by other users, and we have live updates to these items. If it’s a forum, this can be a thread of hundreds posts, all fairly long and displayed on the same page.
Then you have some more live, interactive things like “User is typing…” or “User is editing this message…” appearing where you would expect new message to pop up. When you hit “Edit” on a post, a modal or in-line editor appears allowing you to edit some content, using @ to mention other users.
That’s roughly the level of complexity a real-life apps have to deal with, and I wonder how - if at all - Phoenix LiveView is going to help me build these kinds of apps.
With React, or really any other client-side framework, we heavily rely on modularization using components to isolate independent or semi-independent things in the interface. The top-right avatar would be one, listening to changes on user notifications count and reacting accordingly. The list of posts would be another one. Individual posts would be own components etc., helping developer to build UI that is still coupled at runtime but has the logic very much scoped into individual elements.
With LiveView, if I understand correctly, this is yet not possible and when - let’s have example - a top right notifications count updates, the whole page including header, list of posts and open edit boxes would be re-rendered and merged into users’ DOM by stealth. The same would happen with “User is replying…” changes, the whole page including the header, list of posts etc. would be re-rendered server-side and sent down the wire to client for updates.
My main question is: do you think we should build apps like that (now or in future) using LiveView, and if yes - do we need a pattern of components to help us out - or the current approach of re-rendering everything and sending update down the wire to client will be enough?