Прежде чем мы начнем с Vue.js, вам необходимо иметь знания HTML, CSS и JavaScript на среднем уровне. Если вы новичок в интерфейсной разработке, возможно, сразу перейти к фреймворку в качестве первого шага - не лучшая идея.

Vue - это прогрессивный фреймворк для создания пользовательских интерфейсов. Vue.js - это не просто прогрессивный фреймворк; это прогрессивная структура.

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

Что делает Vue.js прогрессивным?

Чем он отличается от любой другой платформы, представленной на рынке?

Что наиболее важно, почему все больше разработчиков переходят с React.js и Angular на Vue.js?

Что такое прогрессивный JS-фреймворк?

Мы ответим на эти вопросы в следующих разделах.

Что такое прогрессивная структура?

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

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

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

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

Если у вас есть различные компоненты, которые вы хотите представить во внешнем интерфейсе, для этого мы используем маршрутизацию. По мере того, как ваш проект становится все больше и больше, вам понадобится какое-то состояние, потому что у вас есть разные компоненты, разные маршруты. У вас могут быть / users, / post и т. Д., Суть в том, что все ваше приложение становится все больше и больше.

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

Следующий уровень - это Система сборки. Допустим, вы будете работать примерно с 20, а может быть, с пятью, шестью людьми, вам понадобится какая-то система сборки, чтобы все автоматизировать, а не просто принимать решения, как вы так думаете.

Vue, являющийся прогрессивной структурой, просто означает, что «если у вас есть существующее серверное приложение, вы можете подключить VUE только к одной части своего приложения». Затем вы можете внести изменения, если хотите, в их библиотеки CORE.

Слово «прогрессивный» означает, что фреймворк реализован как дополнительная разметка HTML. По сути, это шаблонная модель, привязанная к модели данных. Если модель обновляется, обновляется HTML-код браузера, т. Е. Он реагирует на обновления модели.

В отличие от других монолитных фреймворков, Vue разработан с нуля для постепенного внедрения.

Что такое монолитный каркас?

Монолит означает составление единого целого. Приложение Monolithic описывает одноуровневое программное приложение, в котором различные компоненты объединены в единую программу на единой платформе.

Рассмотрим пример приложения электронной коммерции, которое авторизует клиентов, принимает заказ, проверяет товарные запасы, авторизует оплату и отправляет заказанные товары. Это приложение состоит из нескольких компонентов, включая пользовательский интерфейс электронного магазина для покупателей (веб-представление магазина), а также некоторые внутренние службы для проверки товарных запасов, авторизации и списания платежей и заказов на доставку.

Монолитная архитектура (для приложения электронной коммерции), несмотря на наличие разных компонентов / модулей / сервисов, приложение создается и развертывается как одно приложение для всех платформ (т.е. настольных компьютеров, мобильных устройств и планшетов) с использованием СУБД в качестве источника данных.

Монолитная структура обычно предоставляет тесно связанную кодовую базу, которая делает множество предположений о том, как код взаимодействует друг с другом. Обычно он включает в себя все, что вам нужно для быстрого запуска и запуска веб-приложения.

Вам может быть интересно, что означает сильная связь или сцепление.

Связка относится к тому, насколько код зависит друг от друга, их независимости от другого кода. Тесно связанный код имеет более высокую взаимозависимость, но предлагает большую координацию (поскольку код «знает больше» друг о друге). Слабосвязанный код, как вы понимаете, имеет меньшую взаимозависимость, но предлагает меньшую координацию (не обязательно хуже)

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

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

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

Vue легкий, свежий, довольно простой и понятный. Несмотря на то, что он гибкий и простой, он также очень мощный и предлагает множество функций. Vue также позволяет вам предоставить любую структуру приложения, которую вы хотите. Angular не позволит вам это сделать, поэтому он прост в использовании, очень мощный и чрезвычайно универсальный.

Зачем нам нужны прогрессивные рамки?

