Как указано в приведенной ниже ссылке, https://developer.salesforce.com/docs/component-library /documentation/lwc/lwc.get_started_supported_javascript

Lightning Web Components поддерживает Javascript: - ES6 (ECMAScript 2015) - ES7 (ECMAScript 2016) - ES8 (ECMAScript 2017) — за исключением Shared Memory и Atomics приведенные выше сценарии, мы можем написать стандартный код Javascript. Доступны различные современные фреймворки Javascript, такие как React, Angular или Vue.Js.

Исходя из этого, у меня возник вопрос: можно ли использовать современные фреймворки, такие как React, Angular или Vue.js, в веб-компонентах Lightning? Если возможно, рекомендуется ли использование таких фреймворков с LWC в приложении AppExchange с учетом таких аспектов, как проверка безопасности/служба блокировки, производительность (из-за дополнительного уровня фреймворка поверх фреймворка LWC)?

Заранее спасибо.

12
Rushikesh Pandit 22 Май 2019 в 11:33

3 ответа

Короткий ответ: Да, вы можете использовать React и, возможно, большинство других фреймворков JavaScript внутри LWC.

Очень простой пример этого будет выглядеть примерно так:

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);
     }
}

Это может быть более эффективным, если использовать такой инструмент, как веб-пакет, для объединения вашего приложения в виде статического ресурса (пример ). Затем вы просто запустите loadScript на этом статическом ресурсе и вызовете метод для монтирования вашего приложения.

Это позволит вам использовать jsx, typescript, esNext, исходные карты и т. д. в вашем приложении.

Однако то, как Salesforce построила управление зависимостями на платформе (@salesforce/, lwc, lightning/ и т. д.), чрезвычайно затрудняет использование этих вещей в ВАШЕМ приложении. В основном все зависимости должны быть переданы в ваше приложение при инициализации.

Я лично не согласен со многим из того, что раздувается о LWC (пункты в другом ответе). Да, LWC в 10 раз лучше, чем Aura, но все же это не «один фреймворк, чтобы править всеми». Лично я бы не выбрал его НИЧЕГО вне платформы и даже «на платформе», я все еще думаю, что react/angular/vue является более убедительным решением для более сложных SPA.

Это просто не так проверено или продуктивно, как другие js-фреймворки.

9
NSjonas 23 Авг 2020 в 00:57
Спасибо, что поделились этим, но не могли бы вы поделиться, откуда мы можем скачать библиотеки react и reactdom, чтобы использовать их в LWC?
 – 
gs650x
6 Июн 2020 в 16:50
reactjs.org/docs/cdn-links.html Однако, если вы решите перейти этот маршрут, действительно имеет смысл использовать сборщик, такой как webpack
 – 
NSjonas
23 Авг 2020 в 00:56
Я бы согласился с этим, но с большой оговоркой относительно масштаба. Я попытался перенести большое существующее приложение JQuery, которое у нас было, в LWC, и оно отлично работало в небольшом масштабе, но как только вы получали что-то с масштабом, оно замедлялось до такой степени, что для отображения текста, введенного при вводе, требовались секунды. Я знаю, что JQuery устарел, но замедление было связано с привязкой JQuery DOM, взаимодействующей с тем, как LWC использует прокси. Я не знаю, как это будет взаимодействовать с более современными платформами, потому что они по-разному взаимодействуют с DOM. Независимо от того, тестируйте в больших масштабах, прежде чем вы зайдете слишком далеко.
 – 
Rozgonyi
18 Дек 2020 в 00:46

Этот вопрос был задан на мировом турне Salesforce в Париже, где присутствовали некоторые члены команды LWC, но четкого ответа на него не было.

Может возникнуть вопрос, почему мы должны использовать фреймворк помимо LWC?

Согласно этому блогу, использование React немного сложно настроить, и автор говорит:

многие шаблоны, которые мне нравятся в React, в равной степени применимы к Веб-компоненты Lightning 1

