Parbaked (the 80% You’ve Been Looking For), Part 2 – Dynamic Forms

As I covered in my introductory post, parbaking is a concept where bread is baked to 80% of completion and then stopped. The remaining 20% is then finished where the bread will be sold. In many cases, this is a grocery store that wants to offer fresh bread but doesn’t have the staff required to make the bread from scratch.

This was when I suggested that a similar concept can be applied to software.

In this post, we’ll parbake the creation of dynamic forms. If we already have the form rendering engine built, we could be 80% of the way done. We would just need to have a developer create the remaining 20%.

Let’s begin with a prototype of a dynamic form. In this case, we’ll use JSON as our middleman to provide some sample form data and the form layouts.

The JSON is divided into two major portions: the layout information (which describes the data’s layout) and the sample form data.

export interface DynamicFormData {
  sections: DynamicFormSection[]; // layout
  record: any; // data
}

A form can be rendered based on just the layout and the sample data. The cool thing about this solution is the server can determine how the data should be displayed since it takes care of owning the layout and the data. The browser is responsible for the actual rendering, which might change based on attributes such as device type and window size.

How does this work out? Below is a simple Create Your Account form rendered using this concept.

Simple sign-up forms are not very impressive, but more complicated examples are doable too. The below example has multiple field forms and sub-tables.

The great thing about this type of solution is that the developer can change all the code if the solution doesn’t meet the stakeholder’s needs. Our parbaked portion simply gave a boost to the initial development.

While parbaking a UI won’t allow you to ever build an entire application, it can provide a starting point for a subset of functionality – all to enable you to build it faster and more predictably. The key concept is that the solution starts off 80% baked; it just requires some customization to get it closer to completion.

And just like parbaking bread, this approach gets us to the finished product faster.