Difference between LWC and Lightning Components

Salesforce Lightning makes it easier to build responsive applications for any device, and encompasses the Lightning Component framework and helpful tools for developers.

New Features in Lightning:

Here are some of the new features that we are most excited about:

  • Experience. Modern user interface optimized for speed and responsive design for all devices (one code base for desktop, tablet, phone, and watch screens).
  • Lightning App Builder. A drag-and-drop authoring tool for easy app building and customizations. Developers can work with both out-of-the-box components and custom-built components.
  • Lightning Component Framework. Tools that allow developers to build reusable components, customize the Salesforce1 Mobile App, and build standalone apps. As a framework built right into the platform, it liberates the UI from the limitations of Visualforce UIs that are non-responsive in their design.
  • Design System. A responsive CSS framework, style guides, and modern enterprise user experience best practices. Salesforce is working to educate and guide developers on modern usability.
  • Lightning Connect. An integration tool that makes it easier for Force.com apps to consume data from external sources that conform to the OData spec.

Lightning Component Framework

Lightning Component Framework supports partitioned, multi-tier component development that bridges the client and server. It uses JavaScript on the client side and Apex on the server side. The benefits include an out-of-the-box set of components and interfaces, event-driven architecture, and a framework optimized for performance.

 “a single, integrated framework for developers to create rich, responsive applications that could be seamlessly “plugged in” anywhere in the UI.”

Advantages of using the Lightning Web Component Framework

Why Lightning Web Component
  • 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.
  • 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 lightweight framework which 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; more we’ll have the skill that can be used in other technologies as well.
  • Common Components/Service Components: We can now write components that have no User Interface in LWC, and those components can be reused in other components which are more efficient than Static Resources.
  • Easier to ramp for developers: No additional framework is needed to learn in order to develop LWC and hence transition for the developers is a lot easier.
  • Better security, better testing and better browser compatibility: With LWC, CSS, Script and DOM Isolation are better and has 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
Lightning Web Components - An Updated Framework for building Salesforce  Lightning Apps | Salesforce Ben
web stack transformation

Lightning Web Components utilize standard tech like CSS, HTML, and updated JavaScript without requiring a set framework, incorporating the latest innovations in JavaScript, including Shadow Document Object Model(DOM), custom elements, and web components (ECMAScript 7 is specifically the updated JavaScript language used).

Reusing Aura Framework for LWC Development:

We all know about Lightning Data Service (LDS) in Lightning Components. 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.
image 28

Since LWC has come into existence we can now create Lightning components in the following ways:

  1. Aura components– which are also known as lightning components.
  2. Lightning Web Components– the newest way to create lightning components.

First thing we will know about what web components are. Web Components consist of four separate technologies that are used together:

  1. Custom Elements:The HTML elements with custom templates, tag names like and behaviors are made with a set of JavaScript APIs. HTML Living Standard specification has definitions of these Custom Elements.
  2. Shadow DOM:We use this for isolating CSS and JavaScript which could be like. Living Standard DOM specification has the definitions of this.
  3. HTML templates:User-defined templates in HTML are rendered only when called upon. HTML Living Standard specification has the definition of the tag.
  4. ES Modules:The ES Modules specification defines the inclusion and reuse of JS documents in a standard based, modular, performant way.