JS frameworks and a dead end in skill development?

Question

JavaScript

Hello.
Can you please explain how regular websites (not distributed applications) are developed using JS frameworks?
On the example of a site for renting apartments, an ad aggregator.
The functionality is standard for this kind of services:
Filter (district, room / apartment, 1k / 2k ...)
Objects on the map with information on the object
Catalog with objects with loading, there is a separate block where it is indicated that there are new ads, but they are still hidden and will be available in N hours.
There are fields with live search, when you enter and give out options, mark the ones you need and they get into the field in the form of tags that can be deleted. (as here when creating a question)
How are such services developed?
For example, I made up a catalog - how can I load new objects and a block where it says that there are N number of new objects? It is clearly visible here that requests to the server are needed. The site is still at the development stage. I want to note that I mean exactly the dynamic work of such components at the stage of layout.
Or an example with objects on the map. For example, if information about an object comes dynamically when you click on a label, that's where this data comes from, even if it's fake, in what form should I give such work to progers?
Where does the data come from?
I mean that this is known in advance and discussed with the programmers. What if I'm a freelancer and the customer wants to see live components? That is, he writes that you need to use such and such a framework.
If I take Vue.js (I'm still learning the basics), I'll write all this dynamic functionality on it. How can I be sure that I did the right thing and the programmers or I won't have to rewrite? Maybe they don't need this JS framework at all.
I do not understand how this interaction occurs, how to choose a tool and use it without knowing how the other person will work in the future. I know the layout quite well, only JS is missing, but all these real-time sites are not clear to me.
Orders come in, but I refuse due to lack of experience and do not understand the relationship with data on such sites. I'm tired of being a typesetter, I want to grow, but I ran into some kind of wall.
I read articles, watch videos, everything is superficially described everywhere. It would be great if there is an article / video where a site is created using the framework as an example, in English is also suitable.

Answer 1

Either you use some kind of stub instead of a backend, or work in conjunction with a person who knows how to backend, or become a little fullstack (whatever that means), or say "I can't do it."

Answer 2

instead of making requests to the server, I make a stub that returns the necessary data by timeout, something like this:

fetchPosts() {
  let responseTimeout = 50;
  let dataPlaceholder = { ... };
  return new Promise((resolve, reject) => {
      setTimeout(() => resolve(dataPlaceholder), responseTimeout)
  })
}

Answer 3

You need to "mock" the data from the server, i.e. you need some temporary http-server, which simply returns the contents of static json files using the specified routes. Your front-end application must have a local config, where the path to the backend is specified, there, at the time of development, you substitute your pseudo-server, for example, http://localhost:9000/apiif you use webpack to build, then you can adapt webpack-dev-server for this , in my experience I did, see https://webpack.github.io/docs/webpack-dev-server.html, by writing a handler for a specific route, you can describe the simple logic of distributing json files or look for ready-made recipes for this approach. You can additionally describe in a separate document which route should give what kind of information for its subsequent transfer to backend workers for implementation in the already real server part.

Answer 4

This is not done consistently.
You need to understand exactly what data and in what format the backend will give you.

Answer 5

Use some baas like rapidApi, backendless or firebase.

Answer 6

It seems to me that many did not understand the problem at all and are trying to give advice on how to make a stub for json. Now I would like to solve problems with stubs ...
The author, as I understand it, wants to understand how to submit a layout that requires a dynamic interface.
Case number 1.
The author takes an abstract vue.js and sculpts an interface and ... a stub, of course :)
The customer receives a check for a certain amount, which will include hours of work on the interface. A satisfied customer goes to hire programmers, and they look at him like a fool and say that no one has been doing anything on vue.js for a long time and suggest using a trendy youth XXX framework. It is clear that the situation is from the textbook.
Case number 2.
The author makes a stub... no, not the stub that everyone here wants to make. A stub in the interface itself, without logic. The question remains how to make layout for dynamic parts. This is exactly what the author was asking.
The customer in this case receives an almost finished layout, but with some features. A perfectly acceptable option.
Case number 3.
The author finds a partner and offers a new service: layout + interface programming. This option looks the best from my point of view. All is well, everyone is happy.
Oh yes, now you can do the stub.
Apparently the problem is so multifaceted that it is being discussed by the whole village.
In general, I would advise you to find a partner.