7

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.

  • it really depends what your use case is... – glls May 18 '19 at 19:22
  • 1
    I would expect that in general you will be much further ahead if you still with ECMA unless you have a specific reason for using another library. Remember that in regular components that Angular and React must be containerized. They do not work well with LDS CSS. For that reason alone, I would avoid using them. I have not seen any official documentation on this subject to post it as an answer. – crmprogdev May 18 '19 at 19:49
3

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.

| improve this answer | |
3

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.