B4J Tutorial [BANanoVuetifyAD3] Tree-Shaking your BVAD3 project with the BVAD3 Package Manager

Hi there

[BETA]

Download BANanoVuetifyAD3 Library Source Code
Download BANanoVuetifyAD3 Package Manager Source Code

To avoid this topic being lost in translation, its standing alone.

What is the BVAD3 Package Manager?

The BANanoVuetifyAD3 library is quite large and at the current moment, even if your project does not include Google Maps for example, the css, js and component files for GMaps is included. This goes without saying for other Vuetify based components that you might not use. With that said, the plugins to BVAD3 compose about 5% or so as compared to more than 100 components that make BVAD3.

Lets say you are creating a project, it does not need a VStepper or VTabs or VFAB etc, how do you ensure that these are not included in your final pack, whilst ensuring that you have a working project? Comes in the BVAD3 Package Manager. With the BVAD3 Package Manager, you choose what you will use on your project and it produces a b4xlib that is suitable for your project. You can create a default b4xlib schema and use this for most of your projects.

Yes, it will create a b4xlib. Smaller. Faster, just to meet your needs. Lets say you created a project and named it HelloWeb. After running your project using the master BVAD3 b4xlib and your library, the newly created b4xlib will be BVAD3HelloWeb.b4xlib. You can then refer it on your libraries folder and continue using it to develop your project, after having chosen which components, js, css, images etc resources it will use.

As this is a web application, due to security reasons it cannot access your PC directly, thus there is a final manual process that needs to be undertaken. This is downloading the generated b4xlib, adding it to your additional libraries folder and re-referencing it on your project (and remove the reference to the master b4xlib on your project).

You can quickly get into the hang on the BVAD3 Package Manager in 5 simple steps.

#SharingTheGoodness.

PS: For now projects using VField are not fully supported out of the box. Equivalent of VField will have to be selected manually in Step 4. For example, if you used a VField and chose a TextField as a component type, in step 4, ensure you choose VTextField under form components.

Step 1

You can download the latest b4xlib from Github or run it to compile the latest b4xlib. This is what you will have to upload to the package manager in Step 1.

NB. The actual b4xlib should be uploaded and not the BANanoVuetifyAD3.zip library source.

After uploading the b4xlib, click Next.

Ceveats

• The package manager will pick up items that are related. For example, if your project uses the VueTable, it will pick up the JSPDF classes because these are related.
• If your project uses the BANanoDataSource, it will pick up the FireBase related classes, BANanoPHP classes etc as these are related.
• In your subs signatures in your Project, add 'IgnoreDeadCode (just like 'ignore)
• Activate the RemoveDeadCode transpiler option.
• The generated b4xlib DOES NOT WORK (Not sure why as yet), thus download the zip and then run it to generate a b4xlib

 

[Mashiane]

Step 2

The assumption is that you are building your project using the master b4xlib. Ensure your project runs well without bugs. Zip it using the menu,

button.

Upload it on step 2. An analysis of the BVAD3 b4xlib and your project will be undertaken.

 

[Mashiane]

Step 3

After your project is analyzed against the BVAD3 b4xlib, a pre-packaging report is generated. This details some simple statistics about your project and stuff that can be removed. This is just an overview. Clicking Next will start step 4, where you can see what has been chosen by default based on the analysis of used components etc.

NB: Please note this step will be slightly updated to address VFields in the future. VFields are abstracts of underlying Form Components and a VField can be any component. A structure of the VField is only known by the abstract designer ONLY to be able to generate a VTextField, a VAutoComplet, a VImage. These are not easily accessible, thus the manual interaction to choose what they are (for now).

NB: Please note this step will be slightly updated to address VFields in the future.

Update 18 Feb 2022

Vuetify.GetUsedComponents

If your project is using the VField abstract components (this can be VChip, VIcon, VTextField etc underneath), there is no way for the Package Manager to know what has been used as this information resides on the Abstract Designer Layout. With this functionality that you can run once (and comment out), you will be able to know which "real" components were used by all your VFields in your project. This is called Vuetify.GetUsedComponents. It generates a json file. This can be later imported to the Package Manager.

In pgIndex.Init /Initialize, locate Vuetify.Serve. After it type in Vuetify.GetUsedComponents, run your project. The GetUsedComponents fill generate a JSON file. I will show you soon how to use this in the abstract designer to complete your project analysis.

You can watch how this was done for the kitchen sink.

 

[Mashiane]

Step 4

This step is important as you are provided with a list of components used by your project and are able to choose and pick which ones you want or not. The package manager does a good job to find as much information as possible from the analysis that it does about what is used. However there might be false positives and some missing stuff. Besides, there are things like the DataSource, that if used, by default will include all the components the DataSource uses.

Here you then use your discretion on what to include and not, however it should have an end result of a working project.

You check each item you will use and uncheck each item to be left out on the treeview. Found components, files etc will be checked by default. When done, click Next to compile the newly BVAD3[ProjectName].b4xlib.

 

[Mashiane]

Step 5

The new b4xlib will be generated and now you can download it and use it. This b4xlib DOES NOT contain your project. It is a smaller version of the BVAD3.b4xlib that is just meeting your needs on what you want to use.

Put the downloaded b4xlib on your Additional Libraries folder and then open your project, reference the new library (removing the reference to the master BVAD3.b4xlib) and then test to see if your project still works as before.

If you have some missing items, add them via the package manager until your project works like before. Sadly there is no other way around this manual intervention as this is a web app. Im sure with time this process will be as easy to go through as drinking coffee.

 

[Mashiane]

PLEASE DO NOT POST QUESTIONS ON THIS THREAD

 

[Mashiane]

Creating and Using a Project Specific b4xlib with the BVAD3 Package Manager