B4J Question BANano, B4X, VueJS, Vuetify, Web Sockets, Rest, PWA

Dave G

Active Member
Licensed User
I've spent the past 6 months looking into browser-based app development vs platform specific clients such as Android, iOS, Windows, etc. I've looked at MS Blazor, Dapper, VueJS, B4X, and many others. I re-implemented an application I created over 5 years ago that used Xamarin C# with VueJS, as a means of learning it. Wow, what a journey. Then a couple of weeks ago I began an effort to learn and utilize B4X BANano with and without BVAD (BANano, Vuetify, Abstract Designer). I was able to do the 'without BVAD' proof of concept in a week (took two months with VueJS). I'm in the midst of the 'with BVAD' version as I type. Since BANano is centered around B4J and Abstract Designer (based on B4X Visual Designer) it was easy to transition. So, I'll share some of what I've learned.

VueJS is very popular, large community, many add-ons. It abstracts HTML/CSS, but is still HTML centric using what is referred to as a Template.

Example of one Label and Input in a VueJS Template:
    <!-- weight -->
    <b><label class=aLabel ref="lblWeight" :for="inputWeight" @click="checkData">{{lblWeight}} </label></b>
    <input type="text" ref="inputWeight" v-model="inputWeight"
     @keypress="validateNumber" :maxlength="5" placeholder=9(5) style="width: 50px;"
     @blur="onBlur('Weight', 'inputWeight')"/>
    <br>

The events of interest are buried in the HTML (see above) e.g. @keypress, @blur and invoke Methods implements in JavaScript (validateNumber, onBlur). Some of what you see, such as v-model and v-for, are incorporated into BANano BVAD since it incorporates Vue/Vuetify. Anyway, I got a working prototype, but don't really like the development environment that is HTML-centric. Which brings me to BANano.

BANano is B4X-centric in that you code in B4J and create a layout using Abstract Designer. When you hit F5 it transpiles B4X code into Java as normally is done and then transpiles the Java, B4XLIBS and Layouts into JavaScript, then writes the results in a directory under a web server (I use Largon) and you can then point a browser at the web server directory and your B4X app is loaded into the browser and runs without a server! In addition, you can create a PWA (Progressive Web App) that can be distributed and runs without a web server!

Being B4X-centric, you can right-click on a UI element in the Designer and have it create a variable for the UI widget and create events of interest e.g. blur (lost focus). VueJS is much more abstract as you have to create a Reactive variable and reference it within the HTML (e.g. inputWeight) using v-model and ref as well as @eventName to call methods (see code above). VueJS is based on SFA (single file application) so everything is in a .vue text file, including the form definition. I really prefer the Designer/Layout being separate from the B4X code. MS is similar in that your UI is in a separate text file e.g. .axml or .xaml.

Anyway, if there's interest I'll post more regarding my VueJS and BAnano app. I used common event handler for all of the TextBox on the form that enforces edit such as Numeric, Range, Required, Min characters, Maximum characters, etc.

Example of input field edit for BANano app:
    AddTextInfo("txtWeight", "Weight", "lblWeight", 5, "INT:REQ:RANGE1000", "6000") ' 6000 for testing
    AddTextInfo("txtSlope", "Slope", "lblSlope", 2, "INT:RANGE00-45", "0")
    AddTextInfo("txtWheels", "Wheels", "lblWheels", 2, "INT:RANGE04-18", "4") ' 4-18 didn't work
    AddTextInfo("txtDamaged", "Damaged", "lblDamaged", 2, "INT:RANGE00-18", "0") ' 0-18 didn't work
    AddTextInfo("cmbStuck", "Stuck", "lblStuck", 0, "PICK", "0")
    AddTextInfo("cmbConditions", "Conditions", "lblConditions", 0, "PICK", "-1")
    AddTextInfo("txtCapacity", "Capacity", "lblCapacity", 5, "INT:MIN4:NOERR:RANGE1000", "9000") ' 9000 for testing

