[SalesForce] Modern JavaScript Frameworks (Angular Js, React JS ) within LWC

As documented on the below link,
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.get_started_supported_javascript

Lightning Web Components Javascript support includes :
– ES6 (ECMAScript 2015)
– ES7 (ECMAScript 2016)
– ES8 (ECMAScript 2017)—excluding Shared Memory and Atomics
– ES9 (ECMAScript 2018)—including only Object Spread Properties (not Object Rest Properties)With the above scripts, we can write the Standard Javascript code.
There are various Modern Javascript Frameworks available like React, Angular or Vue.Js.

Based on that I have a question that, is it possible to use modern frameworks like React, Angular or Vue.js within Lightning Web Components? If possible, is the use of such frameworks with LWC recommended in AppExchange App considering aspects like Security Review/Locker Service, Performance (because of an extra layer of Framework on top of LWC framework)?

Thanks in Advance.

Best Answer

The short answer is Yes, you can use React and probably most other javascript frameworks inside of LWC.

A very simply example of this would look something like this:

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
//add as static resource
import REACT from '@salesforce/resourceUrl/react';  
import REACTDOM from '@salesforce/resourceUrl/reactDom';

export default class LibsMomentjs extends LightningElement {

    async connectedCallback() {
        //load react & react-dom
        Promise.all([
            loadScript(this, REACT),
            loadScript(this, REACTDOM),
        ]).then(() => { /* callback */

            //render our element. Notes:
            //  Cannot use JSX without transform step
            //  Template just has single div
            ReactDOM.render(React.createElement('div', null, `Hello React`), this.template.querySelector('div'));
        });
     }

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

This could be more powerful by using a tool like webpack to bundle your application as a static resource (example). Then you would just run loadScript on that static resource and call a method to mount your application.

This would let you use jsx, typescript, esNext, sourcemaps, etc in your application.

However, the way Salesforce has built the dependency management of the on-platform dependencies (@salesforce/, lwc, lightning/, etc), makes it extremely difficult to use those things in YOUR application. Basically all dependencies would need to be pass into your application at initialization.

I personally disagree with a lot of what is being hyped about LWC (the points in the other answer). Yes, LWC is 10x better than Aura, but still not "one framework to rule them all". I personally would not choose it for ANYTHING off-platform, and even "On-Platform", I still think that react/angular/vue is a more compelling of a solution for more complex SPA's.

It's just simply not as proven or productive out as other js frameworks.

Related Topic