acrolink
Phoenix with: a JSON API and Vue.js, or, HTML (eex) with partial use of Vue?
I hope you can help me choose between two possible setups:
a. Phoenix JSON API on the back-end and Vue.js on the front end to render views / lists / filters / forms (basically all UI).
b. Phoenix HTML views (eex) and partial use of Vue.js on the UI for special elements (such as nested forms).
Which solution gives better overall user performance experience?
Most Liked
amnu3387
What part specifically? It’s highly dependent on what you’re doing. There’s plenty of ways to communicate with the back-end, either by implementing router solutions for your front-end, making ajax calls, using libraries that handle that, etc.
That’s a game I’m developing (it’s fairly more developed now than when that video went up). All the logic is processed in the server, which then serves the state through Phoenix Channels, on the front-end it’s a Vue application, that hooks to the “game” channel the user is playing and to a particular “user” channel just for him.
From the state that I pass from the server I bind information to each user’s Vue instance, which then is used on the component to draw the gameboard. Users only emit certain messages to the server, such as “pass”, “cast” (with the additional info of what they chose), “strike” (again with the relevant info), the server processes those calls, checks for legality, and if everything lines up correctly broadcasts a new state, which the vue instance receives through the form of a event listener, and re-binds the information to it’s relevant variables, from which the component again redraws the gameboard.
The “game lobby” parts is also composed of a vue instance, with two components, a “list” of games (open, closed, etc, that gets refreshed through a broadcast from the back-end whenever there are changes), and a component to “create/open” a new game and wait opponents. Then the same logic, when someone joins a game, the back-end processes that, and fires a broadcast which is interpreted in the vue part of the front-end and reflected on the page.
jeroenvisser101
@hlx and I are using a different approach, also using Vue and Elixir. We’re running a Elixir server with a GraphQL endpoint using Absinthe, which allows for a lot of flexibility and is quite nice to work with. Alongside that, we’re deploying our Vue application as a static web app to Netlify which is also incredibly easy to do.
GraphQL allows you to query multiple resources in one HTTP request, which might end up getting better performance for your users.
acrolink
I am seeing that using Vue.js within Pheonix HTML files can be better, since Phoenix keeps taking care of routing and there is no need to run two servers, one for backend and another for front end.








