Los Angeles, July 13, 2021 – The team at Parallel Agile is excited to announce a significant new version of CodeBot, a low-code MERN stack application generator. CodeBot now connects screens to databases and provides an extensive library of UI components to build a complete application “at the speed of thought”.

CodeBot uses your domain models and wireframes to automatically build an enterprise application – including a scalable, secure REST API, MongoDB database schema, Java client library, etc. Our latest release creates a fully integrated React web-app and automatically deploys it for testing.

“This release finally achieves our product goal of an end-to-end application generator, which supports an evolutionary, domain driven approach to agile development,” said Matt Stephens, Chief Architect and Director of Software Development at Parallel Agile. “UX-focused iterations that would have previously taken days or weeks can now be turned around in minutes,” he added.

In addition, the code generation process is fast, enabling a brand-new approach towards iterative development.

“Fundamentally, the benefits of an agile approach to development derive from running a feedback-driven project, where there are no long delays before working software can be tried out by project stakeholders,” said Doug Rosenberg, CEO of Parallel Agile. “CodeBot’s ability to generate and deploy a working application in a few minutes compresses sprint time from a couple of weeks to a couple of hours – and faster iterations enable the project to be more feedback-driven. With CodeBot, development literally happens at the speed of thought. Edit your wireframes and re-generate (and immediately redeploy) the application so that it’s instantly accessible to project stakeholders, whether they be from the human factors team, the QA team, or real customers. CodeBot puts the Agile in Parallel Agile,” he added.

According to Professor Barry Boehm, senior advisor at Parallel Agile and Founder of the USC Center for Systems and Software Engineering, “The Parallel Agile process applies the spiral model of development on a per-use-case basis. When combined with CodeBot’s ability to generate and deploy a database access API to glue the use cases together, teams of any size can collaborate easily, enabling a parallel processing approach to development and resulting speed improvement.”

CodeBot annual licenses can now be purchased at the Parallel Agile website. What’s more, customers can sign up for a demo session where they can engage and gain a better understanding of the toolset and the process.

About Parallel Agile

Parallel Agile addresses the underlying technical issues with integrating work done by large teams, in addition to the management issues – specifically enabling large teams of developers to collaborate efficiently and reduce schedule time on projects.  By leveraging code generation, you can have the benefits of both agile and model-driven development, with none of the limitations.

Learn more about Parallel Agile and CodeBot:

www.parallelagile.com

Follow us on:

LinkedIn

Urvashi Prakash

Manager, Marketing & Communications

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

Hello CodeBot – a simple, secure, rich media, low code application

Matt Stephens and Doug Rosenberg

Parallel Agile, Inc.

www.parallelagile.com

Everyone’s familiar with introductory “Hello World” programs as a way to help you learn a new programming language. CodeBot™ generates and deploys web applications from UML models with virtually no programming (literally speaking, the model is the code).  So what does “Hello World” look like when the code is a UML model?

Hello CodeBot is simple. There are only 3 webpages and 2 domain classes.  But it illustrates many of the things you need to know to get started generating your own web apps.

Hello CodeBot is secure. It uses JSON web tokens (JWT) to provide secure access.  Register and Login methods are automatically generated in the API and used by the generated React JS pages.

Hello CodeBot is rich media.  It plays videos, uses image components and CSS stylesheets.

Hello Codebot is designed to be a starter model for your own web apps.  You can use our pre-built Registration and Login pages, then build out your own web application by replacing our Home page.  Figure 1 shows the application’s 3 pages; you can Register, Login and Play Videos (in this case, tutorials from our YouTube Channel). 

Figure 1 - Hello CodeBot generates Register, Login and Home pages from wireframes

Hello CodeBot is free to download.  Each of these pages was 100% code generated from wireframes within the (free to download) UML model.  You read that right, virtually no code was written manually to generate this web application.  The single solitary piece of code initializes the video list with data and is embedded within the UML model.  You can download the UML model and the MERN Stack web app in a zipfile, including database (Mongo), API (Node), API documentation (Swagger) and React JS pages, from our online process guide at: https://parallelagile.github.io/CodeBot/codegen-process-guide/hello-codebot-project 

