Vuido - это фреймворк для создания нативных настольных приложений на основе Vue.js. Приложение, использующее Vuido, может работать в Windows, OS X и Linux с использованием собственных компонентов графического интерфейса и не требует Electron.

Я создал первый прототип Vuido несколько месяцев назад, просто чтобы узнать, можно ли использовать Vue.js в среде рабочего стола, и получить ранние отзывы. Об этом прототипе вы можете прочитать в моей предыдущей статье. С тех пор Vuido получил почти 5000 звезд на GitHub, и ранний прототип превратился в довольно функциональную и стабильную версию.

Однако важная часть головоломки все еще отсутствовала. Фреймворк или библиотека полезны настолько, насколько полезны приложения, которые их используют. Не просто примеры приложений «привет, мир», но и реальные приложения, которые представляют некоторую ценность для конечных пользователей. Итак, я начал искать идеи.

В то время я работал над LaunchUI, средой выполнения для запуска приложений Node.js с графическим интерфейсом пользователя. Чтобы создать распространяемый пакет для приложения LaunchUI, вы можете запустить утилиту командной строки, которая имеет почти 20 различных опций, или использовать API. Я думал, что интерфейс с графическим интерфейсом значительно упростит этот процесс, и именно так родилась идея LaunchUI Packager GUI.

Разработка пользовательского интерфейса

Снимок экрана выше является окончательным результатом, но когда я начал, у меня не было четкого представления, как должен выглядеть пользовательский интерфейс. Что мне действительно нравится в Vue.js, так это то, что вы можете быстро создать и протестировать прототип пользовательского интерфейса, собрав вместе немного HTML и CSS, без написания кода. Аналогичный процесс можно использовать с Vuido.

Я начал с создания простого шаблона с текстовым полем, двумя кнопками и несколькими вкладками:

<Window title="LaunchUI Packager GUI" width="800" height="500">
  <Box padded>
    <Group title="Project" margined>
      <Box padded>
        <Box horizontal padded>
          <TextInput stretchy readonly/>
          <Button>Open Project...</Button>
          <Button>Save Project</Button>
        </Box>
        <Text>{{ projectStatus }}</Text>
      </Box>
    </Group>
    <Tab stretchy margined>
      <Box label="General">
      </Box>
      <Box label="Branding">
      </Box>
      <Box label="Advanced">
      </Box>
    </Tab>
  </Box>
</Window>

Затем я начал постепенно добавлять компоненты, проверять результат и вносить дальнейшие изменения. Я повторял этот процесс, пока результат не стал достаточно хорошим. Простой синтаксис шаблона на основе XML, используемый Vuido, позволяет очень легко вносить изменения, копировать и вставлять части макета и перемещать элементы. Это так же просто, как работать с HTML и CSS.

Обновление элементов управления

Когда приложение запускается, большинство элементов управления должны быть изначально отключены, пока проект не будет загружен или создан. В традиционном императивном коде вам придется написать что-то вроде этого:

this.packageNameTextInput.enabled = false;
this.packageVersionTextInput.enabled = false;
// ... and so on

Поскольку Vuido основан на Vue.js, я мог бы просто привязать атрибут enabled каждого элемента управления к свойству экземпляра окна, например:

<TextInput label="Package name:" v-bind:enabled="isEnabled"/>
<TextInput label="Package version:" v-bind:enabled="isEnabled"/>
// ... and so on

Тогда я мог бы просто включить или отключить сразу все элементы управления, переключив свойство isEnabled.

Позже, когда выяснилось, что элементы управления также должны быть отключены во время выполнения сборки, я изменил свойство isEnabled на вычисляемое свойство, определенное следующим образом:

isEnabled() {
  return this.dirPath != '' && !this.isBuilding;
}

Таким образом я мог упростить состояние приложения и уменьшить количество возможных комбинаций состояний. Это позволяет избежать ошибок; например, мне не нужно помнить об изменении свойства isEnabled после завершения сборки. Я могу просто переключить свойство isBuilding, и состояние других свойств обновится автоматически. Таким образом, вычисляемые свойства - очень полезная функция как Vue.js, так и Vuido.

Привязка значений элементов управления к свойствам данных также очень проста в Vuido благодаря директиве v-model, известной из Vue.js. Поэтому вместо того, чтобы писать этот код для передачи данных элементам управления:

this.packageNameTextInput.value = this.options.name;
this.packageVersionTextInput.value = this.version;
// ... and so on

и соответствующий код, чтобы сделать наоборот, я мог бы просто добавить директиву v-model, например:

<TextInput label="Package name:" v-model="options.name"/>
<TextInput label="Package version:" v-bind:enabled="isEnabled"/>
// ... and so on

