While Salesforce Lightning is an entire component framework and platform for developing enterprise
applications, most of the other component frameworks concern themselves mainly with the "view"
portion of the application. Let's see from a high level how they compare.
Lightning is different for those above in that it was designed first and foremost for enterprise
developers and all of the power of the Force.com platform. Unlike other component frameworks where
you typically have to roll your own backend functionality, authentication and connectivity, with
Lightning you simply expose server-side Apex functionality with a single annotation and then
instruct the component to utilize it. That's it! Now you have access to workflow, data validation,
queues, bulk processing, reporting, dashboards and much, much more.
Lighting components encapsulate functionality, markup and CSS into reusable, functional units
that can be assembled into larger components or complete applications. Plus, with a simple appHostable tag you can expose your component in
Salesforce1 and instantly become a mobile application!
In addition to creating entirely new applications, with the Lightning Extensions Pilot, you can
write components that override standard Salesforce functionality. Lightning Components will
allow you to define your own functionality for parts of the standard Salesforce interface
Web Components is a suite of different technologies allowing you to create reusable custom
Concepts & Usage
- As developers, we all know that reusing code as much as possible is a good idea.
- Web Components aims to solve such problems— it consists of three main technologies, which
can be used together to create versatile custom elements with encapsulated functionality
that can be reused wherever you like without fear of code collisions.
you to define custom elements and their behavior, which can then be used as desired in
your user interface.
define custom elements and their behavior, which can then be used as desired in your
- HTML templates: The <template> and <slot>
elements enable you to write markup templates that are not displayed in the rendered
page. These can then be reused multiple times as the basis of a custom element's
The basic approach for implementing a web component generally looks
something like this:
- Create a class or a function in which you specify your web component
- Register your new custom element using the define() method, passing it the
element name to be defined, the class or function in which its functionality is
specified and optionally, what element it inherits from.
- If required, attach a shadow DOM to the custom element using attachShadow()
method. Add child elements, event listeners, etc., to the shadow DOM using regular DOM
- If required, define an HTML template using <template> and <slot>. Again
use regular DOM methods to clone the template and attach it to your shadow DOM.
- Use your custom element wherever you like on your page, just like you would any
regular HTML element.
Lightning Web Components:
Lightning Web Components is a new programming model for building Lightning components. It is the
Salesforce implementation of that new breed of lightweight frameworks built on web standards. It
leverages custom elements, templates, shadow DOM, decorators, modules and beyond.
Lightning Web Components provides a layer of specialized Salesforce services on top of the core
- The Base Lightning Components, a set of over 70 UI components all
built as custom elements.
- The Lightning Data Service which provides declarative access to
Salesforce data and metadata, data caching and data synchronization.
- The User Interface API, the underlying service that makes Base
Lightning Components and the Lightning Data Service metadata aware, leading to substantial
- Declaration: You can easily declare components on your
page that are ready to go.
- Composability: You can compose applications using
smaller chunks of code, with the Shadow DOM.
- Reusability: You can import, use and reuse elements
- Maintainability: Compartmentalized, reusable code is
the best way to maintain code readability; it reduces overall application size and
- Extensibility: Browser elements or custom web
components can be extended with the custom elements API.
- Scoping: Shadow DOM provides DOM and CSS scoping
where styles don't leak out and component DOM is all local. You define the element API
inside your component and it doesn't leak into the global scope.
- Interoperability: Native web components are
interoperable at the browsers lowest level which is DOM.
- Productivity: Using already built components and
iterating on top of them lets us develop faster and more productive.
- Accessibility: By using and extending existing
browser elements, the default browser accessibility comes with it.
Lightning Web Components will be generally available in February 2019 and will run in any
Salesforce org. To create a Lightning Web Component, customers will need an Enterprise,
Unlimited, Performance or Developer Edition org.