Beginner question - basic "dreams" node app explanation

Glitch Help
1

Hi there,

I try to learn some JS, and whilst I have already written several apps, I realize I don’t understand default “dream” glitch template.

I have trouble with understanding what happens to dream array when adding new entry. Var in server.js obviously doesn’t change, but it also do not appear in raw html file (dreams list), hence I can find out where these values are stored (and whether is it possible to see them). Perhaps it’s because I don’t understand $.get(/dreams) on client side - why it does not collide with server get(/dreams)?

I will be glad if someone could explain me this part of the code.

Thanks!
Rafal

2 Likes
2

Hi Rafal,

I feel you, don’t worry :slight_smile: client/server programming is hard to grasp initially! I’ll try to explain as much as a I can.

Your Glitch app (as basically any other webapp) is composed of two parts: a client and a server. The client is run by your browser when you load a page, the server is run… by the machine on which your Glitch app is hosted :slight_smile:

server.js is the entrypoint for the server-side of your web application. It is responsible for storing data you want to share among all the “clients” (that is, all the browsers that will connect to your application), and to serve (hence the name… server) the requests that the clients make.

So, you can see that server.js defines a few “routes”: for example app.get("/", ...). Routes tell the server how to respond to client requests. So app.get("/", ...) describes what to respond when a client asks for the / path of your webapp: that is, it serves index.html.

If you look in index.html, you’ll see that one of the lines “includes” client.js: so when a client (the browser) goes to https://your-app.glitch.me/, it also receives the “client-side” of your web application.

So server.js and client.js run on two completely separate machines, on two completely separate environments, and serve two completely separate uses: server.js is responsible of responding to requests, while client.js… makes the requests to the server, and shows them to the user through the browser!

So when in client.js you see $.get("/dreams", ...), it’s the client-side that is asking to server.js to serve the “route” /dreams. If you look in server.js, you’ll see what app.get("/dreams", ...) does:

app.get("/dreams", function (request, response) {
  response.send(dreams);
});

It sends the content of the dreams array (defined at line 30 in server.js) to the client. This is how the client knows what’s in your current dream list :slight_smile:

I hope that this information is enough for you to get the rest: when the client does a $.post("/dreams"), it is asking the server to respond through app.post("/dreams", ...), which adds a dream to the dream list (the dreams) variable.

Let me know if you have any further questions, or if I just made things even more complicated! :smile:

4 Likes
3

For its part, the clientside JavaScript is simply adding your new dream to the DOM and sending that text to the server. The dreams are stored in memory on the server so you would not see them update the code for this example. If you add

console.log(dreams);

to the app.post and open the logs view you can see the in-memory array update when you add a new item.

3 Likes
4

Ok, now it is far more clear for me. I have to read more about jquery get,post methods :slight_smile:

Now my next question might sounds stupid --> for how long this variable is stored in server memory (and if it’s on the server side i guess its current value visible for every client visiting website)?

And thank you both for quick response :slight_smile:

Edit: I’ve just played with console.log at server and browser side at the different parts of code and its even more clear now :slight_smile:

5

Yup, the current values will be It will remain in memory until the app is restarted. This will occur around 5 minutes after the last interaction with the page. Everyone who visits will see the same dreams array, they won’t see the page update realtime if someone adds a new entry but next time they refresh whatever was added will appear.

2 Likes