Understating the Udacity Offline First Project Wittr : Part 2 (BACK END)

Ishank Sharma
3 min readMar 22, 2018

If you have come here for the first time , I’d recommend PART 1 .
In this part we will look at one indivisual component of project WITTR
THE BACK END SERVER .Let’s just jump into it.

Are you new to JS ?
Are you new to Node.js?
Are you new to Express.js?
If you’ve answered any of the above question as yes , Get a cup of coffe and Click the respective links ,you’ll be here for some time.

Note:This is not an article about any of these topics ,we are just concerned with Wittr project .However a general idea would still be provided.

Basic Client Server Architecture

Basically ,But still if you’re curious GO HERE

Well how does that play out in our project Wittr you ask?
Lets expand and make the diagram fit to represent Wittr, it would look something like this.

Hmmm.

Fair enough,We know the browser renders HTML for markup,
CSS for styling that markup and Javascript for adding dynamic behaviour for the whole thing.
Still something looks magical , how the project is loading so many posts and has good styling and all and don’t forget the posts are all different wheres the DATABASE…. and WHAT IS THIS SERVER?
Alright, lets elaborate our diagram a little.

Can you read this?
USER ---> http://www.wittr.com/--->Server(Matches the URL) →FOUND!!!(Sends index.html)

Well its getting complicated how about we try to compartmentalise the knowlege ?
Let’s only focus on the Node.js Server Part.

A Close Look at Nodejs Server

Essentially

A process is any program that runs as a separate entity on the machine.Now this process is what we are interested in , lets digg in deeper

99.9% of time we require DB , however to simplify installation, Wittr generates content dynamically and serves in over Sockets(More attractive sibling of HTTP).

All of the above (Request Handler , Middleware , DB etc) are handled by Express.js. It’s web framework for Node.js .

To know WHAT THE HELL IS GOING ON ? I’d advise to go to /server/index.js

Member how they test at port :8889 and runs app at port :8888?
We can see the server port is for SERVER class and config is for SETTINGS class.
Both have an import at line 1 and 2.I bet if we open each of these files we can understand line by line how this works.
To provide better visual aid i’ll explain each line with a comment following it.Next Image is going to be important then, keep your eyes peeled.

SERVER.JS

THIS IS A LONG READ….

Please be patient your career as a JS develpoer depends on it.

In the above gist I’ve commented with ALL CAPS PLEASE NOTICE ME SENPAI.

In the next section we’ll look at whats going on with PORT 8889 and Web sockets maybe.

--

--