What Is Frontend Engineering? What Is a Frontend Engineer?

©2011, Martin Rinehart

This short page is about frontend engineering on the Internet. (Want to build a new refinery? Begin with FEED—front-end engineering design. That is important work, but it is not our type of frontend engineering.)

What Is the Frontend?

I'll begin with a note on the word "frontend". I accepted the word as a legitimate compound noun when the O'Reilly editors accepted it in the subtitle of Steve Souder's High Performance Web Sites, "Essential Knowledge for Frontend Engineers." It is also still commonly written as a compound modifier, "front-end" and sometimes as two words, "front end." This article defines it, regardless of spelling. On to the definition.

The frontend of a web presentation or application is the part the user sees. A byte stream is sent to a device ranging from tiny (a mobile phone) to large (a commodious desktop monitor). The device, or a computer attached to the device, has display software, probably a browser capable of rendering HTML. The device turns the byte stream into a visual experience (or, with assistive technologies, an aural or other experience).

The frontend is also the part the user does, such as entering data in a form. This information must be turned into a byte stream that can be sent back to the backend of the site or application.

What Is Engineering?

For us, engineering has two distinct meanings.

Engineering Is Designing

In most disciplines, the engineer's work is designing. It could be a bridge, a printed circuit board or a chemical compound. The engineer applies the knowledge developed by the scientist to get a design that someone can turn into a practical, useful reality.

The Web Designer

To begin, a designer (who would probably prefer to be known as an artist, not an engineer) makes practical and aesthetic decisions. What colors will we use? How will we organize the necessary text, graphic and other parts? How will we create a pleasing layout that draws the visitor in?

UI/UX—User Interface/User Experience

We used to apply the term "usability" to what is now UI/UX. Can our visitor manipulate our site or application without instruction? Without needing to read a manual? Without pressing F1?

Today the goal is broader than simple usability. The whole "user experience" must be appealing to our visitors. Do they enjoy their visit? (That will be a huge part of their decision to become regular visitors.)

IA—Information Architecture

If web design and UI/UX design appear tightly intertwined, Information Architecture adds to the interconnections among the frontend design disciplines. The Information Architect is responsible for dividing the data component among pages and forms in such a way that the visitor will understand where they are and where they are going. (In some games, such as the classic Adventure, the point was to lose the visitor an an unknown maze. In most applications, your lost visitor will simply exit the site and be lost as a potential customer.)

Engineering Is Programming

The "software engineer" is a person that used to be called a "programmer." That very honorable profession was title-inflated to call it "software engineering," which is a small or insignificant part of the job. That said, "software engineer" is now part of the vocabulary, the currently accepted term for a person who writes computer programs.

Unlike other engineers, the software engineer's output is not a plan or design, it is the programs themselves—the reality that instantiates the frontend design. So here we have two distinct meanings for frontend engineering. First, it is the design work that creates a plan for a web frontend. Second, it is the creation of the code that instantiates that design. Sloppy English? Sure. But that is today's accepted meaning. We'll go with it.

The Frontend Engineer's Challenge

Let's use the term "frontend engineer" to mean, specifically, a programmer who creates frontend code that instantiates the frontend design. We won't call web designers "frontend engineers" although they are entitled to that honor if they want it (and most don't). We'll also let the other designers—information architects and UI/UX designers—keep their own specific titles and just use "frontend engineer" for those who actually create the code that makes the frontend happen.

The Frontend Engineer's Job

Terminology settled, we can now consider the frontend engineer's job: to make sure that the byte stream sent to the user's device is displayed as the site or application designers want it displayed. Then to assure that the byte stream sent back to the backend correctly reflects what the site visitor specifies.

The Frontend Engineer's Tools

The frontend engineer's main programming tools are HTML, CSS and JavaScript. HTML (HyperText Markup Language) is a tag set that lets the engineer specify "this is plain text, this is a graphic, this is a major heading" and so on. CSS (Cascading Style Sheets) let the frontend engineer specify how large an element should be, where it should be positioned relative to other elements, what color(s) should be used and other presentation details. JavaScript (a language not related to Java) gives the frontend engineer total control of the HTML and CSS in the display device.

Frontend and Backend Engineers Together

In addition to pure frontend work, the frontend engineer works closely with the backend engineers. Many tools, such as PHP (a scripting language that interfaces well with both the frontend and with backend databases) and JSP (Java Server Pages) send HTML directly to the frontend devices. Backend engineers are unlikely to be aware of the nuances involved without help from the frontend engineers.

The Frontend Engineer's Hostile Environment

Frontend engineering is a challenge unlike any other in the world of programming. According to JavaScript guru Douglas Crockford, "The browser ... is a really hostile programming environment." Actually, "the browser" is not a single piece of software. More exactly it is "browsers". MSIE 7 does not display HTML exactly as MSIE 8 displays it. Firefox is not the same as any MSIE. Chrome, Opera and Safari are mostly, though not entirely, compatible with each other and with Firefox, but not with MSIE.

Each browser has a "standards" and a "quirks" mode. In the former, HTML is displayed (more or less) as the standards specified by W3C (the world-wide web's recognized standards body) specify. In the quirks mode, HTML is displayed per the browser's best guess at what the HTML's author actually meant.

The most difficult challenge in frontend engineering is the HTML email. Each email client (Hotmail, Yahoo! mail, Gmail and so on, online, and Microsoft Outllook, Lotus Notes and so on, offline) renders HTML in the email and then forwards its HTML interpretation of its rendering to the client's browser. These rendering engines are given only a small fraction of the resources devoted to browser rendering engines, making them all idiosyncratic and prone to intermittent failures.

Frontend Engineer—Just Frontend?

So the frontend engineer not only has to convert the incoming byte stream into an appropriate display, per the frontend design. The frontend engineer has to create a correct display from the same byte stream for multiple devices running multiple browsers running multiple email clients, each with their own peculiarities. This is a bit of programming that requires lots of testing and a large amount of problem solving.

The next time you see a circus juggler with an impossibly large number of balls in the air, realize that you are looking at a metaphor for the frontend engineer.

Did I mention that the information architect and the UI/UX designer may also be the same person as the frontend engineer? In the extreme, the frontend engineer may also be the web designer. In fact, the frontend engineer may be, after a change of hats, a backend engineer, too. Our pleasant taxonomy of frontend designers, frontend engineers and backend engineers can get messy when we get up close.


Feedback: MartinRinehart at gmail dot com

# # #