Salesforce has recently come up with Lightning web components, as part of Spring 19, prerelease. It is a new programming model based on modern web standards which allows the developer to build Lightning components. The webstack has evolved in the past 5 years, starting from 2014. Let us try to understand the importance of Lightning web components.
First, we understand the challenges faced by the traditional web stack.
Challenges Faced by Traditional Web Stack
The challenges faced by the Lightning web contents are:
- Web was not providing the features required by the framework and this resulted in lack of innovations.
- It lacked the full stack required by the developers to build large scale web applications.
- Language extensions, templates and component models all provided by the framework and not the platform provided.
- Proliferation of frameworks only led us into fragmentation.
Apps and Components are not interoperable. - Difficulty in transferring skills and ramping up of developers.
- No continuous UI transformations.
- Lesser standard UI elements and no support for custom UI elements.
Now, we come to “Why Lightning Web Component?”.
Why Lightning Web Component?
Lightning web component is the Salesforce implementation of the new breed of lightweight frameworks based on new web stack, 2019. This ensures exceptional level of performance for the LWCs.
This is what Salesforce thinks about Lightning Web Components:
“With Lightning Web Components, we are giving developers a standards-driven JavaScript model for building enterprise apps on Lightning. Every time we release a new platform capability we see an acceleration of innovation in our 150,000 customer base, and we are excited to see what our community of developers will do with Lightning Web Components.”
Mike Rosenbaum, EVP of Product, Salesforce
LWC uses some of the features available in the ECMAScript7 and beyond such as:
- Custom elements and templates
- Shadow DOM
- Other language constructs
- Decorators and modules
Lightning web component offer a layer of specialized services on top of the core stack and these are:
- Base Lightning Components
- Lightning Data Services
- User Interface APIs
Base Lightning Components
This a set of over 70 UI components to build custom elements.
Lightning Data Services
This provides the declarative access to Salesforce data and metadata, data synchronization and data caching.
User Interface APIs
This is for enhanced productivity gains for metadata awareness of Base Lightning components and Lightning Data Services.
Let us delve with cutting edge advantages of Lightning Web Components:
Cutting edge advantages of Lightning Web Components
Some of the advantages for Lightning Web Components (LWC) are:
- Interoperability
- Performance
- Referential Integrity
- Ease of Use
Interoperability of Lightning Web Components
It is possible to embed the Lightning Web Components inside the Aura Components but Aura components may not put inside LIghtning component. They help to access the same underlying services and communicate with events. Lightning web components and Aura Components can be used to build apps. Components used in building these apps can interoperate and work side by side, in the same app.
Performance
The Lightning Web Components significantly outperforms the Aura Components, which were earlier known as Lightning components for better user experience. Since the Aura components were built on Aura framework, a layer of abstraction was added or more code. On the contrary, LWCs are based on native web standards, built-in to the browsers and hence no extra code is needed to execute and it requires no complex abstractions to run on the browser.
Referential Integrity
Referential Integrity in Lightning Web Components is ensured by importing of static schema elements. This ensures the LWCs are made metadata aware. This means that no one will be able to delete any of the objects or fields, present in the Javascript code.
Ease of Use
It is possible to deploy LWCs, after development with just clicks – not by code to the application developed.
Let us now throw some more insights on interoperability of Aura and Lightning web components.
Interoperability with LWCs and Aura Components
The Lightning Web Components address the major concern of the developers for application currently in the development stage. LWCs seem to be closer to Javascript.
Both Aura and LWC components can exist on the same page and can communicate with each other, through events but with some restrictions. The more Aura components are converted into LWCs, the more is the increase in the performance.
You can gather more knowledge on LWCs with the following links:
Introducing Lightning Web Components
https://developer.salesforce.com/blogs/2018/12/introducing-lightning-web-components.html
Introducing Lightning Web Components Recipes, Patterns and Best Practices
https://developer.salesforce.com/blogs/2018/12/introducing-lightning-web-components-recipes-patterns-and-best-practices.html
Example Lightning web component
Scenario :
I have a requirement where I was creating sObject record multiple times with all the fields, for that I created custom record page web component.
Description about component :
Component uses a child component for lookUp type fields named as LookUp .
“LookUp” Lightning Web Component
Below is the Lightning Web Component for recordPage
Conclusion
We conclude to say that as the web stack has evolved in the past 5 years, from 2014 to 2019. LWCs is a new programming model based on modern web standards which allows the developers to build Lightning components. Lightning web component offers a layer of specialized services on top of the core stack.
One the best cutting edge advantage of LWCs is that of interoperability with the Aura components. Both the components can exist on the same page and can communicate with each other, through events – but with some restrictions. As Aura components are converted more into LWCs, there is a chance of increased performance.
Akshay Dhiman
Chief Technical Officer
Akshay Dhiman, the CTO of Cloud Analogy, has been a standout and successful Salesforce Platform Developer for years. He has a rich experience in Salesforce Integration, JavaScript, APEX, VisualForce, Force.com Sites, Batch Processing, Lightning, PHP, C++, Java, NodeJs, ReactJs, Angular 8, GraphQL, React Native, Web Technology, and jQuery.Hire the best Salesforce Development Company. Choose certified Salesforce Developers from Cloud Analogy now.
