B4J Tutorial [BANanoVuetifyAD3][Builder] How to Optimize your WebApp

Hi

Download

Please Note: You can run this process even before you develop your webapp so that it only uses the components you will use. In that case, just start on Step 3 below and then choose the components you will use beforehand.

As we aware, the BVAD3 library is a large library, with 184 components in total. All of these components might not be used in your projects. You might just use 5 and not the whole library.

Removing the actual components (this is besides the CSS & JS files) is crucial to ensure that only the modules you need are used. Remember, as this is a BANano library, the b4x code has to be transpiled to JS/HTML/CSS before you get your final package. The B4xcode becomes the JS, HTML and CSS code for your webapp, including the b4xlib code and also your project source code, which is also transpiled to JS/HTML/CSS.

To see how this works, run your project in debug mode and see the generated source code.

BVAD3 has plugins also, but these just form a very small percentage of the overall source code, however, if you do not use any of the plugins, besides removing the JS/CSS not being used, you can now also exclude the underlying B4x code that is unused.

The BANanoVuetifyAD3 Builder is the brother to the BANanoVuetifyAD3 Package Manager but is more flexible.

So how will this work?

Preparing the BVAD3 Builder WebApp (Once Off)

1. From the GitHub repo in the download link above
2. Unzip the contents of bvad3builderlip.zip and run the project. DO NOT Compile to library.
3. Unzip the contents of BVAD3Builder.zip, and run the project, this will start the builder.

Preparing your BVAD3 based WebApp (for every app built using BVAD3) that you want to tree-shake.

Step 1:
In your project that uses BVAD3, please add

log(vuetify.UsageReport)

after Vuetify.Serve. This should be like...

Step 2:

1. Run your application (which is using the full BVAD3 library) and copy the | delimited string appearing in your console in its whole entirety.
2. Press Control+Shift+I to access the developer console of your app. The content to copy might look like this..

This report details the names of all the components that your app is using. This picks up all the components defined in Class/Process Globals. If you have a component that is not defined there but is used by your app, execute Vuetify.UseClassName where class name is the name of that class e.g. BANanoPHP will be Vuetify.UseBANanoPHP.

Step 3

1. Run the BVAD3Builder Web Application from a PHP enabled Web Server.
2. Enter the name you wish to use for the new library. Click Next

On Components & PlugIns, paste the content you copied from the browser console. Ignore this if you are building a lib from scratch to use on your project

Click the Fuse on the right

you will be prompted to comfirm. Choose 'Only Them'. This means only compile a library with these components only and nothing else.

Continue to add via the switches the components you will use in your project.

When done, go to Build tab and click the green Robot button.

this will compile your library.

When the robot, is done, it will give you a download link,

, click this link to download your new b4xlib.

Unzip the new b4xlib and run the project, DO NOT compile to library. This will generate a new b4xlib.

No go back to your project, remove the reference to BVAD3 and establish one for your project

Run your project, it will use the new optimized library.

Happy BVAD3 Library

 

[Mashiane]

With the BANanoVuetifyAD3 Builder, you are provided with choices. You choose which components you will use in your project and which ones you will not use. You can of course save these as templates.

The Uses Directives

The Uses Directives allow you to quickly choose Core and the PlugIns to use. Choosing Core will choose all the BVAD3 Core components (this might include components that you might not use in your project).

As you will remember, everything that is in the BVAD3 library is showcased in the New Awesome Kitchen Sink WebApp. As this showcases how the 184 components are used, it's also a large web application.

From the screens above, we have grouped the plugins, one can just select (turn on switch) the ones their project will use. Selecting a plugins will ensure only the applicable CSS/JS files are included in the library package for your b4xlib.

 

[Mashiane]

Components & Plugins

Now, based on the plugins you selected from the Uses Directives, the second leg will be to filter the components by selecting only the components that your project will use. This will help you build only a library that addresses only those components specific to your project.

The reason that this approach is also followed is attempting our best not to be too opinionated about what you will use / not use. So giving the power back to the developer is important, you make your own choices to build what you need and how you need and will use it.

A good friend of mine said, "help developers to not shoot themselves in the foot". There are 184 components in BVAD3 and really, you might not use all of them.

Things to note.

If your project uses the VForm & or VFlexDialog, the depended components will be selected and must not be removed. This might change in the future...

These are:

VForm
BananoDataSource
VueTable
VSpeedDial
VAvatar
VAutoComplete
VTextField
VIcon
VBtnIcon
VFAB
VChip
VLabel
VFileInput
VComboBox
VSelect
VCheckBox
VSwitch
VRadioGroup
VImg
VSlider
VRating
VProgressCircular
VProgressLinear

If your project uses the BANanoDataSource, you are able to select which back-end helper classes you will use. These are directly linked to th BDS.

The available helper classes used by this component are

BANanoALASQLE
BANanoMongoDB
BANanoMSAccess
BANanoMSSQLE
BANanoPOSTGRES
BANanoPHP
BANanoRelax
BANanoSQLiteE
BVAD3FBAuth
BVAD3FBStorage
BVAD3FBMessaging
BVAD3FBStore

By default, for Core, the BDS, UseMySQL and BANanoMySQLE are selected for the MySQL backend.

Selecting Components (plugins excluded on Step 1 will be excluded on these screens).

The screens below helps developers choose the components they need. The basic COMPULSORY components cannot be removed, everything else can be removed, with the exclusions indicated on Things to note where applicable.

 

[Mashiane]

To be launched soon.

PLEASE DO NOT COMMENT / ASK QUESTIONS ON THIS THREAD

 

[Mashiane]

Using Core Components of the Library

When running the BANanoVuetifyAD3 Builder, you are provided an option to use the Core Components / Everything.

Please Note: When using Everything in the library, THERE IS NO NEED to use the BANanoVuetifyAD3 Builder, just use the BANanoVuetifyAD3 Library as is.

To use the Core Components, just select "UseCore" in the first step of the builder. All the core components (excluding the plugins) will be included on the final build.
In the 2nd step of the builder, you will be able to fine tune your component selection and choose the components of interest by removing all the ones you won't need.

 

[Mashiane]

Selecting Components

The second step enables one to choose and select which components should be part of your build. Here you can also use the "search" to locate and choose your package items. It is recommended to leave the "core" components and then choose your components from the others. By default, all plugins are excluded in the core package and here you can also exclude components that are not used in your application.

After choosing all components you will use, you can now "Build" your own version of the library.

 

[Mashiane]

The Build

The final step is the build. Here you click the "robot" to build your pack. The build project will be located in the ./bvad3 folder where your builder app is published and running from.

This new build will contain only the components and resources you have chosen. Its time to build the library to use in your project.

Things to remember: UseOnline will use CDN versions of the resources. If you want to use local resources, set this to false.

 

[Mashiane]

The source code of the builder is on the first post:

Its open for testing. Please if you find a bug / would like to ask a question about it, you are welcome.

Thank you.

 

[ilan]

hi, i am trying to download the file but it is not available anymore.

 

[Mashiane]

hi, i am trying to download the file but it is not available anymore.

Sorry about that, not sure why... here is another link.

https://github.com/Mashiane/BANanoVuetifyAD3/raw/main/BVAD3Builder.zip

 

[Mashiane]

 

[Mashiane]

 

[Mashiane]

Source code updated. Had to fix some bugs and add enhancements.

Post #1 has download link.