LWC vs. Aura : Which One To Choose ?

Why Salesforce Introduce Aura Framework ?

At the beginning of the Salesforce Development times, before Aura Framework, developers used Visual Force, which is an HTML Tag-based mark-up language to develop their Visual Force web pages and Apex to control the internal logic.

But this HTML based Visual Force standards were not compatible to build large scale enterprise solutions and complex applications. So, developers needed something that could support the ongoing huge demand for web-based applications with complicated business logic.

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.

What is Lightning Component? – The Era of Lightning Aura

Salesforce Lightning Component also known as Aura Component is a user interface (UI) based framework for developing single-page mobile/desktop/web-based applications.

Benefit of using Lightning Components:

• It used to create apps using a standardized JavaScript framework.
• Components are simple to use, reusable, and customizable, which offers a robust and fast framework to work with.
• Lightning Component pages are higher in performance than their legacy counterparts like VfPages.
• Easy to create a responsive page or app with Lightning Component.

Why Did Salesforce Launch Lightning Web Components?

After Google has released Web Components to the Google Chrome browser, all the major web browsers like Firefox, Safari, or Edge started to adopt it faster. Salesforce Development had to keep up the pace and standardization’s of the Web Components according to the huge demand of the web Components across the internet.

The Lightning web component introduced in Feb 2019 is Salesforce’s new programming model built on modern browser improvements or web standards.

These web components help to create custom, reusable HTML tags for web pages & apps.

Lightning Web Components is an extension of Lightning Components, keeping all the good aspects of the famous Aura Framework

Lightning Web Components leverage the Web Components technology and DOM rendering to deliver unparalleled user experience through the pages.

Why Choose LWC Over Aura?

• Modern JavaScript development: The Aura Components programming model supports ES5 syntax and ES6 Promises. But if we want to use ES6 or later for development then LWC comes in highlight for modern JavaScript development.

Lightning Web Components JavaScript support includes:

• ECMAScript
  • ES6 (ECMAScript 2015)
  • ES7 (ECMAScript 2016)
  • ES8 (ECMAScript 2017)—excluding Shared Memory and Atomics
  • ES9 (ECMAScript 2018)—including only Object Spread Properties (not Object Rest Properties)
• Classes
• Modules
• Promises
• Decorators
• Web Components
• Custom Elements
• Shadow DOM

• Templates and slots

  • Easy to Learn : LWC is basically takes the form through native web standards that is in the browser. It means that no added abstraction layer like Aura Framework or any other framework, we only need standard JavaScript to develop.
  • Faster Sites & Better Performance : LWC is a lightweight framework which is built on web standards and because there is no added abstraction layer, LWC is likely to render faster than aura components since performance is important to deliverability.
  • Portability : Because LWC aligns with web standards and is open source (what we call LWC OSS), the components you create can easily work outside the platform. This means that you can write a component on the platform and reuse it somewhere else, for instance, in a non-Salesforce runtime. You have even more flexibility because can use base UI components and Salesforce Lightning Design System (SLDS) stylesheets outside of the platform, as they are also open source. Learn more about LWC OSS in the Build Apps with Lightning Web Components Open Source Trailhead trail.
  • Less Code : One difference between LWC and standard Web Components is the amount of code that you have to write to create a component. To create a component with LWC, you just write a few lines of code, and then the LWC compiler will transform that code, adding the necessary boilerplate code so that those become, at the end, Web Components. This empowers your teams to be more productive, maximizing the time developers can spend on more critical application logic or UX considerations and minimizing time-to-value for the business.
  • Enhanced Security and Browser Compatibility : LWC has built-in security features. Also, it has limited event scope and more CSS, Script, and DOM isolation that offers better security and browser compatibility of the apps.

Keys differences in Aura and LWC development

• Developer tooling :
  Unlike like Aura You cannot edit or develop LWC components in the Developer Console. You’ll need to use another integrated development environment (IDE), like Visual Studio Code (VS Code) because Salesforce has released an extension pack to make lwc development easier and faster.

• Standard syntax and files :
  conventions in Aura were specifics of the framework, whereas conventions in LWC are just standard HTML, CSS, or JavaScript. Whereas in Aura, you had a .cmp file, in LWC, you have a .html file. And whereas in Aura, you used custom Aura events, in LWC, you use standard DOM events.

• Performance improvements :
  In LWC, when you change a class property, the framework implicitly understands that a re-render is needed. The LWC approach improves the developer experience as it is more like JavaScript. Though the framework observes most property changes, there are two situations LWC doesn't observe by default for performance reasons: changes in array elements and changes in object properties. However, developers can explicitly declare that the framework should observe those changes by using the @track decorator.

• Lightning message service :
  In Aura, you use Application Events to communicate between components in different DOM hierarchies. The replacement in LWC is the Lightning message service. This service enables you to publish and subscribe to messages on a message channel. Lightning message service not only enables communication between LWCs in different DOM hierarchies, it also enables communication with Visualforce pages and Aura components.

• Lightning Data Services :
  The Lightning Data Service cache is shared among Aura and LWC components, which means all your components will synchronize if they use Lightning Data Service no matter which framework they use.

It is basically used to create, update, read and delete a record without any using Apex Code. Similarly, LWC can also leverage LDS by accessing data and metadata from all Standard and Custom objects.

Import from ‘lightning/uiRecordApi’

• createRecord(recordInput)
• updateRecord(recordInput)
• deleteCreateRecord(recordInput)
• getRecord(recordInput)
• LWC provides a layer of Salesforce services on top of the core stack which includes User Interface APIs, base lightning components(LC) and Lightning Data Service(LDS). We can compose Aura components from Lightning web components, but can’t do the vice versa of this. ## Interoperability between Lightning Web Components and Lightning Components
• Aura and LWC can be able to communicate using Public API’s and Events.
  • LWC can be embedded inside Aura Components, but Aura Components cannot be embedded inside LWC.
  • To dig deep into this topic, Salesforce has provided a great article on this Interoperability.

You can rename the current file by clicking the file name in the navigation bar or by clicking the Rename button in the file explorer.

Syntax Differences can be as follows:

Data Binding Behavior Differences With Aura:

• Aura has two forms of expression syntax for data binding. {#expression} (Unbound Expressions) Data updates behave as you would expect in JavaScript. Primitives, such as String, are passed by value, and data updates for the expression in the parent and child are decoupled. Objects, such as Array or Map, are passed by reference, so changes to the data in the child propagate to the parent. However, change handlers in the parent aren’t notified. The same behavior applies for changes in the parent propagating to the child.

{!expression} (Bound Expressions)
Data updates in either component are reflected through bidirectional data binding in both components. Similarly, change handlers are triggered in both the parent and child components.

• In LWC, The data binding between components for property values is one-way. To communicate down from a parent component to a child component, set a property or call a method on the child component. To communicate up from a child component to a parent component, send an event. For more information, see Set Properties on Child Components.

Conclusion

LWC brings with it all the good things about modern JavaScript and Web Components in a lightweight framework.

If your Planning to Migrate your Org from Classic to Lightning, then you should go for LWC to build custom pages as per better performance. As it provides great UI Performance on browsers which enhances the latest features of JavaScript.

LWCs are the future of lightning development.

For the most part, if you are building new functionality consider using LWCs to benefit from the increased native operation in the browser and performance. Just starting? LWCs are the future.