Skip to main content

Sneak Peek: Lightning Web Components

With latest announcement of Lightning Web Components, Salesforce development ecosystem (Lightning Platform) moves one step closer to using web standards of UI development. It is definitely quite welcome move, as it helps in learning and utilizing skills which are not confined to Salesforce ecosystem.

You must read this official Salesforce blog post to get more background details on why and what of lightning web components.

Background

User interface development has evolved drastically in past decade. With introduction of AngujarJS (2010), javascript based front end development became more modularized and then with React (2015) it became much faster, lightweight and component driven. So, front end layer is no longer confined to lightweight ui and graphics. Instead, with Single Page Applications (SPA), you can have pretty much an entire application running on browser (serverless).

Web Components

"Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps." - Mozilla

In short, prior to web components, one had to utilize an external library/ framework (like Angular, React etc.) and build your application on top of it. So essentially, your application runs on top of the external library/ framework and which in turn runs on the browser.


With latest innovations within web development world and addition of custom elements, shadow DOM (don't confuse with virtual DOM), and content template element, browsers are now equipped to execute custom web components themselves, without needing any external library.



It can be related to running a video using HTML video component vs using Adobe Flash for running videos (not quite literally).

Lightning Web Components


Lightning web components, leverages these new web standards (or browser improvements) and allows developers to create web components which can work within Salesforce Lightning platform.

Remember, web components allow you to combine UI and processing. To create a web application, you still need security, access to server services/ data. This is where Lightning web components come into place. Salesforce Lightning web components provides these additional capabilities (security, lightning data service). With these, we can create standard web components which can interact and work with Salesforce Lightning platform.

Additionally, lightning web components can leverage lightning base components (already built on web components), enhancing overall application performance.

Lightning components vs Lightning web components

Usage

Similar to custom lightning components, lightning web components can be utilized to create standalone components which can be embedded within
  • Lightning Applications
  • Custom lightning components
  • Visualforce page (using lightning out)
  • Lightning components *
* Info: I am able to embed lightning web component within a custom lightning component and then embed this custom lightning component within lightning community page. Awaiting more details around LightningComponentBundle targets

Custom Lightning Components vs Lightning Web Components

So, what is the difference between Custom Lightning components (something that has taken a significant portion of everyone's time in past 3-4 years) and Lightning Web Components. One word answer is Framework.

Lightning components utilize Aura framework for development and execution of Lightning components. Aura framework can be placed in same stack as Angular, React, as it provides the nuts and bolts to run your lightning components.

Lightning web components, on other hand utilize browser provided features for general component scaffolding along with Salesforce Lightning web components framework (which provides features related to security, service integration and base lightning components). As a large portion of this is now native within browser, there is an obvious cost saving in terms of processing overhead.

To put it simply, in above infographic, the blue blocks represents the custom layers running on top of browser (javascript engine) to make a lightning components work. In middle-left you can see a big chunk which represents Aura framework (custom). On middle-right, the orange block, represents the web component implementation within Browsers (native).

Advantages

As lightning web components utilize more of native browser features and capabilities they are:
  1. Compliant to web standards
  2. Lightweight
  3. Memory efficient
  4. Fast
  5. Easier to learn and Transferable knowledge

Considerations

For most part, all mainstream browsers support these web standards. However, there is still come catching up to do. For e.g. Edge still do not fully support all these web standards (totally clueless about IE's support for these standards). So, if your organization still uses one of the older browsers or older versions, Lightning web components may not be useful right away.

(Update Dec 15): As pointed out by Diego Ferreiro Val, Lightning web components works on all mainstream browsers, down to IE11.

For more details on browser support of web components, refer https://developer.mozilla.org/en-US/docs/Web/Web_Components#Browser_compatibility

Open questions

There are still some unanswered questions here:
  • As we know Lightning Experience itself is built on top of Aura framework. Is Salesforce planning to re-write entire Lightning experience with newer Lightning web components? I'm sure the additional performance and memory efficiency will be more than welcome
  • Would lightning web components become latest de-facto of publishing packages on AppExchange?
  • More importantly, with server side rendering of visualforce pages and client side handling of lightning web components, can there is a mixed model to utilize best of both the worlds?
  • Most important, would it help load lightning experience home page faster? (pun intended)

Further Learning

For most part, as Lightning web components utilize HTML web components, documentation for that can be found fairly easily.

Following are few learning resources:

https://www.webcomponents.org/introduction

https://developers.google.com/web/fundamentals/web-components/customelements
Labels:

Comments

Post a Comment

Popular posts from this blog

Quick Tips: Salesforce default Images

Well, I'm sure a lot of you still rely on using out of the box salesforce images for displaying quick icons within formula fields or even using them within your Visualforce pages. Lately, I realized that a lot of earlier resources are no longer accessible, so I tried to quickly extract all images from Salesforce CSS files and provide a quick reference here. Please note, I've referenced all images from SF servers directly, so if anything changes, the image should stop rendering here. As these images are completely controlled by Salesforce, and in case they change anything, it might lead to image not being accessible. Image path Image /img/samples/flag_green.gif /img/samples/flag_green.gif /img/samples/flag_red.gif /img/samples/color_red.gif /img/samples/color_yellow.gif /img/samples/color_green.gif /img/samples/light_green.gif /img/samples/light_yellow.gif /img/samples/light_red.gif /img/samples/stars_100.gif /img/samples/stars_200.gif /img/samples/stars_300.
5 comments
Read more

Lightning: Generate PDF from Lightning components with in-memory data

I'm sure as everyone is diving into lightning components development, they are getting acquainted with the nuances of the Lightning components framework. As well as, its current limitations. Being a new framework, this is bound to happen. Although we have our users still using salesforce classic, we have started using lightning components framework our primary development platform and Visualforce is considered primarily for rendering lightning components within Classic Service console. Recently, while re-architecting a critical module, we encountered a problem wherein we needed to generate PDF from lightning components. Now, being Javascript intensive framework, it has limited room for such features (may be included in future roadmap). As of now, there is no native feature within the lightning framework to do so (at least I didn't find anything). Common Scenario - Create Visualforce page to retrieve data and generate PDF For scenarios where the data exist within Sa
2 comments
Read more

Quick Tips: Setup SFDX Manually without Admin access

We all have faced challenges while working in different enterprise environments, where there may be lot of controls/ checks/ red-tape to get by. In such situations, getting access to simple tools (even git) can take lot of time. Note: This tutorial is to be followed at your own risk, as it may not be complaint to your organization's IT policies. What is SFDX? SFDX is a command line utility for managing salesforce builds/ deployments. Being command line, it can be easily embedded to automation chains, to help build fully automated build and deployment processes. To get started, refer  https://trailhead.salesforce.com/en/content/learn/trails/sfdx_get_started Setup SFDX on Windows machine without admin access As you may have already realized, SFDX installation needs admin access to one's machine. Which may be a luxury a lot of developers may not have. So, i tried to provide a step-by-step guide to setup SFDX on your computer without any admin access Steps: Note:
1 comment
Read more