С тех пор, как Salesforce выпустила Lightning Component Framework, потребность в использовании сторонних платформ резко снизилась. Действительно, используя клиентскую архитектуру с отслеживанием состояния и серверную архитектуру без отслеживания состояния, которая опирается на JavaScript на стороне клиента для управления метаданными компонентов пользовательского интерфейса и данными приложения, они предоставили более быстрый и современный способ создания красивых пользовательских интерфейсов.

Однако создание всего приложения на Lightning может быть болезненным по нескольким причинам:

  • Навигация. Допустим, в вашем приложении есть десяток экранов с несколькими путями между ними. Одно из решений, которое я предпочитаю, - иметь верхний компонент «Навигатор», который будет обрабатывать события приложения и динамически отображать или скрывать компоненты. Оно работает. Но вряд ли это будет устойчивым с приложением, которое с течением времени продолжает расти с все большим количеством вложенных компонентов.
  • Служба шкафчиков. Использование библиотек javascript, несовместимых с Locker Service.
  • Навыки разработчика. Вам просто нужен некоторый опыт в разработке веб-приложений.

По этим трем причинам я решил попробовать использовать Vue.js в качестве альтернативы приложениям Lightning и поделиться своим опытом. Вот темы:

ЧАСТЬ 1

  1. Запуск приложения Vue.js с помощью Webpack
  2. Загрузка приложения в компонент Lightning

"ЧАСТЬ 2"

  1. Сборка приложения локально
  2. Вызов действий на стороне сервера (с контроллером APEX)

1. Запуск приложения Vue.js с помощью Webpack

Мы собираемся создать приложение Vue.js, используя этот шаблон Progressive Web App. Для этого вам потребуется установить vue-cli:

$ npm install -g vue-cli

Затем вы можете инициировать свое приложение. Когда вы просите установить vue-router, скажите да, так как мы будем использовать это позже.

$ vue init pwa vuejs-with-salesforce
? Project name vuejs-with-salesforce
? Project short name: fewer than 12 characters to not be truncated on homescreen
s (default: same as name)
? Project description A Vue.js integration with Salesforce Lightning components
? Author Lucas Ennouchi
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

Затем перейдите в папку (такая же, как у вашего проекта), установите и запустите:

$ cd vuejs-with-salesforce
$ npm install
$ npm run dev

Теперь у вас должна быть открыта вкладка браузера по адресу localhost: 8080 с отображением вашего нового приложения.

В следующей части мы собираемся создать приложение для производства, загрузить его в Salesforce как статический ресурс и загрузить из компонента Lightning.

2. Загрузка приложения в Salesforce

Перед сборкой приложения мы должны убедиться, что в производственных путях используется нотация «./» для указания текущего каталога. Для этого мы изменим файл «/config/index.js». В строке 13 установите для assetsPublicPath значение ‘./’ вместо ‘/’:

module.exports = {
 build: {
  ...
  assetsPublicPath: './',
  ...
 },
 dev: {
  ...
 }
}

Затем нам нужно собрать приложение для производства:

$ npm run build

Это должно было создать папку «dist» в репозитории вашего проекта. Теперь вы можете сжать его и загрузить как статический ресурс в Salesforce. Назовем наш статический ресурс vueApplication.

Затем мы собираемся создать простое приложение Lightning, в которое мы собираемся загрузить наше приложение Vue JS благодаря компоненту lightning: container.

<aura:application >
    <lightning:container src="{!$Resource.vueApplication + '/index.html'}"/>
</aura:application>

Теперь вы должны увидеть, как ваше приложение Vue.js загружается в Salesforce.

В следующей части мы разработаем более сложное приложение, использующее Vuex в качестве управления магазином и vue-router для управления навигацией между различными экранами. Затем мы увидим, как вызывать действия контроллера компонента Lightning.