Web Application Paved Road: A Low Code Approach

Intuit’s strategic move to accelerate application development using a micro front-end development platform has enabled teams to move fast by making it relatively easy for them to design, build, and deploy new features within minutes.

In this blog, we will describe our decision to take an automated low-code approach to web development. This approach serves as a means for abstracting and automating the most common infrastructure tasks our developers routinely perform to deliver a web application or its features to customers across our product portfolio, including TurboTax, QuickBooks, and Mint.

The Problem: repetitive common infrastructures and development tasks

Here are some common, repetitive tasks web developers in most organizations must tackle before they can get started on writing code for a new app or feature:

1. Set up a working local environment.
2. Set up a sample (e.g, Hello World) code/repo to play with which has all the defaults and access controls.
3. Set up necessary-to-build jobs and testing infrastructure.
4. Set up the hosting environment (pre-prod, prod) for the application with all the Opex hygiene.
5. Set up the necessary security scanning in the pipeline.
6. Write code to solve critical customer needs (End User Experience).
7. Compile, run, test, and debug the code.
8. Send PRs, run automated tests, and merge changes.
9. Build/package and publish (this includes cloud hosting and management tasks).
10. Roll out the changes to selective environments (pre-prod/prod ) and users.
11. Log errors and track usage and performance metrics.
12. Monitor failures and roll back when needed.
13. Manage the scaling when traffic increases.

That long list shows that repetitive tasks take up a big chunk of developers’ day-to-day work. Now multiply that by the number of engineers in your organization and you realize how much time is wasted if they have to do this repetitive work by themselves.

This is where we at Intuit embarked on the concept of fully automated paved roads, which for us means fully automated common infrastructures. To understand more on this, let’s first group the above tasks into meaningful infrastructure areas so they can be automated.

• Multi-Tenant Hosting platform.
• Common Tooling for generating, building, publishing code.
• Common Client-Side Runtime (aka Application Shell).
• A Development Portal where all these are tied together and managed.

Let’s look at each of these infrastructures and how they facilitate web application/plugin creation and hosting through the paved roads.

Multi-Tenant Hosting platform

This is probably the most tedious part of the web application development process, i.e creating a backend infrastructure that can host and serve your front-end application needs at scale with security, etc. Many companies have multiple clones of this and potentially incompatible tech stacks as well. We created a single common infrastructure (initially called AppFabric Hosted Shell) that handles the incoming requests (from more than 250+ production applications) from clients’ devices and maps the request (Domain+Route) to a unique application meta-data. The application meta-data includes domain patterns and route patterns which are used to compare against the incoming URL to map the right application experience. The application is usually composed of multiple other plugins (micro front-end features).

When the developer creates a brand new application using the paved road, a new subdomain is created with developer specified application prefix (e.g test123.app.intuit.com) which maps to the shared instance of the multi-tenant service endpoint (see picture below). A corresponding app meta-data record was also created with the App meta-data service. This record will include the new app domain pattern and its default /hello route. The default hello world app will automatically reference a hello world plugin which includes a widget that renders the /hello route. The developer can use the Plugin paved road to generate a new plugin that can contain new widgets to power their feature needs. The application meta-data also provides more declarative ways to control the application behaviors (e.g experimentation).

Common Tooling for generating, building, publishing code

This next infrastructure is called Plugin-CLI (command line interface) which enables many of the developer’s day-to-day tasks mentioned above. I.e you can imagine this is very similar to create-react-app but with a more powerful build, test, package, and release to CDN features built-in. A more detailed blog on this tooling infrastructure will be published later. This infrastructure powers the plugin paved road where individual feature (plugin) scrum teams of an application build their micro front-ends and then publish to CDN.

Common Client-Side Runtime (aka Application Shell)

This infrastructure was covered in detail in the previous micro-frontend blog which is basically composing the user experience on the client-side.

A Development Portal where all these are tied together and managed

This is another critical infrastructure for Intuit developers to create and manage various assets like web applications, plugins, services, etc.

How do these paved roads help save time?

Since the concept of paved roads is all about automating the common repetitive infrastructures, they speed up the development of new features and decrease the time spent in setup, from days to minutes, especially where user experiences and the business logic around them change more frequently.

Below are a few more additional benefits of web application paved road:-

• Applying security changes in a consistent way across applications.
• Operational excellence is out-of-the-box with built-in monitoring and alerting capabilities for all web plugins created through the paved roads. This includes collecting RUM (real user monitoring) metrics and Web Vitals to ensure our TP50/90/99 performance indicators are always in check.
• One-click/declarative UX variations allow UX changes in a few clicks. For example, a simple checkbox to convert pre-auth user experience (no authentication) to post-auth user experience with authentication.
• Integrations with CMS (content management systems) enable non-developers to create content and publish without writing additional code.

Learnings

When new developers join Intuit and have an opportunity to build their first app or feature in an onboarding workshop, they’re delighted to see the code they wrote in the workshop is working live in pre-production in <10 mins.

Our success with web application/plugin paved roads has been applied to mobile libraries, UI components, etc. For example, In this Paved Road for Data Pipelines Medium Engineering Blog, we described how Intuit creates, manages, and monitors data pipelines, to increase our effectiveness of processing in the data lake.

If you are curious about how all this works, join us!