This Map is used whenever the user navigates away from an input field (blur)

Example of field edit check:
Private Sub CheckFieldEdits (fieldName As String, testOnly As Boolean) As String
    Dim fldInfo As textBoxInfo
    fldInfo = fieldObjectsMap.Get(fieldName.ToLowerCase)
...

CheckFieldEdits loops through the edits and write to the input field Label any failed edits. Notice the edits that failed using the AddTextInfo noted above.

winchcalcBANanoSmall.jpg


Anyone interested interested in starting a dialogue regarding B4X and BANano?
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
A clear analysis of the difference of (what I call) 'native' BANano usage and one with an existing frameworks like Vue. When we wrote BANano, one of the main goals was getting the writing of a 'native' BANano WebApp as close as possible to how things are done in the other B4X platforms. We do like Erels way of thinking how things should be done (B4X-centric is a fantastic term to describe it! ;) ) His chosen path with all the B4X tools had proven to be successful in many projects we had done before and is easy to learn, so why not follow it?

To archive this goal, this meant indeed integration of the Abstract Designer to make your layouts and using familiar B4J code (or as close as possible) to write events and business logic, similar to the way things are done on the other platforms. Because developing in a modular way is easy to do in B4X, it makes it also pretty forward to re-use code. A UI Widget in BANano is most of the time just a .bas file and some CSS, sometimes accompanied with some JavaScript. But that last one is in many cases not even needed, as this 'logic' can be written in plain B4J code. Same goes for routing, theming or many other things some JavaScript frameworks offer.

BANano is B4J's answer to JavaScript frameworks like Angular, React, Vue, ... etc!

At some point we even integrated the {{moustache}} framework which allows also a kind of Vue-like template system, but in hindsight that was not what B4X users were looking for. This was before we had the Abstract Designer support written which is so much easier to use, especially when one is used to the other B4X tools.

Unlike other programming tools, we wanted to give anyone the freedom to use any other UI framework like Materialize CSS, Bootstrap, Bulma, Pure.css, Tailwind CSS, etc. We integrated an (extended) version of Skeleton as a getting started UI framework because of its ultra-light nature, but I've seen others write wrappers for Bulma, Tabler.io, Kendo UI, ... etc and Kiffy did even write a library to experiment with NW.js to create desktop applications using BANano.

Internally, we had some discussions back when we started writing BANano if we would write a wrapper for Bootstrap as they also have many components. But we decided quantity was not always the right path. For almost every Widget in Bootstrap, a lightweight vanilla alternative can be found. As speed was also very high on our wanted list (PWAs close to native app speed was our goal), we decided not to do it. Now, all our PWAs start with the BANanoSkeleton library, and we write specific components right into the app when a client requests it (we do support the 'Hot code swapping' in B4J, which makes it pretty fast to do so).

I definitely welcome discussing the usage of BANano in B4X. I had great conversations with people like Mindful and Kiffi, as they had the same view on how a WebApp in B4X should be written as we did. Many of these conversations resulted in some powerful features BANano has today (the support of B4Js Sender is one great example).

Alwaysbusy
 
Last edited:
Upvote 0

Dave G

Active Member
Licensed User
A clear analysis of the difference of (what I call) 'native' BANano usage and one with an existing frameworks like Vue. When we wrote BANano, one of the main goals was getting the writing of a 'native' BANano WebApp as close as possible to how things are done in the other B4X platforms. We do like Erels way of thinking how things should be done (B4X-centric is a fantastic term to describe it! ;) ) His chosen path with all the B4X tools had proven to be successful in many projects we had done before and is easy to learn, so why not follow it?

To archive this goal, this meant indeed integration of the Abstract Designer to make your layouts and using familiar B4J code (or as close as possible) to write events and business logic, similar to the way things are done on the other platforms. Because developing in a modular way is easy to do in B4X, it makes it also pretty forward to re-use code. A UI Widget in BANano is most of the time just a .bas file and some CSS, sometimes accompanied with some JavaScript. But that last one is in many cases not even needed, as this 'logic' can be written in plain B4J code. Same goes for routing, theming or many other things some JavaScript frameworks offer.

