Introduction To Lightning Web Components
Lightning Web Components are Custom HTML elements built using HTML and modern JavaScript. It is a Programming model based on modern web standards
LWC Vs Aura
Lightning Components can be built using two programming models: Lightning Web components and Aura Components.
Lightning Web Components use core Web Components standards, whereas Aura is a Framework. Although there is a functional difference, LWC can co-exist and interoperate with Aura Programming. To the end-user components built by these two different models appear to be the same.
In the below example we have built two lightning cards, one by LWC and the other by Aura. We notice there is practically no difference between the two.
Why did we need frameworks and what changed now?
Until recent year’s web standards were not evolving at a rapid pace, they offered only limited features, which developers needed to build a large scale web application i.e.
rendering engine - It parses HTML, XML, and CSS documents, and the final layout is generated & displayed on the User Interface. In other words, it takes HTML code and interprets it into what you see visually.
standard elements - just as the name implies they are the standard reusable elements,
events -JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page, and
a core language (ECMAScript 5). An application could not be built on web Components because of the following shortcomings:
Rendering wasn’t optimized for continuous UI transformation.
Standard UI elements were scarce and the standard didn’t support the creation of custom elements.
-
The core language lacked modern constructs to write large and modular enterprise-class apps at the client-side (modules, classes, promises, decorators, etc).
Multiple Frameworks came up to fill the gap Aura, Angular, and React are to name some. They provided language extensions to support development i.e. modules (AMD and CommonJS), promises, classes, and other general utilities. Different frameworks introduced different component models and HTML templating approaches. Frameworks became different languages; as a result, skills were not transferable. Components written in different Frameworks are not interoperable.
Web Stack of 2019 - more standards, less framework
The need for coexistence, interoperability, and standardization led to the invention of a new set of standards in the community, the idea was to get rid of the layer of abstraction provided by the frameworks and the new task of the framework was to no longer to fill the gap but to provide a thin layer of specialized services for User Experience.
Take a look at the picture below to compare how web standards have changed over the years. All the things that frameworks like Aura had to do are now shifted to Web Standard.
The Lightning Web Components provides a layer of specialized services on top of the core stack, which includes:-
1. The Lightning Base Components
2. Lightning Data Service
3. User Interface API
How can I create a Lightning Web Component?
At the current time, LWC is not supported in the Developer Console. To develop Lightning web Components you will need an IDE tool with sfdx plug-ins - which enables interaction with salesforce org, among many other things. The trailhead module here walks you through the setting up of the Salesforce DX i.e. the tools required for developing and also in the module we will create the "Hello World" Component, which will get us started.
0 Comments
Have an idea? Let’s hear it.