Vue.js — отличный инструмент не только для создания сложных одностраничных приложений (SAP), но и для создания прототипов.

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

Обычно я использую такие приложения, как Marvel или InVision, для создания прототипов и макетов пользовательского интерфейса, которые «чувствуют» себя как настоящие веб-сайты. Но обычно этого недостаточно.

Эти сервисы отлично подходят для прототипирования вашего дизайна, чтобы лучше понять UX и UI вашего приложения, но они ограничивают функциональность и скорость отклика. Вот когда все усложняется, и вы начинаете делать больше, создавая продукт вместо прототипа 🙂

Преимущества создания прототипа с помощью JavaScript-фреймворка

Это не обязательно должен быть фреймворк Vue.js. Существуют и другие популярные фреймворки JavaScript, которые вы можете использовать, например. Реакт или Ангуляр.

Все эти фреймворки — отличные варианты для мгновенного создания чего-либо.

Если вы освоите один из фреймворков JavaScript, вы откроете для себя совершенно новый мир. Вы увидите, как легко и быстро можно создать прототип на JavaScript.

Несколько дней назад я написал статью, в которой сравнил лучшие CSS-фреймворки для Vue.js. Использование фреймворка CSS ускорит работу и сделает ваш прототип отзывчивым.

Вот некоторые преимущества использования фреймворка JavaScript для создания прототипа:

  • Простая интеграция — вы можете легко интегрировать любые сторонние сервисы в свой прототип.
  • Гибкость — используйте свой любимый HTML, CSS или JS-фреймворк.
  • Данные жесткого кода — вы можете жестко закодировать данные клиента с помощью JSON.
  • Легко перейти от прототипа к продукту. Считаю это одним из самых важных преимуществ.

От прототипа к продукту

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

Очень часто ваш клиент хотел бы продолжить создание реального продукта. Именно тогда вы можете выбрать свой существующий прототип и продолжить его разработку.

Вы можете заменить жестко закодированные данные реальными данными с помощью API.

Заключительные примечания

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

В некоторых случаях будет достаточно использования онлайн-инструмента для создания прототипов, в других ваш клиент захочет иметь дополнительную функциональность или продолжить создание продукта. Vue.js — идеальный инструмент для создания прототипов и создания реальных продуктов.

Пожалуйста, поделитесь своими комментариями ниже.
Ура,
Ренат Галямов

Хотите поделиться этим с друзьями?
👉 renatello.com/vue-js-prototypes

PS: Обязательно ознакомьтесь с другими учебниками по Vue.js, например. 5 лучших CSS-фреймворков для вашего проекта Vue.js (2019), localStorage vs Vuex-persist in Vue.js.

Первоначально опубликовано на https://renatello.com (Использование Vue.js (Angular/React) для создания прототипов) 18 июля 2019 г.