Lightning Component framework has a rich set of JavaScript APIs that you can use to build client-side logic. However, there are a lot of open source libraries and frameworks that provide rich functionalities but can take a considerable amount of effort to rewrite using Lightning Component framework's native JavaScript APIs. One example of such a situation is if you are looking to build charts with Salesforce data, then building all the CSS and client-side JavaScript from scratch can consume a lot of time. Instead, you can import libraries such as ChartJs (https://www.ChartJs.Org/), HighCharts (https://www.highcharts.com/), or D3 (https://github.com/d3/d3/wiki/Gallery) to meet charting requirements with minimal code and without having to engineer everything from scratch.

Another example is using libraries such as jQuery to make client-side HTTP callouts. Similarly, if you already have a single-page application built using frameworks such as React or Angular, you can use the Lightning:container component to securely host your single-page application. Not all open source JavaScript libraries will be compatible with Lightning Components because of the Salesforce Locker Service that is in place for Lightning Components, to provide additional security. Therefore some libraries may require some manipulations before you can get them working under Locker Service.

The aim of this chapter is to show how to integrate external third-party libraries inside Lightning Components and test to make sure they work under Locker Service. We will be taking some well known third-party libraries such as jQuery, ChartJs, MomentJs, and many more to demonstrate the approach of using external libraries inside Lightning Components.

In this chapter, we will cover the following topics:

• Using third-party JavaScript libraries in Lightning Components
• Using the ltng:require tag
• Creating a Locker Service-compliant JavaScript bundle using webpack
• Examples of building custom components using ChartJs and MomentJs
• Rendering a React application in a Lightning Component using a Lightning:container