Frontend Engineering Is Programming

©2011, Martin Rinehart

A stream of bytes leaves a server and arrives on the desktop (or the telephone, or ...) of the user. The frontend engineer's job is to assure that the stream of bytes is converted into the desired presentation on the user's device. (Backing up a step, this implies that the job is to assure that the stream of bytes is correct.)

HTML

The frontend engineer will know most HTML tags and most attributes of most HTML tags without need for a reference. This is the basic palette of the frontend engineer whether used directly or through writing JavaScript or by emitting tags from the back end (with scripting technology such as PHP or JSP). Almost as important is CSS.

CSS

In the last century we laid out our web pages using tables. There were a variety of reasons why this was a bad idea, mostly revolving around accessibility. Tables defeated the attempts of assistive technology to bring the web to visually impaired people. In this century we use CSS for page layout and reserve tables for tabular presentations (example: "This data is summarized in Table 2-1, Widget Demand in Asia").

Frontend engineers understand CSS as completely as they understand HTML. Again, it can be written directly as CSS, or indirectly through JavaScript or by backend technologies that emit frontend code.

JavaScript

JavaScript gives the frontend engineer dynamic command of the browser. The user clicks a button and a form changes from standard to specialized. At the extreme, elements move around the screen, fade in and out, expand and contract. "Dorothy," one might say, "I don't think we're in Kansas anymore."

Less compelling, but no less useful, JavaScript can take over many chores from the backend, such as checking the validity of forms. Is an email address required? The form should not be sent to the server without one.

More compelling, JavaScript can create new widgets and new effects aiming for the, "Oh, wow!" reaction that keeps viewers coming back. Every frontender has access to jQuery UI. To make a site stand out, you need to go past this level.

Cross-Browser Programming

Chief among the frontend engineer's concerns is cross-browser programming. MSIE is typically the odd man out in any frontend work. Code that is correct for Firefox may display incorrectly in MSIE, and vice-versa. Code that displays correctly on any "standards-compliant" browser (Chrome, Firefox, Opera and Safari) will usually, but not always, display correctly on the other standards-compliant browsers. Code that displays correctly in MSIE 6 or 7 may display incorrectly in MSIE 8 as well as displaying incorrectly in the standards-compliant browsers. (Few frontend engineers love MSIE.)

Cross-Browser, Cross-Client Programming

Frontend engineers have their work cut out when they attempt to create HTML emails. Emails are rendered by email clients that serve HTML to browsers. Email engines are notorious for sloppy rendering. Yahoo mail recently stopped placing blank lines between paragraphs. Gmail ignores padding in the CSS box model.

Email engines have little support for CSS, so frontend engineers may be forced to step back in time, using tables for formatting. Testing becomes a matter of testing each target browser with each target email client. Great patience and occasionally great ingenuity are required for a successful HTML email campaign. (If you style each paragraph with a 1em bottom margin, paragraphs will have proper separation, even in Yahoo.)

JavaScript Libraries

JavaScript libraries, such as jQuery, MooTools and YUI, provide ready-made widgets beyond the limited set of HTML tools. Want a slider to adjust a value? Want R, G and B sliders to pick a color? Need them to work in every major browser since IE 6? Libraries to the rescue.

Note: JavaScript libraries are often called "frameworks," a name which belongs in the back end for true website frameworks. Ruby's Rails is one example. Java's Struts/Hibernate combination is another.

A frontend engineer should be able to use libraries and, at need, to create additional library code for specialized user interface elements.

Frontend Engineering Is Programming

The frontend engineer is fluent in HTML, CSS, JavaScript and more. Comfortable in modern table-free layout, and comfortable reverting to table-based layout for HTML email.

Did I mention SQL? (Surely, you must be thinking, SQL is a backend issue!) The frontend engineer must be comfortable talking to the backend engineers, understanding how the UI maps to the DBMS. Frontend engineers are beginning to get the respect they deserve.


Feedback: MartinRinehart at gmail dot com

# # #