React, Vue или Angular? Другой взгляд на выбор JavaScript-фреймворка

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

Статья будет полезна не только начинающим frontend-разработчикам, но и опытным backend-разработчикам, которым по своей воле или по желанию работодателя пришлось окунуться в бескрайний океан «фронта».

Меня зовут Игорь Безлепкин — CEO сервиса SalesWidget, fullstack-developer, веду личный Telegram-канал.

Первая моя встреча с фронтендом в нынешнем его понимании состоялась в году так 2016. В то время я работал в консалтинговой компании, и тамошний руководитель отдела маркетинга решил написать свою внутреннюю CRM. Задача была поставлена, я приступил к выбору инструмента. Первыми в списке для рассмотрения оказались React, Vue и, как многим покажется странным, малоизвестный ExtJS от компании Sencha. Также в список попал Angular.

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

Сегодня я уже не вспомню, почему не запустились React и Angular, но к ним мы обязательно вернемся в этой статье чуть позже. Случилось так, что коллега вел ознакомительную разработку на ExtJs, а я параллельно - на VueJs. Спустя неделю мы начали подключать телефонию Voximplant. Сделали UI-компонент набора номера и пробовали звонить. Звонки не проходили 🙂. По результатам недели-двух разработки мы заметили что на VueJs процесс продвигается гораздо быстрей, что в общем-то логично. ExtJS - весьма сложный и специфичный инструмент, где все пишется на js, и если ты не знаешь API каждого элемента, то на каждый чих придется лезть в документацию. В общем, ExtJS хорош где-нибудь в энтерпрайзом-энтерпрайзе.

По мере того как мы учили Vue и наша CRM-система приобретала какой-то рабочий вид, мы столкнулись, пожалуй, только с двумя основными трудностями, а именно: VueJs не давала никаких рекомендаций по выстраиванию архитектуры приложения, а

из коробки не шла поддержка TypeScript.

Благо над проектом работали всего два человека, и мы придерживались обусловленной структуры, которая была далека от концепций SOLID и KISS, и модного DDD 🙂.

Помимо нашей CRM-системы VueJs я использовал в личном проекте. Это было гибридное мобильное приложение на Framework7 с поддержкой оффлайн-режима. Данные хранились в SQLite. Вот тут я как раз и почувствовал, что такое ванильный js без типизации.

VueJs второй версии, который я тогда использовал, пригоден и для взаимодействия с TypeScript, но работает он там вполсилы. Данные, которые передаются в Vuex, теряют всю типизацию при вызове commit, dispatch. Скорее всего, в Vue 3 + Pinia все бы разрешилось, но, к сожалению, я с ними не работал.

На Angular я перешел как раз по тем причинам, что описал выше — отсутствие архитектуры и полурабочее решение по работе с TypeScript.

В тот момент я начал учиться кроссплатформенной мобильной разработке, и мне хотелось найти что-то в связке с Angular. После небольшого ресерча в списке оказалось два инструмента: Ionic и малоизвестный NativeScript. Так как Ionic это по сути вебовская технология, которая просто рисует HTML в WebView, с чем я уже работал в Framework7, я выбрал NativeScript. Мне хотелось глубже окунуться в мир нативной разработки.

В Angular мы имеем жесткую структуру проекта, полную поддержку TypeScript, ООП-ориентированность, хороший DI и непонятный (для меня) роутинг. Да, роутинг мне показался сложноватым.

На React я запустил всего один проектик — админпанель.

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

Так как в React шаблоны это, по сути, JavaScript, то и все «пробсросы» данных в компоненты - это обычные аргументы функции, которые легко типизируются с TypeScript. Те же emit в React - просто колбеки, которые также пробрасываются как аргументы. То же самое можно сказать про операторы и циклы: нет магии типа v-for или *ngFor. Мы просто берем .map и кодим, не забивая голову всеми этими условностями. Возможно, такие записи как в React, менее изящны, но разработка как будто идет быстрей.

После трёх лет работы с Vue, двух с Angular и двух недель с React :) я могу сказать следующее. Все три платформы решают одни и те же задачи. Если разрабатывать какие-то сложные долгоиграющие CRM для какого-нибудь Газпрома или же мобильное приложение, то лучшим выбором будет Angular.

Если же это просто сайт или админка в сегменте B2C, я бы не брал уже Angular, это избыточно и, кстати, у Angular гораздо меньше UI - библиотек 🙁.

Также ангуляр подойдет тем разработчикам, кто пришел с ООП-бэкенда, им он будет максимально понятен. Если вы зашли во фронтенд с нуля, Angular будет не лучшим выбором. Еще одно интересное наблюдение. Angular придерживается паттерна TDD — Test Driven Design, то есть сперва пишем тест, а потом реализацию, посему с каждым файлом сервиса, компонента лежит файл .spec. Но в своей практике я такого никогда не делал, даже в весьма крупных проектах для крупных заказчиков. Видимо это работает где-то там…

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

Для обоих фреймворков полно UI-библиотек и решенных задач на Stackoverflow. В оба фреймворка (ну, конечно же, все скажут, что React это библиотека) можно заходить с нуля, но! Если вы заходите с нуля, пожалуйста, учите параллельно построение архитектуры, SOLID и прочую потребную заумь. Если Angular нам говорит, как и куда что инжектить и куда какой файл класть, то с Vue и React вы будете один на один.

Многие говорят, мол, в Vue ты работаешь с HTML в шаблоне, а в React не совсем HTML. В React свой синтаксис (JSX), напоминающий HTML. Лично я особо преград не заметил. Пишешь и пишешь, благо VSCode все подсвечивает.

Существует еще мнение, что если ты работаешь с React, то запросто сможешь работать и с ReactNative. Правда же в том, что если ты хочешь создавать полноценные мобильные приложения, то одним знанием JS и ReactNative категорически не обойтись.

Если ты опытный разработчик с хорошим осознанием ООП, тебе в Angular. Если ты новичок, то учи JavaScript, архитектуру, тогда и можно двигать в React или Vue.

#react #vue #angular #frontend #backend #фронтенд