Project Structure

Figure 2 shows the Enterprise Architect project browser window displaying the high level package structure for the project.  There are 3 main packages – one for the Domain Model, one for the Use Cases, and one for the User Experience (UX). 

CodeBot generates a database and an API from the Domain Model, and generates the React JS web application from the UX package.  More specifically the React pages are generated from wireframes, and the navigation between pages is generated from the State Machine within the Navigation package.

Figure 2 - There are 3 top level packages, with sub-packages in the UX folder

The UX package also contains a nested package called Assets.  This package contains image assets as well as Cascading Style Sheets which CodeBot applies to the generated pages to produce nicely styled and formatted web pages. 

CodeBot doesn’t directly generate anything from the Use Case package, but it’s a good idea to include them in your model, especially if you plan on generating scenario test scripts later.

Navigation State Machine

CodeBot uses a state machine to determine the sequencing logic for how pages are displayed.  Each state on the state machine matches the name of a wireframe.  Since Hello CodeBot has three pages, our state machine has three states (see Figure 3).

Figure 3 - It's easiest if you match your state names and wireframe names

When you start Hello CodeBot it takes you to the Login page.  If you’re a new user, click the Register button to go to the Register page.  Once you’ve registered successfully you’re automatically directed to Login.  Once you’ve logged in, you’re directed to the Home page, where you can play videos.

When you build out your own web applications, you’ll add additional wireframes and additional states and transitions on the state machine to make your application as complex as you like.

Registration

The wireframe for the Registration page is shown in Figure 4.  The diagram type is Webpage Wireframe, available from Enterprise Architect’s Wireframing toolbox.  There are 4 “client areas” on the diagram – one to contain the entire webpage, with nested client areas for entering username and password, one for the image, and one for navigating to the Login page. 

Figure 4 - Register is a "webpage wireframe" with three nested client areas

Each nested client area can be individually styled by setting UML Tagged values on the client area.  Figure 5 shows that the blue client area uses the “primary” variant.

Figure 5 - Use tagged values to specify React/Bootstrap styling info

The wireframes can be linked to the domain model by dragging the appropriate domain class onto the wireframe diagram and connecting it to the client area using a UML Dependency arrow.  CodeBot matches the text field names on the wireframe with attribute names on the domain class.   In the case of text fields, we can use a “placeholder” tag to specify the text that appears on the generated React page (Figure 6).

Figure 6 - CodeBot matches field names to class attributes

Adding the image to the wireframe is accomplished by first importing the image into the EA model via drag-and-drop onto the diagram, moving the imported image into the Assets folder in the EA project browser, and then dragging the image asset onto the client area (see Figure 7). Image assets get exported in the XML file that CodeBot uses for input so the images show up on the generated React pages.

Figure 7 - Just drag the image asset onto the client area

Buttons on wireframes can have Actions assigned to them.  Figure 8 shows that we’ve assigned an API call to register (on the User class) by adding a tagged value.

Figure 8 - Buttons can make API calls by using the action tag

JWT Authentication

CodeBot generates secure, server-side login for login and register for the Identity class that’s specified, if JWT Authentication is selected.  So the register API endpoint is produced automatically and thus the “action register” tag has something to link to.  Auto-generated REST endpoints for register and login are shown in Figure 9.

Figure 9 - CodeBot automatically generates REST endpoints for register and login for the identity class

The identity class is currently specified in the CodeBot web console’s Project Details window when the Uses JWT Authentication checkbox is selected.  CodeBot generates login and register endpoints for the identity class.

Figure 10 - CodeBot simplifies the process of developing with JWT

Automatic Deployment for Rapid Iteration Testing

Once your project setup is complete, export an XMI file from your UML model containing the packages you want to generate, and run CodeBot.  You’ll be prompted to download a zipfile containing your web application, and if you’ve checked the Hosted box, CodeBot will automatically build your React JS web app and host it in the cloud, as shown in Figure 11.

Figure 11 - CodeBot does DevOps.  Your application is immediately deployed for fast-iteration testing.

