Adventures in User Interface Design and Code Generation — Part 1

We’re busy these days teaching CodeBot how to generate fully functional web applications from UML models, with as little coding as possible (and ideally with no coding at all). The basic steps involved are

1. Develop a domain model and code generate database and API

2. Wireframe the screens and link them to the API

3. Develop a UX Navigation State Machine that defines the sequence in which screens appear

4. Code Generate and automatically host the generated database, API, and web app code

5. Test, iterate, and refine

We’re using a Location Based Advertising (LBA) System to test CodeBot’s performance on a real project. LBA is a geofenced coupon delivery system and its web application allows advertisers to Register for an Account, Login, and Publish Coupons. These coupons are then received by a mobile app that’s connected to the hosted API when a geofence is entered.

CodeBot Generates UI Code

CodeBot generates React/Bootstrap code from wireframes as shown in Fig. 1.

Figure 1 — No coding is needed to create the Registration Page — because it’s generated from a wireframe

The screens are linked to the API using UML Tagged Values, and both Registration and Login are done securely on the server-side using JWT authentication, as CodeBot generates Login and Register methods in the API automatically. The sequencing of the generated screens is defined using a UX Navigation State Machine as shown in Figure 2.

Figure 2 — first draft UX Navigation state machine is simplistic

At first glance, the initial state machine makes sense; first you Register and then you Login, right? But when you code generate the project and start using the hosted web app, you quickly realize that whoops, once I’m signed up, I don’t want to see the Registration page anymore. I want the web app to take me to the Login page first, and if I’m a new user, allow me to Register, then take me back to Login.

Which comes first, the chicken or the egg?

From a use case standpoint, it’s a pretty simple modeling decision…does Register <precede> Login or does Login <invoke> Register? If you reflect on it for a few seconds, it’s pretty clear that Login needs to invoke Register (Figure 3). This is where the rapid iteration between design, generated code, and hosted application that CodeBot enables really shows its power.

Figure 3 — In a real system, Login <invokes> Register, because you only Register once

Developing at the speed of thought

An ideal scenario would be to make these changes to the application at the speed of thought…just re-wire my state machine (Figure 4), make a couple of changes to the Register and Login wireframes, press the button and have CodeBot automatically re-generate the entire web application and host it in the cloud.

Figure 4 — Ah, that’s better: re-wiring the state machine to start with Login

As “developing at the speed of thought” is the goal of CodeBot, that’s exactly how it works. The re-wired state machine now starts with Login and handles transitions between Login and Register Pages.

Figure 5 — Modified Login wireframe allows us to Register new users

While we’re re-wiring the navigation state machine, we also update the Login wireframe to take new users to the Register page (Figure 5) and similarly update the registration page. After a quick visit to the CodeBot web console we’ve got a re-deployed web application as shown in Figure 6.

Figure 6 — Ah, that’s even more better. CodeBot makes quick work of generating and hosting the new web app. It’s up and running in minutes.

The real power of CodeBot driven UX development is the ability to rapidly generate and deploy new versions of an application in minutes to get the feedback-driven benefits of agile development. Short iterations are the key to developing a refined and customer-tested user interface (and associated access-controlled database).

How do we manage one developer per use case?

If you’ve been reading anything about Parallel Agile you already know that we like to enable projects to get done quickly by having developers work in parallel. So we might have one developer working on the Login and Register wireframes and another working on the UX Navigation state machine.

Figure 7 — Working in parallel requires good version control

What if each of our developers were working on a separate UML model? We’d need some way to manage and merge versions of the model.

Like branches on a tree

We’ve recently discovered a companion product to CodeBot that manages branching of UML models in a way we’ve always wanted to see — with visual differencing on diagrams. That product is called LemonTree, from LieberLieber software. We’re pretty excited about the potential of using CodeBot and LemonTree together (more on that coming soon).

Figure 8 — LemonTree does visual differencing on state machine diagrams

Figure 9 — Visual differencing on wireframes enables parallel development

With visual differencing and model versioning, the “one developer per use case” paradigm of Parallel Agile becomes quick and easy to manage.

The Need for Speed

Our mission at Parallel Agile is to help you to develop software radically faster while simultaneously improving its quality. Our approach is to systematically remove obstacles from from an idealized process of “developing at the speed of thought”.

At a macro level, speed improvements are made possible by encouraging a scalable one-developer-per-use-case paradigm. This is enabled by CodeBot’s automatic generation of database, API, and API documentation from an easy-to-understand domain model. Incorporation of things like JWT tokenized Registration and Login and Role Based Access Control into CodeBot’s API generation simplifies handling of data privacy issues.

At a more-fine grained level (within each use case) CodeBot’s generation of web applications from wireframes and state machines gets your system up and running in a big hurry, then short iterations of an automatically hosted and deployed application allow for rapid refinement of the system to make sure it meets customer needs. Management of a highly parallel development process where “the model is the code” is facilitated by LemonTree’s visual differencing and merge capabilities.

If you need to develop software faster and all of this catches your interest, we’d love to hear from you. User Interface code generation is currently available in pre-release for our Early Access customers (Early Access is available on request for all paid CodeBot licensees). Watch for announcements coming soon.

Dive in deeper

Here are a few links for further exploration:

Parallel Agile Blog: https://medium.com/parallel-agile-blog

Parallel Agile Book on Amazon: https://www.amazon.com/Parallel-Agile-faster-delivery-defects/dp/303030700X

Training on the Parallel Agile Process: http://parallelagile.com/training.html

Parallel Agile CodeBot Home Page: https://parallelagile.net/

LemonTree from LieberLieber: https://www.lieberlieber.com/lemontree/en/

Webinar: Model Management for Low Code Projects: https://www.lieberlieber.com/en/webinar-model-management-for-low-code-projects/