В последние годы инструменты для создания визуальных макетов становятся все более популярными, поскольку они позволяют пользователям легко и быстро планировать свое приложение. Разработчики могут использовать эти конструкторы страниц для визуализации своего веб-сайта с помощью механизма перетаскивания компонентов. Это делает процесс проектирования более рациональным и эффективным, позволяя дизайнерам сосредоточиться только на визуальных элементах веб-сайта. Кроме того, эти инструменты предоставляют дизайнерам более интуитивно понятный и удобный интерфейс, упрощая создание высококачественных проектов.
Несмотря на то, что для популярных интерфейсных фреймворков, таких как React и Angular, доступно несколько инструментов для создания визуальных макетов, на рынке существует значительный пробел, когда речь идет о приложениях Vue. PreVue — это инструмент, который был разработан для учета этого несоответствия, особенно с учетом того, что Vue становится все более популярным в качестве интерфейсной среды, которую выбирают многие компании и разработчики.
Представляем PreVue 2.0
Первоначально выпущенный Open Source Labs в 2019 году, PreVue быстро стал популярным инструментом для разработчиков Vue, ищущих универсальное решение для прототипирования своих проектов. Имея более 1000 звезд на GitHub, было ясно, что PreVue занял свою нишу в сообществе разработчиков Vue.
Теперь, почти четыре года спустя, наша команда в Open Source Labs рада объявить о выпуске PreVue 2.0 — модернизированной версии популярного инструмента для создания прототипов, которая включает в себя множество новых функций и улучшений.
Модернизированная кодовая база
Нашей основной целью с PreVue 2.0 было обновление кодовой базы для использования новейших технологий и повышения общей производительности. Одним из наиболее значительных обновлений стал перенос кодовой базы с Vue 2 на Vue 3, что позволило нам воспользоваться преимуществами Composition API и легко интегрировать TypeScript. Мы также обновили все устаревшие библиотеки и удалили устаревшие пакеты, обеспечив актуальность и надежность PreVue для разработчиков. PreVue по-прежнему имеет все функции, которые вы знаете и любите, чтобы помочь вам разработать иерархию компонентов вашего проекта, в том числе:
Создание новых компонентов и маршрутов
Гибкость добавления HTML-элементов, которые можно организовать и вложить по своему усмотрению
И возможность сохранять, извлекать и экспортировать проекты; экспорт вашего проекта создает базовое приложение Vue с созданной вами иерархией компонентов.
Теперь веб-приложение
Чтобы сделать PreVue еще более доступным и удобным для пользователя, мы преобразовали его из настольного приложения, созданного с помощью Electron, в полноценное веб-приложение, к которому любой может легко получить доступ и использовать. Игровая площадка PreVue и функции экспорта доступны для всех пользователей, но если вы войдете через OAuth 2.0 через GitHub, вы сможете сохранить свои проекты и получить их позже для будущих итераций.
Наш недавно реализованный сервер, созданный с помощью Node.js/Express, обрабатывает сетевые запросы, когда пользователи обращаются к базе данных PreVue NoSQL (MongoDB). Это делает PreVue быстрее и надежнее, чем когда-либо прежде, позволяя разработчикам с легкостью создавать прототипы своих проектов.
Тестирование
Мы серьезно относимся к качеству и надежности кода, поэтому мы внедрили комплексный набор тестов для PreVue 2.0. С помощью Vitest мы создали наборы, чтобы обеспечить стабильную производительность как на интерфейсе, так и на сервере. Мы уверены, что проведенные нами тесты помогут устранить ошибки и сообщат о расширении тестов для будущих версий PreVue.
Преобразование TypeScript
Чтобы повысить удобство обслуживания и масштабируемость нашего проекта, мы решили преобразовать все наши файлы в TypeScript и определить пользовательские типы. Этот подход позволяет нам проверять типы в процессе сборки и упрощает отладку, что приводит к более упорядоченному процессу разработки и более отказоустойчивой и эффективной кодовой базе.
Улучшения пользовательского интерфейса/UX
Наша команда значительно улучшила пользовательский интерфейс/UX приложения, что привело к значительному улучшению дизайна и взаимодействия с пользователем. Новый дизайн имеет чистый, современный внешний вид и отзывчивый макет, который адаптируется к разным размерам экрана. Навигация также была улучшена, она стала более интуитивной и удобной для пользователя. Эти изменения значительно улучшили взаимодействие с пользователем, сделав приложение более приятным и простым в использовании.
Заключение
PreVue 2.0 — это большой шаг вперед для сообщества разработчиков Vue, предлагающий модернизированный код, улучшенную доступность и всестороннее тестирование. Мы надеемся, что разработчики Vue сочтут PreVue незаменимым инструментом для создания прототипов своих проектов.
Чтобы узнать больше о PreVue 2.0 или внести свой вклад в проект, посетите нашу страницу GitHub. Как всегда, мы приветствуем ваши отзывы и предложения — пожалуйста, не стесняйтесь обращаться к нам!
Соавтор:
