Vue или React? Кратко о возможном росте технического долга и что лучше для начинающих

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

Что подразумевается под необоснованной сложностью проектов?

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

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

function Counter() {...}

А кто-то решил использовать классы:

class Counter extends React.Component {...}

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

Фреймворк «Vue» имеет свои особенности, данный фреймворк ограничивает возможность генерации HTML путем введения особых атрибутов (директив). Данная особенность имеет положительные стороны. Во-первых, скорее всего скопированный код из интернета будет идентичен всему проекту, во-вторых, разработчикам труднее запутаться и вероятность написания плохого кода значительно снижается. Фреймворк задает свои правила, которым необходимо следовать, а благодаря исчерпывающей и понятной документации, разработчики смогут повысить качество кода и конечного продукта в целом. Во «Vue» структура компонента удобно поделена на HTML, CSS и JS.

<template> // HTML </template>  <script> export default { data() {     return { // Свойства } } } </script>  <style> // CSS </style>

«Vue» декларативный фреймворк, в отличии от «React» он не говорит «как» генерировать HTML (например при помощи цикла map):

const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>   <li>{number}</li> );

«Vue» говорит «что» (директива v-for) нужно сделать для получения необходимого результата.

<ul>   <li v-for="item in items" :key="item.id">     {{ item.text }}   </li> </ul>

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

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

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