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

Он указал, что, когда крупная компания-разработчик программного обеспечения выпускает свой секретный соус, это будет ажиотаж. Разработчики думают про себя: «Эта компания пишет JS не так, как я, и они известные и успешные. Их способ написания JS лучше моего? И поэтому я должен принять его?»

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

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

Простота и удобство использования

В Vue.js нас привлекло прежде всего то, что он позволяет нашей команде легко писать простой JavaScript. Начать работу с Vue.js очень просто. Его исходный код очень удобочитаем, а документация — единственное руководство, которое вам когда-либо понадобится. Вам не нужны внешние библиотеки. Вы можете использовать его с jQuery или без него. Вам не нужно будет устанавливать какие-либо плагины, хотя многие из них доступны. Лично мне нравится vanilla Vue.js, хотя я могу использовать vue-resource, когда мне это нужно. Подключить Vue.js к существующему коду очень просто. В Vue.js нет никакой магии — это Objects до конца.

Я общаюсь со многими разработчиками JavaScript, и мне очень интересно, что те, кто проводит больше всего времени в Angular, как правило, почти не знают JavaScript. Я не хочу, чтобы это был я или наши разработчики. Почему мы должны писать «не JavaScript»?

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

Но Vue.js предлагает идеальный баланс между тем, что он будет делать для вас, и тем, что вам нужно делать самостоятельно. Если бы Backbone был анархией (никто не руководил), а Angular — диктатурой (во главе стоит команда Angular), я бы сказал, что Vue.js похож на социализм: вы определенно отвечаете, но Vue.js всегда в пределах досягаемости, прочная, но гибкая система безопасности, готовая помочь вам сохранить эффективность программирования и свести к минимуму страдания, связанные с DOM.

Чтобы дать вам представление о том, что я имею в виду, вот простой Codepen:

<div id="journal"> 
   <input type="text" v-model="message"> 
   <div>{{message}}</div> 
</div>
var journal = new Vue({ 
   el: '#journal', 
   data: { 
      message: 'Your first entry' 
   } 
});

Если вы видели несколько библиотек JavaScript, вам будет нетрудно понять все в этом примере без какой-либо документации. И обычно с другими фреймворками здесь простота заканчивается. Вы получаете хорошие, простые примеры, когда «Начинаете», но на самом деле все усложняется, как только вы пытаетесь извлечь выгоду из своих денег. Однако не с Vue.js — реальное использование кажется таким же простым, как и документация.

И это то, что нам нравится в Vue.js: элегантное сочетание структуры и простоты. Данные для представления находятся в объекте с именем data, но данные могут попасть туда и выглядеть так, как вы хотите. Любые функции, которые вы будете писать как обратные вызовы для событий, помещаются в объект methods, но они могут делать или возвращать все, что вы хотите. Vue.js просто знает, когда что-то меняется, и обновляет ваши взгляды. И вы пишете меньше кода.

Vue.js + GitLab === Меньше кода

Итак, какую проблему это решает для GitLab? Когда я присоединился, весь JavaScript был написан на JQuery. В этом нет ничего плохого, за исключением того, что для решения каждой проблемы требуется намного больше кода. Мы знали, что можем добиться большего. Как только мы начали использовать Vue.js, мы смогли сразу и последовательно решать сложные проблемы за гораздо меньшее время.

Простой, но практичный пример, который мы используем в продакшне: в задаче GitLab состояние задачи отображается как closed или open. Это простое значение может часто меняться и должно быть представлено в нескольких представлениях. С JQuery у нас было около 30 или около того строк кода для распространения этих изменений, и эти строки включали несколько классов и запросы к DOM вручную.

В Vue.js для этого теперь требуется написать одну строку JavaScript. Единственный другой код, который мы добавляем, находится в HTML, и это всего лишь несколько дополнительных атрибутов.

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

Хотите увидеть большой план GitLab по интерфейсу?

Если вам интересно, каков наш большой фронтенд-план, наш руководитель фронтенда также написал об этом пост. Читайте прямо сейчас на нашем сайте!

Посмотрите веб-трансляцию «Почему мы выбрали Vue.js»

Первоначально опубликовано на about.gitlab.com 20 октября 2016 г.