When your React build is ready, just click the Visit Website button and your application is live and available for immediate testing.  The generated Register page is shown in Figure 12.

Figure 12 - Your fully styled, database-linked React web app is ready.

App in a Zipfile

If you decide to host your application yourself, you’ll use the contents of the downloaded zipfile.  Hello CodeBot is a complete MERN stack application that includes Mongo DB, Express JS, React JS and Node.JS, along with Swagger API documentation, and some client-side API interface code (Figure 13).

Figure 13 - Here's the Hello CodeBot MERN Stack App in a zipfile.

Login

The Login wireframe shown in Figure 14 follows a very similar pattern to the Register wireframe.  To recap, it’s a webpage wireframe with 3 nested client areas inside the main client area.   The top client area contains the banner image asset, the middle one uses the “primary” variant and displays in blue.  This panel links to the User class from the domain model, and matches the names on the text fields to the names of the domain attributes (username and password).  The Login button has an action to call the User login API endpoint.

Figure 14 - the Login wireframe is similar to the Register wireframe

CodeBot turns this wireframe into executable React JS in a big hurry.   Much faster than anyone could code it by hand – giving a whole new meaning to the term “project velocity”

Figure 15 - CodeBot makes it very fast to develop MERN stack applications

Home Page

Hello CodeBot’s Home page, on the other hand, shows off some considerably more advanced capability.  The Home page lets you play tutorial videos from the Parallel Agile YouTube channel and introduces a couple of more React JS components, specifically a media player and a combo box/dropdown list.  These components can simply be dragged from EA’s toolbox onto the wireframe, as shown in Figure 16.

Figure 16 - CodeBot's ability to bind components together and manage UI state yields surprising results

The real magic, though, comes in when you connect the components using Dependency arrows.  The combo box is dependent on the Video class and the dependency is called “name”.  This causes a query to be run on the Video collection and the names of the videos displayed in the dropdown list.  All of that without a line of code.  Next, the media player is dependent on the value selected on the dropdown list so the video plays on the generated page.  Again, no coding required.

Figure 17 - CodeBot uses Redux state management to produce sophisticated UIs

There’s only one small piece of code required to make Hello CodeBot work, and that’s to initialize the Video collection with the names and URLs of a couple of videos.  As shown in Figure 18, the code (for the moment at least) has been attached to the on register method on the User class, so the database will get initialized when a new user registers.

Figure 18 - We need a small snip of code to pre-load the database with videos

Fortunately, EA has a built-in code editor that makes it easy to attach code snippets to the UML model.  CodeBot merges these snippets in with the auto-generated code so that it is invoked at the proper time.  This code snip creates a JSON structure called data which holds a couple of name/URL pairs, and then calls the create method on the VideoDao class, which has been generated by CodeBot.

Learn More

You can get more detail on the parallelagile.com website, and we’ve added a section on Hello CodeBot to our online process guide at

https://parallelagile.github.io/CodeBot/codegen-process-guide/hello-codebot-project

To sum up, Hello CodeBot is a simple, secure, rich media MERN stack application that’s designed to help you get started doing development with CodeBot.  We think you’ll find developing with CodeBot to be an order of magnitude faster than writing code by hand.

Please contact us at This email address is being protected from spambots. You need JavaScript enabled to view it. if we can answer any questions for you.

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.

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/

The first video of our CodeBot 201 tutorial series walks you through defining a domain model for a Fantasy Football app, and using CodeBot to instantly transform the domain model into a complete MongoDB database and REST API:

How easy is it to generate a working database and API from an EA domain model?  Really, really easy...

This video will show you how in less than 3 minutes…which is about how long it takes for you to try it yourself.  In our example, your app can show video of the players scoring touchdowns in near real-time 

In this video we’ll follow the evolution of the TEAM object from a noun on a short problem domain description,

Team is an object in the problem domain

 to a class on a domain model diagram,

A Team has an Owner and a Roster and a Schedule

to a Mongo DB collection with a NodeJS REST API (documented in Swagger),

Use the API to Create Teams, Read Teams, Update Teams…

