Vue communication with backend

I would really appreciate some advice on how Vue.js could/should be getting and sending information to databases. I’ve been programming in other languages for many years and am trying to make the transition to the current way of developing web apps so that I can be employable in a modern IT shop.

Back in the day, we didn’t make the distinction between frontend and backend the same way it is done today and I still don’t fully understand the current way of thinking. It used to be absolutely standard for, say, a COBOL/COBOL II/PL1 program to display screens, gather data from that screen, validate it, then write it to a database like IMS or DB2. Nowadays, there seems to be something like a wall between frontend and backend and someone is either a frontend person or a backend person. In fact, I had a very experienced developer insist that there’s no such thing as a full-stack developer because you were either frontend or backend.

I’m skeptical about that. Having done both frontend (which is essentially getting and displaying information to a user) and backend (which is essentially getting and storing the data in a database), I think I am a sort of full-stack developer; I just don’t know how to do that in an environment where the frontend is Javascript and the backend is, say, MySQL, even though I have some knowledge of both.

At the moment, I’m learning how to build frontends with Vue and that’s going okay. I’m ready to take the next step and store the data I’ve acquired (or fetch data previously stored) in a database. I’m not very clear though on what database I should use - MySQL, Firebase, MongoDB, etc. - and on how to get and write data to a database from a Vue app. I’ve worked with Vuex and Pinia a bit and am under the impression that Pinia is a more powerful Vuex. I’ve worked a very little bit with Axios and know that is one way to read or write from a database in Vue. But I don’t know if these are the best ways to do things or if there are much better ways. Unfortunately, the Vue courses I’ve found in YouTube are reluctant to spend much time on database access because it can be a long sidetrack so they typically use workarounds like JSON-Server, which even they acknowledge would never be used in real-world Vue apps in production.

I would really appreciate it if some of the people on this forum, who work in real IT shops, could share some information about the most common ways they have seen of getting Vue apps to interact with databases and what emerging approaches look like they may become very popular with time.

I need to figure out what to learn next and this information is crucial to making that decision.

Thank you in advance!

Hello,

it’s unlikely your (public) frontend should talk to the (private) DB directly but call some sort of (REST) API on the server, maybe in GraphQL.
On that very server you’d have your COBOL, Java, Rust, PHP, Node backend listening for well-formed HTTP requests or WebSocket connections to execute and translate that request into the DB flavour of your choice, using the programming language you want to use.
Many also have Node or Deno based backends, so you’d also write JS code on the server, but that code’s somewhat different from the things that run in a browser.

Neither Vuex not Pinia are backend databases!
They only manage state in your browser and in localStorage at best. If you want the information to persist between session or work with the data later on, you need a server to dump that stuff onto. And were back to the question what type of database and backend system to use.

If the DB type doesn’t really matter, then MongoDB or CouchDB are probably good choices 'cos they store JSON data/documents, which is what JS natively understands. Firebase gets some hype, too.

Unlike using an SQL database, there’d be no need to translate and convert the resultset into valid JSON to send it over the wire – although modern SQL db engines understand and handle JSON data fields as well (just like the can handle structured XML).
However, both Mongo or Couch will give you JSON directly and they’re very fast, too.
There’s likely also an official db connector/driver for the server language of choice (probably not for COBOL though …)

The other question would be: do you want to host yourself or use one of the many “free” services that often offer out of the box Firebase or MongoDB support.

I personally prefer self-hosting no matter how convenient these services appear to the masses 'cos you also have to stick to their depolyment rules, system, and environment. And there’s no free meal anyway.

Hope this helps.
Enjoy.

PS: I do web stuff for +25 years. These days I work in an IT shop, primarily in Frontend and UX. We run two web portals (real estate, jobs). Both use PHP Symfony backends, Data is store in Postgres/Cockroach, Redis and mySQL using the Doctrine ORM. We use REST and GraphQL APIs, all handled using Symfony MVC. I alsowrite PHP but I don’t do full devops or hardware.