A little bit of a background
For as long as I can remember, I have always enjoyed sharing my experiences about B4X projects, code snippets, libraries, inventing things etc in the forum ever-since I joined on July 2, 2013. I had strongly believed that doing so was a gate opener and as such one could get an opportunity to do a project for someone here. And fortunately get paid for it.
There were times when it wasn’t easy and our company was just not doing great, but then we had faith that things will come around. From our ABMaterial explorations, our company got a contract from someone here in the forum. This was South Africa based and an amazing deal. We had a breather.
This is extremely capable, we thought.
So when BANano came into the fore, we started playing around it and tried to understand it and started to explore it a lot more. We tested it with 3D, we tested it with Games development and tested it with React (Deprecated). We did this and that with it. This is extremely capable, we thought. I mean writing code in B4X and getting Javascript as your output is cool, right? Right.
I had been curious about VueJS for a while, a friend of mine in the forum pointed it to me some time ago but then I was a little reluctant. A fear of new things I guess. React was more famous and my stint with React and BANano had hit some walls. I was learning React, developing a library for BANano at the same time, this took time and further understanding what I was trying to achieve. It ended up being a “dololo” experiment. I will learn React, I said to myself, parking BANanoReact. *Dololo is used sarcastically here to mean ‘nothing’.
Nine months after the release of BANano, we pushed BANanoVue, in 2019, which is a collection of everything we had learned about VueJS and then us mixing it with BANano to create web apps. We continued to explore further and later pushed BANanoVueMaterial. Someone from the forum noticed. Some months later, we launch.
Figure 1
What we did
- We used BANano to create our WebApp.
- We used PHP and MSSQL (MicroSoft Sequel Server) for the the back-end database. BANAno has inline PHP.
- We used BANanoVueMaterial as a front end – a wrap of VueMaterial (now Vuetify) for BANano
- We created more than 5 pages for the web application. These are for CRUD and listing and drilling down
- The app is linked to a B4A app (this was done by client)
- We used BANanoPDFMake to generate reports – a wrap of PDFMake for BANano
- We learned some Spanish 😉
What is BANano?
BANano is a B4J library to create websites/webapps with (offline) Progressive Web App support. Unlike its big brother ABMaterial, BANano does not rely on any particular framework like Materialize CSS. You will have to write that part yourself, but on the other hand, you have the choice to pick which one.
BANano is a different animal. It can use a Service Worker to ‘install’ the web app in the browser, so it can also work when the user is offline. While ABMaterial builds the page from the server side, BANano builds it from the browser side. This means EVERYTHING you write in B4J is transpiled to Javascript, HTML and CSS.
Some basic knowledge of HTML, CSS and to some extent Javascript is needed to build BANano apps. It makes excellent use of B4X’s SmartStrings to create the HTML part of the app. BANano gives you a set of tools to write your own wrapper around any framework (MiniCSS, Skeleton, Spectre, Bootstrap, …), which then can be easily used to quickly build webapps/websites. (Sourced from B4X)
Figure 2
BANano is currently at its 5th iteration. A couple of weeks ago we got to experiment with its LiveSwapping feature, we were mind blown. We have been promised more is coming. 😉
What does BANano offer?
These are some of the built in functionalities that come with BANAno. *All prefixed with BANano of course.
- Fetch
- JSONQuery
- MQTT
- Mutation Observer
- SQL i.e AlaSQL (IndexedDB) wrapper
- Websocket
- Promise
- Object – direct Javascript manipulation
- Inline PHP
And tons of examples to get yourself started.
As they say it the Matrix, “You have to experience it for yourself.” You will love it! We do. A lot of time and effort has been put into this library. Thanks to its creator Alain and the power of B4x behind it!
How does one create WebApps and or Websites using it?
Most of the design work for ones app can be done via the Abstract Designer and also via B4X code. As BANano comes built with an advanced SkeletonCSS framework, one can drag and drop their elements to the designer and create their layouts. If on the other hand, you want to use your own framework, there are tools to do so, like the BANanoCVC (Custom View Creator)
Figure 3
Figure 4
Did it say Framework independent?
Yes, BANano is framework independent, which means you can use any javascript based framework to it and it will work. A week or so ago we launched BANanoZUI, a library to create ZUIs i.e Zoomable User Interfaces with BANAno. That’s one of the joys of using BANano.
Figure 5
Can it create Desktop Applications?
Oh yes!!! One of the forum members, Kiffi, explored this with NW and also the KendoUI framework.
Figure 6
Support
BANano comes with online help besides the help that one is able to get in the forum. One can access this as easily as going to BANanoHelp. What we have also done is to create a BANano For Dummies thread where one can start to get their groove going. The example code that comes with the BANano download is always invaluable.
Thank you.