Print this page
Thursday, 11 March 2021 21:19

Adventures in User Interface Design and Code Generation – Part 1

Written by
Rate this item
(0 votes)

Adventures in User Interface Design and Code Generation – Part 1

Doug Rosenberg

Parallel Agile

This email address is being protected from spambots. You need JavaScript enabled to view it.

This email address is being protected from spambots. You need JavaScript enabled to view it.

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 Figure 1.

Fig 1 Register wireframe and screenshot

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.

Fig 2 LBA1 navigation

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. 

Fig 3 precedes or invokes

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.

Fig 4 LBA2 navigation

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.

Fig 5 login 1 and login 2

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.

Fig 6 CodeBot makes quick work of rebuilding the React pages

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.

Fig 7 one developer per use case

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).

Fig 8 LemonTree diff navigation 2 Register

Figure 8 - LemonTree does visual differencing on state machine diagrams

Fig 9 LemonTree diff wireframe login copy

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

 

CodeBot 201 Generating complete web apps including UI and database

Video: CodeBot - Generating complete web apps including UI and database

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/

Read 232 times Last modified on Wednesday, 17 March 2021 01:57
doug rosenberg

doug rosenberg

Parallel Agile, Inc. (Founder, Chief Technology Officer) - formerly ICONIX (CEO)
After running ICONIX for 35 years and writing 7 books on UML, use cases, and agile software development, Doug discovered a new way to improve productivity by leveragng parallel development, and founded Parallel Agile (www.parallelagile.com) in 2018 after 4 years of test projects at the USC Center for Software and Systems Engineering, where he's been working with Prof. Barry Boehm.   A new book "Parallel Agile - Faster Delivery, Fewer Defects, Lower Cost" is mostly written and will be released during 2019.   We're also developing a Parallel Agile Add-In for Enterprise Architect and are available for training and consulting.  
In his previous lifetime...
 
Doug Rosenberg founded ICONIX in his living room in 1984 and began training companies in object-oriented analysis and design around 1990. ICONIX specializes in JumpStart training for UML and SysML, and offers both onsite and open-enrollment courses.
Doug developed a Unified Booch/Rumbaugh/Jacobson approach to modeling in 1993, several years before the advent of UML, and began writing books around 1995. Design Driven Testing is his 6th book on software engineering. He’s also authored numerous multimedia tutorials (including Enterprise Architect for Power Users) and several eBooks, including Embedded Systems Development with SysML.
Doug has spent the last few years doing "deep dive" consulting into cutting-edge technology including cross-platform mobile app development, REST APIs, and NoSQL databases, and gaining first-hand experience on some "hardcore agile" projects of varying sizes.  He's also been working with dozens of graduate students at the University of Southern California Center for Systems and Software Engineering (USC CSSE), managing Directed Research projects and developing/piloting the Parallel Agile process.

www.parallelagile.com

Latest from doug rosenberg

Related items

Login to post comments