Power of LWC + MuleSoft

Author: Akshata Sawant

What is LWC?

Salesforce provides an open library known as Lightning Web Component Open Source, which can be implemented in any platform.

LWC has three main keys :

1. Lightning Web Component Framework: framework’s engine
2. Base Lightning Components: provides 70+ custom elements
3. Salesforce Bindings are a set of specialized services that provides access to Salesforce with full caching and data while following all security and permissions.

Lightning web components are custom HTML elements built using HTML5 and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end-users, they both appear as Lightning components.

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript(ES6 or Later) and HTML5.

Features of LWC:

• Default Data Binding: Like its predecessors’ Aura, LWC by default supports data binding
• CSS isolation (taking advantage of DOM shadow)
• Use of Web Component (based on Modern JavaScript)
• Usage of DOM events which is available in every browser
• Proper Component life-cycle events for better hold for developers
• Easy Third-party JS libraries (making it more attractive)
• Usage of the JEST framework for the unit test
• Easy HTML template directives

Why LWC?

Modern browsers are based on web standards and evolving standards are constantly improving what browsers can present to a user. We want you to be able to take advantage of these innovations.

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.

You’ll find it easier to:

• Find solutions in common places on the web
• Find developers with the necessary skills and experience
• Use other developers’ experiences (even on other platforms)
• Develop faster
• Utilize full-encapsulation so components are more versatile
• Find the resources as compared to Aura Component

LWC Workspace:

In order to get started with the implementation part, you can develop your LWC application using Visual Studio. The LWC component mainly comprises HTML, javascript, and CSS files. You can create more JS, HTML, or subfolders under the single LWC Component.

In order to access the sample LWC application, you can visit:

LWC GitHub Project 

LWC + MuleSoft

So by now, you must have understood what LWC is, but you must be wondering how we can relate it to MuleSoft? So to answer this question, as you’ll be aware of the API-led Connectivity approach we follow in MuleSoft, so normally our front-end developers use different technologies and tools for frontend development and to give users amazing UI experience, this is where LWC comes into the picture.

With the help of LWC + MuleSoft, we can integrate MuleSoft’s Experience layer with Salesforce’s LWC to get interactive and Lightning UI experience.

DEMO

Step 1:

I have designed a very basic API Specification, in which I’ve created endpoint movies and two HTTP methods.

Step 2:

I have implemented the API Specification in Anypoint Studio 7.6.0.

Step 3: 

I have implemented the GET method. Similarly, you can extend for your entire API-led Connectivity.

Step 4:

Login into Salesforce Platform -> Go to Accounts

Step 5:  Select the default Abbott…

Step 6: 

You can see the 4 buttons on my Home page. This is a very basic representation. You can customize it as per your needs.

On clicking GET, the request is redirected to the MuleSoft Application deployed on Cloudhub to get the response and LWC will display the response back.

Response on clicking GET Method. You can see the results of the GET method of the movies API which is invoked 

Also, MuleSoft has an Accelerator Service Cloud LWC.