Поскольку Salesforce представила LWC, использование современных фреймворков, таких как React, Angular или Vue.js, не требуется:

В прошлом разработчикам часто приходилось использовать разные фреймворки для создания разных сторон приложения. Например, вы можете использовать Aura для создания стороны приложения для сотрудников в Salesforce и React, Angular или Vue для создания стороны приложения для взаимодействия с клиентами на Heroku или любой другой платформе. Сегодня вы можете использовать веб-компоненты Lightning для создания обеих сторон приложения. 2

И согласно журналу Infoworld:

Этот шаг может сделать веб-компоненты Lightning более конкурентными для популярных JavaScript-фреймворков Angular, Vue и React, которые имеют аналогичные возможности. Например, разработчик Node.js, создающий приложения для взаимодействия с клиентами на Heroku, может использовать веб-компоненты Lightning для кодирования основанного на стандартах пользовательского интерфейса поверх стека Node. 3

Документация React говорит:

Веб-компоненты обеспечивают надежную инкапсуляцию для повторно используемых компонентов, а React предоставляет декларативную библиотеку, которая поддерживает синхронизацию DOM с вашими данными. 4

Salesforce предоставляет возможность использовать стандартную модель Shadow DOM и предоставляет службу данных Lightning для синхронизации данных 5.

React или другой фреймворк не нужны.

Можете ли вы объяснить свои потребности?

6
Mael Monnier 4 Июл 2019 в 19:52
1
Здесь также есть один полезный ответ об использовании других фреймворков: salesforce.stackexchange.com/a/238410/4614 Locker Service, вы можете прочитать эту документацию по Salesforce: developer.salesforce.com/blogs/developer-relations/2017/02/…
 – 
Mael Monnier
8 Июл 2019 в 10:40
3
«Может возникнуть вопрос, почему мы должны использовать фреймворк помимо LWC?» Может быть, потому, что у нас есть тысячи строк кода, уже написанных в этой среде, которые мы хотим использовать в контексте Lightning, и предпочли бы не тратить сотни тысяч долларов на их переписывание?
 – 
kamezaburo
19 Июн 2020 в 04:24

К сожалению, вы не можете использовать AngularJS, потому что AngularJS использует innerHTML для построения своего DOM, а исправленная версия innerHTML в LWC "улучшена", так что она случайным образом и произвольно удаляет все неизвестные элементы (что, конечно, лежат в основе Angular), хотя вызовы appendChild, которые имеют точно такой же эффект, пропускаются. Иди разберись.

Поэтому, если вы хотите использовать AngularJS, вам придется исправить десятки мест в библиотеке, где используется innerHTML, с какой-нибудь альтернативой, такой как appendChild, которую боги службы Locker сочтут приемлемой.

0
kamezaburo 19 Июн 2020 в 04:27
Ты уверен насчет этого? Если вы сделаете руководство по DOM в разметке, я бы подумал, что это должно работать.
 – 
Caspar Harmer
19 Июн 2020 в 10:46
Не уверен, что вы подразумеваете под «руководством по DOM в разметке», но да, на 100% ясно, что попытка установить содержимое DOM с помощью innerHTML очистит HTML, удалив любые неизвестные элементы (а также атрибуты для этого иметь значение).
 – 
kamezaburo
21 Июн 2020 в 03: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. — ссылка: developer.salesforce. com/docs/component-library/documentation/…
 – 
Caspar Harmer
21 Июн 2020 в 20:09
Да, я читал документы. Да, я знаю все о lwc:dom. Да, я знаю, что appendChild работает. Я говорю конкретно об использовании innerHTML. Я не могу легко заменить его, так как он используется внутри кода AngularJS.
 – 
kamezaburo
21 Июн 2020 в 20:15
1
Хорошо... мы крутые. мы классные. Просто отвечая на ваш комментарий, говоря, что вы не знали о ручном доме... Думаю, вы знали.
 – 
Caspar Harmer
21 Июн 2020 в 22:23