Modern Web Development Hell - Roots

Note: This page is new / WIP.

Simple and clean (probably the most important words in software development) are the last words that comes to mind when we're talking about modern web development. In fact, it's the opposite of that.

But why is that, where does all this complexity and mess comes from? Let's start from the bottom, from the foundation.

Web is based on the idea of Hypertext.

Hypertext and Document Model

So, what is hypertext? Simplest definition would be "a text which is not constrained to be linear". It may take a while to sit in, but it's a very simple and powerful concept. Along your textual content, you can encode pretty much any semantic and presentational meaning.

HTML (HyperText Markup Language), as the name says, is the implementation of hypertext as markup language. It gives us a nice foundation, but it's important to mention that we're not limited to the included tags and attributes and we can extend it (i.e. node.getAttribute("custom-attribute") and custom elements in the browser). We're going to explore this in more details in the future topics.

HTTP (Hypertext Transfer Protocol), as the name says, is the transfer protocol which HTTP client (i.e. your browser) uses to request that hypertext (HTML) from the server.

And the final piece is HTTP URI, which is an identifier of the resource which client will use to make the mentioned request. Be very careful with naming your resources, as they should be future-proof. See Cool URIs don't change.

Extremely important characteristics of HTTP is also its stateless nature.

How it all fits together

When your server receives a HTTP GET request for /my-resource, you should return a nice hypertext (HTML) document which can be easily understood by various HTTP clients - browsers, bots (search engines, social media sites, etc.), screen readers and other assistive technology devices, etc.

Note: from the perspective of the protocol, there are stateful parts (i.e. Keep-Alive, parts of HTTP/2), but this are abstracted implementation details and from our perspective everything stays stateless

Important things to mention here:

So far, things are pretty simple, we're a good web citizen (our pages are very light, very fast and accessible) and everything is reliable.

A lot of people would be surprised how far you can get by staying close to these core web principles, but if you try to make this website more and more interactive with javascript, you're going to face some challenges.

The most popular "modern" answer to these challenges is the (in)famous thick-client SPA architecture, which in the desire to make highly interactive webapps easier, breaks all these core web principles (which comes at great cost). We're going to get into more details in the next topic - Thick-client SPA Architecture.

Comments, suggestions and questions and are always welcome.