/webdev101

A step-by-step introduction to building modern web systems

MIT LicenseMIT

webdev101

by Alan Johnson

I feel too young to say I have been a programmer for more than 20 years, but it’s true. In that time, I’ve written all sorts of software. But today, like so many other developers, I mostly work on web applications. The web development industry seems to be growing massively year over year. For reasons that are out of scope of this piece, I don’t think that growth is anywhere close to complete. That means there are a lot of people who will be programmers in the future who need to understand how all this stuff works. This piece is for them.

It is notoriously difficult to train web developers. The space is full of jargon like “full stack”, “back end”, and “DOM”. The techniques and tools we use are constantly changing, to the point of causing fatigue. It’s hard enough to keep up with as an expert, let alone to get onboarded into the scene. The bar for acceptable end user experience is constantly being raised. I like to say that there is nothing particularly deep about web development, but you need to be able to navigate an incredible breadth of knowledge.

I was briefly a high school teacher, and I’m still passionate about education. I have spent a lot of time thinking about how to approach onboarding of people into all of this complexity. For the past couple years, I’ve come to hypothesize that one answer is to start as simple as possible, and then motivate the introduction of each additional chunk of complexity. If it all works the way I'm imagining, by the end:

  • You should understand how web apps and systems are structured and why.
  • You should be comfortable using some the basic jargon.
  • You should have some idea of what technical decisions you would have to make to accomplish a goal.
  • You should know what information you can safely ignore for a given goal.

That last point is important. I've seen many a newcomer get lost applying a whole raft of unnecessary technology to solve simple problems. In this space the ability to filter information is just as important as the ability to understand it.

The process

The plan here is to start with the parts of a web application that are closest to the user experience. We'll explore what can be done in a single file that lives on your computer. As we hit the limitations of that setup, we'll add new pieces to get beyond those limitations. We're not going to look at a whole lot of code in the process. But first, let's discuss what we mean by web application.