Рамки — повторение постоянно
Как разработчик, мы часто влюбляемся в один фреймворк, пока не появится следующий, более совершенный. Как только появляется лучшее, мы начинаем учиться и создавать новые приложения с новыми фреймворками. Эволюция фреймворков постоянна, как и их кривая обучения. Несмотря на то, что это выгодно, требуется целая жизнь, чтобы постоянно любить один фреймворк, такой как Lightning, React, Angular и т. д. Нам всегда нужно полоскать, мыть и повторять ;) Фреймворки тянут нас в миллион разных направлений и учат нас делать вещи с точки зрения автора фреймворка. Эти практики могут быть хорошими, плохими или совершенно новыми концепциями.
Эра веб-компонентов
Все здесь, должно быть, использовали тег формы, тег выбора и т. д. и создавали страницы из этих тегов. У них была инкапсуляция, у них был пользовательский интерфейс по умолчанию, они генерировали события, когда происходило что-то интересное. То, как мы создаем страницы в Интернете в наши дни, заключается в том, что мы либо копируем и вставляем фрагменты HTML из библиотек CSS, таких как Bootstrap, либо засоряем наши страницы всевозможными JavaScript-фреймворками и плагинами. Кроме того, повторное использование компонентов из разных фреймворков на одной странице не всегда возможно. Это означает, что наши страницы заканчиваются раздутым CSS, раздутым JavaScript или и тем, и другим. Что, если бы HTML был достаточно выразительным, чтобы позволить нам расширять HTML, чтобы мы могли заполнить пробелы в функциональности с помощью наших собственных тегов? Ну, веб-компоненты позволяют это. Спецификации W3C, которые делают веб-компоненты, приведены ниже:
- Пользовательские элементы позволяют вам определять свои собственные теги HTML;
- Шаблоны HTML позволяют вам определять блоки разметки с возможностью вставки динамического содержимого;
- Shadow DOM дает вам возможность определять область разметки и стили в отдельном дереве DOM;
- Импорт HTML позволяет включать и повторно использовать документы HTML в других документах HTML.
Mozilla определяет веб-компоненты как набор различных технологий, позволяющих создавать повторно используемые пользовательские элементы — с их функциональностью, изолированной от остального кода — и использовать их в своих веб-приложениях.
Lightning Web Components — это реализация Salesforce нового поколения облегченных платформ, построенных на веб-стандартах. Он использует пользовательские элементы, шаблоны, теневую модель DOM, декораторы, модули и другие новые языковые конструкции, доступные в ECMAScript 7 и более поздних версиях. Проще говоря, LWC — это многократно используемый пользовательский HTML-элемент со своим собственным API. Вы можете приступить к созданию первого веб-компонента Lightning, проложив этот троп. После того, как базовая настройка LWC будет готова, вы можете перейти к сообщению в блоге, чтобы создать забавный веб-компонент Lightning Price Now.
LWC не поддерживает двунаправленную привязку данных и требует привязки значения входного поля к свойству и регистрации прослушивателя событий onChange, который обновляет значение объявленного свойства при действии пользователя.
Использование службы данных Lightning
Если вы являетесь первопроходцем и предпочитаете использовать классные функции LDS для отдельных записей вместо вызовов Apex, ниже приведены несколько подходов к использованию LDS в LWC:
- Lightning-record-form: это самый быстрый и продуктивный способ создания формы.
- Lightning-record-view-form или Lightning-Record-Edit-Form: это ваш способ, если вам нужно больше контроля над макетом, вы хотите обрабатывать события в отдельных полях ввода или вам нужно выполнить предварительную отправку.
- @wire(getRecord): ваш выбор для большего контроля над пользовательским интерфейсом или доступа к данным без пользовательского интерфейса. Статическая схема и динамическая схема — это два способа реализации форм записи. Статическая схема обеспечивает ссылочную целостность, в то время как динамическая схема поддерживает независимые компоненты, одобряющие слабую связь между моделью и представлением.
Вызов Apex из LWC
Для работы с Apex из LWC необходимо импортировать методы Apex. После импорта вы можете вызвать метод Apex, используя два разных подхода:
- Императив Apex: вы вызываете импортированный метод, как и любую другую асинхронную функцию в JavaScript. Вызов функции возвращает обещание.
- Использование @wire: вы используете декоратор @wire, чтобы связать импортированный метод со свойством или функцией компонента. Проводной метод автоматически вызывается при инициализации значений параметров и вызывается снова при каждом изменении значений параметров.
Salesforce предлагает использовать @wire вместо императивного метода Apex, если у вас нет сценариев, требующих ответных действий, таких как buttonClick и т. д.
В качестве быстрого практического упражнения давайте создадим приложение, которое использует императивный Apex при нажатии кнопки. В этом приложении мы сделаем вызов API из класса Apex в API blockchain.info, чтобы получить текущую цену BTC. Чтобы предоставить метод Apex веб-компоненту Lightning, этот метод должен быть статическим и либо глобальным, либо общедоступным. Аннотируйте метод с помощью @AuraEnabled. Чтобы повысить производительность во время выполнения, добавьте к методу Apex аннотацию @AuraEnabled(cacheable=true), которая кэширует результаты метода на клиенте. Чтобы установить cacheable=true, метод должен только получать данные, он не может мутировать (изменять) данные. Пометка метода как кэшируемого повышает производительность вашего компонента, быстро отображая кэшированные данные из хранилища на стороне клиента, не дожидаясь отключения сервера. Если кэшированные данные устарели, платформа извлекает последние данные с сервера. Кэширование особенно полезно для пользователей с высокой задержкой, медленным или ненадежным соединением. Время обновления кэширования автоматически настраивается в Lightning Experience и обычно указывается в секундах. Вот класс Apex, который выполняет вызов REST и возвращает цену BTC в виде строки.
// sfdcBtcPrice.cls
public with sharing class sfdcBtcPrice {
@AuraEnabled(cacheable = true)
public static String getBTCPrice() {
string url = 'https://blockchain.info/tobtc?currency=USD&value=1';
Http h = new Http();
HttpRequest req = new HttpRequest();
req.setEndpoint(url);
req.setMethod('GET');
HttpResponse res = h.send(req);
String BTCprice = (string)(res.getBody());
return BTCprice;
}
}Чтобы получить класс Apex в действии, нам нужно импортировать в исходный файл LWC JavaScript, как показано ниже:
import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod';В нашем случае, чтобы заставить наш класс Apex работать, нам нужно добавить приведенный ниже код в исходный файл Javascript LWC.
//sfdcBtcPrice.js
import { LightningElement, track } from 'lwc';
import getContactList from '@salesforce/apex/sfdcBtcPrice.getBTCPrice';
export default class ApexImperativeMethod extends LightningElement {
@track BTCPrice;
@track error;
handleLoad() {
getBTCPrice()
.then(result => {
this.BTCPrice = result;
})
.catch(error => {
this.error = error;
});
}
}Поскольку это обязательный подход Apex, мы на самом деле не используем @wire, но по-прежнему используем @track. Это позволяет вам повторно отображать значение в шаблоне всякий раз, когда происходит действие.
Наконец, HTML-шаблон LWC использует директиву if:true для проверки свойства JavaScript BTCPrice. Если свойство error существует, компонент отображает тег c-error-panel.
< !— sfdcBtcPrice.html —>
<template>
<lightning-card title="Bitcoin Price Now App" icon-name="custom:custom17">
<div class="slds-m-around_medium">
<p class="slds-m-bottom_small">
<lightning-button label="Get BTC Price" onclick={handleLoad}></lightning-button>
</p>
<template if:true={BTCPrice}>
1 USD = {BTCP rice} BTC
</template>
<template if:true={error}>
<c-error-pane l errors={error}>
</c-error-panel>
</template>
</div>
</lightning-card>
</template>Вот демо рабочего компонента:
Кроме того, чтобы убедиться, что биткойн Price Now LWC доступен или все записи, приложения и домашние страницы, ваш файл метаданных необходимо настроить, как показано ниже:
<!— sfdcBtcPrice.js-meta.xml —>
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn=“sfdcBtcPrice”>
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>Ресурсы:
Первоначально опубликовано на sfdcbrewery.github.io.
