Will the front-end job category continue to be split in the future?

Hi everyone, this is Kasong.

As a front end, did you and UI tear it hard?

Scene in mind

front-end: "The launch date is fixed, when will you produce the design draft? You will have to work overtime for development and testing after you don't produce the draft!"

UI : "It's coming soon, don't rush~"

front-end: "Give me what is done first, I will draw a static page"

UI : "It's coming soon, don't rush~"

tears at the front end silent at the back end. After all, the test bears all...

Have you encountered this situation?

What do you think is the essential reason? How can we solve this problem most efficiently?

This article will provide an idea and a product that can be used for reference.

Welcome to discuss this issue at the end of the article

problem causes

In the Modern Web Development Dilemma and Breakthrough , the author Niu Dai talks about the current front-end and UI cooperation mode as follows:

Picture from "Modern Web Development Dilemma and Breakthrough"

UI completes the design logic, draws the page style on the design software, and delivers it to the front end.

The front end CSS + HTML reproduce the style drawn UI draw the style again on the web page, and then add functional logic after drawing.

Why does UI need to be drawn again on the front end? Just because UI uses design software, and does the front end need programming?

Therefore, the ideal division of labor should be as follows:

Picture from "Modern Web Development Dilemma and Breakthrough"

That is, UI completes the design logic and page style (through the design software). The software generates the static page code available for the front-end according to the specifications, and the front-end writes functional logic based on the generated code.

To put it in the vernacular:

No need to draw static pages on the front end

Although this process has many difficulties to be solved, such as:

• For UI , the page is a layer, and for the front end, it is a component. How to align the difference between the two
• You need UI understand the basic page layout (floating, flex , absolute positioning...) in order to generate a static page that meets the responsive specification

However, the flaws are not concealed. If this process can be run through, the development efficiency will be greatly improved.

mitosis is a bold attempt in this regard.

A bold attempt

BuilderIO is a low-code platform, mainly doing drag and drop to generate pages. mitosis author is BuilderIO of CEO .

Use a picture to summarize the positioning of mitosis

The first row from the left is: sketch , Figma , BuilderIO . The first two are well-known design software, and the latter is a low-code platform.

When UI uses these software to complete the page design, mitosis through the plug-in, mitosis can output it into a variety of well-known front-end framework codes.

The design drawing becomes the front-end framework code in one step, and the front-end does not need to draw a static page.

How did he do that?

Modern front-end frameworks use the component as the logical and view division unit. The component can be described.

For example, React of Fiber and Vue of VNode are node types that describe component information.

mitosis converts the design drawing into a frame-independent JSON , similar to this:

{
  "@type": "@builder.io/mitosis/component",
  "state": {
    "name": "Steve"
  },
  "nodes": [
    {
      "@type": "@builder.io/mitosis/node",
      "name": "div",
      "children": [
        {
          "@type": "@builder.io/mitosis/node",
          "bindings": {
            "value": "state.name",
            "onChange": "state.name = event.target.value"
          }
        }
      ]
    }
  ]
}

This JSON describes a component type (ie component), which contains the state name , and nodes represents the view corresponding to the component.

If the output target is React , then the code is as follows:

export function MyComponent() {
  const [name, updateName] = useState('Steve');

  return (
    <div>
      <input
        value={name}
        onChange={(e) => updateName(e.target.value)}
      />
    </div>
  );
}

Be careful

If you look at this picture carefully, you will find that mitosis can also be output to the design software in reverse.

Yes, mitosis itself is also a frame. Interestingly, he is more like a front-end frame stitching monster .

He adopted:

• React of Hooks grammar
• Vue update of 0613749c59ed17
• Solid.js static JSX
• Pre-compilation technology of Svelte
• Specification of Angular

In the above code example, if you use mitosis syntax to write:

export function MyComponent() {
  const state = useState({
    name: 'Steve',
  });

  return (
    <div>
      <input
        value={state.name}
        onChange={(e) => (state.name = e.target.value)}
      />
    </div>
  );
}

The road that was never envisaged?

At the beginning, we talked about two pain points that prevent the front-end from directly using design software to generate static code:

• For UI , the page is a layer by layer, and for the front end, it is a component. How to align the difference between the two
• You need UI understand the basic page layout (floating, flex , absolute positioning...) in order to generate a static page with composite responsive specifications

Let's imagine that when mitosis a new project with 0613749c59ef3c, the process is as follows:

1. The front-end designed by understanding develops the initial code mitosis
2. Code output as design draft
3. Professional UI based on the design draft (conforms to component specifications, responsive specifications)
4. The design draft is output as any front-end framework code mitosis
5. Front-end development based on framework code

In this way, the above pain points are solved.

Summarize

In the project development process, the front end needs to cooperate with the back end. into the middle layer of interface forwarding and became 1613749c59f141 business + Node engineers.

Similarly, the front-end also needs to UI . Will there be a batch of UI+ front-end engineers as envisioned above?

Welcome to join the human high-quality front-end framework group , and grow with everyone