-
Welcome to B4X forum!
B4X is a set of simple and powerful cross platform RAD tools:
- B4A (free) - Android development
- B4J (free) - Desktop and Server development
- B4i - iOS development
- B4R (free) - Arduino, ESP8266 and ESP32 development
My new PWA (BANANO Vuetify)
- Thread starter Star-Dust
- Start date
- Similar Threads Similar Threads
thanks @alwaysbusy, i gave it a try. did everything what you wrote above -> build the app in debug -> logs showed that the site was build but opening the index.html file did nothing. opening console showed that i need to run it in http protocol so i need to run it on virtual server.
trying to build in release gave me this error:
trying to build in release gave me this error:
i think what is a little bit confusing is that b4j web apps create a server where you can run your site. in b4anano you create a website from the b4j project and not a server.
am i right?
so b4j webapp works like nodejs server apps. b4anano work like mobirise. correct?
am i right?
so b4j webapp works like nodejs server apps. b4anano work like mobirise. correct?
Perhaps some advise also...
There are a million questions I have asked in the forum about ABM and also about BANano, especially when I did not understand concepts and wanted clarity. Yes I am well aware that our minds work differently, some people understand and grasps things easily, some take time. I fall on the latter.
What helps me is. I ask a lot of questions and I mark them with SOLVED when I get responses. With that said, I have also learned that I also need to be patient, when it comes to BVAD3.
The Mashy Teaches Channel also had to change a little because some people are not "English" speaking, to include video transcripts for people to be helped.
www.b4x.com
There is also a Telegram Channel created so that people can always ask questions etc should they need clarity. In this channel we offered the $40 Asset Manager BVAD3 Webapp for free. https://t.me/bananovuematerial
Please ask questions here in the forum should you need help, and you are welcome to send me a PM should you need to. I am open.
There are a million questions I have asked in the forum about ABM and also about BANano, especially when I did not understand concepts and wanted clarity. Yes I am well aware that our minds work differently, some people understand and grasps things easily, some take time. I fall on the latter.
What helps me is. I ask a lot of questions and I mark them with SOLVED when I get responses. With that said, I have also learned that I also need to be patient, when it comes to BVAD3.
The Mashy Teaches Channel also had to change a little because some people are not "English" speaking, to include video transcripts for people to be helped.
Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
Good day Download Additional Libraries Download BANanoVuetifyAD3Core Library OR Download BANanoVuetifyAD3 Library Download Kitchen Sink WebApp (Optional - useful for Learning how this works) Download BVAD3Builder (Optional - useful to trim your final package) FOR A MORE DETAILED SETUP PROCESS...
www.b4x.com
There is also a Telegram Channel created so that people can always ask questions etc should they need clarity. In this channel we offered the $40 Asset Manager BVAD3 Webapp for free. https://t.me/bananovuematerial
Please ask questions here in the forum should you need help, and you are welcome to send me a PM should you need to. I am open.
This is the same thing that attracted me to Vuetify. I did not have to worry about CSS etc as everything is already done. All I have to worry about is my business rules and logic of the app and I can always just use the abstract designer to create my screens.
There are 2 important methods I use in most of my apps, BANano.LoadLayout / BANAno.LoadLayoutAppend.
BTW... This is the lastest updated list of video lessons in the Mashy Teaches Series - New Series
Last edited:
I think a couple of things are at play here, most importantly stuff like this:
All the errors after it have to do with BANano not finding the BANano libraries, like the BANanoSkeleton.b4xlib library that has to be put in the Additional Libraries folder.
And I think it has do to where you installed or B4J, or the project (Desktop?). Just use simple folders like C:\B4J or C:\BANano for the projects. Special folders like 'Program files' or 'Desktop' have certain restrictions on them.
Alwaysbusy
BANano WebApps itself can run on any server (no VPS needed). But together with BANanoServer (which is just a jServer) it does need one.
All our PWA's are plain BANano WebApps, using the BANanoSkeleton library. They are running on a simple Web Server and 'talk' to external resources (like a database) through REST api calls written in a normal B4J jServer.
Here is a small blog I create for learning BANano
This is awesome, congrats, a lot more is coming I believe? You wrote this in June 2021?
The challenge I am facing is there are too many concepts involved. I am not sure which direction or flow I should follow. I have learned the basic concepts of BANano. Now, I am not sure whether I should proceed with BANano Skeleton or BVAD3. I am now revisiting BVAD3 videos and once I finished with it I will proceed with BANano Skeleton then BVAD3 Kitchen Sink. I hope I don’t get confuse.
Fortunately whilst these are different web frameworks, they work similar.
- with both, you use the abstract designer to create your screens and use banano.loadlayout.
- with both, you generate members to produce your _click, _change etc events for components
- with both you have routers (this is new in BANano 7 and we expect some examples / docs to play with). BANano7 is coming with a lot of stuff that we will be able to play with e.g. built it firebase, web workers that support PWA more, I cant wait.
- BVAD3 is based on Material Design, Skeleton is based on the Skeleton css with some enhancements.
- BVAD3 is based on Vuetify, a VueJS based framework. VueJS is an enhancement to javascript which works like React & Angular.
- Whilst im not sure how many components are in Skeleton, BVAD3 has more than 100 components (this can be overwhelming), but one just need to find the right component for what they need to do.
- BVAD3 wraps the Vuetify API which has one of the best documentation I've found as highlighted in one of the posts in this thread.
- BVAD3 has a kitchen sink that demonstrates all the components (using the abstract designer), this also has a BANanoServer kitchen sink for localhost:55056 like projects.
- The BANano downloads come with examples projects to explore to use the framework. This was helpful in my journey.
- All of these are still b4x. In most of the apps I have developed with BVAD3, there is very few "BANano" code in my IDE, as most code is just b4x.
- All in all you have to experience it for yourself.
BANano + BANanoSkeleton is an extremely lightweight combo with a very small footprint and is something that is required by our clients. Most of our WebApps load under 1 second! Although BANanoSkeleton started from skeleton.css, it is nowadays something completely different and is closer to what Bootstrap can do, but still very lightweight. A better name for it would probably have been BANanoUI: the native UI set for BANano using the Abstract Designer.
You can of course use something like Vue, React or Angular (like BDAV3) with BANano but the main purpose I wrote BANano for B4X is that B4J would play that part and those frameworks are another layer in-between. What you gain in development speed, you may loose on overhead and speed. Absolutely nothing wrong with that, just something you have to keep in mind and if your project allows it, why not!
With native BANano, you can write your own similar API: build components, routers, templates (with the build in Mustache library, used by Twitter, LinkedIn, GoDaddy,... for example) in common B4X syntax. BANano does all the hard work behind the scenes and provides you with an API that allows you to interact with the specific JavaScript lingo. And then transpiles it to native JavaScript.
That is the fun part of BANano: you can use whatever you want or like. You can wrap BANano specific code into B4X classes/BANano libraries and after a while, you indeed hardly see any BANano code any more and all you do is write plain B4X code for the business logic of your WebApps. With the Abstract Designer you make your interfaces. Instead of spending a lot of time writing a WebApp in HTML/JavaScript/CSS, we nowadays write them in a matter of days instead of weeks/months in our company using the powerful B4X language.
It was this same experience I wanted to share with the B4X community and made me decide to share BANano with you for free. I am very fortunate to work for a company that allowed me to do that. After all, although I wrote BANano in my spare time, they could've easily said it could only be used within the company and nobody would ever have heard of BANano.
I do try to give examples as much as my time allows it, but the company gets priority. Especially in these hard times they do need all my energy. I hope you understand this. I'm always present on this forum to answer any specific questions. Just use the [BANano] prefix in your subject as otherwise some questions may be overlooked and I try my very best to help everyone.
Alwaysbusy
You can of course use something like Vue, React or Angular (like BDAV3) with BANano but the main purpose I wrote BANano for B4X is that B4J would play that part and those frameworks are another layer in-between. What you gain in development speed, you may loose on overhead and speed. Absolutely nothing wrong with that, just something you have to keep in mind and if your project allows it, why not!
With native BANano, you can write your own similar API: build components, routers, templates (with the build in Mustache library, used by Twitter, LinkedIn, GoDaddy,... for example) in common B4X syntax. BANano does all the hard work behind the scenes and provides you with an API that allows you to interact with the specific JavaScript lingo. And then transpiles it to native JavaScript.
That is the fun part of BANano: you can use whatever you want or like. You can wrap BANano specific code into B4X classes/BANano libraries and after a while, you indeed hardly see any BANano code any more and all you do is write plain B4X code for the business logic of your WebApps. With the Abstract Designer you make your interfaces. Instead of spending a lot of time writing a WebApp in HTML/JavaScript/CSS, we nowadays write them in a matter of days instead of weeks/months in our company using the powerful B4X language.
It was this same experience I wanted to share with the B4X community and made me decide to share BANano with you for free. I am very fortunate to work for a company that allowed me to do that. After all, although I wrote BANano in my spare time, they could've easily said it could only be used within the company and nobody would ever have heard of BANano.
I do try to give examples as much as my time allows it, but the company gets priority. Especially in these hard times they do need all my energy. I hope you understand this. I'm always present on this forum to answer any specific questions. Just use the [BANano] prefix in your subject as otherwise some questions may be overlooked and I try my very best to help everyone.
Alwaysbusy
In your video, you have a long list of vue components and I see you always scroll down to find the right components to add into the layout designer.
I suggest either:
1. Make a Wish so Erel improve B4J IDE to allow search for the view to add in designer
2. Create 2 libraries i.e. one “Light” version for commonly use views and another “Full” version for advanced users.
Can I say that regardless of which framework like Vue, React or Angular when BANano combine with them it will transpile into 2 types of JavaScript. For example, BVAD3 will output vanilla JS and Vue JS?
Yes and no. That is what I meant with the extra layer(s) in my previous post. Note that even BANano core itself is not 100% Vanilla JS: as soon as you write/use a helper module you are actually using some kind of framework. For example, BANano uses the lightweight library called Umbrella (a Vanilla JS alternative for jQuery) to manipulate the DOM.
For the sake of argument, let's call Vanilla JS/Native JS = very low level, close to raw JavaScript.
Maybe an example flow:
------------------
Type A:
App B4X Code -> BANanoSkelton.b4xlib -> Wraps some Vanilla JS code
1. BANano Transpiles the App B4X code + BANanoSkeleton.b4xlib
2. Everything not used in BANanoSkeleton.b4xlib is stripped by BANano (including external JavaScript/CSS files not used).
3. A call in your Apps B4X Code passes through BANanoSkelton and then is on the Vanilla JS level.
------------------
Type B:
App B4X Code -> BDAV3.b4xlib -> Vuetify.js Framework -> Vue.js Framework -> Wraps some Vanilla JS code
1. BANano Transpiles the App B4X code + BDAV3.b4xlib
2. Everything not used in BDAV3.b4xlib is stripped by BANano (including external JavaScript/CSS files not used). Vuetify.js and Vue.js are kept as fat JavaScript files.
3. A call in your Apps B4X Code passes first through BDAV3, then through Vuetify.js, then through Vue.js and then reaches the Vanilla JS level.
------------------
The overhead from the App B4X Code that goes through BANanoSkelton or BDAV3 is trivial, as they are most of the time just pass-through (or easy-to-use) functions wrapping the underlying level to make it easier for the B4X programmer. So what we BANanoLibrary writers do, is wrapping something (can be Vanilla JS (Type A) or another JS Framework that calls Vanilla JS (Type B)) and make it accessible to the B4X programmer who can use familiar B4X syntax.
On the deepest level, everything really is raw JavaScript (that is what a browser runs), but in some case it goes through additional runtime 'transpilers/tool libraries' (e.g. jQuery, Moment.js, Vuetify, Vue,...) before it reaches this lower level.
So it would theoretically be possible to rewrite for example the Vuetify.js (and even Vue.js) framework in BANano. Or, you can write a similar framework completely from scratch with your own methodology.
But it isn't always needed to re-invent the wheel! BDAV3 is a nicely done B4X wrap around an existing (and field tested) framework. It al depends on your own requirements and your level of expertise in JavaScript. I think it is just cool that, without knowing any JavaScript/HTML/CSS, you can write WebApps in plain B4X syntax with BANano.
Alwaysbusy
Last edited:
Abstract Designer Toolbox
Ola Currently components that one can add via the designer are available via a menu. This also goes for all custom views that one creates in his/her library. I think it would be awesome for example the custom views or components instead of a menu it's just a toolbox with icons of choice...
www.b4x.com
At the moment, I am not sure what are less or most used components. With time permitting though its something that can be considered. Client projects for now are what are receiving priority.
FYI
BANanoVuetifyAD3 - Up & Running with Vuetify in 5 Minutes
Ensure to get the latest library, external libraries and update to 7.28+ as per setup instructions on GitHub / BVAD3 thread 1st post
BANanoVuetifyAD3 - Up & Running with Vuetify in 5 Minutes
Ensure to get the latest library, external libraries and update to 7.28+ as per setup instructions on GitHub / BVAD3 thread 1st post
same problem here
I would also like to add one more thing about learning Vuetify:
Besides the poor documentation there is one other thing that creates problems.
There are periods of silence followed by continuous updates one after the other and you don't have time to understand what has changed when a new update arrives that corrects the previous one.
A small example would be needed for each update.
Some examples contain many functions, this confuses those who approach Banano and VuetiFy for the first time.
But examples that everyone teaches one thing (or one view) with all parameters etc ... becomes simple for newbies.
I'm sure these improvements will encourage developers to use these tools more.
Last edited:
@Mashiane I think I am loosing it all after 1 min... when i am getting in front of me hundreds of lines.... for setupping ... or comments... what i should use... or not to use... this....
will be nice if was BVAD3.Initialize... BVAD3.createdialog(jsongeneratedfilefrom_b4xdialog).... BVAD3.Start ....dreaming
but need so much :-(
when i am getting in front of me hundreds of lines.... for setupping ... or comments... what i should use... or not to use... this....will be nice if was BVAD3.Initialize... BVAD3.createdialog(jsongeneratedfilefrom_b4xdialog).... BVAD3.Start
....dreamingbut need so much :-(