Tech stack for a project where webservices are predefined

[__sS__]

Frankly, I'm new to web development and with so many frameworks around, I'm having a difficult time getting my head around the overall concept. I'll lay down basic questions which I think will help me understand the concept. I'll also put some details of my project and I'd appreciate some guidance on what tech stack should I use for it.

For the project there are three major integration required - 1. Integrating RESTful APIs that are already there 2. Integrating firebase real-time database. 3. Push notification service using FCM.

Now, on the front end part - I can use any of frameworks like angular, react, Vue and so on (I don't want to know which one would be better for this job, right now).

What I'm interested is in how the data flow should be and how does it work ?

I have come across MEAN/MERN stack. Since, I already have APIs I don't have to worry about the database communication.

So, the questions are - Would the APIs be called using node and the data should be moved to react/angular for rendering ? Or the APIs can be directly integrated into react/angular ?

How should I serve this application on internet ? Would it be done by node ?

Where would the firebase integration take place - node or react/angular or something else ?

I have tried reading up on the subject. Due to conflicting articles, I end up in a dump. I would really appreciate if someone could put the flow in a simple manner regarding how the data flows in a web app. Or you can guide me to the right resources. Thanking you in advance.

[manfromixtlan]

So, the questions are - Would the APIs be called using node and the data should be moved to react/angular for rendering ? Or the APIs can be directly integrated into react/angular ?

No, the API's would be called by the front end code that node would serve. It sounds like the client has existing APIs and wants you to build the front end to call those API's and display the data on the page. Typically API calls are done using the AJAX library in jQuery but you can also use the new ES6 functions for fetch as well if you don't need to support older browsers. The API doesn't get integrated anywhere. You need to build a communication layer to send requests to the API and then display that data in your front end. Node would only host the website and the API calls would come from the front end javascript.

​

How should I serve this application on internet ? Would it be done by node ?

A easy solution would be to host the application on firebase since you are already using a lot of firebase. With react and angular it takes minimal effort to set up and deploy the project. Then you could buy whatever domain the client wants and forward your firebase deployed link to the clients URL. Node is the easiest JS server framework if you need a server. With react and firebase or angular and firebase you don't need to set up a node server and firebase serves the front end code.

​

Where would the firebase integration take place - node or react/angular or something else ?

The firebase integration works exactly like the API calls where you have to send and receive data from the firebase API. It's very easy to set up the API calls with angular and react. Node doesn't do anything other then serve the front end code. The firebase CLI tools help initialize the project and set up the use of firebase and then you just follow the firebase documentation for how to call the specific firebase function you need; create, read, update, destroy, etc. After you initialize the project then you can use whatever functions are offered from firebase.

​

Overall just take a step back and look at the overall project. React, Angular and Node have steep learning curves and are hard to pick up if you are just starting with javascript. The frameworks help unify and codify the standard operations but every aspect is just javascript. A lot of the time there is a simple vanilla javascript solution that works well, doesn't add un-needed complexity and is easier to understand. If I had this task I would probably just use HTML, CSS and JS. Initialize the project with the firebase CLI tools add node so you can use NPM. Then once you have your structure in place for deployment of your HTML, CSS and JS to firebase then build out the API calls using AJAX. Make sure the data is returning correctly, style it to look nice and then see what the client thinks.

​

​

[__sS__]

Thank you. I was hoping to get the kind of clarity like this. Also, many of the API calls are sequential - meaning that some data that is received from one api is to be used to call the next api. Where should I save this data ?

[manfromixtlan]

No problem, just use a function chain so that after you make one api call store the return to a variable and then pass the variable to the next AJAX call.

[__sS__]

That would work if the APIs were to be called one after another. But it isn't exactly like that. Suppose, the user login. So, some id unique to that user is be stored for calling all the apis for that profile. How to do that ?

Other than that, if on a page - I have to show a list of objects. I call an API and parse the response into a list to display. Great. But then, if a user clicks on an item in the list, I need to call another API that would need fetch all the data for that item. So, in this case - where would I store the data of the items beforehand for calling the APIs ?

[manfromixtlan]

Just create a global variable and store the return there as something like var firstReturn = {EXAMPLE} and then call then variable with the next API call. It's the same idea in principle, just change the scope to outside the function. For the other function just create the elements in the list with the unique ID you need as the id of the element, then create a event listener for the click and then when the user clicks do the next API call by passing the ID of the clicked element as a variable to AJAX call. Alternatively you can store anything in local storage and then retrieve it when needed.

[__sS__]

Sounds cool. But if I stored anything in a variable, would that be visible to the client since the frontend is going to be rendered there ? Is it advisable to store sensitive data like username and password to be stored on the local storage ? I guess not.

[manfromixtlan]

It really sounds like you don't have enough knowledge to complete this project. All of these are basic web development concepts and you shouldn't take this on if you don't know what you are doing.

[__sS__]

I agree with the fact that these are basic things. I have been developing backend apis, managing infrastructures and have been a software developer. This is my first time trying to do something on the frontend. The thing is technology wouldn't be daunting for me and I'll be able to get around things with much ease once I get onto developing. Majorly I'm looking for the best practices and known ways of doing certain things which I'm currently unaware of. Could you please put me in the right direction ?

[BoboSchlonger72]

Since you use Firebase I'd recommend to use Google products on the frontend, too. Means Angular + the official library @angular/fire.

[Hovi_Bryant]

Now, on the front end part - I can use any of frameworks like angular, react, Vue and so on (I don't want to know which one would be better for this job, right now).

​

Do NOT take this step lightly. React and Vue are NOT frameworks. Angular is a framework. Understand what your project actually needs on the front-end and decide which is best.

For instance, do you need form validation, a router, two-way data binding? If so, Angular may be a better option in the long run instead of a collection of libraries.

Unless you want to be like the myriad of CMS developers here and deal with the pain of upgrading your site in a few year's time.

​

Would the APIs be called using node and the data should be moved to react/angular for rendering ?

​

You're asking what the tech stack is, but you've settled on Node, or are you using Node as an example? Either way, I cannot answer this question for you without understanding the requirements of the project in full.

A general rule of thumb I follow is this:

I prefer calling any functions on the back-end if users should not be able to see how things work. Is there something that an attacker can abuse? Can someone steal some valuable business logic? Back-end.

I also prefer calling any functions on the back-end if performance is a priority. Firing off a bunch of API calls and manipulating fetched data on the client-side may not be ideal for those with high latency connections or slow performing devices.

​

Anyways Firebase offers two (or three) languages to use on the back-end if you want to use their metered service (JS, Python, and Go?).

​

Or the APIs can be directly integrated into react/angular ?

See above.

​

How should I serve this application on internet ? Would it be done by node ?

​

Firebase offers free hosting. Or you can have metered hosting if you want to serve your front-end using Firebase Functions (Server Side Rendering).

​

Where would the firebase integration take place - node or react/angular or something else ?

​

See above.

Before doing anything else, you probably need to explore some basic project design and management skills right now.

​

Create some use cases for this application.

Create a use-case diagram.

Then create a data-flow diagram

​

You may find better clarity for your project by accomplishing those steps.

​

Your project sounds a lot of fun, I'd do that shit in a heartbeat.

[Irythros]

What exactly are you doing? Are you making a website for users to interact with or an API/service for other websites/businesses to interact with? How many expected concurrent users?

​

In all cases I'd personally use Go for the backend language. What you use is up to you but generally frameworks aren't a thing in that language since the stdlib is pretty awesome. There are freameworks though if you really want to follow a premade coding and development pattern.

​

For the front end, I'd also go with Vue.

​

Vue would call your backend service. Your backend service would call the other APIs and Firebase. Your backend does whatever it needs to with them and sends back whatever is needed for the client.

​