Front-end Engineers

Kevin Lamping

Note: This is part two of a three-part series titled "Developers in the New Age of the Web"

As I mentioned in 'The New Age of the Web', JavaScript is a world between two disciplines. I also mentioned that JavaScript isn't just JavaScript. It's also HTML and CSS. So I'm going to stop talking about JavaScript and start talking about the "front-end".

The world of the front-end is the world where HTML, CSS and JavaScript all come together in a browser that can now produce functionality that was once limited to only desktop applications. And who builds this functionality? The Front-end Engineer.

The Front-end Role

The front-end engineer has to know the languages of the Web: HTML, CSS and JavaScript.

There's really no such thing as just a "JavaScript" engineer. They have to know HTML and CSS in order to write good JavaScript. As I mentioned before, the success of JavaScript really hinges on its tight integration with HTML and CSS, so disregarding either language really impacts the quality of the JavaScript code written.

So front-end Engineers need to understand all three browser languages to be successful, but there are non-technical traits that are essential to their success as well.

Curiousity:

One of the amazing things about the front-end is how quickly it's changing. Most of the features in CSS3 weren't widely available a few years ago.

Responsive design, an approach allowing a website to change layouts on the fly depending on screen size, was introduced in 2010. Only two years later and it was #2 on a list of top web design trends by .net magazine.

The popularity and number of JavaScript frameworks has been exploding in the past several years. Ember, one of those frameworks, went from creation in 2011 to having a full-blown conference dedicated to it in 3 years.

Many times in the front-end engineer's career they will be asked to pick up a new framework and learn it in a week. After that week, they'll spend the next year learning why everything they thought they knew was wrong. They can't be afraid to make mistakes, but they also have to know how to pick up the pieces and move forward.

Creativity:

Visually

One of the most satisfying parts of front-end engineering is the visual aspect. It's not about plugging in numbers into a formula.

A great Front-end engineer bridges the gap between design and implementation. Many time designers only have time to paint an overall picture of the site. It's up to the front-end engineer to fill in the details of a design and really make it stand out.

They have to know what details matter and what details don't. Will a user care that the space between two elements is different from the design? The answer to that depends on what those two elements are and the developer should know the difference.

At the end of the day, no matter how well-designed something is on paper, it's the person putting together the fully-functional website that truly controls the design.

Programatically

Everyday, front-end engineers are forced to rethink their solution when what was supposed to work didn't. They can't just program for a single browser on a single screen size for a single device. They have to know 100 different solutions to the same problem, because they're deploying their code to 100 different environments.

They have to think apart from what they already know and it's up to their creative mind to come up with new approaches when the old ones fail. Without the ability to proverbially think-outside-the-box, a developer will struggle to meet the browser support requirements.

Front-end specialization

Despite all the curiousity needed to keep on top of things, the front-end engineer needs to be a specialist in their craft. They should understand things like...

Performance

Companies like Google know that website performance is highly correlated to conversion success. According to some metrics

"47% of consumers expect a web page to load in 2 seconds or less" and a "1 second delay in page response can result in a 7% reduction in conversions".

A lot is done to optimize response time on the server, but "80-90% of the end-user response time is spent on the frontend". How crucial it is then to make sure that the front-end code is performant?

Accessibility

Websites are about humans interacting with computers. Understanding what disabilities can affect those humans really impacts their experience with your website.

Accessibility, sadly, is a topic that many front-end engineers haven't focused on. This impacts people's lives daily, as they're unable to freely use the web due to the way it's coded. Fortunately, once a front-end engineer understands accessibility, they're in a perfect position to fix it.

Maintainability

"Despite CSS being so hard to maintain, it's often the part of the FE stack people are least interested in protecting from tech debt." - Nicolas Gallagher

Many developers tend to ignore technical debt in HTML and CSS because they don't feel it as real code. But each line of code in CSS counts the same as each line of code in JavaScript.

This is an important concept to grasp. It's incredibly easy for a CSS file to grow to such a size that it impacts site performance and become a beast to maintain.

Browsers

It's obvious that Front-end engineers need to know the latest about browsers, including what each one supports and how to test/debug in each of them. But what's not always obvious is how important this really is.

'Browsers are the most hostile software development environment imaginable' - Douglas Crockford

Fixing a single browser-related bug can take days, and if you do it wrong, can cause regressions in existing code. Having someone with the proper knowledge to handle this is important to delivering code in a timely manner.

Continue reading "Developers in the New Age of the Web":