Misunderstood of Front-End Development Field

picture of html tag markup

The first and easiest answer to “Why can’t we find Front End developers” is because it’s a new field. Most people would disagree about this statement, since Front End Engineering is similar to Web Development, and Web Development has been around for more than 20 years. However, the concept of Front End Engineering as the technical implementation of interfaces and user experiences as a specific “working” field, is definitely quite new. The “Engineering” part to Front End started to grow just few years ago.

No one is to be blamed for this whole Web Development vs Front End Engineering confusion that circulates even today; for most people outside of the Web industry, Web Development is a blurry line between the Visual Design of a webpage, and the technical implementation of it; after all, Web Development is something Front End Engineers do, with the exception that Front End Engineers focus only on the areas that involve the users.

picture of client-side scripting


Another important reason (and in my opinion the most important one) on why finding Front End is hard, is because it is a misunderstood field. As the OP of the original question described, most people think that Front End is a “relatively easier field”. In the old fashion “What most people…”, here’s a detail on what Front End Engineers do:

What most people think Front End Engineering is:

  1. Taking a Photoshop file, Image, or Wireframe and making it into a webpage.
  2. Sometimes design previous Photoshop file, Image or Wireframe.
  3. Code Javascript, which creates animations and makes transitions inside a webpage.
  4. Code HTML and CSS, which defines content and styling inside a webpage.

What Front End Engineers actually do:

  1. Establish a visual language between Designers and Engineers
  2. From a Visual Design, define a set of components that represent content, brand, features, etc.
  3. Establish a baseline for the Web Application in terms of conventions, frameworks, requirements, visual languages and specs.
  4. Define the scope of the Web Application in terms of devices, browsers, screens, animations.
  5. Develop a Quality Assurance guideline to ensure brand fidelity, code quality, review of product by stakeholders.
  6. Style the Web Application with proper spacings, typography, headings, face fonts, icons, margins, paddings, grids and so on.
  7. Style the Web Application with multiple resolution images, device oriented mockups, all while taking care of design guidelines.
  8. Markup the Web Application taking into account semantics, accessibility, SEO, schemas and microformats.
  9. Connect to an API to retrieve information in a friendly, non-battery consuming, device and client aware way.
  10. Develop client side code to perform smooth animations, transitions, lazy loading, interactions, application workflows, most of the time taking into consideration progressive enhancement and backwards compatible standards.
  11. Ensure Backend connections are secure, taking Cross Origin Resource Sharing (CORS) procedures into account, protect against Cross Site Scripting (XSS) and Cross Site Request Forgery (CSRF).
  12. Never forgetting that despite strict deadlines, stakeholders requests, and device limitations, the User is, and will always be first.

In order to achieve aforementioned goals, Front End Engineers use many tools that range from Visual Design tools (Photoshop, Adobe, Macaw, Sketch), to Programming Tools (IDE’s, Command Line, Source Version Control, Bash scripts, Build tasks). Sometimes we even have to take care of Marketing (Newsletters, Campaigns, Analytics, SEO, Social Media), UX (animations, transitions, feedback, interfaces, visual language) to Content tweakes (breakpoints, avoiding orphan words, readability, colors).

Quote : Jose Aguinaga
Soure : jjperezaguinaga.com