С тех пор, как Salesforce выпустила Lightning Component Framework, потребность в использовании сторонних платформ резко снизилась. Действительно, используя клиентскую архитектуру с отслеживанием состояния и серверную архитектуру без отслеживания состояния, которая опирается на JavaScript на стороне клиента для управления метаданными компонентов пользовательского интерфейса и данными приложения, они предоставили более быстрый и современный способ создания красивых пользовательских интерфейсов.
Однако создание всего приложения на Lightning может быть болезненным по нескольким причинам:
- Навигация. Допустим, в вашем приложении есть десяток экранов с несколькими путями между ними. Одно из решений, которое я предпочитаю, - иметь верхний компонент «Навигатор», который будет обрабатывать события приложения и динамически отображать или скрывать компоненты. Оно работает. Но вряд ли это будет устойчивым с приложением, которое с течением времени продолжает расти с все большим количеством вложенных компонентов.
- Служба шкафчиков. Использование библиотек javascript, несовместимых с Locker Service.
- Навыки разработчика. Вам просто нужен некоторый опыт в разработке веб-приложений.
По этим трем причинам я решил попробовать использовать Vue.js в качестве альтернативы приложениям Lightning и поделиться своим опытом. Вот темы:
ЧАСТЬ 1
- Запуск приложения Vue.js с помощью Webpack
- Загрузка приложения в компонент Lightning
"ЧАСТЬ 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.