and a client-side layer that makes accessing the API nice and straightforward.

 You don’t need to call the API directly because CodeBot generates client-side code including usage samples

CodeBot is a complex product that does an incredible amount of work to simplify your life as a developer. Give it a try today!

How to create a full-stack React Bootstrap UI in under 10 minutes

A tutorial and reference on designing a complete web application and generating it with CodeBot UX

by Matt Stephens, Parallel Agile

This article was originally published here: https://medium.com/parallel-agile-blog/create-a-full-stack-react-bootstrap-ui-in-under-10-minutes-d0eec3077618

CodeBot from Parallel Agile is a full-stack application generator, which can also host your generated application in the cloud. Give CodeBot a domain model and UI wireframes, and it’ll create:

• a React web UI
• a MongoDB database
• a Node/Express.js REST API, optionally secured using JWT
• API client libraries — currently Java and JavaScript, with other languages set to be released soon, including C#, Swift, TypeScript
• JSON Schema
• Swagger/OpenAPI docs

We have more targets, platforms, architectures and languages on the way, but that’s plenty to get started with!

To whet your appetite, here’s a quick CodeBot video that shows a project being turned into a generated UI:

Getting Started

To get started designing your new application, you’ll need:

• a copy of Enterprise Architect (EA)  to create the domain model and wireframes
• a CodeBot account from Parallel Agile

At the time of writing, the generated React UI isn’t in full release, but it’s available under Early Access for customers with a CodeBot license (to gain access, please email us)

There’s also a handy series of step-by-step CodeBot 101 videos that show how to get everything installed and set up — so I won’t repeat those details here:

• Creating and Activating your Account
• Installing the Parallel Agile Add In for Enterprise Architect 2
• Taking CodeBot for a Spin

VSRADS Example

In this article I’ll walk through the a much-simplified version of the “VSRADS” model shown in the above example video.

VSRADS stands for “Very Short Range Air Defence System” — it’s basically a mosquito zapper. It listens for the high-pitched whine of a mosquito flying by, calculates its position and trajectory, and zaps it with a low-frequency laser.

Our example project is a state machine simulator… given a series of states, a web page is generated to represent each one; and the state machine itself is turned into the navigation “user flow” between pages — i.e. the routes.

So let’s get started!

Step 1: Create a project with 3 top-level packages

Create a new, blank project in EA, and give it the following 3 packages (via “Add View” in the right-click menu):

This will become a familiar pattern… the “three amigos” for defining a new full-stack project

When the model is generated later, the elements in each of these packages will contribute to the generated application, as follows:

• Each wireframe is turned into a React web page
• The navigation state machine is turned into a set of routes
• Each domain class (created in the Domain Model package) is turned into a MongoDB collection and REST API create/read/update/delete endpoint

Step 2: Draw the domain model

Under “Domain Model”, create a class diagram and populate it with some domain classes.

The complete VSRADS domain model looks like this:

For this example you could just create a subset — just be sure to include Simulation Run, as we’ll be linking it to the UI and database.

Step 3: Design the UI Navigation

The idea is that you design individual screens as wireframes, and link them together via a “user flow” or navigation diagram; in this case we’ll draw the user flow as a state machine:

• Each state represents a screen or page
• Each transition (the arrows linking the states together) represents a navigation route

Navigation routes are triggered by things like clicking a link, or submitting a form — “create” or “update” actions.

To introduce the idea, here’s a “hello world” kind of example:

Each generated page will be given its own URI (/login, /view_products etc) so can be individually bookmarked. However, the “Initial” pseudo-state is used to determine which page is displayed by default— the “navigation root” or home page.

Back to VSRADS though… this is a more complex state machine:

Each transition arrow has been given a trigger, which is shown as a label in the diagram. To add a trigger, double-click on the transition:

In EA, you don’t need to select the trigger type etc, you can just enter a name, to keep it simple.

The name needs to match up with the component name in the wireframe, e.g. a button called “Target Identified” — you’ll see some examples of this in the next section.

Usually, the trigger name is also prefixed with an event type, such as on click: or on create: . However, “on click” is the default, so can be omitted.

