Displaying items by tag: parallelagileaddin
Adventures in User Interface Design and Code Generation – Part 1
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
- Develop a domain model and code generate database and API
- Wireframe the screens and link them to the API
- Develop a UX Navigation State Machine that defines the sequence in which screens appear
- Code Generate and automatically host the generated database, API, and web app code
- 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.
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
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/
Parallel Agile book is available now!
Parallel Agile Book Out Now!
Parallel Agile - Faster Delivery, Fewer Defects, Lower Cost
I'm happy to announce that after 5 years of test projects and nearly 3 years of book writing, our book Parallel Agile - Faster Delivery, Fewer Defects, Lower Cost is now available on Amazon for immediate delivery. You can read about it on LinkedIn, or on the Parallel Agile Blog on Medium. Here's the blurb from our Amazon page:
From the beginning of software time, people have wondered why it isn’t possible to accelerate software projects by simply adding staff. This is sometimes known as the “nine women can’t make a baby in one month” problem. The most famous treatise declaring this to be impossible is Fred Brooks’ 1975 book The Mythical Man-Month, in which he declares that “adding more programmers to a late software project makes it later,” and indeed this has proven largely true over the decades.
Aided by a domain-driven code generator that quickly creates database and API code, Parallel Agile (PA) achieves significant schedule compression using parallelism: as many developers as necessary can independently and concurrently develop the scenarios from initial prototype through production code. Projects can scale by elastic staffing, rather than by stretching schedules for larger development efforts. Schedule compression with a large team of developers working in parallel is analogous to hardware acceleration of compute problems using parallel CPUs.
PA has some similarities with and differences from other Agile approaches. Like most Agile methods, PA "gets to code early" and uses feedback from executable software to drive requirements and design. PA uses technical prototyping as a risk-mitigation strategy, to help sanity-check requirements for feasibility, and to evaluate different technical architectures and technologies.
Unlike many Agile methods, PA does not support "design by refactoring," and it doesn't drive designs from unit tests. Instead, PA uses a minimalist UML-based design approach (Agile/ICONIX) that starts out with a domain model to facilitate communication across the development team, and partitions the system along use case boundaries, which enables parallel development. Parallel Agile is fully compatible with the Incremental Commitment Spiral Model (ICSM), which involves concurrent effort of a systems engineering team, a development team, and a test team working alongside the developers.
The authors have been researching and refining the PA process for several years on multiple test projects that have involved over 200 developers. The book’s example project details the design of one of these test projects, a crowdsourced traffic safety system.
The Parallel Agile process is enabled by our domain-driven CodeBot, which generates a database and API from an EA domain model. CodeBot is available through the Parallel Agile Add-in for Enterprise Architect. Please email me at This email address is being protected from spambots. You need JavaScript enabled to view it. with any questions.