The 6 levels of Front-end Development Automation

The 6 Levels of Frontend Development Automation

Anima is automating front-end development. As a part of our research and development, we’re discovering insights that are crucial to the success of front-end automation.

In this article, we have defined the 6 levels of front-end automation. These are inspired by SAE’s (Society of Automotive Engineers) the levels defined in a report on “Taxonomies and Definitions” regarding automated driving systems.

Scoping

When talking about automating front-end development, it’s important to understand the scope of automation. When we say “automation”, we describe the automatic generation of source code that is readable and maintainable by humans.

In our model, we focus on only the automation of the user interface.

Things included in Front-end Automation

1. Styling
2. Layout
3. Interactivity
4. Naming

Styling

Styling is the part of the code that is in charge of the style of the elements. Color, size, position, typeface (for textual elements), etc…

In web development, this is usually written in CSS code.

Layout

The layout is the part of the code that is responsible for structure, hierarchy, and responsiveness. Usually described by a tree structure.

In web development described with DOM using markup such as HTML or React JSX.

Interactivity

Interactivity allows users to interact with an interface. It can be clicking a button, dragging an element, pinching, using the keyboard, and more.

In web development is usually Javascript code.

Naming

Naming can make the difference between clear unclear code. Better engineers provide clear naming to variables, class, and functions in their code.

One of the requirements for a readable and maintainable code is good naming.

Not included

1. Network Requests.
2. Business Logic.
3. Any other code that isn’t related directly to the user interface.

We deliberately focus on a very specific area of code. We leave business logic and network requests to engineers at this time. Focusing on a smaller problem allows us to improve the automation process.

Levels

In these 6 levels, we go over how we see the current state of things and how they evolve over the next 5 years. This article is written in 2019 and as of this writing, there are commercially-adopted solutions that provide Level 1 automation. Anima will soon release Level 2 automation.

Level 0 (No Automation) — Engineer does everything

This is the process that occurs when engineers receive static mockups, without any additional data. No red-lines, no generated CSS properties, or anything other than a mockup image that represents the end result. Engineers look at the mockup image and re-create everything with code. Since static images can only convey some information, much of it is guess-work. Even font sizes need to be guessed, as there is no accompanying data that provides them.

Level 1 (Engineer Assistance)— Automated system can sometimes assist the engineer by providing the styling of the front-end code.

The engineer is provided with an interactive webpage that includes red-lines and styling code snippets (such as CSS, SASS or LESS). There are plenty of tools that provide this level of automation. Amongst them are Zeplin, Avocode, InVision Inspect, Sketch Measure, and others. The generated CSS is readable both by humans and devices. It can be copy-pasted or used a reference. This level of automation saves typing errors and a bit of time. It is still partial since it can only automate Styling (part one out of four).

Level 2 (Partial Automation)— Automated system can generate a responsive layout of the front-end code.

The system produces code for laying out the interface. This means Styling, and Layout (DOM). The code can be HTML, React, Swift, Java (for Android), React Native, Flutter, or any other front-end language. For the first time, the code can run on a device (such as a browser) and display a pixel perfect interface which is identical to the original mockup.

Level 3 (Conditional Automation)— Automated system can generate interactive parts of the front-end code.

The system produces code for most parts (all except Naming). This means Styling, Layout (DOM), and Interactivity. The interface is interactive and animated. It’s no longer static but can have micro-interactions, animations, states, and transitions.

Level 4 — (High Automation) —Automated system can generate all parts of the front-end code.

All 4 parts of front-end are included: Styling, Layout, Interactivity and Semantic Naming. The code should be full, clear and maintainable by a human engineer. Complete components can be used as-is or as a reference for the engineer. The code is readable both to humans and devices.

Semantic Naming means that elements are named based on what they are, rather than based on accompanying data.

In the following wireframe, try to guess the name of the pointed element. When you’re finished, scroll down.

Can you come up with a good name for this element?

In wireframe above, a human engineer would, most likely, deduce that the element is a “Profile Picture”. Notice that it doesn’t say “Profile Picture” anywhere, but since as humans have seen many profile pages, we are trained to perform pattern matching to accomplish this. Machines can learn this as well.

Level 5 — (Full Automation)—Automated system can generate all of the front-end code in human-level.

Automated system can generate code for all design specs, whereas the generated code is indistinguishable from a human-written code.

In this level, if a code review is performed, it should pass a “Turing Test” in which the reviewer can’t tell if an automated system produced the code or a human engineer.

The reason behind defining these levels is to allow us to set expectations to our customers. Front-end automation can mean many different things. Today “code generation” means simple CSS generation for most. But for us, code generation means much more. By explicitly stating the level of automation (i.e code generation), we can clearly communicate at each step what we mean when we say we “front-end automation”.

Join our journey to Level 5 Front-end Automation: www.animaapp.com

The 6 levels of Front-end Development Automation was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.