It’s also worth noting, if the button name is the same as the target page, then CodeBot will figure it out, so you then don’t even need to give the transition a name.

The following event prefixes are supported:

• on click— e.g. “on click: Login”
• on create — e.g. “on create: Target”
• on update — e.g. “on update: Target”

The events all take place in the “source page”, i.e. the page that the transition arrow points from. The trigger will, as you’d expect, result in the app navigating to the “target page”.

The create and update events are triggered when a form is submitted in the “source page”.

Now that you have the overall website or application designed, it’s a good time to create a wireframe for each one.

Step 4: Design the wireframes

EA has a UI wireframe designer built-in. Because the wireframes are fully integrated into the UML model, you can link together wireframe elements, classes, states and other elements… so everything fits together in the generated project.

The VSRADS model has 8 wireframes in total. For this article we’ll focus on two of them, Set Up Simulation (the start page), and Listening for Mosquitoes.

Creating a Wireframe

Right-click on the Wireframes package and choose New Diagram:

In the new wireframe, you need to create a top-level frame which serves as the page-size boundary. This may seem less relevant for websites, but will become important when CodeBot also generates other platforms such as mobile apps. (New feature coming soon!!)

Always add a “Client Area” to represent the page boundary, and fit all the wireframe components inside it

Next, add some components to the page!

Currently with the Early Access release, CodeBot recognises a subset of all the available components. So for now, be sure to only add from the Controls and Website Controls tool palettes.

Position and size the components to match your page design. CodeBot will translate this into a responsive website layout; e.g. it’ll detect grids of label/textfield pairs, alignment of individual labels or buttons, etc.

You can also supply hints to influence how the page is generated. In EA, this is done via tagged values — you can find these on the Tags tab in the Properties panel:

In the above screenshot, the Set up Simulation title has been given a tag called css class, with the value h1 (“Heading 1”). To add more than one CSS class, separate them with spaces.

The generated website uses the popular React-Bootstrap project, meaning you can specify any “Bootstrap-standard” CSS classes here.

Another useful tag is variant. This conforms to the Bootstrap 4 colour variants:

For example, the Run Simulation button is given the “primary” variant (the exact case doesn’t matter) via a tagged value, so will be rendered in the page with a solid-blue background:

In this way, it’s possible to adhere to Bootstrap’s design language—the “primary” variant represents the main or default action, etc.

For future platforms even if they don’t use Bootstrap, CodeBot will adapt the same “Bootstrappy” tagged values to the target platform, so you’ll only have to draw the wireframes once in order to get a generated website, mobile app, desktop app etc.

Just to illustrate another page in the same UX design, here’s the Listening for Mosquitoes wireframe:

The Image component can display any image type normally supported in web browsers (jpeg, gif, png). Just include a url tag with the complete URL where the image can be loaded from.

Step 5: Define actions on UI elements

In the previous screenshot, the Run Simulation button also has a tag called action, with the value create.

As long as the button resides in a container panel with form components (text fields etc), when the button is clicked, the form will be submitted to the generated REST API. What happens next depends on the value of the action tag:

• create (create a new record in the database)
• update (update the current record)

The form elements do need to be linked to a particular domain class, though; so let’s do that next.

Step 6: Link UI elements to the domain model

There are two ways to associate UI elements with a particular domain class:

1. Use the domain tag
2. Draw a dependency relationship from the UI element to the domain class

Which one you use is entirely up to you; the effect on the generated code is exactly the same. It’s more of a stylistic choice, as some people appreciate the visual aspect of seeing a link on the diagram, while others prefer the detail to be tucked away.

Domain tag

Click on the form component you’d like to link, and add a tag as follows:

The domain tagged value uses the form:

Class Name.attribute name

e.g. Simulation Run (the domain class), a dot, then name (the attribute name).

As a time saver, you can also just add the domain class name to the parent container panel:

The “child” form components are then auto-linked to the domain attributes, by matching each component name with an attribute name.

Once this linking-up is done, then when the generated form is submitted, it’ll automatically call the correct REST API endpoint for that domain class.

Dependency arrow

