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 :
- Lightning Web Component Framework: framework’s engine
- Base Lightning Components: provides 70+ custom elements
- Salesforce Bindings are a set of specialized services that provides access to Salesforce with full caching and data while following all security and permissions.
Features of LWC:
- Default Data Binding: Like its predecessors’ Aura, LWC by default supports data binding
- CSS isolation (taking advantage of DOM shadow)
- 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
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.
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
The below diagram shows a typical LWC file structure.
In order to access the sample LWC application, you can visit:
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.
I have designed a very basic API Specification, in which I’ve created endpoint movies and two HTTP methods.
I have implemented the API Specification in Anypoint Studio 7.6.0.
I have implemented the GET method. Similarly, you can extend for your entire API-led Connectivity.
Login into Salesforce Platform -> Go to Accounts
Step 5: Select the default Abbott…
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.