BANano is B4J's answer to JavaScript frameworks like Angular, React, Vue, ... etc!

At some point we even integrated the {{moustache}} framework which allows also a kind of Vue-like template system, but in hindsight that was not what B4X users were looking for. This was before we had the Abstract Designer support written which is so much easier to use, especially when one is used to the other B4X tools.

Unlike other programming tools, we wanted to give anyone the freedom to use any other UI framework like Materialize CSS, Bootstrap, Bulma, Pure.css, Tailwind CSS, etc. We integrated an (extended) version of Skeleton as a getting started UI framework because of its ultra-light nature, but I've seen others write wrappers for Bulma, Tabler.io, Kendo UI, ... etc and Kiffy did even write a library to experiment with NW.js to create desktop applications using BANano.

Interanlly, we had some discussions back when we started writing BANano if we would write a wrapper for Bootstrap as they also have many components. But we decided quantity was not always the right path. For almost every Widget in Bootstrap, a lightweight vanilla alternative can be found. As speed was also very high on our wanted list (PWAs close to native app speed was our goal), we decided not to do it. Now, all our PWAs start with the BANanoSkeleton library, and we write specific components right into the app when a client requests it (we do support the 'Hot code swapping' in B4J, which makes it pretty fast to do so).

I definitely welcome discussing the usage of BANano in B4X. I had great conversations with people like Mindful and Kiffi, as they had the same view on how a WebApp in B4X should be written as we did. Many of these conversations resulted in some powerful features BANano has today (the support of B4Js Sender is one great example).

Alwaysbusy
Thanks for some great background information. BANanoSkeleton is very fast, which is important because I'm a very iterative programmer often recompiling 10-20 times in an hours. BVAD takes around 30 seconds to 'compile' which isn't as desirable. The "Processing b4xlib: bananovuetifyad3" step takes around 25 seconds. So, I work with the non-BVAD version and then integrate the changes into the BVAD version.

What is the best way for me to convey observations, perceived bugs, suggestions to you?
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
I prefer an open discussion in this 'B4J Questions' forum as it may concern other people too. Just start your question with [BANano] in the subject. If it is a BDAV3 question you can use [BANanoVuetifyAD3] I believe. I do only answer 'native' BANano questions as we do not use BDAV3.

If your question is of a more sensitive nature, or something new you would like to see in BANano, you can of course also PM me.

Alwaysbusy
 
Upvote 0

Dave G

Active Member
Licensed User
I prefer an open discussion in this 'B4J Questions' forum as it may concern other people too. Just start your question with [BANano] in the subject. If it is a BDAV3 question you can use [BANanoVuetifyAD3] I believe. I do only answer 'native' BANano questions as we do not use BDAV3.

If your question is of a more sensitive nature, or something new you would like to see in BANano, you can of course also PM me.

Alwaysbusy
Can I PM on the Forum? Didn't see an option for that. Thanks.
 
Upvote 0

angel_

Well-Known Member
Licensed User
Longtime User
BVAD takes around 30 seconds to 'compile' which isn't as desirable. The "Processing b4xlib: bananovuetifyad3" step takes around 25 seconds. So, I work with the non-BVAD version and then integrate the changes into the BVAD version.
This is the biggest problem I'm having (I'm just starting) can you upload an example of the method you use?
 
Upvote 0

Dave G

Active Member
Licensed User
When I compile (F5 or run) to Release I get this in a popup window:

B4J Version: 9.10
Parsing code. (3.27s)
Java Version: 11
Building folders structure. (1.03s)
Compiling code. (1.66s)
Compiling layouts code. (0.00s)
Organizing libraries. (0.00s)
Compiling generated Java code. (0.17s)
Building jar file. (1.99s)
Jar file created: C:\B4J\workspace\helloBVAD\B4J\Objects\helloBVAD.jar
Running application. (0.01s)
Completed successfully.

