Micro Frontends is the new way to design for AI

unbug
4 min readNov 28, 2019

--

I’ve been involving some AI-related productization projects. I played many roles in these projects. I did the PM work, set the goals and the KPIs, I designed the prototypes and the pipelines, I analyzed the data, I monitored the all the metrics, and of cause I wrote all the JS codes as a Front-End engineer.

What a Front-End engineer can do for AI?

I asked myself “What a Front-End engineer can do for AI” just like a Front-End engineer curious about, before involving these projects. And now I think I can give you my answers.

First, please be proud of yourself being an experienced Front-End engineer.

  1. As Front-End engineer, we have a better sense of products and user-experience. We could design the prototype base on the AI output and connect it to current products. Which can solve the problem of “How the AI relates to the products”.
  2. As Front-End engineer, we have the solid develop skills to delivery high-quality user-experience products base on AI to our users. Which can solve the problem of “How the AI looks like on the products”.
  3. As Front-End engineer, we have the solid develop skills to build visualization tools for AI. Which helps everyone to inspect the AI output data easily. Which can solve the problem of “How about the quality of AI”.
  4. As Front-End engineer, we have the solid develop skills to build workflow tools for AI researchers. Which helps researchers to processed manage their jobs.
  5. As Front-End engineer, we have the solid develop skills to build dashboard tools to monitor the automated pipelines. Which ensure users stay connected to our AI.

These are not all of the answers, but I think you get it. Yes, as Front-End engineer, we solve the accessibility for AI Platform and AI productization. There’re many Front-End works that need to be done for the AI Platform. You can learn more from this article How to build an AI Platform.

Image from How to build an AI Platform

What is Micro Frontends Architecture?

Before we continue, let’s learn the gotcha of Micro Frontends Architecture. We’ll talk about later why it’s so important to AI productization.

The define of Micro Frontends: “An architectural style where independently deliverable frontend applications are composed into a greater whole”

Image from https://martinfowler.com/articles/micro-frontends.html

The Benefits of Micro Frontends: Incremental upgrades, Simple, decoupled codebases, Independent deployment, Autonomous teams.

Image from https://martinfowler.com/articles/micro-frontends.html

In short, micro frontends are all about slicing up big and scary things into smaller, more manageable pieces, and then being explicit about the dependencies between them.

You could learn more of it from Micro Front End by ThoughtWorks, and the YouTube Video.

How does Micro Frontends can help AI productization?

In nowadays, enterprises are building monster products. They’re huge and complicate. Imagine you’re in a video streaming company. Now you want to delivery an AI-based new feature to your products, such as jump to the leading role. Your algorithms are ready, your pre-build models are ready. But you need to talk to the infrastructure team to support the computing, you need to talk to video team to ingest to the source video, you need to set up back-end teams to help you build the automation pipeline, you need to talk to the make change to service pipeline so the new data might delivery to the client, finally, you have to convince the client team to make change to all the monolithic client applications. It’s a huge work, the progress is slow. But before all this work, you don’t know how your users react to the new feature, you don’t know how to improve it. It has a high risk to be takedown before it even meets the products due to the client team has a high priority feature to ship.

Micro Frontends Architecture will help us out. We break down the huge application into small applications by features. Each team owns an application. They have an independent deployment pipeline.

Image from https://martinfowler.com/articles/micro-frontends.html

One of the application is for the AI feature, your team owns it, now you’ll be able to ship the AI features as quickly as you want. You’ll be able to verify it ASAP, so you can keep improving your AI.

What does the “design for AI” mean?

AI will change the way we integrate with machines. New UX design will the way we develop the application. New Front-End tech will come up. As Front-End engineer, get ready and enjoy the change.

--

--