B4J Question Hello, due to my lack of much experience in the web and its applications, I have been confused a lot, please clarify betwee

[alfaiz678]

Hello, due to my lack of much experience in the web and its applications, I have been confused a lot, please clarify between

ABMaterial​

BANano​

BANanoVuetifyAD3​

SithasoDaisy

And I don't know where to start.
And can I create this site like professional php sites ?

 

[Cableguy]

ABMaterial - runs in server side, so nothing is "stored" on client side, but cookies if you set them.
BANano - runs on client side (browser) thus needs install by user and can be easily "sniffed" (often used as a complement with ABMaterial)
BANanoVuetifyAD3 - My guess is it's "only" a graphic layer on BANano
SithasoDaisy its a complete seperate framework, and I guess more complex to use...

 

[giannimaione]

what do you want to achieve?

ABMaterial - runs in server side, so nothing is "stored" on client side, but cookies if you set them.

yes, true. ABMaterial is free

SithasoDaisy its a complete seperate framework, and I guess more complex to use...

SithasoDaisy is a great and powerfull framework (run join / together BANAno), you have to pay a small fee
here a screen shot (italian language)

 

[aeric]

I believe both authors of these projects would provide the best answers.
Here is my understanding:
1. These are the top 4 most popular Web Application frameworks on this forum where you can develop with B4X programming language and B4J IDE.
2. ABMaterial is the earliest framework and based on Material Design UI.
3. BANano is the latest framework that build-in with a very small JavaScript library and developer can use other Javascript library such as Vue or Bootstrap.
4. Both ABMaterial and BANano are created by @alwaysbusy
5. BANanoVuetifyAD3 and SithasoDaisy built on top of BANano
6. Both are created by @Mashiane
7. BANanoVuetifyAD3 is utilising Vuetify UI framework while Sithaso Daisy is using DaisyUI framework (Tailwind CSS)

It's not true that some of the above not running on a server. All the final output produced from the frameworks need to be hosted on web server.

The difference is for BANano based frameworks, the output is plain html, CSS and javascript files where you can host them on regular hosting.
For ABM, you may need to use a VPS.

Users does not need to "manually" install this app on their client (browser). The installation of offline service worker is applied when it works as a PWA.

All visitors to these web app or websites like any website visitors are still downloading the html, css, js and stored in web browser storage.

The js will further writing additional stuff like cookie and session variables in different storage.

I don't know where to start

After understanding all the concepts, you can start following the instruction on how to use them.
For BANano, you can start with the minimum "Skeleton" template.
For BVAD or Sithaso, I think it has a "Kitchen Sink" template.

can I create this site like professional php sites ?

B4X is capable to use as a programming language like PHP, Python, Java and C# to build web app.

In modern web development, usually it is separated as backend and frontend.

Backend is responsible of the server side request and response such as routing to different URL and fetching data from another database server.

Frontend development is referring to the user interface that generated by html, css and javascript.

If someone is doing both then it is call fullstack web developer.

Besides knowing B4X, you still required to know basic html, css, js and sql.

In PHP, most popular framework is Laravel. You build the backend and API to consume by the frontend using javascript at the frontend.

In B4X, you can also build a web app without any frameworks.
Start with B4J Server example.
It also support websocket.

I am on the other route, develop my own web api server with B4J Server.

Support Ticketing System project is the best to illustrate the use case.

 

[alfaiz678]

I believe both authors of these projects would provide the best answers.
Here is my understanding:
1. These are the top 4 most popular Web Application frameworks on this forum where you can develop with B4X programming language and B4J IDE.
2. ABMaterial is the earliest framework and based on Material Design UI.
3. BANano is the latest framework that build-in with a very small JavaScript library and developer can use other Javascript library such as Vue or Bootstrap.
4. Both ABMaterial and BANano are created by @alwaysbusy
5. BANanoVuetifyAD3 and SithasoDaisy built on top of BANano
6. Both are created by @Mashiane
7. BANanoVuetifyAD3 is utilising Vuetify UI framework while Sithaso Daisy is using DaisyUI framework (Tailwind CSS)

It's not true that some of the above not running on a server. All the final output produced from the frameworks need to be hosted on web server.

The difference is for BANano based frameworks, the output is plain html, CSS and javascript files where you can host them on regular hosting.
For ABM, you may need to use a VPS.

Users does not need to "manually" install this app on their client (browser). The installation of offline service worker is applied when it works as a PWA.

All visitors to these web app or websites like any website visitors are still downloading the html, css, js and stored in web browser storage.

The js will further writing additional stuff like cookie and session variables in different storage.


