At the beginning of the Salesforce Development times, developers used Visual Force. An HTML Tag-based mark-up language to develop their Visual Force web pages and Apex to control the internal logic. But these HTML based Visual Force standards were not compatible to build large scale enterprise solutions and complex applications. A major announcement for the UI development world in Salesforce, the company introduced Lightning Web Components in December 2018. Now open-source, Lightning Web Components certainly comes one step closer to standardizing development on the Salesforce lightning platform. The new platform is a breakthrough in terms of leveraging web standards.
Why Did Salesforce Launch Lightning Web Components?
As a member of the ECMAScript Technical Committee, Salesforce has been the biggest proponent of standardizing the web in order to improve flexibility. The last 5 years have seen unprecedented developments in web standardization, thanks to W3C and TC39.
The list of standards developed includes:
- Web components
- Custom elements
- Templates and slots
- Shadow DOM
Overall, it is an extension or the practical enforcement of Web Components standard under the Salesforce platform, to essentially perform the same functions as what Lightning Components does. For the developers out there, learning a new programming language takes time, and gets exceedingly frustrating at times.
Why choose LWC over Aura?
As a matter of fact, it is
- Better Performance: Because of the no added abstraction layer, LWC is likely to render faster than aura components since performance is important to deliverability.
- Faster loading sites: Like lightning, LWC is faster in loading the developed components than Aura Components and is a lightweight framework that is built on web standards.
- More Standards, less proprietary: LWC has built-in browser security features from Web Components Standards, so the usage of out-of-the-box is more and less of customization. We all know that Aura is proprietary so with LWC, the more we know about web standards; the more we’ll have the skill that can be used in other technologies as well.
- Better security, better tasting, and better browser compatibility: With LWC, CSS, Script, and DOM Isolation are better and have more limited event scope. With each of these, we have more consistency in designing Components. LWC also supports Two-way data binding with which we can coordinate how data moves between Components.
- Versatility: LWC allows you to utilize full encapsulation.
Differences between Aura & LWC
If you’re an Aura expert, here’s a gist of notable differences you’ll find between coding in Aura and LWC:
- Bundle structure: LWC requires manual creation of a folder to host all your component files. Component HTML, JS, Configuration files are mandatory. CSS and SVG are optional.
- Naming Convention: The only noted difference in naming is while you’re referring component in another component. The new syntax uses kebab-case, instead of the camelCase ( <c-hellowrold> instead of <c:helloworld>) and the component must have a closing tag.
- Events: Unlike component or application events in Lightning Component, LWC used Standard DOM events.
- Lightning Locker: Lightning Locker is enabled by default in all custom LWC.
While this is not an exhaustive list, it gives you a small insight into how much change you might have to get accustomed to.
Composition strategies for using Aura and Lightning web components together
You can use LWC and Aura Components side by side, but Aura is the ultimate parent. An Aura Parent can contain both LWC and Aura components, but an LWC parent can only contain LWC components.
Interaction between Aura components and LWC is possible in many ways if they are nested or contained within a parent:
– interacting directly with child component attributes or through application and component events
– interacting with child component methods and properties exposed through public APIs
Both Aura components and LWC can send and receive data through LDS.
As of now, there is no mechanism of communication between Aura and Lightning web components that aren’t in the same hierarchy.
Migrating from Aura to LWC
Your org may be contemplating a migration strategy to move towards LWC. Before you decide on taking the first footsteps towards the new path, understand that the fundamentals of both the models are entirely different and it isn’t simply a line-by-line conversion. However, on the brighter side, it’s an opportunity to simplify, redesign and reorganize.
Take it one step at a time, and once you complete one migration you may be in a better position to understand the need for a larger effort.
For more complex migrations, the Lightning Web Components Developer Guide provides you with all the resources you need for considering the right migration path.
Of the looming questions regarding LWC, most developers want to see the best of both worlds scenario where they can make the most of VF’s server-side rendering and client-side handling by LWC.
For more blogs: click here