Что это

Скрипты автоматизации 2.0 предполагают наличия webgui с фронтендом, написанном на ReactJS. Перед тем как читать эту секцию и начинать что-либо разрабатывать, настоятельно рекоммендуется прочитать:

  • Re-introduction to JavaScript - освежить знания по JavaScript
  • reactjs tutorial - отличный туториал по ReactJS
  • redux getting started - что такое Redux и как его использовать
  • material.io - гайдлайны современных интерфейсов material
  • material-ui - реализация material гайдлайнов в ReactJS, рекоммендуется разрабатывать web gui с помощью этих компонентов
  • webpack concepts - мануал по webpack, мы используем webpack для бандлинга и в качестве веб сервера для разработки


NOTE: Далее предполагается что вы умеете работать с ReactJS проектами, знаете что такое JSX, NPM и т.д., знаете что делает "npm install" и т.д.

Анатомия frontend

Рассмотрим frontend на примере "basic" скрипта, для этого нужно запустить генеретор скриптов, выбрать flavor "basic", далее можно просто нажимать enter. Сгенерированный скрипт "basic.py" вставить в трассир.

Через меню "модули" открыть модуль "Basic script":



Сам фронтенд находится в ресурсах скрипта, в каталоге .../scripts-data/DSSL_Basic_script_1_0_0.
ReactJS код сам по себе не может выполняться в браузере, его нужно компилировать и бандлить. По этой причине скрипт содержит в себе:

  • исходники - всё что в каталоге frontend, в продакшен режиме не используется вообще.
  • собранный бандл и ресурсы - всё что в каталоге static, именно это сервится через exthttp в браузер клиента/минибраузер/окно модуля.

помимо этого есть ещё сборочные/конфигурационные файлы в корне:

  • .babelrc - пресеты для транспиллера babel (https://babeljs.io/).
  • .eslintrc - настройки линтера, исполняется как во время разработки так и во время сборки, сборка не будет собрана если линтер ругается.
  • .tern-project - настройки для ternjs (http://ternjs.net/), используются IDE (например в Atom).
  • package.json - описание зависимостей.
  • package-lock.json - конкретные версии зависимостей, установленные npm.
  • webpack.config.js - конфиг webpack'а.

Developer mode

Каждый раз собирать и бандлить очень долго и неудобно, поэтому при разработке можно использовать обычный ReactJS workflow с dev серваком, а именно:

  • заходим в ../scripts-data/DSSL_Basic_script_1_0_0
  • делаем "npm install" один раз
  • делаем "npm start" чтобы запустить dev сервак

Теперь на localhost:3000 запущен dev сервак, можно зайти на него и увидеть web gui нашего модуля. backend конечно-же по прежнему висит на порту 8080, frontend понимает что он запущен в отладочном режиме и автоматически отправляет REST запросы на backend. Если вдруг у вас httpsdk порт не 8080, а скажем 8082, то вместо "npm start" надо сделать "HTTPSDK_PORT=8082 npm start".

Теперь нам доступен обычный ReactJS dev workflow, мы просто меняем исходники в каталоге frontend, dev web server автоматически подхватит изменения hot reload'ом и web ui сам обновится.

Build

После того как вы поменяли код фронта в developer mode и убедились что всё ok, можно делать сборку, для этого нужно выполнить всего 1 действие:

  • выполнить "npm run build"

После его завершения бандлы и ресурсы в каталоге "static" обновятся и можно прям сразу зайти на web ui через trassir и посмотреть на результат (dev веб сервак можно при этом не выключать, его вообще можно никогда не выключать). Если всё ok, то паблишим скрипт и всё.

IDE setup

Для разработки ReactJS приложений очень полезно применять подходящую среду разработки, а не просто блокнот или gedit. Хорошие варианты: Atom или WebStorm, далее речь пойдёт про Atom.

Atom

Поставьте последний Atom отсюда - https://atom.io

Сам по себе Atom просто контейнер для плагинов, их нужно немалое количество чтобы удобно работать с ReactJS, ниже приведу мой конфиг:


atom.tar.gz


Это надо распаковать и скопировать содержимое в ~/.atom, далее запустить Atom, поставить там ручками пакет с именем "Package Sync", затем перейти в
меню Packages -> Package Sync -> Sync Packages. Это действие закачает все остальные необходимые для работы плагины, после этого перезапустить Atom.