Wednesday, 8 June 2016

Bootstrap Plugins in XPages Part XIII - Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (5) - Bower Files

In my previous blog post I described how to install Bootstrap plugins using Node and Bower, the setup of SourceTree , the placing (positioning) of the Bower files and the final installation of the Bootstrap plugins (Packages) into the XPages application. In this blog post we take a closer look at the imported files in the XPages application when using Bower to install Packages (Bootstrap Plugins). This blog post is also an introduction to a deep dive into Bower including a number of solutions in order to download only the files that are necessary for the specific Bootstrap Plugin in an XPages application.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkbox
Part V : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes
Part VI : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)
Part VII : MagicSuggest A Multiple Selection Combobox
Part VIII : Bootstrap Maxlength
Part IX : Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (1)
Part X : Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (2)

Before we take a closer look at the imported files first some considerations that have to be taken into account when using Bower to install Packages.
First of all, any changes in the source code of the packages is futile. The next update will override everything. So, for example, no more throwing components out of Bootstrap to reduce size because we don't need them.
Secondly the package we are searching for might not exists. We do not have a lot of options in this case and will still have to revert back to the good old find, download, extract and copy way.
Finally when using a standard Bower install based on a bower.json file and a .bowerrc file, Bower installs entire repositories. This means that all files from the repository are imported and NOT only the files that are needed for a specific Package (Bootstrap Plugin) to make it work in an application.
This is a major disadvantage of the standard installation of Bootstrap Plugins using Bower.

Let's take a closer look at the Select2 files we imported in the previous blog post. Based on the bower.json file we used, Select2 4.0.3 has been installed in the On-Disk Project (ODP) after running 'bower install'.

{
    "name": "bower4xpages",
    "version": "1.7.9",
    "dependencies": {
        "bootstrap": "latest",
        "moment": "latest",
        "select2": "latest",
        "fontawesome": "latest"
    },
    "private": true
}


After syncing the ODP (On-Disk Project) with the NSF in the Domino Designer (DDE) the following files have been imported in the Select2 folder in the XPages application.


However, to use Select2 within an XPages application we only need the files in the dist folder.


For me personally this is not the desired outcome. A large number of files have been installed in the NSF that are completely unnecessary for the functioning of the Bootstrap plugin in an XPages application. In the next blog posts we take a deep dive into Bower and provide some solutions how to grab only the files which are really needed for a Bootstrap Plugin when using Bower for installing Packages in XPages applications.

No comments:

Post a Comment