Прогрессивная структура адаптируется к существующей сложности проекта, то есть, допустим, у вас есть приложение, которое выполняет функции списка дел. В нем есть функции, с помощью которых пользователь может добавлять, удалять и удалять записи. Пользователи также могут добавлять изображения и голосовые заметки, а теперь давайте, чтобы добавить новую функцию, мы хотим интегрировать vue.js в этот проект. Именно здесь вступает в действие прогрессивный фреймворк vue. Vue адаптируется к существующей сложности проекта. Если бы мы хотели использовать angular вместо vue, это было бы сложно, поскольку angular - это монолитный фреймворк, а, как мы знаем, монолитные фреймворки состоят из одного элемента.

Вместо «Фреймворк, от которого вы можете отказаться», как насчет «Фреймворка, от которого вы можете постепенно отказаться»

Преимущества прогрессивной платформы для производительности

Прогрессивное усовершенствование нацелено на обеспечение базового «независимого от устройства» опыта для всех пользователей. Теперь, что означает агностик устройств или агностицизм.

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

Например, мобильное приложение (приложение), не зависящее от устройства, совместимо с большинством операционных систем и также может работать на различных типах устройств, включая ноутбуки, планшетные ПК и смартфоны. Веб-сайт, не зависящий от устройств, предназначен для размещения посетителей, использующих мобильные устройства, настольные компьютеры или телевизоры для посещения сайта.

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

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

  • Более быстрое время до интерактивности

Многие современные приложения используют клиентские фреймворки (такие как Angular и React) для обеспечения своего «основного» опыта. Они часто требуют загрузки полного приложения на устройство, прежде чем его можно будет использовать, что приводит к длительной задержке для пользователей с более медленным подключением.

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

  • Неблокирующая загрузка шрифта

В последние годы веб-шрифты стали чрезвычайно популярными, но вопрос о том, как их лучше загрузить, по-прежнему остается спорным. Их немедленная раздача всем может привести к печально известной «вспышке невидимого текста», когда браузер загружает шрифт, что в некоторых браузерах (например, iOS Safari) приводит к невидимому контенту, пока шрифт загружается.

Вместо этого мы можем использовать уже доступный «системный» шрифт (например, Arial), а затем заменять его только тогда, когда мы уверены, что наш собственный шрифт готов и поддерживается. Это означает, что контент всегда будет виден, независимо от возможностей устройства или сети. Это может отвлекать при первом посещении, поскольку шрифт заметно изменится через несколько секунд, но это предпочтительнее, чем скрытие содержимого.

Это основной принцип прогрессивного улучшения (PE) - начиная с надежного и быстрого опыта, а затем «наслаивая» улучшения, когда это возможно.

  • Условная загрузка

Некоторые из самых впечатляющих функций в Интернете имитируют нативные приложения, такие как чат в реальном времени и редакторы «WYSIWYG» («Что видишь, то и получаешь»). К сожалению, это могут быть очень большие и сложные файлы, обычно JavaScript, что приводит к замедлению работы сайтов и увеличению загрузок.

Использование подхода, дружественного к PE, означает обеспечение того, чтобы основные функции, стоящие за этими действиями (например, ввод содержимого, отправка формы), не зависели от внешних файлов или JavaScript. Затем в фоновом режиме мы можем «постепенно» загружать расширенные версии этих функций и заменять их, когда они будут готовы. Более того, мы можем загружать эти ресурсы только при необходимости, а не (например), если на странице нет редактора WYSIWYG.

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

  • Быть избирательным

Мы можем сделать еще один шаг вперед в нашей условной загрузке «расширенных» функций, еще более избирательно определяя, кто их получает.

Многие старые браузеры плохо поддерживают современные функции, что часто требует добавления больших вспомогательных библиотек (известных как «полифиллы») для заполнения пробелов. Обычно это означает предоставление посетителям файлов большего размера, чем им нужно, просто для обслуживания наименьшего общего знаменателя.

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

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

Возможности Vue.js

  • Маленький

Успех фреймворка JavaScript зависит от его размера. Чем меньше размер, тем больше он будет использоваться. Одно из самых больших преимуществ Vue.js - его небольшой размер. Размер этого фреймворка составляет 18–21 КБ, и пользователю не требуется времени для его загрузки и использования.

  • Универсальность (адаптируемость)

Vue может адаптироваться или адаптироваться к вашему приложению.

