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.
In 2014, Salesforce launched the Lightning Component Framework, and it changed the Salesforce Programming way forever. Lightning Component Framework brought Aura Framework which used a component-driven model that was brilliant in developing large-scale enterprise applications. Since the time the web technology is being changed every day, seeing an unprecedented change in JavaScript Frameworks, redefined way of creation of a web page, and more. Lightning Component also has to become Lightning web components to accommodate the newest technologies in Salesforce development.
Why Did Salesforce Launch Lightning Web Components?
When Lightning Components was first launched by Salesforce, web standards were not a thing. Moreover, developing large-scale client-side apps came with a lot of challenges. Apps and components written in different frameworks were not interoperable even though they’re all based on the JavaScript. The frameworks provided a high level of abstraction, making each one so different and forcing developers to choose one path. This made skills transfers and ramp-ups in organizations quite hard.
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:
- ECMAScript
- 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
- Easy to Learn: LWC is basically taking the form through native web standards that are in the browser. It means that no added abstraction layer like Aura Framework or any other framework, we only need standard JavaScript to develop.
- 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
-
Nested Composition
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.
-
Side-by-side composition
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
– send and receive information through JavaScript CustomEvent objects
– 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.
Choosing migration patterns is much easier for smaller components. For those that have no JavaScript at all, you can simply swap the Aura HTML Syntax with its Lightning web counterpart as you go. Redesign, then rebuild. For larger components, you may need to start from the bottom-up and understand how to manipulate deeply nested hierarchies.
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
Author Bio
