Use Third-Party JavaScript Libraries in LWC

Introduction

Have you ever wondered what a third-party library is all about?

Well, a third-party library refers to any library where your code calls a library and, in return, uses its functionalities, or you can say your code is tied to that library.

Now, your next question would be what could be the right reason to use a third-party library?

Well, the answer is simple. The reason for using a third-party library is that it is efficient and essential. 

You don’t even need to develop the functionality. Instead, you copy this pre-developed and pre-tested code and use it by modifying it or not, simplifying it as per your choice. A third-party library is a great time-saver. 

Also, there is no need for the developer to reinvent the wheel that is solving already solved problems. So, it is wise for them to start using third-party libraries. 

In this blog, we highlight the disadvantages and advantages of using Third-Party Libraries and how Font Awesome (Third Party Library) works in Salesforce LWC. 

So firstly, let us discuss the advantages and disadvantages of using Third-Party Libraries.

Advantages of Using Third-Party Libraries  

• Save Time 

It saves your time as there is no need to create functionality since the library provides it. It helps you to focus on the core business logic: the essential features. 

• Use Pre-tested Code 

Another advantage of using the library is ‘proof of use.’ A popular library is used in various use cases and environments. 

The feedback loop obtained on the libraries will result in bugs and remedies provided. Hence, using a proven third-party library is equivalent to not imperiling the overall quality or stability of your application. 

• Use Modular Code 

Finally, another advantage of third-party libraries is that they help you to use and write modular code. 

The library’s code is different from the rest of your application code. The communication takes place across well-defined boundaries or APIs of the libraries. 

The authors of libraries, which are well-built, usually operate on a different abstraction level – which leads to a more generic and cleaner code. 

However, modular code is not always decoupled code, and then that becomes a disadvantage of third-party libraries. 

Disadvantages of Using Third-Party Libraries  

• Dependency 

Dependency on third-party libraries might give you a challenging time sometimes. Depending on a third-party library means your code is tied to that library.

If at any point you are forced to switch libraries, your code might misbehave and might undergo significant changes to adapt it to a new library. 

• Security 

Security concerns may arise due to the usage of third-party libraries as vulnerabilities existing in open-source libraries become targets of hackers. 

How does Font Awesome(Third Party Library) work in Salesforce LWC?

What is Font Awesome?

Font Awesome is a third-party font and icon toolkit. It is designed for inline elements and is used by website designers & developers. The and elements are widely used for adding icons.

What is LWC (Lightning Web Component)?

LWC, i.e., Lightning Web Component is a modern programming model that supports ECMAScript7. An LWC component is a bundle of an HTML file, a JavaScript file, and a Metadata configuration file,

LWC is a product of the Salesforce platform and a UI framework built with native HTML and modern JavaScript used as Salesforce Lightning Services. It utilizes core web component standards. 

It helps developers create custom components that are later presented as UI to end users, just like any HTML page.

Steps to Make Font Awesome Work in Salesforce LWC 

Follow these steps to make Font Awesome work in Salesforce LWC

Step1:- Download the Font Awesome toolkit from the following link:

https://fontawesome.com/download

Note:- You can download any version. Just make sure the downloaded file size doesn’t exceed more than 5MB; otherwise, it shows an error message.

Step2:- Select static resources

Step3:- Click the new button and fill in the details

*Completing the steps mentioned above, click Save.

Step4:- Import the following code into your JavaScript file

import { LightningElement } from ‘lwc’;

import { loadStyle, loadScript } from ‘lightning/platformResourceLoader’;

import FontAwesomeToolKit from ‘@salesforce/resourceUrl/FontAwesomeToolKit’;

export default class FontAwesomeDemo extends LightningElement {

    renderedCallback() {

        Promise.all([

            loadStyle(this, FontAwesomeToolKit + ‘/fontawesome-free-6.0.0-web/css/all.css’)

        ]).then().catch();

    }

}

Note:- The ‘loadStyle’ used in the code is used to render the CSS, while the ‘loadScript ’ used in the code is used to generate the JavaScript.  

Conclusion 

Implementing any third-party library into Salesforce LWC that comes in the Salesforce Lightning Services is done using the library as a static resource. This resource renders on a page load and enables developers to use more icons and fonts working in Salesforce and reduces the complexity of code.

It is wise of developers to use third-party libraries, as reinventing the wheel is not necessary. That means, they are not supposed to solve problems already solved by others.  If the library fails to cover your requirements, you might modify it. So, weigh the pros and cons of using a third-party library. 
Cloud Analogy is one of the top-notch certified Salesforce Consulting Companies that can offer you valuable guidance and will assist you all throughout your Salesforce journey. We provide cost-efficient Salesforce Consulting services to help your business grow in countless ways. Get connected to our expert and certified team at Cloud Analogy and start your project today.