Use of Javascript Frameworks in Lightning Web Component

Is there any documentation available for recommended JavaScript Frameworks (Angular JS, React JS, etc.), which can work well with Lightning Web Component?

Most of the places, I found that it supports modern Javascript (ECMA Script 2015 to ECMA Script 2018). But, I am not able to find if we can use Angular JS/ React JS within Lightning Component and if yes, is it recommended by Salesforce?

Thanks.

Answer

React (I assume other frameworks will also work, but I’ve only tested react) definitely can be used in LWC, but it’s honestly quite a hack due to the limitations and constraints on the platform.

Barebone Example

JS

import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import REACT from '@salesforce/resourceUrl/react';
import REACTDOM from '@salesforce/resourceUrl/reactDom';

export default class ReactHelloWorld extends LightningElement {

    async connectedCallback() {
        await loadScript(this, REACT);
        await loadScript(this, REACTDOM);
        ReactDOM.render(
            React.createElement('div', null, `Hello React`), 
            this.template.querySelector('div')
        );
     }

     disconnectedCallback(){
        ReactDOM.unmountComponentAtNode(this);
     }
}

HTML

<template>
    <div id="react-app-root"></div>
</template>

The first thing that will stick out is that we can’t use JSX!

Bundled Static Resource Example

A much better way to do this is to use a bundler (like webpack) to compile your application into a single static resource. This would allow you to use JSX, typescript and packages from npm.

Using Webpack/React in LWC Demo

The main challenge with this approach is gaining access to salesforce platform services like @wire. This is challenging for two reasons:

  1. Behind the scenes, Salesforce does some crazy dependency management to inject these imports into each LWC

  2. The LWC compiler seems to be restrictive around how its dependencies are used. So far I haven’t figure out how to pass service level dependencies into the react application.

Long story short… If you want to use react/angular/vue on the salesforce platform, I would highly recommend going the VisualForce page route.

I’ve been developing VF/React/Typescript SPA on salesforce for almost 3 years and I’ve yet to come across a use case that couldn’t be handled.

Attribution
Source : Link , Question Author : Ashish , Answer Author : NSjonas

Leave a Comment