lightning web components Salesforce

The previous year, Salesforce developers launched Lightning Web Components (LWC), which replaced the original Aura programming as the new programming model for building Lightning components. LWC leverages the web standards developments of the last five years. It can operate in parallel to Aura and delivers better performance. LWC uses the latest JavaScript Frameworks (such as Node.js and React)  that makes it easier for any non-Salesforce developer to code. Furthermore, it’s both open source and Salesforce supported, making it a part of the progressive web development universe.

Earlier web stack & Aura limitations

Web standards of 2014 offered a limited base for the full stack that developers needed to build large scale web apps.

  1. A Rendering Engine
  2. Standard Elements
  3. Events
  4. A Core Language (ECMAScript 5).

This foundation was rather primitive and laden with imperfections. For example:

  • Non-optimized rendering for UI transformation
  • No support for custom elements creations in UI
  • Non-availability of latest constructs like modules, classes, promises, decorators to write large apps

Due to the lack of standards, Salesforce developed aura to come with its own component and modular programming model. This lets developers build enterprise-scale apps but it had come with its own challenges that developers faced when web standards progressed in the coming years.

Current Web stack and Salesforce LWC

Web standards of 2019 are designed with unprecedented levels of innovation and driven by the W3C/WHATWG and the ECMAScript Technical Committee (TC39) of which Salesforce is a member. The new standards include

  1. ECMAScript 2015 (6), 2016 (7), 2017 (8), 2018 (9) and beyond (adding classes, modules, promises, decorators, etc.)
  2. Web components
  3. Custom elements
  4. Templates and slots
  5. Shadow DOM

This standardization meant salesforce no longer needed proprietary elements in its components. The advantages offered by this latest stack are:

  • Common component and programming model
  • Easy to find developers with transferable skills
  • Inter-operable components
  • Better performance because core features are implemented natively in web engines instead of in JavaScript in framework abstractions

Salesforce implemented the frameworks built on current web standards when introducing Lightning Web Components. It made use of custom elements, templates, shadow DOM, decorators, modules, and other new language constructs available in ECMAScript 7 and more.

LWC Salesforce offers its services on top of the core stack as below.

  1. Base Lightning Components – A set of over 70 UI components all built as custom elements.
  2. The Lightning Data Service – this provides declarative access to Salesforce data and metadata, data caching, and data synchronization.
  3. The User Interface API –  This makes Base Lightning Components and the Lightning Data Service metadata connect, building productivity.

“LWCs are better than Aura Components due to the broader support of the underlying framework and Salesforce’s clever adaptations for its platform,” says James L. Novakoff, an AppCloud Lightning lead for Accenture and Salesforce Technical Architect.

Lightning Web Components vs Aura

  • LWC Salesforce is built on web standards with a minimal amount of “custom code” that represents the core Aura run-time. This means they are more secure (LWC adds CSS isolation, leverages native DOM support for better performance, and optimized JavaScript.
  • LWC Salesforce automatically provides polyfills for older browsers, rather than having code silently fail on previous versions of browsers. Additionally, LWC has component “types” that have no UI so they use no markup. It can export methods for other components to import with a single line of code.
  • Salesforce LWC has a richer API based on the UI-API for better performance and less Apex, which is a painless experience compared to Aura. API support for third-party APIs is also improved, allowing a developer to call code in a safe & secure manner.
  • Salesforce LWC supports Jest, so a developer can now write unit tests for client-side logic in a standard format. In Aura, a developer was expected to find his own testing framework. This helps improve client logic, the same way Apex unit tests help improve server-side logic.
  • Salesforce Lightning Web Components leverages knowledge of Aura and the general web standards, so developers with experience in web components can get into LWC faster. Porting most Aura components is a straight-forward process, since they can be converted almost 1:1.

 Ryan Ellis, SVP of Product Management, Salesforce, saysWith Lightning Web Components now open source, we’re empowering the community to build standards-based applications on any platform.”

LWC impact on Businesses

Productivity gains: LWC increases the performance of the apps significantly. This increases the team’s productivity, optimize operations across the business and build apps faster with the use of Salesforce LWC. Case study by Salesforce shows that there is a significant performance gain by shifting from aura to LWC, in the range of 2.6% to 63%.

A large talent pool of developers: By open-sourcing Lightning Web Components, Salesforce has bridged the gap between community innovation and CRM app development. Businesses can now recruit from larger talent pools to code and rapidly iterate on apps to run at enterprise levels of trust, scale, and performance.

Wrapping up

With LWC, the developer is using the latest programming model built for the current web stack. LWC is better in security, testing, browser compatibility, and performance. Salesforce Lightning Web Components are smaller in terms of script size. The components integrate seamlessly with the existing code and combined with salesforce metadata, businesses overall get an unprecedented level of productivity and performance.

To get more information and resolve your queries about LWC, contact us today as Cymetrix Software is a trusted Salesforce Partner in India and USA.