Наша команда с гордостью представляет OverVue 9.0 в рамках программы OS Labs Tech Accelerator.
Создавайте, настраивайте и визуализируйте свои приложения Vue в одном пространстве.
Что такое OverVue?
OverVue — это инструмент прототипирования Vue, который позволяет пользователю создавать свои собственные приложения и экспортировать проект Vue, готовый к разработке.
Наше приложение упрощает процесс создания уникальных компонентов Vue, передачи им настраиваемого состояния и действий, внедрения и вложения элементов HTML, а также визуализации сложных отношений между родительскими и дочерними компонентами. Новые и опытные разработчики Vue оценят OverVue как ценный инструмент, облегчающий переход между циклами предварительной разработки и циклами разработки для крупномасштабных интерфейсных проектов.
Что такое Vue?
Vue — одна из самых популярных интерфейсных библиотек с открытым исходным кодом, доступных для разработчиков. С выпуском Vue 3 этот фреймворк зарекомендовал себя как надежный выбор для современной веб-разработки. Vue предлагает надежную модель декларативного и компонентного программирования, новую цепочку инструментов сборки с использованием Vite, обновленную систему управления состоянием в Pinia, а также множество полезной документации и учебных пособий.
Vue популярен среди разработчиков, потому что он гибкий и интуитивно понятный. Веб-компоненты, разработанные в Vue, можно использовать в других стеках разработки, и они идеально подходят для SPA, для которых требуются собственные инструменты, такие как DevTools, Typescript, маршрутизация и тестирование на стороне клиента.
Внешнее прототипирование
Прототипирование — важный этап для любой проектной группы, которой необходимо оценить внешний вид приложения. Команды могут протестировать этот прототип, чтобы оценить его функции и выявить возможные недостатки. Заинтересованные стороны могут оставить отзыв до того, как в продукт будет вложено больше времени, денег и труда.
Прототипирование позволяет командам дизайнеров сосредоточиться на общей картине: каким будет пользовательский опыт? Как пользователи будут перемещаться по многочисленным функциям, предлагаемым их приложением?
OverVue позволяет дизайнерам делать то, что у них получается лучше всего, не требуя значительного опыта программирования. Затем инженеры могут работать с этими элементами дизайна как с экспортированным кодом. OverVue дает проектным группам любого размера возможность создавать прототипы, которые будут полезны как дизайнерам, так и инженерам, из одного приложения.
Возможности:
- Быстро создавайте прототипы продуктов с помощью пользовательских компонентов или компонентов библиотеки Element Plus.
- Настройте такие свойства, как class, innerText и двустороннюю привязку в каждом элементе HTML.
- Настройте свой прототип с помощью привязки к сетке, а также цвета и размера компонентов.
- Визуализируйте маршрутизацию проекта, иерархию компонентов и фрагменты кода и управляйте ими в режиме реального времени.
- Экспортируйте точный шаблонный код для приложений Vue 3.0, включая необходимые пакеты npm, логин Oauth по вашему выбору, настраиваемые Vue SFC и файлы тестирования компонентов.
- Делитесь обновлениями проекта со своей командой через Slack.
Проблемы, с которыми мы столкнулись
Кодовая база OverVue требовала полномасштабной переработки, чтобы подготовить ее к будущей разработке. Наша команда модернизировала структуры Vue, из которых состоит OverVue, преобразовав более сорока компонентов Vue из API параметров в API композиции. Это проложило нам путь к достижению наших больших целей по преобразованию системы управления состоянием OverVue из Vuex в Pinia, новую официальную систему управления состоянием Vue. Мы также достигли нашей цели, полностью переведя OverVue с Javascript на Typescript, чтобы упростить отслеживание ошибок и подготовить будущие команды к сложности кодовой базы OverVue.
Это был чрезвычайно сложный проект, который можно было реализовать в столь короткие сроки. Перед нашей командой была поставлена задача за четыре недели глубоко изучить Vue, Vuex, Pinia, Options API, Composition API, Quasar, Electron и Typescript. Многие трудности, с которыми мы столкнулись, были связаны с преобразованием незнакомой кодовой базы из одного сложного стека технологий в другой. Были времена, когда мы боялись, что безвозвратно сломали приложение и свели на нет тяжелую работу наших предшественников.
Мы также столкнулись со многими трудностями при объединении приложения в Quasar и Electron. При отключении документов состояния Vuex и повторном подключении наших документов состояния Pinia казалось, что мы никогда не заставим Electron снова отображать приложение. Благодаря настойчивости мы смогли перестроить приложение, над которым мы гордимся своей работой.
Дальнейшие шаги
Наша текущая итерация по-прежнему экспортирует код для компонентов Vue с учетом системы управления состоянием Vuex. В будущих итерациях мы надеемся модернизировать экспортируемый код, чтобы он обрамлял экспортируемый код моделью Composition API и использовал Pinia в качестве системы управления состоянием.
В будущих итерациях команда OverVue добавит больше вариантов динамического тестирования и подключения Oauth для экспорта пользователями. Приложение также выиграет от более надежной системы визуализации и доступа к большему количеству библиотек элементов.
Наша команда с гордостью представляет OverVue 9.0 как для пользователей, так и для авторов.
Если вы заинтересованы в дальнейшем развитии OverVue вместе с нами, пожалуйста, присоединяйтесь к нам, чтобы внести свой вклад в этот проект с открытым исходным кодом.
Чтобы узнать больше и скачать OverVue нажмите здесь.
Свяжитесь с нами
Кристофер Дэвис: Github | ЛинкедИн
