The Reality of the Modern Web

The following terms below form a small subset of the extensive vocabulary in modern web development:

• Compilation
• Transpilation
• Minification
• Compression
• Code splitting
• Polyfills and shims
• JavaScript bundles and chunks
• CSS preprocessor
• Frameworks and libraries
• Build system
• Search engine optimization

Encountering these terms is inevitable. Nowadays, building serious production-grade applications involves a generous combination of these terms.

This is the reality of the Web as it currently stands. The code we deploy is no longer recognizable from the actual code we write on our machines during development. Various stages of compilation, transpilation, and minification have mangled "production code" in such a way that is network-efficient.

Most of us would reasonably argue: "This is good! The Web is fast, flexible, and portable!" But for others, this is a far cry from the humble roots of the Web when web pages were written by hand using vanilla HTML, CSS, and JavaScript.

My Web Development Journey

Just like many other developers, my passion for programming initially came from a fascination with video games. But four years ago, I had zero programming experience whatsoever. I was too intimidated to unravel the complexity and mathematics behind game development, so I pursued web development instead, hoping that it would be my stepping stone into game development.

My journey began in a classroom. A crowd formed around a classmate of mine because he could magically change the appearance of web pages. Suddenly, he could edit Wikipedia pages on the fly, inserting our names and satirical information into the paragraphs.

I had not known then that he was simply using Chrome's DevTools to manipulate the pages, but it was at this moment when I knew I had to pursue web development.

I asked him how he edited the pages. His response was surprisingly succinct:

"It's easy. Just learn HTML."

Over the coming weeks, I spent much of my time studying the HTML tutorials of W3Schools. Once I got the hang of opening and closing HTML tags, I moved on to learning CSS.

At this point, I wrote many simple web pages in order to apply what I've learned. But the more pages I wrote, the more I longed for interactivity. This was when I finally decided to dive into the rabbit hole that is JavaScript.¹

My first few lines of JavaScript were for resuming video playback by clicking a button. By the next year, I moved on from writing web pages to developing Discord bots, which served as my introduction to Node.js and back-end development. Two years later, to make a long story short, here I am now writing this article.

View Page Source

The journey was rough—primarily consisting of long Google sessions and deep Stack Overflow explorations—but I nonetheless pulled through thanks to a variety of online resources and YouTube videos along the way.

Admittedly though, none of this would have been possible if it weren't for that initial spark back when I was first dazzled by the "magic" of manipulating HTML through the DevTools.

Something about seeing the inner skeleton of a web page made it appear so... approachable, as if all the "magic" was lost, but in its place was a beautifully intuitive visualization of page structure.

I remember thinking to myself:

"Wow. I guess web development isn't so bad after all..."

But nowadays, when I open up the page source, all I see is a huge block of minified HTML code, mangled CSS classes, obfuscated JavaScript, and injected third-party trackers.

The Intimidation Factor

This unfortunate reality struck me during a conversation with a friend of mine, where we talked about how intimidating web development had become in recent years given the fierce competition, the endless stream of new frameworks, the complicated development environments, and the cryptic output of "production code".

I recalled that it was exactly this "intimidation factor" that deterred me from game development back then. Suddenly, right under my nose, web development was becoming the same thing: an unapproachable mysterious black box.

In fairness, the Web has indeed become a much more capable, reliable, scalable, and viable platform for modern applications. It's just unfortunate that all the new complexity comes with a hefty price tag.

The Dilemma of the Modern Web

This article was mainly inspired by a thought-provoking talk I watched a while back titled "Keep Betting on JavaScript". Towards the end, Kyle Simpson (the speaker) presented the dilemma of the modern Web between efficiency and simplicity.

"What I'm worried about for the future is that some new aspiring developer—right now he's like 10 or 11 and he's interested in the Web. A couple of years from now when he goes to do a "view source" of the Web, instead of seeing some HTML, CSS, and JavaScript... now he's gonna have some Go, some Rust, some PHP, some JavaScript, and half a dozen of other languages that are all mixed together in a completely nonsensical way... [and] we're gonna say that's the best future for the Web because it's so much more performant, it can do all of these other things—[but] we're gonna forget that people need to be able to onboard to the Web."

It struck me as clear as day that I was once that "new aspiring developer" who looked for a stepping stone into the world of programming. I was once that "new aspiring developer" who was easily dazzled by Chrome's DevTools. I was once that "new aspiring developer" who saw beauty in the Web's simplicity. I was once that "new aspiring developer" who deemed the Web approachable.

Times have significantly changed since then. I can't tell if it is for better or worse, but we can all agree that it is progress nonetheless.

In just a few years, the Web has become a compilation target. For static site generators, HTML is the build target. For UI frameworks, CSS "modules" are built along with JavaScript. For bundlers, compilers, and build systems, JavaScript is the build target. For languages outside the core Web technologies, WebAssembly is the build target.

However, this is not to say that the Web is an "utter mess" right now. After all, we have made a lot of progress in recent years. In fact, some would even argue that the Web has been in its best shape since its very conception.

We just have to be aware that this is the direction we're taking to the future. The decisions we make going forward will pave the path for "new aspiring developers".

Honestly, I don't know if we're building the best path forward for "new aspiring developers" (such as ourselves back then). The dilemma of the modern Web is founded on a trade-off between efficiency and simplicity. In software development, a similar eternal debate exists between application performance and code readability.

With that said, what are your thoughts on the future of "view page source"? What do you think about the Web becoming a compilation target? Are we going in the right direction?

1. As you can probably tell, I still haven't found my way out of the rabbit hole. 😂 ↩