Low Code Vue WebApps with BANanoVuetifyAD3
Whether you like it or not, one of the things you will find yourself doing as a Software Engineer, is having to write almost the same code over and over again. Let’s take a simple case of a CRUD Web Application.
You create a model, which feeds into your back-end database, then create code to create records in that database, then read them, update them and delete them.
Between these you implement some business rules, run some computations, check data for validity etc. Yes, you can copy and paste similar code from other projects, and or create a universal code module that you can use across your projects. The only thing usually different with CRUD webapps are the models and the business rules that govern them, otherwise underneath, they do the same thing, over and over and over and over again. These things are
C — reate records
R — ead records
U — pdate records
D — elete records
A process exists where one could add some automation to this process, where one could always ensure that some form of baseline is created first before adding the business logic and rules that are specific to that Web Application. This is called Low Code.
What is Low Code?
Low-code is a visual approach to software development that optimizes the entire development process to accelerate delivery. With low-code, you can abstract and automate every step of the application lifecycle to streamline the deployment of a variety of solutions. By breaking down traditional silos of business and IT (promoting continuous collaboration), your organization can develop solutions that meet the needs of your business and hopefully others.
Ok, from the look of things, the app should be developed via a GUI (graphical user interface), usually with drag and drop functionality. Using visual tools to develop apps is usually faster than writing the code itself. The nice thing is that both professional developers and citizen developers can use it.
It is also possible, depending on how these low code tools are developed, for them to produce fully functional apps or systems, or some with additional coding requirement to meet the required business needs.
Out of the box, the created system or apps, works. What you get is re-usable code as one could use pre-configured templates to meet specific needs.
The Vuetify Figma UI Kit
Recently Vuetify LLC released a free Figma tool for Vuetify. One of the nice things about Figma is that one is able to export their designs to Vue, as low code components.
Anyway, to meet my specific needs with BANanoVuetifyAD3, I decided to journey into the Low Code space, Using the same BANanoVuetifyAD3 library that was created, I conceptualized and realized a Low Code tool for my projects. This tool generates B4x code that is fully commented and also detailed enough for me to remember what it does, when I read the code again. I once read that one should write code comments as if they might have dimensia.
Dimensia is an umbrella term for loss of memory and other thinking abilities.
Thus in writing “Incwadi yamaBali” as I affectionately call this tool, I ensured that the comments are advanced so that one can always know what that sub-routine does without doubt.
Incwadi yamaBali
Incwadi yamabali means StoryBook. I used my native language Xhosa to name the tool. Above else, it will be used to translate user stories to source code and working solutions to solve real life problems.
At the heart of the BVAD3 Story Book is the property bag, which enables one to set properties of whatever element they are working with. This could be the app settings, a data model settings, a view, a component or even an entity.
Below is just a presentation of how it looks and works. We have a treeview, a preview area and then a property bag that helps us change app, model, view, element properties.
The tree-view will contain all the items for the project in question. This will be the app details, the models defined and views to use. In the preview area you have a couple of things, these are schema, preview, html, b4x, model, api, jetty API.
The property bag will act as a universal form control so that one is able to change the settings / attributes of their project.
Step 1: Create a data Model
Lets say we want to create a webapp to store our categories of products. By just clicking 1 button icon on the treeview, our empty project template is created and then we can add to it. We then create model for our categories. This will have an auto-increment primary key named “id” and another entity called “name”
Step 2: Model > PHP Class
After creating the model, we are also able to click the “php” button to generate the PHP API code that we can use when defining our REST API, if we want to follow that approach.
Step 3: Model > View
The low code generated by this tool will work with B4x, thus we need to be able to have that code for our processes. What we did was then to click a button, that converted our “data model” to a view. This is like the pre-defined template we spoke earlier about for low code generation.
The view above is named vcategories, based on the categories data model. It will have a container, the container with a single row named contcategoriesR1. Inside that row there will be a column, with a table, a dialog box to enter the category details and another to confirm deletes.
Whilst one can just click 1 button after defining their models to create a CRUD based webapp, for now lets click along.
After the view is created, we can “click” once to convert the schema produced into code. This code is what we will execute to build out www folder.
Step 4: Model + View > B4X code
We then use the model schema and the view schema to produce code that will enable us to create our app. Above the view code has been created to reusable code that will generate an app for us.
We can also adjust our models to suit our needs, and there a variety of options to do this. The example provides a feature where we use the v-data-table to set the model entity properties. The adjustment of the models needs to happen before they are converted into views and later into a working app.
Step 5: Compiling our www folder for publish
When we are satisfied with our schemas and the look of our user interface, we can then compile our app. This is done using a b4x source code builder tool. This just does a pre-compiling and the full extent our our app can only be effected once we open the built web app with B4J.
We click a button to compile the app, the b4x builder works and tells us the result of the compilation.
We then open the generated project using the B4J IDE.
Step 6: Run & Debug our WebApp
At this time, our app is compiled and ready to be tested. We open it in b4j and run it to see if it does what is expected and it, update its settings on the StoryBook or change it via the code itself.
Step 7: Publish WebApp to WebServer
After we have tested the webapp and are happy about its functionality, we can then publish the app to a webserver after linking it to our backend database.
The Low Code of this WebApp
By the time we are publishing this app, we had not written any source code at all, as the purpose of Incwadi yamaBali is to generate the Low Code for us to use out of the box.
We can however tweak our app here and there to suit out business needs and requirements outside the StoryBook took, however also maintaining version control for the two fronts.
This provides possibilities to create and experience the actual MVP in record time for your CRUD based webapps.
Let’s see how we can do this with Incwadi yamaBali in practise.
Happy BANanoVuetifyAD3 Coding!
Update
We have started in earnest to create a Project Management WebApp using Low Code, check it out now on this article.
