Creating the Virtuous Cycle with Headless, Hybrid, and Low Code

Chapter 4. Resource Flow and Efficiency: Balancing Business and User Needs

Following the guidelines outlined here will go a long way to helping you create the virtuous cycle and successful web applications. However, there will always be a need to find compromise between the goals and the budget.

Often, an organization will look at only the initial costs or maybe the development time as the primary resource. This can be helpful but leads to challenges because we must think about the users. The up-front cost is not the only resource to consider.

Focusing on the proper and efficient use of resources is incredibly important. If this is done at each stage, and the principles are applied, then everything else will take care of itself. In fact, many considerations like tech stack or architecture won’t really matter if you have an efficient and workable workflow. This ensures that resources are used wisely, and in a composable application, changes or adaptations are always possible.

As noted, we also need to consider the end UX as well as the DX. Balancing the needs of the whole workstream is important in order to not only create but also maintain the virtuous cycle. When we focus on the UX and DX, we see an inverse relationship between the user’s resources and the developer’s. Many organizations will make the mistake of paying attention to only one or the other, but both are vital.

As we make the UX better, the DX will suffer, and vice versa. This is where compromise comes into play and the ability to take a holistic view of the entire project life cycle. When we find the right balance of bandwidth, time to market, and developer time, we can maximize the virtuous cycle and ensure the highest return on investment for everyone.

Bandwidth

Bandwidth is high value for users and low value for the business.

The cloud has made bandwidth and processing power relatively cheap compared to the “old” ways of on-premises servers and IT management. Now, anyone can spin up a cloud server, cloud storage, or any number of software as a service or platform as a service providers to build and serve their application. Broad access to CDN technology reduces the cost even further, potentially reducing the business cost for delivery to incredibly low amounts.

However, this low cost on the delivery side makes it easy for organizations to build inefficient code that uses more resources. This inefficiency is paid for by UX—time to first paint, device memory, load times, connection speed, latency, etc., which can have a dramatic impact on the end experience and kill an otherwise great application.

Customers expect fast responses and simple interfaces. They expect access on mobile devices with smaller screens and slower connections. A web application that loads in 1–2 seconds on a computer can take 10 times as long on a mobile or IoT (Internet of Things) device, frustrating end users and driving them away.

We must always think about the user and ensure we are building great experiences. As much as possible, we want to use server-side rendering (SSR) for pages and content, and cache it at the edge. This can be further augmented by a static site generator (SSG) where it makes sense, though we want to be careful not to overoptimize for UX at the expense of DX.

Above all, keep the size of payload as low as possible in order to conserve the bandwidth of the user. Some strategies include:

• Aggregate and minify JS and CSS aggregation and minification.

• Create JS collections to package and remove unused code from pages.

• Compress your assets so they are as small as possible.

• Use lazy loading techniques to only load larger assets when they are needed.

• Follow progressive web application strategies for preloading common assets.

• Rely on local caching to avoid making duplicate requests.

• Enhance your application with offline access to ensure your application is always available once users have loaded it.

• Limit the amount of JS parsing on the client.

• Consider using preprocessing techniques to keep client-side code fast.

• Avoid using heavy JS frameworks unless absolutely necessary.

• Push as much JS to the bottom of the page to keep it from blocking initial paint.

• Remove or delay third-party JS libraries that will slow down your page.

• Use responsive web design to avoid loading large assets on smaller devices.

Designers want big images and videos. Marketers want tracking and analytical data from across their toolset. Developers want cool features and app-like interactions. All of these are easy to put into a web application, and all of them carry a fairly big cost. Giving everyone on the business side what they want will cause the user to pay the price.

Be ruthless in your efforts to keep bandwidth “costs” low, and be creative in ways to limit, delay, or hide the loading of assets so they don’t block the user’s experience. Your application will be faster, your UX will be enjoyable, and your customers will thank you.

Time to Market

Time to market (TTM) is a middle value for both users and the business.

Value is only realized when it is delivered. Great information, features, or integrations in your web application can only affect the user and the business only after they are deployed and available.

So TTM, or value throughput, is an important consideration. A large benefit of the virtuous cycle is that it enables the business to provide faster and more consistent delivery of value. This is accomplished by removing bottlenecks and other impediments to workflow.

For the business, this enables them to get out new messaging, release new features, and deliver other assets to the field as quickly as possible. With a good workflow, the creation of these resources can immediately flow into delivery with little to get in the way.

For the end user, faster TTM means they will get those features and resources quickly. Users expect instant access to information and continuous feature releases and improvements.

To increase TTM, look for opportunities to leverage low-code tools to empower business users and provide self-service opportunities to create and deliver work as efficiently as possible. Ensure that you are decoupling content and experience management from code deployment where possible.

Where the high-code approach is necessary, be sure to invest in continuous delivery processes to automate building, testing, and deployment of code. Composable workflows will also help to reduce rework and leverage existing code.

These concepts are about parallelizing the workflow to remove serial bottlenecks and move delivery as close to creation as possible. The goal is to get a quick turnaround from creation to delivery so you can get feedback quickly as well. This is part of the virtuous cycle because it makes it easier to rapidly evolve the application and adapt to changing requirements.

Developer Time

Developer time is low value for users and high value for the business.

Developer time is one of the most valuable resources that a business has. These people are vital to ensure the proper building, maintenance, and uptime of the web application. The more experienced they become, the more valuable they become as well.

Unfortunately, the end user doesn’t need to care about the cost of developer time. As a consumer of the application, the cost to build the application is largely abstracted away. The only real way that developer time impacts the end user is when it impacts features or TTM.

Increasing DX means investing in the tools and processes to make it easier for developers to be productive. Continuous delivery practices can enable automated testing, linting, building, code-quality scans, and other processes that can enhance developer productivity. These can also be used to enforce best practices and ensure consistency across the team.

Look for ways to reduce the distractions for developers. The typical developer only spends about 35% of their time writing the code. Automation can help free up time, as can following agile practices and reducing extraneous meetings.

Also look for ways to let developers focus on high-value activities. Low-code tools can enable nondevelopers to control some assembly options and keep developers from using their time to arrange components on a page. Developers should be building, testing, and deploying components. They should be researching new technologies, experimenting with innovative ideas, and improving deployment processes.

Standardizing on a common toolset and managing that toolset will be vital to optimizing developer time. The goal should be to have systems in place to enable a new developer on a project to be up and running with an optimized development environment, process, and workflow in 30 minutes or less.

If you can’t standardize the development experience and workflow across the team, then you can’t enable good flow. At its core, the virtuous cycle is about inducing smooth and efficient workflows. Good DX is vital to the success of any development team.