Ускорьте разработку своего следующего приложения Vue — теперь с помощью TypeScript, Vite и обновленного пользовательского интерфейса.
Работать с одним из самых доступных интерфейсных фреймворков стало еще проще — мы рады объявить о выпуске OverVue 6.0!
OverVue — это инструмент для создания прототипов для Vue.js, который был доведен до уровня последних функций Vue 3. Популярность фреймворка Vue за последние несколько лет резко возросла; рассмотрим данные State of JS 2021, которые показывают стремительный рост Vue от наименее используемого фреймворка в 2016 году до практически второго места в 2021 году. Vue демонстрирует здоровую удовлетворенность разработчиков, в отличие от другого претендента на второе место, Angular. Несмотря на свою относительную молодость, Vue остается самым популярным интерфейсным фреймворком на GitHub — возможно, неожиданно превосходя даже такого колосса, как React.
А теперь, с OverVue 6.0, установка и запуск приложений Vue стала еще проще. В выпуске версии 6.0 представлено несколько обновлений для повышения производительности, значительного улучшения взаимодействия с пользователем и уменьшения объема кода за счет улучшенного создания шаблонов. Новые функции OverVue теперь позволят вам экспортировать ваши проекты в TypeScript (используя Vite), визуализировать иерархию ваших компонентов в интерактивной и навигационной древовидной диаграмме и оставлять заметки о компонентах, которые экспортируются как комментарии в ваших файлах Vue. И это только некоторые улучшения, изменения и исправления, которые есть в 6.0!
Хотите узнать больше? Посетите наш веб-сайт OverVue.io или читайте ниже!
Экспорт проектов в TypeScript
OverVue теперь поддерживает стандартную поддержку TypeScript в Vue 3. С OverVue 6.0 ваши проекты можно легко экспортировать с синтаксисом и зависимостями, специфичными для TypeScript, чтобы вы могли быстро приступить к разработке своего следующего приложения с дополнительными преимуществами статической типизации. Просто создайте прототип своего приложения, экспортируйте проект и установите зависимости — вуаля! — вы готовы начать разработку в выбранной вами IDE. Команды CLI созданы заранее, чтобы вы могли легко разрабатывать, создавать или проверять свой код.
Не хотите TypeScript? Не волнуйтесь — ни одна из зависимостей TypeScript не будет присутствовать в вашем проекте, если вы решите не экспортировать как TypeScript.
Экспортированные проекты теперь выполняются через Vite
Продолжая тему экспорта, ваши проекты теперь будут создаваться с использованием высокопроизводительной платформы Vite (/veet/), а не Webpack. Vite предлагает несколько преимуществ, включая более быстрое время компиляции, меньшее количество зависимостей и улучшенную поддержку Vue без необходимости использования дополнительных библиотек. Теперь ваши проекты имеют вдвое меньше зависимостей, которые необходимо установить, прежде чем все будет запущено и запущено. Цель OverVue — сделать переход от дизайна к разработке максимально плавным и простым, и Vite элегантно справляется с этой задачей. Ваши проекты будут создаваться быстрее и вы тоже.
Другие улучшения в OverVue 6.0
Создание библиотек с помощью экспорта/импорта нового компонента
Еще одна новая функция в OverVue 6.0 — возможность импортировать и экспортировать ваши компоненты по мере их создания. Никакой абстракции JSON, никакого преобразования типов файлов — вход Vue, выход Vue. В результате теперь вы можете создавать библиотеки компонентов для использования в OverVue, чтобы сделать еще прощеначало разработки вашего приложения. Постройте один раз и больше никогда не стройте. Функциональность импорта OverVue в настоящее время ограничена файлами Vue, экспортированными конкретно из OverVue, поскольку мы продолжаем повторять наш алгоритм синтаксического анализа.
Примечания к компонентам появятся в вашем коде
Хотя OverVue стремится сделать процесс прототипирования быстрым и безболезненным, не всегда возможно завершить ваш прототип за один сеанс. В OverVue уже была возможность сохранять и загружать ваши проекты, но теперь вы можете также размещать примечания к компонентам. Вам больше не нужно создавать прототипы в OverVue и документировать все в другом месте.
Глазурь на торте? Эти заметки будут экспортированы в ваш проект как комментарии, поэтому все, что вы поместите в свои заметки OverVue, будет видно в вашей IDE, когда вы закончите прототипирование.
Универсальная поддержка с контейнеризацией
В ответ на сообщения пользователей о проблемах с работой OverVue на своих компьютерах приложение теперь можно запускать внутри контейнера Docker. В результате теперь можно запустить OverVue на любой машине, на которой можно запустить Docker. Репозиторий теперь включает файлы Docker и инструкции по работе с приложением через Docker на MacOS или WSL2/Linux, а также образ Docker, размещенный на DockerHub, который вы можете просто извлечь и запустить.
ПРИМЕЧАНИЕ. Запуск приложения Electron, такого как OverVue, внутри контейнера Docker будет не выполняться так же хорошо, как запуск приложения изначально, поэтому, хотя Docker теперь доступен, его следует последнее средство.
Что изменилось внутри?: переход на Composition API
Кодовая база OverVue была переведена с API параметров на API композиции! Это значительно улучшает модульность кода за счет централизации сложной функциональности в составных компонентах Vue, позволяя нескольким компонентам легко совместно использовать логику. Например, вместо того, чтобы использовать миксины, эмиты или пропсы, наша новая функциональность экспорта компонентов централизована внутри составного объекта, к которому имеют доступ все остальные компоненты. Код OverVue более СУХОЙ, его легче поддерживать и читабельнее. Для будущих итераций разработчики теперь будут иметь доступ к этому мощному расширению для любой функциональности, которая будет совместно использоваться компонентами.
Все эти изменения и многое другое!
Многие другие функции и множество исправлений ошибок были реализованы в OverVue 6.0. Вот некоторые основные моменты, но мы рекомендуем вам загрузить приложение и попробовать его, чтобы вы могли убедиться в этом сами!
- Новое руководство по началу работы содержит информацию о том, как использовать приложение, чтобы вы тратили меньше времени на изучение использования OverVue, меньше времени на создание прототипа и больше времени на работу над своим новым приложением.
- Улучшенные алгоритмы построения дерева и происхождения компонентов для повышения производительности при одновременном устранении ошибок.
- Генерация шаблонов была расширена и теперь включает генерацию состояния хранилища Vuex, действий и мутаций.
- Диаграмма дерева компонентов возвращается новой и улучшенной: с улучшенными интерактивными визуальными эффектами теперь ее можно использовать для навигации по прототипу вашего приложения!
- Обновлено 19 устаревших зависимостей, внесены критические изменения и устранены уязвимости — все пакеты OverVue теперь обновлены.
- Меню стали более отзывчивыми — добавление и удаление дочерних компонентов из родительских осуществляется одним щелчком мыши.
- Улучшения UI/UX — новый логотип и новый стильный дизайн, позволяющие делать больше с меньшим количеством кликов!
Как внести свой вклад
OverVue и его дальнейшее развитие невозможно без помощи всего сообщества Open Source. Если вы хотите внести свой вклад, перейдите по ссылкам ниже, оставьте комментарий, разветвите наш репозиторий и поставьте звезду на GitHub!
Дальнейшие шаги
Мы надеемся, что косметический ремонт и улучшения функциональности в OverVue 6.0 значительно упростят процесс создания прототипа, но мы всегда смотрим в будущее. Возможность размещать дочерние компоненты внутри HTML-элементов, добавлять двустороннюю привязку к элементам ввода, поддерживать более семантические HTML-теги и более детализированные параметры ввода для экспорта TypeScript — вот некоторые из функций, которые мы хотим реализовать. Кроме того, мы надеемся улучшить алгоритм импорта, чтобы лучше поддерживать файлы Vue, поступающие из внешних источников.
Спасибо!
Без предварительного вклада разработчиков OverVue ничего из этого не было бы возможно. Команда OverVue 6.0 хотела бы поблагодарить замечательных разработчиков, которые работали над этим проектом до нас: Дина Охаси, Дина Чанга, Дрю Нгуена, Джозефа Эйзеле, Александра Хаваса, Керианн Лин, Джоджу Алаоде, Эллисон Пратт, Фараз Моаллеми, Шона Грейса, Терри. Тилли, Николас Скиллачи, Алекс Лу, Джеффри Сул, Кеннет Ли, Райан Бендер, Сонни Нгуен, Габриэлла Кохаби, Росс Ламерсон, Шеннон Ли и Зоу МакГрат.
И особая благодарность Женевьев Эннэйбл(GitHub, LinkedIn)за ее руководство и наставничество в процессе работы над OverVue 6.0!
Команда OverVue 6.0:
Меган Надкарни — GitHub — LinkedIn
Юлия Бейкеринк — GitHub — LinkedIn
Керолос Несем — GitHub — LinkedIn
