Business, Events

Salesforce made a major announcement in December last year: creating Lightning Components with modern JavaScript by introducing Lightning Web Components. A game changer into the Salesforce ecosystem and a new chapter for Lightning.

C-Clear Partners had the pleasure of hosting the Belgium User Group meeting around Lightning Web Components. We had the pleasure of having both Christophe Coenraets (Principal Developer Evangelist at Salesforce) and Pierre-Marie Dartus (Lead Software Engineer at Salesforce) present Lightning Web Components.

What are Web Components?

Web Components are a set of browser standards defined by W3C and ECMAScript Technical Committee (TC39) which is empowering you to create reusable custom elements. Its great power lies within the standardization efforts across different browsers. Allowing your browser to natively understand these custom components and providing benefits such as composability, reusability and maintainability.

Web Components consists of 3 core elements:

1. Custom Elements

JavaScript API’s allowing you to create custom declarative elements which can be used in your user interface

2. HTML Templates

HTML Markup which is reusable. <template> and <slot> elements allow you to create reusable HTML markup for custom elements

3. Shadow Dom

DOM encapsulation for markup and styles. Resulting in scoped sub-trees that is completely hidden from the outside. Allowing web components to work interoperable and controlling associated functionality

Information and examples can be found here: https://developer.mozilla.org/en-US/docs/Web/Web_Components

What are Lightning Web Components?

Lightning Web Components is the approach of Salesforce to create a lightweight framework based on web components. Hereby leveraging all benefits and using the core elements made available through Web Components. This lightweight framework created by Salesforce brings an additional layer of services:

• Base Lightning Components – UI components built as custom elements which can be reused and extended
• Lightning Data Service – Provides access to Salesforce data and metadata in a compact way. Including data caching (built-in caching!)  and data synchronization without the need of complex API calls towards the backend
• User Interface API – The magical layer which brings both the Base Lightning Components and Lightning Data Service together by making them metadata-aware

Which all results in substantial benefits mentioned earlier. But most of all the following three:

• Enhanced performance and stability: staying close towards standards which all most all browsers support means less overhead of complex frameworks, polyfills et cetera
• Productivity increase: what used to take 30 lines of code can now be solved in 5 lines of code
• Developer accessibility: staying closer to standards means that developers with knowledge around JavaScript and Web Components can more easily be trained and become part of the Salesforce team. Developer skillset is less framework-specific

This all sounds great but didn’t we just move towards Lightning and the Aura Framework?

Yes, we all embarked the journey and almost every customer of ours has made the move towards Lightning. A lot of customers and partners within the Salesforce ecosystem have made significant efforts by moving towards Lightning. Have you noticed that Lightning became faster and more reliable a couple of releases back (around Spring 18)? It sure did as Salesforce moved all of their base components towards Lightning Web Components.

The switch from Aura towards Lightning Web Components will happen faster and smoother. Aura framework brought JavaScript into the picture and Salesforce developers are already familiar due to the move towards Aura. Lightning Web Components will require a learning curve but it’s not as steep as it was with Aura.

The Lightning Web Components are interoperable with Aura Components. Meaning both can work together and can even talk to each other by events and thus exchange data.

Salesforce provided an excellent code repository containing a lot of code recipes and examples: https://github.com/trailheadapps/lwc-recipes It’s a great place and reference in getting started with Lightning Web Components.

So does that mean that we should start using it?

That depends. It’s a new lightweight framework which became GA with Spring 19. There are certain limitations which you need to take into consideration (documentation can be found at the official documentation). Consider the following questions:

• Are you starting a new project which is not impacted by the current Spring 19 limitations? Then yes – Developments can happen with Lightning Web Components
• Are you starting a new component which is not impacted by the current Spring 19 limitations? Then yes but note: event-driven architecture using pub/sub is not yet natively available
• Are you in the middle of a project using Aura components: stuck towards Aura components but you can consider creating small and lightweight Lightning Web Components

Summary

Salesforce keeps on improving and innovating on its platform at an incredibly fast pace. Lightning Web Components will reduce the developer skillset gap and will benefit from standards followed by (almost) all latest browser versions. We can’t wait to get familiar and help our customers in creating even faster and stable solutions!