As an alternative to the domain tag, simply drag the relevant domain class from the package explorer onto the wireframe. Then draw a dependency arrow from the container panel to the class:

You can also link the individual text fields to the class, if preferred.

To emphasize again, this has exactly the same effect as using the domain class; which you use is just a personal preference.

Step 7: Generate the application

If you have the CodeBot add-in installed in EA, right-click on the root (“Model”) package in the package browser. Then choose:

Specialize > Parallel Agile > Generate Project

If you can’t run the add-in for any reason (e.g. you’re on a Mac using a Windows VM), another way to run CodeBot is as follows:

1. Make sure you’ve selected the root (“Model”) package, then from EA’s ribbon menu, choose:
   Publish > Export-XML -> Export XML for Current Package
2. Login into the CodeBot Web Console at parallelagile.net, and choose Upload XMI:

CodeBot will detect that the model contains wireframes, and automatically generate a Bootstrap-React project. You can find it in the downloaded zipfile, in the UX/React folder.

Step 8: Run the React app!

You can optionally elect the generated application to be hosted — just make sure the “Publish to our cloud service” checkbox in the above screenshot is ticked.

In this case, CodeBot will automatically build the React app, and then publish the full website, REST API and database to our secure cloud service.

To access the hosted website, click the blue Visit Website button (visible in the above screenshot).

The Set up Simulation page will load in a separate tab:

When you enter some form details and click Run Simulation, the following series of events take place:

1. Due to the action tag and the linked domain class, the React app submits the form to the REST API
2. The REST API validates the form data against the generated JSON Schema (based on the domain class and attributes), then creates the new record in the MongoDB database
3. Due to the on create: Run Simulation trigger on the navigation state machine, the React app will detect that a “create” just happened linked to the Run Simulation button. So (as the trigger is on a transition), the browser navigates to the next page, Listening for Mosquitoes:

In closing…

CodeBot UX radically shortens the iterative feedback loop when developing new software. When domain modeling, you can now quickly create a working prototype, use the prototype to elicit new or changed requirements, feed the updates back into the model, rinse and repeat…

… often several times in the same workshop session, with the customer or domain expert right there in the room (or on the same Zoom call).

CodeBot UX is available now for Early Access customers. To request access, please email us at: This email address is being protected from spambots. You need JavaScript enabled to view it. — we’ll welcome your feedback!

FOR IMMEDIATE RELEASE:  November 23, 2020

Urvashi Prakash Parallel Agile

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

No Code App Generator, CodeBot UX is available to early access users 

November, 2020, Los Angeles, CA: Parallel Agile’s full-stack application generator, CodeBot UX, is now available to early access users. With CodeBot you can already generate full-stack applications from a domain model, while its newly engineered UX components allow users a smoother and far more nuanced and centralized approach towards app generation.

Codebot UX supports Enterprise Architect UML models including class diagrams, state machines and wireframes. From these, CodeBot generates a database schema, API documentation, server-side code, client-side code including domain classes, CRUD functions and usage examples. While supporting both SQL and non-SQL databases, CodeBot also generates all three layers of the MVC framework.

CodeBot can also automatically host your generated web application in the cloud, at the click of a button.

According to Matt Stephens, Director of Development for Parallel Agile: "Our ability to link screens to an auto-generated database access API and to drive UI navigation from state machines effectively makes MBSE models executable, fulfilling a vision originally set out in 2002 when Steve Mellor wrote Executable UML".

With this early access release, the following React UI components are ready for users to try out: Panel, Button, Label, Text field, Table and Video Player.

CodeBot UX initially targets React, but will soon build equivalent user interfaces for React Native, Vue.js and Angular.  Video illustrating CodeBot UX (MBSE: CodeBot for Software Intensive Systems) is available on YouTube.

Doug Rosenberg, Parallel Agile CTO, states: "CodeBot UX’s ability to generate working screens from wireframes to full stack code generation and automatically host the working application, introduces a new model-driven development paradigm where CodeBot effectively serves as a UML compiler, producing running applications directly from UML or SysML models."

 More about the company:

