Среди многих интерфейсных фреймворков JavaScript, доступных разработчикам, Vue.js, несомненно, является наименее обсуждаемым среди фреймворков между React, Angular и Vue. Но в ближайшие годы Vue.js станет будущим фронтенд-разработки. Особенно для стартапов, где основное внимание уделяется более быстрой разработке, простоте использования и коду, ориентированному на бизнес-логику, Vue.js оказался чрезвычайно полезным. Но вопрос в том, как это можно реализовать? Давайте сначала немного узнаем об истории Vue.js.

Фон

Первоначально Vue.js был разработан Эваном Ю, бывшим сотрудником Google, после того как он долгое время работал с Angular. Первоначальный выпуск был выпущен в феврале 2014 года и распространяется под лицензией MIT License. В настоящее время Vue.js имеет открытый исходный код и регулярно поддерживается огромным сообществом разработчиков Vue.js и участников открытого исходного кода по всему миру.

Первоначально React.js был выпущен в мае 2013 года. Но почему React.js более известен, чем Vue.js? Причина довольно проста и прямолинейна. Angular.js поддерживается Google. React.js поддерживается Facebook. Но поскольку исходный код Vue.js в основном открыт, многие компании до сих пор мало используют Vue.js.

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

Небольшой размер. Размер Vue.js намного меньше, чем у Angular и React. Vue.js вместе с Vuex и Vue Router весит около 30 КБ (в сжатом виде).

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

Оптимизация во время выполнения. В Vue.js при изменении состояния система автоматически определяет, какой компонент отображать. В React пользователю необходимо реализовать shouldComponentUpdate() вручную.

Привязка данных: и React, и Vue используют одностороннюю привязку данных. Vue использует одностороннюю привязку данных для своих компонентов. Но используя директиву v-model, мы можем добиться двусторонней привязки данных очень простым и эффективным способом. С другой стороны, в React.js гораздо сложнее добиться двусторонней привязки данных.

По моему мнению, Vue.js — идеальная интерфейсная среда для стартапов. Почему?

  1. React.js известен своей крутой кривой обучения. Принимая во внимание, что Vue.js имеет более быструю кривую обучения. Vue.js может превратить любую статическую веб-страницу в интерактивный пользовательский интерфейс без особых знаний JavaScript. Vue использует простой HTML, в отличие от React, который использует JSX (JavaScript и XML). Следовательно, больше внимания можно сместить на разработку интерактивного пользовательского интерфейса, а не на сложные структуры и настройку.
  2. Vue.js предоставляет обширную документацию с официального сайта https://vuejs.org. Одной документации более чем достаточно для начала.
  3. В настоящее время прогрессивные веб-приложения набирают популярность, как и все остальное. Каждая компания или стартап, основанные на продуктах, пытаются создавать PWA наряду с нативными приложениями. Vue.js предоставляет простой способ создания PWA «сначала офлайн» с помощью плагина pwa для vue cli. Создание сервис-воркеров и кэширование контента для автономного использования — это просто кусок пирога.


@vue/cli-plugin-pwa | Vue CLI
плагин pwa для vue-cli Сервисный работник, добавленный с помощью этого плагина, включен только в производственной среде (например…cli.vuejs.org



4. Совместное использование vue-router и vuex обеспечивает простое управление данными и передачу данных для одностраничных приложений (SPA).

5. Vue предоставляет обширную встроенную поддержку SASS (препроцессор CSS) или SCSS, который широко используется в настоящее время вместо CSS.

Что нового в Vue 3.0?

  1. Кодовая база Vue.js 3.0 написана на TypeScript с автоматически сгенерированными определениями типов. API одинаков как в TypeScript, так и в JavaScript. Итак, хорошие новости для разработчиков Angular!
  2. Внедрение нового Composition API, который предлагает набор функциональных API, упрощающих повторное использование кода и использование примесей.
    https://composition-api.vuejs.org/
  3. Рендеринг на стороне сервера или SSR намного быстрее в Vue.js 3.0.
  4. Vue.js 3.0 теперь поддерживает встряхивание деревьев. Следовательно, время выполнения ядра уменьшено до 10 КБ с 20 КБ (сжато с помощью gzip).

Вывод

Согласно официальному веб-сайту npmjs, среднее количество загрузок Vue.js в неделю составляет 1 634 987, тогда как среднее количество загрузок React.js в неделю составляет 7 773 326. Итак, очевидно, что до сих пор популярность React.js намного выше, чем у Vue.js. Но хорошо то, что у Vue.js около 170 тысяч звезд на GitHub, тогда как у React.js 154 тысячи, что показывает, что Vue.js набирает популярность очень быстрыми темпами.

На приведенном выше графике представлены тенденции Google для темы Vue.js за трехлетний период (15.08.2017–15.08.2020). Для Vue.js отмечен значительный рост поиска в Google. Согласно опросу Stackoverflow 2019 года, Vue.js и React.js являются двумя наиболее востребованными веб-фреймворками. Несколько технологических гигантов выбрали Vue.js для своих веб-сайтов, таких как Google, Apple, Gitlab, Nintendo, Alibaba, Font Awesome, 9GAGи многие другие. Vue.js вместе с Vue 3.0 определенно станет самым серьезным конкурентом React и будущего фронтенд-разработки в 2021 году.