acrolink

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

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

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

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.

Where Next?

Popular in Questions Top

siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
Kurisu
For example for a current url like http://localhost:4000/cosmetic/products?_utf8=✓&query=perfume&page=2, I would like to get: ...
New
earth10
Hi, I’m just starting to build a side-project with Elixir and Phoenix and doing some basic test with Elixir alone. What strikes me is th...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a > b) do {:ok, "a"} end if (a < b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Other popular topics Top

siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
AstonJ
Please see the new poll here: Which code editor or IDE do you use? (Poll) (2022 Edition) It’s been a while since we first asked this, I...
208 31142 143
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New

We're in Beta

About us Mission Statement