Lightning Web Components

Lightning Web Components are lightweight custom elements based on native HTML and Modern JavaScript.

What Are Lightning Web Components

Lightning Web Component or LWC are custom elements built using native HTML and Modern JavaScript. It uses core web components standards and latest ECMAScript 6, 7, 8, 9 and beyond.

Salesforce provides an open library known as Lightning Web Component Open Source, which can implemented in any platform.

LWC has three main keys:

1. Lightning Web Component Framework: framework’s engine
2. Base Lightning Components: provides 70+ custom elements.
3. Salesforce Bindings are set of specialised service that provides access to salesforce with full caching and data, while following all security and permissions.

What is Framework’s engine?

It is the core LWC library, which is being used in Salesforce, which is also provided by Lightning Web Component Open Source.

LWC can be considered as Modern JavaScript Tool like Web-pack, Type Script, Babel etc.

LWCs Features

• Default Data Binding: Like it’s predecessors, LWC by default supports data binding.
• CSS isolation (taking advantage of DOM shadow).
• Use of Web Component (based on Modern JavaScript).
• Usage of DOM events which is available in every browser.
• Proper Component life-cycle events for better hold for developers.
• Easy Third party JS libraries (making it more attractive)
• Usage of JEST framework for unit test.
• Easy HTML template directives.
  

Advantages of LWC

• More secure as it leverages native DOM support for better performance and uses more web standards, JS can be optimised more better.
• Auto Poly-fill for older browsers.
• New component “types”. (E.g: Service Components).
• API based framework.
• JEST support
• Better security, more enhanced testing
• Browsers compatibility with better performance
• Smaller components which makes it quick and fast.
• Lightning Web Components are much faster then aura components.
• Utilises browser APIs for rendering and other UI actions.

Components Life-cycle

Lightning Web Component whole life-cycle is managed by the framework.

Basic steps of the life-cycle

1. Creation of the component
2. Then insert in DOM and Render.
3. Destroy the component and cleans DOM.

Get Started with Lightning Web Components

To install Lightning Web Components and create your first app, use the open source lwc-create-app tool.

$ npx lwc-create-app my-app
$ cd my-app
$ npm run watch

Conclusion

So, there are many other Modern JavasScript Libraries like React, Angular and many more. LWC has just started but it is not stopping, because is continuously providing more and more better features

• It also follows all Modern Concepts provided by W3C/WHATWG and ECMAScript.
• It also make usage of concepts like promises, shadow DOM, Templates, decorators, modules and More of ECMAScript 7 and it’s latest versions.
• As we have seen in past Web Standards provided very least features and all hard had to be done by Third Party Libraries to bring best out of JavaScript.
• But In last 5 years Web Standards has added more and more features attracting more developers, and applications to implement it.
• Now Web Standard has many features, which helps other framework and doing hard work instead of them.
• Now other framework just have to work on top of this brilliant layer, and move on to more complex and new features.

Reference

Dev Guide: LWC Dev Guide
GIT: https://github.com/salesforce/lwc

Webkul is proud salesforce partner and offering salesforce consulting services.