Если вы хотите создать одностраничное приложение, в этом нет никаких сомнений - вам следует использовать Vue.JS. Vue, по сути, действует как представление, что означает, что он позволяет отображать части данных.

  • Легкость использования

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

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

Если у вас есть опыт работы с другими фреймворками, не волнуйтесь. Основная библиотека Vue в значительной степени связана с уровнем представления. Поэтому вы можете подобрать его, интегрировать со сторонними библиотеками и использовать с существующими проектами.

Если вы HTML-разработчик, то обнаружите, что обучение Vue довольно великодушно.

Наряду с простотой использования следует также упомянуть кривую обучения vue. Способность разработчиков писать коды на конкретном языке программирования называется кривой обучения.

Vue предоставляет более настраиваемые параметры, следовательно, обеспечивает более простую кривую обучения, чем Angular и React.

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

  • Легкость и гибкость

Vue использует довольно простую документацию и отличается легкостью. Он работает как слой интерфейса, а это означает, что вы можете использовать его как легкую функцию на страницах. Это намного лучше, чем полноценный СПА.

Это позволяет пользователю записывать свой шаблон в файл HTML, файл JavaScript и чистый файл JavaScript с использованием виртуальных узлов. Эта гибкость также упрощает понимание разработчиками React.js, Angular.js и любого другого нового фреймворка JavaScript. Когда дело доходит до использования Vue.js. Также очень легко добавлять и работать с такими инструментами, как Templating Engines (например, pug), пре-процессорами CSS (например, sass, less, stylus и т. Д.) И инструментами проверки типа, такими как Typescript.

  • Виртуальный DOM

виртуальный DOM (VDOM) - это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «реальным» DOM библиотекой

Когда впервые появился Virtual DOM, он был одним из основных отличий React. Это было большим преимуществом по сравнению с предыдущими фреймворками, и новые библиотеки начали следовать тому же подходу (например, Vue.js).

Когда вы имеете дело с клиентским приложением, вы быстро сталкиваетесь с одной проблемой: манипуляции с DOM обходятся дорого. Если ваше приложение большое или очень динамичное, время, затрачиваемое на манипулирование элементами DOM, быстро увеличивается, и вы сталкиваетесь с узким местом производительности.

Очевидный ответ на проблему - избегать манипулирования элементами без крайней необходимости.

Благодаря минимальному количеству компонентов для повторного рендеринга Vue позволяет вам предварительно скомпилировать ваши шаблоны в чистый JavaScript. Этот виртуальный DOM допускает массовую оптимизацию.

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

  • Двусторонняя привязка

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

Vue имеет двустороннюю привязку к элементам текстуры и входам формы благодаря директиве v-model. Директива v-model используется для обновления данных, касающихся событий ввода пользователем. Vue может основывать свое решение об обновлении элемента на типе ввода.

  • HTML-синтаксис

Синтаксис шаблона на основе HTML, который использует Vue, позволяет пользователю связывать данные экземпляра Vue с визуализированной DOM. Это, в свою очередь, позволяет пользователю сохранять повторно используемые фрагменты кода, расширяя самые основные элементы HTML.

Вышеупомянутые заметки отвечают на все 3 вопроса из 4, которые я упомянул в начале этих заметок. Теперь ответим на самый важный вопрос: "Почему все большее число разработчиков переходят с React.js и Angular на Vue.js"

Из множества веб-страниц, которые я исследовал, чтобы выяснить, почему vue является грядущей тенденцией, мое внимание привлек один график: опрос «Состояние JavaScript», который Саша Грейф проводит каждый год (Саша Грейф - разработчик / дизайнер, который также является создатель боковой панели, VulcanJS и соавтор Discover Meteor.). Это не научный обзор, но он предлагает хороший объем информации, и это было позже подтверждено, когда у нас была более четкая картина, особенно о Vue.js, поскольку мы ничего не знали о нем в начале нашего этапа исследования / обучения.

Недостатки Progressive JS Framework

Конечно, у Vue есть свои недостатки.

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

Теперь, хотя Vue.JS является «прогрессивным», он по-прежнему не отображает так быстро, как React.js, что не является идеальным положением вещей.

Шаблоны тоже не такие уж гибкие, как и компонентный подход.