Parallel Agile addresses the underlying technical issues with integrating work done by large teams in addition to the management issues – specifically enabling large teams of developers to collaborate efficiently and reduce schedule time on projects.   The company offers training in UML, SysML, MBSE, and Agile development in addition to its full-stack application generator, CodeBot.

Early Access Program

Parallel Agile’s early access program allows CodeBot licensees to gain access to a growing range of new features and capabilities.  New CodeBot customers can request early access when they purchase their license.

CodeBot UX is available immediately for early access users.

For more information on CodeBot, please visit www.parallelagile.com or email us at: This email address is being protected from spambots. You need JavaScript enabled to view it.

###

Anatomy of an Executable Architecture

A few months ago, we released the Parallel Agile Add-in for Enterprise Architect.  This add-in gives Enterprise Architect users a unique opportunity to save substantial amounts of time in building the database infrastructure for your project, because you can now generate it automatically from a domain model (class diagram).   What gets generated includes database access functions, an API to access the database, API documentation of, and some client side code that shows you how to call the API - what we're calling an Executable Architecture.  Our first target platform is MongoDB and Node.JS (aka MEAN Stack), but we're currently working on additional platforms including MySQL and Firebase, so stay tuned.  

Meanwhile, let's say you’re starting a new MEAN Stack project and you’re going to need a MongoDB database, Node API to access it, API documentation and some client-side code, so you can start prototyping. How fast can your engineering team get it done? How about an hour?

With Parallel Agile CodeBot you can spend an hour or so with the project stakeholder, BA and a bunch of other people, creating a domain model. Then simply right-click in the model and click Generate Project. Seconds later, you have a complete, working API, client library, Swagger API docs, and it’s already hosted as a live prototype API for your team to try out.

Here’s an example of what CodeBot will create based on your domain model, for a Node/Mongo architecture:

Let’s say you’re creating a single database collection called PaymentMethods. Typically you would need to create at least all of the following, just to be in a position to start prototyping the UI and so forth.

First, you would need to build the basic set of database access functions for each database collection (or table) that you’re going to need.  These are the CRUD (Create, Read, Update, Delete functions).  In a NoSQL database like Mongo these are implemented with GET / PUT / POST methods:

Next, you would need to define a REST API to allow your client-side code to call the database access functions.   In a MEAN Stack application these are bundled together in an Express JS file as shown above.  Note that each of your database access functions has several layers of exception handling that need to be built.

After creating the API, you’ll need to create API documentation so that your client-side developers know how to call it:

Once your API is in place and documented, you’ll want to write some client side code that encapsulates the database access methods.  You might write a JavaScript client that handles callbacks:

Or you might write a Java client:

It’ll make sense for your Java client to have an entity class (often referred to as a Plain Old Java Object or POJO) available for each domain object:

All of this code is infrastructure for your project, and tends to be of a somewhat boring and repetitive nature - you always need to write the database access functions, they need to be written for each collection, and the code is all very similar to the code you wrote yesterday.  Writing it by hand is slow, tedious, and error-prone.

Yet in thousands of development organizations around the globe, developers are writing the database access layer of their applications manually.  We asked ourselves if there was a better way and decided the answer was yes.  And then we built it.  If you’d like to try it, download the free Parallel Agile Add-In for Enterprise Architect.

One of our biggest challenges at Parallel Agile is explaining how two apparently unrelated aspects of our business are actually very closely related. Specifically, how our domain driven database and API generator (aka Parallel Agile CodeBot) enables the Parallel Agile Process, which allows large teams of developers to collaborate more efficiently and breaks the “two pizza rule” on team size.

To understand how the CodeBot enables large-scale parallel development we need to go back to Brooks’ Law, the widely believed postulate that you can’t accelerate a software project by throwing more developers at it. Fred Brooks identified some key reasons why this has been (for the most part) a truism for the last 50 years. Two of the most important reasons are:

1) Communication. When you add new developers to a software project, somebody has to explain to them how the existing code is structured, and the new developers each have to experience a learning curve before they can be productive. Generally it’s the experienced developers (who are already productive) that have to take time away from their own work to train the new folks. So adding developers can actually slow you down.

