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

B4X:
log(vuetify.UsageReport)

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

1659648522768.png


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..

1659648726468.png


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

1659648981014.png


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

1659649100284.png

Click the Fuse on the right
1659649157901.png
you will be prompted to comfirm. Choose 'Only Them'. This means only compile a library with these components only and nothing else.

1659649137334.png


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.
1659649286119.png
this will compile your library.

When the robot, is done, it will give you a download link,
1659649397365.png
, click this link to download your new b4xlib.

1659649687667.png


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

1659649828140.png


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

1659649562700.png


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

Happy BVAD3 Library
 

Attachments

  • 1659649795925.png
    1659649795925.png
    15.9 KB · Views: 268
Last edited:

Mashiane

Expert
Licensed User
Longtime User
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).

BVAD3Builder01.jpg

BVAD3Builder02.jpg

BVAD3Builder03.jpg


BVAD3Builder04.jpg


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.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
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:

B4X:
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

B4X:
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.

BVAD3Builder05.jpg

BVAD3Builder06.jpg

BVAD3Builder07.jpg

BVAD3Builder08.jpg

BVAD3Builder09.jpg

BVAD3Builder10.jpg

BVAD3Builder11.jpg

BVAD3Builder12.jpg

BVAD3Builder13.jpg

BVAD3Builder14.jpg

BVAD3Builder15.jpg

BVAD3Builder16.jpg

BVAD3Builder17.jpg
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
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.

CoreVsEverything.gif
 

Mashiane

Expert
Licensed User
Longtime User
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.

1658744396271.png


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

Mashiane

Expert
Licensed User
Longtime User
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.

Step3.gif


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.
 
Last edited:
Top