How to Tame the Complexity of Web Development

A decade ago I picked up a copy of DOM Scripting, a book by Jeremy Keith. At the time the web was still fresh and new. Web apps were starting to be a thing and Javascript was at the beginning of its epic journey to global domination. Jeremy's book was a critical step in the path to becoming a "frontend" developer for me and many others. He outlined clean, elegant ways to make the browser more interactive.

Most people thought Javascript heavy web applications were a waste of time but after reading this book I was convinced it was the future and I set off to make a career out of it. Turns out that was a good call.

Today I'm weary of it all. I bet you are too.

This is what frontend development looks like now:

Crazy Flowchart Source

"Stuff like this diagram really makes me question the point of continuing with web work, after being in it for 15+ years. It feels like something’s gone wrong, and what used to be enjoyable and challenging is now just pointlessly changing and reinventing itself" — @simonminter

Each of these tools has its place, the problem is the vast majority of projects don't need most of it.

It's now normal for me to walk new clients back from the cliff of over-engineering their Javascript apps.

Clients feel frustrated and overwhelmed by the complexity of their frontend code. They're always looking for the one "guy/gal" that can actually understand how it all works. Or their app is performing horribly but nobody can figure out why and some other consultant is telling them they should have used the "Framework Du Jour" instead of whatever they picked and that would have solved all their problems.

We've lost our way.

The current trend in web development is hostile to beginners and wastes client/employer money to cure boredom or satisfy egos.

I have been involved with a huge range of Javascript applications and most of the time these things are over-engineered because:

(P.S. Here are my thoughts on when all this extra complexity does make sense and if you're struggling with this right now at your company, let's talk!)

I'm on a mission to do whatever I can to nudge us back in the right direction. Not that I think I can actually make that happen, but I'm going to try. I still love the web and what it promises to be and I want it to be a friendly place for beginners. I want to spend more time on delivering value to clients and less time on tooling.

So if you're a beginner I have a different flow chart for you, one that should be less daunting and more exciting. In fact, it's not even a flow chart because it's completely linear. If you're a more experienced developer, what did I leave out or have I included too much?

This list is designed to help you make cool shit on the interwebs that other people can use. Because that's actually the point. Helping other people is the point. And you don't need Webpack or Redux or whatever to do that.

With these core skills you can:

HTML and CSS

Markup a document

Layout your page

Style your page

Developer tools

Javascript and the DOM

Introduction to the DOM

Take some time to understand the underlying DOM API ... then do everything with Jquery.

Jquery

Javascript

How to organize a Javascript application

It's tough to recommend a bullet list for this, but here's my take for now:

But wait, what about ...

Conspicuously missing from this list are package managers, frameworks, ES6 features, different Javascript flavors, CSS frameworks, task runners, CSS "methodologies" and more advanced CSS features like animations.

For all of these, you'll know when you need it and you'll have no problems picking it up on the fly because you know the fundamentals. You'll know why you want Angular instead of React and you'll pick it up quickly because you already know dependency injection because you read up on design patterns, (though I'm not even sure they're doing that in Angular 2 anymore, but this kind of makes my point for me).

If you understand how to organize a Javascript application I think you'll discover that most of the time a few common design patterns that have been around in software development for decades will get you what you need without committing to an entire ecosystem. And when you do decide it's time, you'll know exactly why and how to go about it.

If you're just getting started way back at the HTML and CSS stage I wrote Sketching with CSS for you. It covers everything in the list up to Javascript and the DOM in exactly the detail you need and nothing more.

Sketching with CSS will teach you how to design in the browser.

Sketching with CSS

Blow away your clients with your fast turnaround time. Bend CSS layouts to your will. Show your clients comps they can actually click on.

Get a free chapter and an 8 day email course on rapid prototyping in the browser.

Share this article with your friends:

Hey there, I'm Sean.

I'm probably a lot like you. I make stuff for the web. I have a CS degree, but the last 11 years of my career have been a more potent teacher.

Sean Fioritto

Recently, I wrote a book on web development called Sketching with CSS. I also run a training company for developers. I'm an author in Smashing Magazine and I've written some cool open source projects.

Today, I'm an entrepreneur. In the not so distant past I did the usual 9-5 thing doing web development for a couple of big companies.

I'd love to meet you on Twitter.

You can also email me: [email protected]