Using External JavaScript Libraries and CSS Libraries in Lightning Component

In this article you will learn, how to use javascript Libraries and CSS Libraries in Lightning component framework. You can use multiple libraries in your lightning component or lightning application like JQuery, Bootstrap, your custom CSS and custom Javascript libraries.

You can use libraries in lightning component framework after uploading these libraries in static resource. You can use the below tag in your component(.com) or application(.app) markup.

<ltng:require>

The libraries must be uploaded in the static resource due to the framework’s content security policy. With Spring 15 release new component called <ltng:require> is added to load libraries. Below has the following feature:-

1. Asynchronously load multiple javascript libraries or CSS
2. Let the app know when libraries loaded completely
3. Load libraries in dependency order according to app need
4. load only verifiable libraries for framework security

Here’s an example of <ltng:require>:

<ltng:require styles="/resource/firstcss[,/resource/secondcss]" 
scripts='/resource/javascript1.js,[/resource/javascript2.js]' afterScriptsLoaded="{!c.firstLoadFunction}" />

Explanation of the above example:
1. style – access multiple CSS files with comma-separated. Load files from left to right.
2. script – access multiple javascript files with comma-separated. Load files from left to right.
3. afterScriptsLoaded – to provide javascript function to notify when all javascript files are loaded.

Assumption on loading script:

1. Loading sets of scripts:- specify comma-separated javascript libraries in the script attributes to load set of libraries.
2. Load Order:- The scripts order of loading will be left to right.
3. One Time loading:- scripts will load only once in they are specified in multiple <ltng:require> tags in the same component or across different components.
4. 4. Parallel Loading:- if you have multiple sets of scripts, it will load simultaneously. they are not depending on each other.

mycomponent.com:-

<aura:component>
    <ltng:require styles="/resource/firstcss[,/resource/secondcss]"
        scripts='/resource/javascript1.js,[/resource/javascript2.js]'
        afterScriptsLoaded="{!c.firstLoadFunction}" />
    <div>
        <div class="tabDropdown">
            <div id="tLabel" type="button" class='btn btn-success' data-toggle="tabDropdown" aria-haspopup="true" aria-expanded="false">
                Some Menu
                <span class="caret"></span>
            </div>
            <ul class="tabDropdown-menu" role="menu" aria-labelledby="tLabel">
                <li role="presentation"><a role="menuitem" href="#">dropdown1</a></li>
                <li role="presentation"><a role="menuitem" href="#">dropdown2</a></li>
            </ul>
        </div>
    </div>
</aura:component>

tabdropdowncontroller.js :-

({
    firstLoadFunction: function(component, event, helper) {
        alert('Do Something');
    }
})

Usage or myfirstapp.app :-

<aura:application>
    <c:mycomponent />
</aura:application>