After understanding all the concepts, you can start following the instruction on how to use them.
For BANano, you can start with the minimum "Skeleton" template.
For BVAD or Sithaso, I think it has a "Kitchen Sink" template.


B4X is capable to use as a programming language like PHP, Python, Java and C# to build web app.

In modern web development, usually it is separated as backend and frontend.

Backend is responsible of the server side request and response such as routing to different URL and fetching data from another database server.

Frontend development is referring to the user interface that generated by html, css and javascript.

If someone is doing both then it is call fullstack web developer.

Besides knowing B4X, you still required to know basic html, css, js and sql.

In PHP, most popular framework is Laravel. You build the backend and API to consume by the frontend using javascript at the frontend.

In B4X, you can also build a web app without any frameworks.
Start with B4J Server example.
It also support websocket.

I am on the other route, develop my own web api server with B4J Server.

Support Ticketing System project is the best to illustrate the use case.

B4J Server
It needs vps hosting ؟
Correct.

 

[alwaysbusy]

As the writer of both Web Libraries for B4J (ABMaterial and BANano) here is some history and why both libraries were written within our company.

@aeric (correct me if I'm wrong) uses the purest form of Web Development build-in B4J using only jServer (a wrapper for the Java Jetty engine) for the backend and serves html, javascript and CSS back to the fontend. It does require a VPS host to run the embedded Web Server. It can use jQuery. This is a bit B4Js answer to PHP and is in itself the core of Web Development in B4J. It has an excellent speed track record and is a very reliable web server. You should definily check out his work and I personally am very fond of what he has done using jServer to handle REST APIs: https://www.b4x.com/android/forum/threads/project-template-web-api-server-2.143310/#content

As in our company we decided to use this build-in enveronment for developping our Web apps, but as not everyone is profound in HTML, JavaScript and CSS, we decided to write a library that could handle all this without any (or very little) knowledge of these languages and wrapped a particular framework (Materialize CSS) for B4J. In simple words, ABMaterial is an UI layer written on top of jServer so it has all the same capabilities (and limitations like requiring a VPS host) but the programmer can use UI components from this library to build the frontend that is served back to the client.

This library is still used heavily within our company, is 100% free and has even been open sourced. https://www.b4x.com/android/forum/threads/web-abmaterial-framework-for-webapps.60072/#content

A good getting started link for ABMaterial: https://www.b4x.com/android/forum/t...-absolute-beginners-update-2024-05-17.117237/

In recent years, our market demanded a second option: Progressive Web Apps. These are Web Apps that 'can' be installed locally on e.g. mobile devices and still work even if the user has no internet connection. This requires extensive knowledge of HTML, JavaScript and CSS so we needed a similar solution as ABMaterial for it as we prefer everything to be written in the B4J language. Hence the BANano library. BANano transpiles B4J code into HTML, vanilla JavaScript and CSS. For this library we decided not to embed a fixed UI framework so anyone with good knowledge of HTML/JavaScript/CSS could wrap any UI framework into a BANano b4xlib library (Bootstrap, Vue, React, Tailwind, ...). BANanoSkeleton (included with the lib) is such a BANano b4xlib library. This is the UI we use in our Web Apps and is carefully written to be very fast and lightweight. BANano, unlike ABMaterial, allows the programmer to even use the B4J Abstract Designer to build his 'Web page'. Together with a jServer (requires a VPS) acting as a REST API server, this has proven to be a very strong solution for many of the questions the market demands nowadays.

But you can also use a PHP server as your REST API server to talk with a MySQL server from your Web App. If you prefer not to use a VPS, you can use shared hosting services, which are often more affordable and easier to manage for beginners. Shared hosting typically provides the necessary environment to run PHP and MySQL.

This library is also heavily used within our company, is also 100% free and contains a booklet describing all components of the library. Unlike ABMaterial, it does require some knowledge of how HTML/JavaScript and CSS works, but not the languages itself. You have absolute freedom how far you will take it as you can even use inline JavaScript, CSS (and PHP if you want) right into your B4J code.

BANano link for the library and booklet: https://www.b4x.com/android/forum/t...h-abstract-designer-support.99740/post-627764

A note: we give these two libraries for free back to this community, even for commercial use but as described in the LICENSE.TXT with one limitation as we devoted many resources within our company to build these libraries:

4. YOU AGREE NOT TO DISTRIBUTE FOR A FEE AN APPLICATION USING THE LIBRARY THAT, AS ITS PRIMARY PURPOSE, IS DESIGNED TO BE AN AID IN THE DEVELOPMENT OF SOFTWARE FOR YOUR APPLICATION'S END USER. SUCH APPLICATION INCLUDES, BUT IS NOT LIMITED TO, A DEVELOPMENT IDE OR A B4J SOURCE CODE GENERATOR.

In layman's terms this means there is no limitation to use them to write 'transpiled' Web Apps for your end users (commercial or not), but you can not use them to write any commercial aid tool for programmers and this includes tools like a development IDE and/or B4J source code generator. As soon as the user of such a tool you have written needs the B4J environment (in any capacity) to use your tool/Web App, it fails to comply with the license agreement.

So, in conclusion, these are the three 'core' ways on how you write Web Apps in B4J. But as mentioned before, BANano allows third parties to extend it with BANano b4xlib libraries. The two you mention are examples of such BANano b4xlib libraries, BANanoVuetifyAD3 and SithasoDaisy (an unfortunate name choosing as it was recommended to start BANano Libraries with the prefix BANano to avoid such confusions. It is not a separate framework, but a normal BANano b4xlib library). There are others on this forum, but some have been abandoned so be careful. Some are free and some require a fee.

Hopefully this brings some clarity in this 'web' of Web tools for B4J.

Alwaysbusy

 

[alwaysbusy]

B4J Server
It needs vps hosting ؟
Correct.

Yes, the server must be able to run the compiled B4J jar file.

 

[alfaiz678]

BANano library. BANano transpiles B4J code into HTML, vanilla JavaScript and CSS​

So it can work on shared hosting like any html site.

 

[alwaysbusy]

So it can work on shared hosting like any html site.
View attachment 156757

Absolutely

 

[alfaiz678]

Absolutely

It needs jServer.

 

[alwaysbusy]

It needs jServer.

No. It 'can' use jServer e.g. if you want your Web app to talk to a MySQL server. But you can also use a PHP server as your REST API server to talk with a MySQL server from your Web App. Such a server does not need a VPS. You can use shared hosting services, which are often more affordable and easier to manage for beginners. Shared hosting typically provides the necessary environment to run PHP and MySQL.

 

[alfaiz678]

No. It 'can' use jServer e.g. if you want your Web app to talk to a MySQL server. But you can also use a PHP server as your REST API server to talk with a MySQL server from your Web App. Such a server does not need a VPS. You can use shared hosting services, which are often more affordable and easier to manage for beginners. Shared hosting typically provides the necessary environment to run PHP and MySQL.

You confused me with your previous answer when you said "absolutely"

, but I think I understand now.

 

[alfaiz678]

Thank you, you have helped me a lot.
So I will start trying Banano.
It is great for two reasons.
The first is that the codes are written in b4j.
The second is that the output is html, css, js,... files.
Thank you to everyone for this useful community.

 

[alwaysbusy]

You confused me with your previous answer when you said "absolutely"
View attachment 156758

, but I think I understand now.

Sorry, it was not my intention to confuse anyone. I added something about VPS and shared hosting with BANano to my post for clarification.

 

[Mashiane]

Awesome discussion.

I once created an app for work which had about 99 different pages, it was for Project Management, called it Project.Show, back in 2018. That was done with ABMaterial.

A lot can be done with BANano, I have explored Games Development, 3D App development, Mobile & App Development with it, including Zoomable User Interfaces too.

Whilst BANano was not built for VueJS use, the explorations of how to get that working through trial and error finally resulted in BANanoVuetifyAD3 (a third iteration after a couple of failures). This is being used extensively and is free for our community. Currently we are moving to VueJS 3 & Vuetify 3 when the Vuetify LLC has finished updating their javascript libraries. This should be in sometime in 2025, tests have been done and we hope for success.

For developing Mobile Apps with BANano, one can never go wrong with SithasoIONIC7 (this is based on the Ionic Framework). SithasoIONIC7 provides a near to native feel of your web mobile apps.

SithasoDaisy also has a mobile app development aspects to it, you can also wireframe your apps using the SithasoDaisy Wireframes Apps, freely available for the community. Whilst this does not generate source code, it does generate a guide on how to create your design with the Abstract Designer.

You can see some cool stuff here on my Shared My Creations done with BANano and others

B4J Share Your Creations

The first attached image will be displayed as the thread preview image.

www.b4x.com

All the best with your projects.

PS: You might also run accross something called BANanoWebix. Dont use that, unless you have deep pockets. It's a powerful library but the Javascript library from Webix is extremely steep, however wrapping it to BANano was an exciting challenge.

The demos below are very large applications, the loading time will be considerable.

Demo - BANanoVuetifyAD3
Demo - SithasoDaisy