[译] Web Applications 101

Let’s start with a story: when people outside of my professional bubble ask me about what I am doing, I say “I build websites”. If they are curious, I add that these websites are rather complex. If they keep on asking, I try to elaborate with some examples: Facebook, Spotify, Twitter. It’s not that I work for these companies, but I hope that it gives them a good impression of “what kind of websites I build”. However, most often the conversation doesn’t go beyond “I build websites” and I am fine with that.

One website isn’t equal to another website these days. Websites range from a marketing website for a product to a full-blown social media platform. As someone new to web development, it’s not easy for you to grasp the whole landscape: what starts out as a traditional simple website with HTML and CSS, returned from a web server, turns into a far more complex full-stack application with sophisticated client-server communication and state management.

If you are already learning HTML, CSS, and JavaScript, and you don’t know about the fundamentals of websites and web applications, then this comprehensive guide is for you.

In this walkthrough, I want to show you the evolution of web development from a simple website to a complex web application where we clarify terminology such as:

  • client/server
  • frontend/backend
  • website/web application
  • client application/server application
  • REST/GraphQL
  • web server/application server
  • server-side rendering vs client-side rendering
  • server-side routing vs client-side routing
  • single-page application vs multi-page application
  • code splitting, lazy loading, tree shaking, …
  • full-stack application
  • static site generation
  • BaaS, PaaS, IaaS, …

Depending on your current level as a web developer, I encourage you to take a break at any time while reading this guide, because it’s pretty extensive and can be a little overwhelming for beginners, especially towards the end. Let’s get started …

A TRADITIONAL WEBSITE

If you are learning about web development, you will most likely start with a traditional website built with HTML and CSS. A website which isn’t styled (CSS) and doesn’t have any logic (JavaScript) is just HTML.

1

If you navigate to a specific URL in your browser (e.g. Firefox) on your laptop or smartphone, a request is made to the web server responsible for that URL. If the web server is able to match the request to a website then it serves the HTML file for that website to your browser.

To transfer a website to a browser, HTTP is used as the communication protocol for requests and responses between the client and the web server. This is why there is “http” in front of every URL.

The communication between the client and the server is synchronous, which means that the client sends a request to the server and waits for a response from the server. Your website isn’t displayed immediately because it takes time to send the request from a client to the web server and to receive a response back from the web server.

2

A HTTP request comes with four essential HTTP methods: GET, POST, PUT, and DELETE. The HTTP GET method is used to read a resource, whereas the remaining methods are used to write resources – where a resource can be anything from HTML to JSON. All four methods can be abstracted to the infamous CRUD operations: Create, Read, Update, and Delete.

Create  -> HTTP POST
Read    -> HTTP GET
Update  -> HTTP PUT
Delete  -> HTTP DELETE

In our example of a website, which is served from a web server to a client by visiting a URL in a browser, the browser executes a HTTP GET method to read a HTML file from the web server.

Refer

Web Applications 101 (robinwieruch.de)

生词

essential

elaborate

terminology

comprehensive

fundamentals