LWC - Lightning Web Component [ 🌩️ Vs ⚡ ]
Some major differences that we will discover when building Lightning Web Components (LWC) on Lightning Platform compared to The Open Source Version (OSS).
🛠️ Tools
Lightning Platform :
Developing on Lightning Platform we prefer VScode with Salesforce Extensions to build Lightning Web Components (LWC) and Salesforce CLI to deploy components to an org. Now Local Development for the Lightning Platform, that dramatically decrease the development time to build apps with LWC.
Open Source :
There is no official support for any IDE. So till date no IDE can provide facility like Automated import or Code Completion type of features But we can use some generic tools like ESLint or Jest. So you need to prepare a Tool Preference Package that helps to build LWC in open Source version. We can prefer lwc-create-app, which is an open source tool that bundles common development activities such as local development, creating production builds, unit testing and more, i.e tool for setting up your Lightning Web Components projects. Its preferable as It mostly follows the pattern of other popular UI framework tools like Vue CLI or create-react-app. * Nodejs (node 10.x) is mandatory to create a LWC app.
💦 Pre-build UI components
Lightning Platform :
Base Lightning Components are some pre build UI components available in Lightning Platform for LWC development. LWC represents the core technology to build Lightning Web Components. Such base Components are Lightning web components that are built using LWC, with some special flavor associated to leverage certain specific functionality that running on Lightning Platform.
Open Source :
LWC Open Source in combination with the CSS (framework) of our choice makes it really easy to build your own UI components. Depending on our CSS needs we will have to make decisions about Shadow DOM.
🛢️ Data Accessing
Lightning Platform :
On the Lightning Platform it is relatively simple to access data — we either use Apex or pre-defined Lightning Data Service methods to access data within our Salesforce org.
Open Source :
In Open Source LWC is an UI framework and doesn’t come with any data connectors. We have to define our self, that how we want to access data from whatever API that we need.
To connect any APIs we can pick and choose what we want— from standard XHR requests to using the Fetch API or any of our preferred npm packages that does that for us.
Here we will have to handle all the things like authentication, authorization, security concern, on our own, as we would have to do with other UI frameworks also.
If we compared to other UI frameworks, here we can leverage the @wire decorator to build our own declarative data access (in Lightning Platform also). This is a major useful feature when we want to hide the complexity of data access by using a simple decorator, and at the same time, make use of the storing capabilities of the wire-service.
⛅ ️ Shadow DOM
Lightning Platform :
On the Lightning Platform, we use a synthetic version of Shadow DOM. This creates a virtual DOM as we have seen in 'React' also. A virtual DOM represents an in-memory representation of the DOM, which allows us to patch the DOM behavior. This is because we have to support many old browser versions that don’t fully support native Shadow DOM. While the synthetic version behaves the similarly as the native version, and in browser markup we don’t see the shadow-root tag on Lightning Platform.
We will have to plan for our CSS strategy when it comes to building reusable Lightning Web Components and styled on Lightning Platform.
Open Source :
We can run our own namespace on LWC Open Source
In Open Source version Virtual DOM, the synthetic version behaves as similarly as the native version and in our browser markup we can see the shadow-root tag.
Native Shadow DOM is enabled out-of-the-box for Open Source, we can’t just use a global stylesheet that allows to cascade styles across inheriting Lightning web components. Everything is truly encapsulated, which is one of the huge benefits.
💡 Debugging
Lightning Platform :
Here is minor difference we can find. In our Salesforce org, we can switch between the minified version and a non-minified version of LWC code by enabling debug mode.
Open Source :
In LWC Open Source, it all depends upon the parameters we build in our code. Using lwc-services this is determined by the mode flag or a custom webpack config. In watch mode, in local development, we find code as is. but If we create a webpack production build, everything will be minified.
📌 Apart from all those major differences, there are many things to explore in Open Source version (OSS), like build custom wire adapters, code share between LWC projects, Secure API access protocol and so on.
Comments