Then this in the log:
Reading B4J INI in C:\Users\dxgafl\AppData\Roaming\Anywhere Software\B4J to find Additional Libraries folder...
Found Additional Libraries folder: C:\B4J\libraries
Starting to transpile...
Building C:\laragon\www\M4testBVAD\scripts\app1657304967077.js
Loading layout baselayout...
Loading layout homelayout...
Processing b4xlib: bananovuetifyad3
Adding Layout baselayout used by pgindex
Adding Layout homelayout used by viewhome
...

the 'Processing b4xlib: bananovuetifyad3' step takes around 25 seconds and then goes on to merge CSS and other stuff into JavaScript.

Is that what you're looking for?
 
Upvote 0

angel_

Well-Known Member
Licensed User
Longtime User
The whole process takes me more than 1 minute, it's a lot

B4X:
B4J Version: 9.80
Parsing code.    (7.58s)
    Java Version: 11
Building folders structure.    (1.05s)
Compiling code.    (3.17s)
   
ObfuscatorMap.txt file created in Objects folder.
Compiling layouts code.    (0.01s)
Organizing libraries.    (0.00s)
Compiling generated Java code.    (13.10s)
Building jar file.    (10.29s)
...

Is that what you're looking for?
So, I work with the non-BVAD version and then integrate the changes into the BVAD version.
Can you give an example of how you create a non-BVAD3 and then integrate it into the BVAD3 project?
 
Upvote 0

Dave G

Active Member
Licensed User
The whole process takes me more than 1 minute, it's a lot

B4X:
B4J Version: 9.80
Parsing code.    (7.58s)
    Java Version: 11
Building folders structure.    (1.05s)
Compiling code.    (3.17s)
  
ObfuscatorMap.txt file created in Objects folder.
Compiling layouts code.    (0.01s)
Organizing libraries.    (0.00s)
Compiling generated Java code.    (13.10s)
Building jar file.    (10.29s)
...



Can you give an example of how you create a non-BVAD3 and then integrate it into the BVAD3 project?
Choose BANanoSkeleton when you create a new B4J project. BTW, I'm not creating a BVAD and non-BVAD for an actual production application, just for my learning of BANano in general. Is there any aspect of BVAD that you require vs just using BANanoSkeleton? I've also create a non-BVAD client and server in the same project as that's one of the templates for project creation. So far BANanoSkeleton satisfies all of my requirements and its SK UI views work quite well.
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
just for my learning of BANano in general.
Awesome all the best.

I find that the fact that one is able to feed BANano any kind of framework / no framework at all, is its very strong point. Kudos to Alain. With some understanding of the BANanoObject (at times), nothing is a limit. As an example, these projects, I showcased here, whilst they are framework-less, but just pure CSS + JavaScript, they are a powerful statements about what BANano can do.

Framework-less

These were just created by adding existing CSS + Javascript to BANano.







Games with Phaser


WebGL with ThreeJS


Angular


React


ZUI (Zoomable User Interfaces)


Mobile UI Kit

Recently I started working on SithasoVant, A mobile UI kit with Vue3 which is pretty awesome. Of course there is a long way to Go. Here is the link.


At the moment Vuetify LLC is building their latest offering of Vuetify with Vue3, this will mean a complete re-write of BVAD3, thus also the postponement of the eBook write-up so that this is done once and continuously.

I am forever grateful for BANano because I can always push my learning boundaries of possibilities, the same reason everything is provided here for anyone to use.

Happy BVAD3 coding!

PS: Also the recent BANano eBook that was released also helped me to understand some of the concepts I didnt know or was not aware of, mark stuff that I will also do absolutely different next time I create a library etc etc. So I continue to learn, new things at times and I ask as many many questions as possible to understand.
 
Last edited:
Upvote 0
Top