Когда я начинал в Ennetix, мне сказали, что компания использует Vue для фронтенда. Мне было любопытно это решение; в то время я никогда не слышал о Vue. Я подумал, почему бы не использовать интерфейсную библиотеку, такую ​​как React? Для меня React был основным интерфейсом для всех моих проектов. У React было много преимуществ, таких как хорошая поддержка крупных корпораций, таких как Facebook, множество онлайн-ресурсов и множество библиотек, которые могли удовлетворить любые ваши потребности. Ennetix использовала Vue для разработки внешнего интерфейса для xVisor, который представляет собой панель инструментов AIOps, которая предоставляет ценную информацию и аналитику для получения важной информации о критически важных приложениях. Как бы то ни было, мне не терпелось изучить новую технологию, которую я мог бы добавить в свой инструментарий разработчика. Со временем, когда я узнал больше о Vue, я понял, что он очень похож на React, но во многих отношениях основан на нем.

Что такое React?

React — это внешняя библиотека JavaScript, используемая для создания пользовательских интерфейсов. Библиотека представляет собой монолит в пространстве фреймворка внешнего интерфейса и поддерживается крупными гигантами Силиконовой долины, такими как Facebook. Многие компании, такие как Uber, Airbnb, Discord и Instagram, используют React в своем стеке технологий. Излишне говорить, что из-за своей популярности и корпоративной поддержки React не собирается исчезать в ближайшее время.

А как насчет Vue?

Как и React, Vue — это фреймворк для создания пользовательских интерфейсов. Первоначально Vue был разработан Эваном Ю, но с годами он значительно вырос и поддерживается несколькими крупными компаниями. Многие компании, такие как Nintendo, Upwork, Netflix и Adobe, внедрили Vue в свой технологический стек. На протяжении многих лет популярность Vue быстро росла, поднимаясь вверх в чартах наиболее часто используемых интерфейсных фреймворков.

Чем похожи Vue и React?

При разработке Vue Эван Ю использовал многие концепции из React, которые он считал полезными. Вот почему Vue и React похожи в некоторых аспектах. Первое важное сходство заключается в том, что обе платформы используют виртуальную DOM (объектную модель документа). Виртуальный DOM — это место, где виртуальное представление пользовательского интерфейса хранится в локальной памяти, а изменения, внесенные в виртуальный DOM, вносятся в реальный DOM. Основное преимущество использования виртуального DOM-дизайна заключается в том, что он значительно повышает производительность. Виртуальный DOM важен для xVisor из-за преимуществ в производительности. Поскольку информационная панель xVisor очень динамична и требует больших объемов данных, важно выбрать фреймворк, способный справиться с требованиями серверной части и большими объемами данных.

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

Каковы основные различия между обеими платформами?

  • React использует JSX, а Vue использует шаблоны.
  • У React более крутая кривая обучения, разработчикам нужно изучить JSX и создавать системы, чтобы начать работу.
  • Vue очень легко подобрать.

Как Vue помог мне в моем путешествии в Ennetix?

Одним из основных преимуществ, с которыми я столкнулся при работе с Vue, было то, насколько легко было взять и приступить к работе. Благодаря моему предыдущему опыту веб-разработки я смог быстро добиться значительного прогресса в использовании шаблонов Vue. Это было чрезвычайно легко подобрать, поскольку в шаблонах работал любой допустимый HTML и CSS. Тем не менее, шаблоны давали вам гораздо больше возможностей, чем обычная уценка, благодаря простому динамическому рендерингу. Я помню, как впервые узнал о React и сколько времени мне понадобилось, чтобы начать и добиться значительного прогресса в React. В то время как с Vue я смог погрузиться в кодовую базу Ennetix сразу после прочтения документации. Кроме того, документация для Vue значительно упростила процесс. Через день после прочтения документации (https://v3.vuejs.org/guide/introduction.html) я уже добился значительного прогресса.

Другим примером того, как шаблоны Vue сэкономили мне значительное количество времени, был случай, когда мне поручили преобразовать руководства xVisor из уценки в веб-страницу. Руководство было большим, и его преобразование вручную заняло бы значительное количество времени. В итоге я использовал онлайн-инструмент для преобразования уценки в HTML. Поскольку любой допустимый HTML-код является допустимым шаблоном Vue, это позволило мне напрямую скопировать и вставить сгенерированный HTML-код в кодовую базу. Это сэкономило мне бесчисленные часы медленного ввода всего контента. Если бы мне поручили эту задачу в React, я бы потратил гораздо больше часов на медленную модификацию всего контента, чтобы сделать его совместимым с JSX.

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

Ссылки:

Обо мне:

Джеффри Ким (Jeffrey Kim) — инженер-программист в Ennetix, увлекающийся фронтенд-разработкой. Ennetix специализируется на AIOps, чтобы обеспечить прозрачность и понимание современной ИТ-инфраструктуры.