The 5 Pillars of a Solid Front-End

How one simple interview question made me review how I code (and got me hired)

Shortly, what does maintainable and performant front-end code look like to you?

“That’s it? An interview with only one question? Easy peasy.”

Or so I thought, only to find out that, despite its apparent simplicity, the question had no simple answer. If I point to existing guidelines, I’m cheating. If I get too verbose, they’ll skip my e-mail. If my answer is too short, I didn’t try hard enough.

What the heck does a good front-end consist of? Universal JS? SPAs? Flexbox? Web components? Shadow DOM? ES6? What are the most important aspects of it?

I spent quite some time figuring out what a good answer would be. Turns out the answer didn’t lie in technologies, but on coding philosophies.

Below you will find a facsimile of my answer, which I’m shamelessly calling “The 5 Pillars of a Solid Front-End.” I hope it sparks some thoughts with you.

This was originally published in early 2015, keep that in mind.

1) It is accessible.

This is the single most important foundation of a good front-end. We’re not just talking about addressing people with disabilities (we do also)— a site that’s accessible to all improves the overall user experience, puts the focus on content, leads to device independence, improves performance and even leverages SEO.

2) It is progressive enhancement-oriented.

Progressive enhancement makes cross-browser development a breeze. It’s performant as it doesn’t structurally rely on CSS3 or JS and it makes for cleaner code because you reduce the room for device detection and nasty workarounds.

3) It has its own DevOps.

With good front-end ops you can ensure fast and trouble-free releases. The performance becomes trackable, errors are monitored and all processes become automated — sprite generation, CSS prefixes, linting, dependency management, etc.

4) It is modular.

The JS, HTML & CSS are completely decoupled from each other*. Instead of page-level styles or scripts, all code is crafted as independent, reusable components.

Less of this:

#home #top-section #pictures-wrapper { /* ... */ }

…and more of this:

.photo-gallery { /* ... */ }

*this may or may not be true for React :)

5) It has coding guidelines and plenty of documentation.

Most of the code should look like it was written by the same person. It follows methodologies, the code is neat and clean, and everything is properly documented.

It’s now my turn to ask:

Shortly, what does maintainable and performant front-end code look like to you?

Share your thoughts by writing a response below.

Thanks for reading this far! If you liked what you just read, I’d really appreciate it if you scrolled a little further and hit the ♥ Recommend button.