2) Integration. If you have a large team of developers working (relatively) independently, it’s going to be difficult to make all of the pieces plug together and play well as an integrated whole piece of software.

It’s important to remember that Fred Brooks developed his postulate while managing a large mainframe operating project (OS/360), which was introduced in 1964. That’s a long time ago. There were no UML modeling tools, no REST APIs, no NoSQL databases. So it’s not unreasonable to ask the question 55 years later whether any modern technical innovations might mitigate some of the underlying factors that have made Brooks’ Law seem to be inviolable for such a long time. That answer turns out to be Yes – making a domain model executable mitigates both the communication and integration problems and enables large-team development to work a lot better.

While I’ve never been a big fan of Brooks’ Law, when we started the research that led to Parallel Agile, there was no particular intent of trying to disprove it.  It started back in 2014  when Barry Boehm and Supannika Mobasser invited me to give a guest lecture on ICONIX Process in their  CS577 Software Engineering class at the University of Southern California.   Around this time I had developed an interest in geofencing, and had in mind to develop a geofenced mobile app that delivered coupons to your phone when you got physically close to the business that was offering the coupons. 

When I accepted the invitation to guest lecture I decided to ask if they would like me to grade a couple of UML homework assignments in addition to guest lecturing. They agreed so I split my Location Based Advertising project into 47 low level use cases and assigned one use case per student as homework (writing prototype code for the use case was optional extra credit).

To make a long story short, we were all surprised that the 47 independently developed use cases actually integrated into a cohesive system. I can clearly recall sitting in Barry’s office saying “you know, that’s not supposed to be possible” and Barry agreeing “yes, I know”. When we started investigating how the successful integration happened it seemed that we had made some fortunate choices of using a NoSQL database (Cassandra) and a REST API (Node JS), and giving all the students a code template that implemented the database access functions (aka CRUD functions) for a Cassandra collection that they could clone for their part of the database.

It turned out that having the domain model in place made communication across the large (47 student) team go pretty well, and having all of the database access functions available through a REST API allowed different pieces of the system (iOS app, Android app, web app) to integrate together with ease.  And when we studied the effort numbers it turned out that each of the 47 use cases took about 4 days to develop – a day on requirements analysis, a day on design, and two days of coding.

One of the student from that project joined the PhD program and implemented a code generator that turned domain models into Mongo DB and Node JS, and after using this successfully on several other projects we decided to start Parallel Agile.

So, to sum it up…having a visual model of the problem domain makes it easy for everybody to get on the same page about what’s being built.  Generating your database from this domain model, and having a uniform set of functions to Create, Read, Update and Delete items in the database makes it easy for everybody’s code to integrate together.  And that’s how a code generator enables large-scale parallel development.

We've just released a major upgrade to the Parallel Agile CodeBot.  As you might already know, CodeBot generates database schema, database access functions, and a REST API to access the database from a UML domain model.  But you might not know specifically how the class diagram is interpreted during code generation.

Here’s a simple domain model for a video editor that allows you to annotate an image for machine learning.

This example only uses Aggregation, but several other relationships are possible.  The table below explains how CodeBot interprets what’s on the diagram.

You should find Composition useful for creating nested JSON structures; something which particularly lends itself to MongoDB collections, where the recommended “best practice” is that child elements with a strong ownership relationship are nested within each parent element, rather than being put into separate collections.

All other relationship types – Dependency, Realization, Responsibility etc (ad infinitum) – are treated as “non-semantic” by CodeBot, so can safely be used to define more abstract concepts that document the model rather than drive it.

How Multiplicity affects what’s generated

If you define multiplicity in the relationships (e.g. 0..1, 1..*), CodeBot uses these wherever possible for validation checks. If you don’t define the multiplicity, it defaults to either “0..1” or “1”, depending on the context.

Multiplicity also affects whether fields are generated as a single item or a list of items. Additionally, in languages that support optional types (e.g. Option in Scala, or Optional in Java), a multiplicity of 0..1 will be generated as an optional type.

Let’s quickly illustrate that with some brief code examples:

Try CodeBot for free at http://www.parallelagile.com/codebot.html