Chapter 1 : Introduction to Lightning Web Component

Preface

In this chapter I will go through:

What is Web Component
What is Lightning Web Component
2014 Web Stack
2019 Web Stack
Powerpoint of Lightning Web Component

What is Web Components

Web Components are a collection of standards which are working their way through the W3C and landing in browsers as we speak. They allow us to bundle markup and styles into custom HTML elements. What’s truly amazing about these new elements is that they fully encapsulate all of their HTML and CSS. That means the styles that you write always render as you intended, and your HTML is safe from the prying eyes of external JavaScript.

The idea behind web components is to create dynamic interface elements without writing custom JavaScript code or building your own libraries. Modern web frameworks such as React, Angular and Vue already using this concept.

Web components are based on four main specifications:

Custom Elements – The Custom Elements specification lays the foundation for designing and using new types of DOM elements.
Shadow DOM – The shadow DOM specification defines how to use encapsulated style and markup in web components.
ES Modules – The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way.
HTML Template – The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.

What is Lightning Web Component

It is a new programming model based on modern web standards. Now we can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components.

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce.

Advantages of LWC:

Enhance productivity: Use modern language of web: It uses HTML5, ES6, CSS3 which utilize browser APIs for rendering the UI and it give users a seamless experience.
Web components use browser’s native API support to render UI which reduces the overheads of using other JS libraries and CSS.

Built for performance: More code executed by browser instead of JavaScript abstractions for blazing fast experience
Compatible and easy to use: Run side by side with existing Lightning Component. It is a perfect marriage between aura and LWC. They have perfect compatibility

2014 Web Stack

In 2014 web was not innovating at rapid pace. All the features which framework required from platform were not provided. Lightning components had extremely limited web standard functionalities. Component model, templatizing, writing modules, writing languages with extensions everything was done by framework.

Multiple framework came up to fill the gap. Aura framework, Angular, and React were part of that initiative, where they pushed web standards to build enterprise applications and these all frameworks became languages.

Disadvantage of Aura

Aura — was introduced at Dreamforce in 2014. It was supposed to be the modern-day follow up to Visualforce development, and it was built for speed and performance. The lightning component framework has its own component model and its own modular programming model but it provides such a high level of abstraction that it feel like different languages.

Recent Web Stack of 2019

Google began to look into new concept known as Web Components to the internet community. The idea was to bring new set of standards that are more flexible and powerful to web developers.

A lot of the functionality Salesforce had built into the Aura framework could now be taken out of their processes and offloaded onto the browser itself using Web Components. Web standard has now a rich set of functionalities, supported by Native Browsers such as Templating, Shadow DOM, Custom Element, etc.

Salesforce created the Lightning Web Component framework to do so.

Lightning Web Components

Lightning Web Components are able to utilize the web browser standards while still having the ability to access Salesforce data and work within the existing Lightning Experience UI. This results in faster speeds and processing of Salesforce applications because the web browser has direct access to the processing capability of your computer.

Lightning Web Components can now expand its reach to a new demographic of developers who have never experienced Salesforce before.

The core stack got the updated. Many features that required frameworks now come standard: We no longer need a proprietary component model, proprietary language extensions, proprietary modules, etc.

Lightning Web Components provides Salesforce services on top of the core stack which

includes,

Base Lightning Components
Lightning Data Service
User Interface API

LWC has open the world to us with many Benefits:

More standard, less proprietary
Common Component Model
Transferable Skills
Easier-to-ramp-up for developers
Better Performance

Coexistence And Interoperability

Aura to LWC is not migration but evolution.Aura and LWC can coexist. When aura is sending event to LWC then we are converting that aura events to standard modern javascript events so that LWC starts understanding that.

Aura components and Lightning web components can coexist and interoperate, and they share the same high level services:

Aura components and Lightning web components can coexist on the same page
Aura components can include Lightning web components
Aura components and Lightning web components share the same base Lightning components. Base Lightning components were already implemented as Lightning web components.
Aura components and Lightning web components share the same underlying services (Lightning Data Service, User Interface API, etc.).