14

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.

3 Answers 3

9

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.

3
  • Thank you for sharing this, but would you please share from where we can download react and reactdom libraries to use them in LWC?
    – gs650x
    Commented Jun 6, 2020 at 13:50
  • reactjs.org/docs/cdn-links.html However, if you decide to go this route, it really makes more sense to use a bundler like webpack
    – NSjonas
    Commented Aug 22, 2020 at 21:56
  • I would agree with this but with a big caveat regarding scale. I tried to port a large existing JQuery app that we had into a LWC and it worked fine on a small scale but once you got anything with an scale it slowed down to the point of taking seconds to render text typed in an input. I know JQuery is old but the slowdown was related to JQuery DOM binding interacting with how the LWC uses Proxies. I don't know how that would interact w a more modern Framework because they interact with the DOM differently. Regardless test at large scale before you get too far into it.
    – Rozgonyi
    Commented Dec 17, 2020 at 21:46
6

This question has been asked at the Salesforce World Tour Paris, where some members of the LWC team were present, but without a clear answer.

The question may be why should we use a framework besides LWC ?

According to this blog, React use is a bit complicated to set up and the author says :

many of the patterns that I like with React are equally applicable to Lightning Web Components 1

As Salesforce introduced LWC, usage of modern frameworks like React, Angular or Vue.js is not necessary :

In the past, developers often had to use different frameworks to build different sides of an application. For example, you’d use Aura to build the employee-facing side of an application on Salesforce and React, Angular or Vue to build the customer engagement side of the application on Heroku or any other platform. Today, you can use Lightning Web Components to build both sides of the application. 2

And according to Infoworld magazine :

The move could make Lightning Web Components more of a rival to the popular Angular, Vue, and React JavaScript frameworks, which have similar capabilities. A Node.js developer building customer engagement apps on Heroku, for example, could use Lightning Web Components to code a standards-based UI on top of a Node stack. 3

React documentation says :

Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. 4

Salesforce provides a way to use the standard Shadow DOM and provides Lightning Data Service to keep the data synchronized 5.

React or another framework should not be necessary.

Can you explain your needs ?

2
1

Unfortunately you cannot use AngularJS, because AngularJS uses innerHTML to build its DOM, and the patched version of innerHTML in LWCs is "improved" so that it randomly and arbitrarily strips out all unknown elements (which of course lie at the heart of Angular), even though calls to appendChild which have exactly the same effect are let through. Go figure.

If you want to use AngularJS, therefore, you will have to patch the dozens of places in the library which use innerHTML with some alternative such as appendChild that the Locker Service Gods deem acceptable.

5
  • Are you sure about this? If you make you DOM manual in the markup, I would have thought it should work. Commented Jun 19, 2020 at 7:46
  • Not sure what you mean by "DOM manual in the markup", but yes, it is 100% clear that trying to set DOM content using innerHTML will sanitize the HTML by removing any unknown elemens (and attributes also, for that matter).
    – kamezaburo
    Commented Jun 21, 2020 at 0:32
  • lwc:dom="manual" Add this directive to a native HTML element to call appendChild() on the element from the owner’s JavaScript class and preserve styling. If a call to appendChild() manipulates the DOM, styling isn’t applied to the appended element. Using JavaScript to manipulate the DOM isn’t recommended when programming Lightning web components, but some third-party JavaScript libraries require it. - ref: developer.salesforce.com/docs/component-library/documentation/… Commented Jun 21, 2020 at 17:09
  • Yes, I've read the docs. Yes, I know all about lwc:dom. Yes, I know that appendChild works. I am talking specifically about using innerHTML. I cannot easily replace it since it is being used inside the AngularJS code.
    – kamezaburo
    Commented Jun 21, 2020 at 17:15
  • 1
    Ok... we cool. we cool. Just responding to your comment saying you didn't know about manual dom... I guess you did know. Commented Jun 21, 2020 at 19:23

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .