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 год и 🕸️ Изучите веб-разработку с полным стеком .