B4J Question What is BANano?

[Mashiane]

Hi there

I think let me perhaps do justice to this question by "creating a question", based on my understanding and knowledge based on enquiries I am receiving, in case someone else is also wondering.

I quote...

The short story is that Banano is b4w, b4x for web.

You use the abstract designer to drag and drop custom controls to the designer, generate members for your events, code stuff like how you would b4a, b4j or b4i.

Then run the app to create your webapp or website, then deploy the output to your web server and see everything online.

It comes with Skeleton as the default ui to create your web apps and is flexible enough for you to create your own custom components.

BananoVuetifyAD3 which I created is one such custom components based library on top of Vuetify. A vuejs based material design framework. Also on it you drag and drop, generate events etc. It comes with some predefined templates like Skeleton that you can add on top of to create your app. You can use any web framework you want by creating custom components for it.

Above that there is BananoServer, which is a version of ABM using the jetty server for you to create server based apps.

So it transpiles your b4x code to Javascript, css and html. You don't have to know html, css, Javascript to develop the webapps. You just need to learn how some of the things work eg Banano fetch, Banano promise, Banano sql etc. The demos available on the download are fruitful.

You can create apps that work with php and or Jetty web servers, and also go server less with firebase, superbase, couchdb etc or anything similar.

We have explored direct backend jsql with it, jrdc2 and it works well.

Personally I have explored game creation with it, 3D, pdf report generations, excel report generation with it and all these have worked well.

There is a lot that it does. Version 7 is coming out which will have more other things to support web related stuff like web workers etc.

It's the coolest thing ever!!!

You can perhaps watch this in the mean time..



BANano Main Thread

[Web][BANano] Website/App/PWA library with Abstract Designer support

Download the latest version here: https://www.b4x.com/android/forum/threads/banano-a-sneak-peek-into-a-progressive-web-app-library.99740/#post-627764 INTRO BANano is a new B4J library to websites/webapps with (offline) Progressive Web App support. Unlike its big brother ABMaterial, BANano...

www.b4x.com

 

[Alexander Stolte]

The thing that kept me from trying Banano is this limitation.:

or are there workarounds for this? e.g. i click on an item and then a page should open with the details of this item.
Or is this all displayed in popup menus in web development?

 

[alwaysbusy]

In most of our apps we do use full-screen popups (actually, they are just 'overlays', a div with a z-index higher than and full screen). The BANanoRouter in v7 will make it easier to distinguish between 'pages' while programming. e.g. you will 'navigate' via the BANanoRouter to http://myapp.com/page1, http://myapp.com/page2 etc. In the page2 class you can then either remove everything from page1 and add the new stuff, or make such an overlay popup with the details of the item so if you close it you are back on page1.

I think Vue also uses such a router system, but maybe Mashiane can elaborate on how it works there.

Alwaysbusy

 

[Mashiane]

I am sure Alain will revise that soon...

Knowledge needed

To develop using BANano, no knowledge of HTML, CSS and Javascript is necessary at all, however to create libraries for people to use in BANano, then yes. BANano comes with SkeletonUI which are blocks you can drag and drop, no knowledge of CSS, HTML or JAVASCRIPT is necessary to do that.

Also with BANanoVuetifyAD3, the material design UI I did, you drag and drop pre built custom components, generate members and you are good to go.

For example, lets say you want to use BootStrap 4/5 with BANano. This does not exist and has to be built, then, someone knowing HTML, CSS and JAVASCRIPT can create it for you, and then using it in BANano will not require any knowledge of CSS, JAVASCRIPT or HTML on your part, as you will have pre built blocks to drag and drop in the designer. Anyone wanting a non existing UI framework for BANano, I am avaialable to do that, at a fee.

Yes, for any web developer, knowing HTML, CSS and JavaScript is a must, there is no way around it! For example, the games and 3d libraries I created for BANano, they meant i understood well enough how everything in those javascript libraries work before I could port them over to BANano.

[BANanoPhaser] Let's create a Star Catcher Game

Ola UPDATE: 2019-11-20 Complete Rewrite You can also checkout BreakOut here, created with BANanoPhaser also. With this game we will have our alien who will collect stars and dodge some bombs. We will be able to make him jump and run. We will just create a simple level here. This was featured...

www.b4x.com

Also, BANano has these directives, #IF CSS, $IF PHP, #IF JAVASCRIPT where one can copy and paste existing CSS, PHP, JAVASCRIPT directly in the IDE and use RunJavaScriptMethod to call javascript functions etc and these are added as part of the final pack.

Multipage

BVAD3 comes with routers and it means you can create multiple pages, a perfect example of that is this app here. I have shown here before how one can create multiple pages with pure BANano. You will see the location URL on the browser has different links. A SPA.


BANano7 now has "multipage" added using routers, as indicated here.

[BANano] (v7) New object BANanoRouter

BANanoRouter is a full blown Router with paths that will be standard included in the next release of BANano. It allows you to better organize your code in a PWA/SPA WebApp. It is based on the Navigo project, tuned for B4J. What is a Javascript Router? A Javascript router is a key component in...

www.b4x.com

There is also a demo example in the BANano Downloads, where Alain created a fully functional multi-page website.

i click on an item and then a page should open with the details of this item.

Yes, you can create a modal form or a new page

Or is this all displayed in popup menus in web development?

Yes you can create that too.

Personally for me, only my imagination has been the limit.

 

[Alexander Stolte]

Thanks for the clarification!

And what about this limitation? Is it still relevant?:

 

[Mashiane]

Thanks for the clarification!

And what about this limitation? Is it still relevant?:
View attachment 121784

PWA is still evolving... this site helps to check which browsers are compatible with what https://caniuse.com/

So in simple terms, for now, yes

 

[alwaysbusy]

And what about this limitation? Is it still relevant?:

To clarify, the PWA itself will run just fine on any major browser, it just has some typical PWA limitations like on iOS Chrome, you can not put an icon on the devices homescreen. If you open it in Safari, you can. We have several PWAs running on on all kind of devices (even with something like a barcode scanner) with no issues whatsoever. Other limitations are that iOS has a tough time doing PWA background stuff or accessing user data from the phone (like contacts) or other PWAs/Social Media apps. In our WebApps we don't need that kind of things so that is ok.

Alwaysbusy