Когда вы привыкнете к такому декларативному стилю программирования, вы поймете, что он упрощает жизнь. На самом деле не имеет значения, веб-приложение это или настольное приложение, потому что основные принципы одинаковы.

Многоразовые компоненты

Если вы посмотрите на снимок экрана с графическим интерфейсом LaunchUI Packager, вы можете заметить несколько общих закономерностей:

  • Рядом с некоторыми текстовыми полями есть кнопка «Выбрать…», открывающая диалоговое окно выбора файлов.
  • Каждая вкладка состоит из нескольких групповых блоков, содержащих вложенные макеты форм.

Во время создания прототипа я просто скопировал и вставил эти общие элементы, но когда я начал очищать код, я решил заменить их повторно используемыми компонентами. Vue.js позволяет очень легко создавать такие компоненты, и то же самое можно сделать в Vuido.

Компонент FormGroup выглядит так:

<template>
  <Group v-bind:title="title" margined>
    <Form padded>
      <slot/>
    </Form>
  </Group>
</template>
<script>
export default {
  props: {
   title: String
  }
}
</script>

У него очень простой шаблон и всего одно свойство, но это позволило мне значительно упростить шаблон главного окна и убрать много дублирования.

Элемент управления FileInput немного сложнее:

<template>
  <Box v-bind:label="label" horizontal padded>
    <TextInput stretchy v-bind:value="value"
               v-bind:enabled="enabled" v-on:input="input"/>
    <Button v-bind:enabled="enabled"
            v-on:click="choose">Choose...</Button>
  </Box>
</template>
<script>
export default {
  props: {
    label: String,
    value: String,
    enabled: {
      type: Boolean,
      default: true
    },
    dirPath: String
  },
  methods: {
    input( value ) {
      this.$emit( 'input', value );
    },
    choose() {
      // ...
    }
  }
}
</script>

Шаблон представляет собой просто горизонтальный макет окна с TextInput и Button. Компонент имеет свойство value и генерирует событие input всякий раз, когда его значение изменяется, поэтому его можно использовать с директивой v-model, как и обычный элемент управления TextInput. Это упростило замену элементов управления TextInput компонентами FileInput там, где это необходимо, без необходимости вносить какие-либо другие изменения в главное окно.

Пользовательские компоненты - одна из самых мощных функций Vue.js, которая также значительно упрощает создание настольных приложений с помощью Vuido.

Выводы

Создание графического интерфейса LaunchUI Packager оказалось проще, чем я ожидал. Я смог воспользоваться многими преимуществами Vue.js, включая быстрое создание прототипов пользовательского интерфейса, декларативную привязку данных и повторно используемые компоненты. Таким образом, реактивные, основанные на компонентах парадигмы, призванные упростить веб-разработку, оказались действительно хорошо работающими в настольных приложениях. Это неудивительно, потому что вся причина развития этой веб-платформы заключалась в том, что веб-приложения стали такими же сложными, как настольные приложения.

Я доказал, что Vuido работает, но это не единственное преимущество создания приложения LaunchUI Packager с графическим интерфейсом. Работая над этим, я обнаружил несколько ошибок в Vuido, которые было бы сложно найти в простом проекте «hello world». Недавно выпущенная версия Vuido 2.0 не только исправляет их, но также содержит полный набор модульных тестов, поэтому стабильность фреймворка значительно улучшилась по сравнению с первым выпуском. Я также расширил API Vuido, чтобы заполнить некоторые пробелы и упростить некоторые вещи.

За последнее десятилетие я использовал множество различных библиотек и фреймворков для разработки настольных приложений, включая MFC, .NET, Qt и Electron. У всех есть свои сильные и слабые стороны, и то же самое можно сказать о Вуйдо. На данный момент в нем определенно отсутствуют некоторые функции, полезные для создания очень больших и сложных приложений. Однако оказалось, что он идеально подходит для той задачи, которую я пытался решить. И возможности Vuido продолжают расти.

Новой функцией Vuido версии 0.2 является виджет «Область», который поддерживает рисование 2D-графики и управление вводом с клавиатуры и мыши. Это открывает возможность реализовать множество интересных вещей, включая настраиваемые виджеты, визуализацию данных и даже простые игры. Последний выпуск libui Alpha 4 включает новый виджет таблицы, который также будет реализован в будущей версии Vuido. Планируются и другие функции, включая поддержку OpenGL, древовидные виджеты, печать и многое другое, так что у Vuido есть шанс стать действительно интересной платформой для разработки кроссплатформенных настольных приложений.

✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ План развития веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .