Use of Javascript Frameworks in Lightning Web Component

Question

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 1

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.

Answer 2

Salesforce has is a page dedicated to using SLDS with react: https://react.lightningdesignsystem.com/. But the case for using ext. JS frameworks in LWC will be left to you.

Although there may be tens of use cases for using JS frameworks, enterprises may not exactly be jumping with joy when faced with the question of adding another tech stack.

LWC is a client-side "framework" that plays along really well within Salesforce to provide the rich UX for "today's users". The additional stack may complement existing LWC with incremental functions, but we don't often find multiple frameworks used together. And, it is most likely that the enterprisey functions among them will likely be in LWC at some point in future (exception of edge cases) - thereby sinking the investment dollars.

All of this is the current state. In the future, things may change just like Aura to LWC and Salesforce may jump to Vue, or go directly to WASM.

• Refer to some interesting discussions at Lightning Framework vs Standard Client Side Frameworks (i.e. React) // Which to chose when, and why?
• Obligatory reference to docs - https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_libs_platform.htm