Frontend Engineering is Broken

Rohan Mahajan
Sep 5, 2018 · 2 min read

In a typical product team, the designer creates a mockup in a tool such as Sketch or Figma. These mockup tools generally do not provide a mechanism to encode even basic dynamic actions such as what happens on hover. The frontend engineer receives this mockup and attempts to recreate it using html, css, and javascript. Undoubtedly, the developer does not fully capture the designers intent and the designer and the developer must go back and forth until the product is ready.

This process is definitely broken. Because most mockup tools do not encode dynamic actions, the developer must guess what the designer wants and can frequently not get it right. Furthermore, the designer is not able to prototype these dynamic actions and thus might not even know what dynamic actions he wants.

Furthermore, the front end engineer is a human compiler for the designer, compiling from the beautiful mockups to the HTML/CSS/javascript. The designer has the true understanding for how the interface should look, feel, and function. Having an extra frontend engineer in the loop not only costs the engineer’s time but also costs communication time between the designer and engineer, and slows down the product cycle.

We need tools that allow designers to express dynamic interactions and also deploy directly to the browser. Html/CSS/javascript are used by millions of websites and have a protocol network effect. Browsers will only support new interfaces if there are sufficient developers but developers will only use these interfaces if the browser supports them.

Consequently, the best solution are tools that compile these dynamic mockups to Html/CSS/Javascript. Tools such as Pagedraw and Anima attempt to do this. The main complaint has been that these tools are buggy and do not handle all mockups. The typical wisdom is that they need some usage to raise money and hire the engineering resources to handle all use cases but it is hard to get usage if they did not handle all use cases. However, React has stressed the usage of components and the clean isolation they provide. Developers can handcode the components that the tools do not get right. As the tools get better, the amount of handcoded components the developers will have to use will slowly decrease.

In conclusion, front end engineering is broken. The tools aren’t expressive for designers and front end engineers are human compilers. Compilers such as Pagedraw and Anima will hopefully help solve the problem.

Rohan Mahajan

Written by

Software Engineer. BS/MS from MIT EECS. rohanmahajan1993@gmail.com https://twitter.com/rohanmahajanmit