I think it is going to be a series, basically it is my experience of full stack development. I am trying to write down all the things I learned and document all procedure about setup just leave a reference for the future. 

I will be very happy if it can somehow help other people. While you are reading if you find anything unclear or need to be improved/correct, I am willing to discuss with you, just leave comments below. :)

SPA

SPA = Single Page Application

The key point for SPA is the whole application only contains one HTML file, then how to load different information? To answer this question, we also need to understand URL.

Fig 1. communication between client and server 

When client visit a website for the first time, client side sent request to server. Server sends HTML along with other info back to client, and this is the first and only time server sends HTML to client.

Once client has this HTML, you can think client already has a container ready for different info, just like you have a cup and a cup is capable for many kinds of drink. Client needs to "place order", how to do that? Ajax.

Ajax

Ajax = Asynchronous JavaScript and XML, the biggest advantage of using Ajax is when a website needs to be refreshed, we don't need to refresh the whole website, only the part which really need to be updated requires refresh. The type of request we use here is call XMLHttpRequest. Nearly all browsers support XMLHttpRequest (IE7+, Firefox, Chrome, Safari, Opera).

Fig 2. data flow in SPA (credit to https://www.runoob.com/ajax/ajax-intro.html)

After server sends updated info back to browser, content on website can update, how this part happened? We need to go back to HTML, this part is kind of off-topic so just a very quick glance.

DOM

HTML files have very clear tree structure, Fig. 3 shows a very simple node tree. DOM, is not a programming language but a standard of how to access and change content on HTML. Modify HTML can be achieved with the help of JavaScript.

Fig. 3 A very simple DOM tree

URL

URL = Uniform Resource Location, usually forms by the following components

scheme://host.domain:port/filename?query#fragment

scheme: http, https,ftp...

host: www, mail....

domain: e.g. google.com, jianshu.com...

port: 80 is default for http

website name: host +domain

the part after # is important for SPA which is going to be recognized by Vue-Router, any changing in fragment does not require refresh the whole website.

In the next post, I am going to talk about some necessary components for the application.