Кто я? Я frontend разработчик с каким-то опытом. Писал на каком-то кол-ве фреймворках. На jquery я писал во времена старта карьеры, сильно позже писал на react государственный (Россия) портал, которым, наверняка вы пользовались, сейчас пишу на Angular 9 в большом банке и Vue для Европейской клиники. Хочу поделиться своим опытом.
Модный дисклеймер: Автор делится своим опытом. Вы можете согласиться или не согласиться с ним. Если вам есть что сказать, тут есть комментарии.
1. jQuery
Это вообще не фреймворк. Это библиотека. Была придумана во времена динозавров, когда стандарты работы с DOM во всех браузерах были разные. jquery предлагал свой стандарт и инкапсулировал работу с DOM. Это позволяло не думать о том, какой браузер и как в этом браузере добавить класс элементу. Уже позже для jquery придумали карусели и bootstrap.
✅ Плюсы: простой, как кувалда, есть много красивых готовы календариков, каруселей и бутстрап.
❌ Минусы: код неизбежно превращался в лапшу
2. Backbone
Он добавлял в jquery немного архитектуры: модный на тот момент MVC, но по своей сути он остался jquery со всеми его плюсами и минусами
✅ Плюсы: код не так быстро превращался в лапшу
❌ Минусы: у нас все ещё нет нормального тулинга, сборку нужно делать руками, а код все равно превращается в лапшу
3. React
Революция и виртуальный DOM. Сначала его начали хейтить за "HTML в Javascript коде". До этого нас все учили (MVC, да), что логика должна быть отделена от отображения, а тут натебе, все опять в перемешуку.
Изначально все его описывали как всего лишь "V" в "MVC", но быстро про MVC все забыли и перешли на FLUX.
Итак, что нам дал React? В первую очередь это виртуальный DOM. Это значит, что все изменения сначала считаются в памяти (быстро), потом считается diff с текущим DOM и вносятся соответствующие правки в DOM. То есть мы минимизируем работу с DOM, что дает дикий прирост в перфомансе.
Следующая парадигма: компоненты. Компоненты — это круто. Берем наше приложение, декомпозируем его на компоненты и строим приложение "из готовых блоков". Круто, модно, удобно.
Подход «данные вниз, события вверх». Это означает, что компонентам мы передаем данные и подписываемся на события, когда хотим получить данные от компонента. Это удобно, дает понятный dataflow, но есть и минусы. Компоненты образуют дерево и, если мы хотим обменяться данными между соседними нодами - нам нужно стрельнуть событие вверх, вплоть до общего родителя по цепочке, а потом прокинуть их вниз до нужно компонента. Эту проблему в будущем решит FLUX, а конкретно, самая популярная его реализация redux.
Тулинг: изначально его не было. Все мы руками писали наши конфиги для webpack, а многие это делают до сих пор. Позже появился cli create-react-app, который позволил быстро развернуть проект на react с "настройками по умолчанию" который часто подходили под большинство кейсов, но так же есть возможность избавиться от него и дописать конфиг вебпака как вам нужно.
Работа с данными: самым популярным для стейт менеджмента стал redux. Он пропагандирует подход иммутабельных данных. То есть данные напрямую менять нам запрещено, а изменение происходит за счет "чистых функций" (pure function). Эти ф-ии получают на вход текущей стейт и т.н. action с payload, то есть непосредственно действие, которое мы хотим произвести с нашим стейтом. Функция же должна вернуть на основе всего этого новый, обновленный стейт. Зачем же это все надо? Это позволяет "прозрачно" работать с данными и легко тестировать состояние приложения. Чистые функции крайне легки в тестировании. Ещё это решает проблему с обменом данными между соседними компонентами. Наш стейт теперь хранится не в общем для всех родителе, а отдельно от приложения и доступен во всех компонентах (действительность же чуть сложнее, компоненты различают на контейнеры, который умеют в стор и презентационные компоненты, который просто красиво рисуют, но так глубоко не хочу погружаться)
Типизация. Люди делятся на 2 типа: первые любят типизацию, вторые младше 21 (с) Типизация - это круто. Как минимум потому, что помогает IDE автодополнять нам код :) А ещё предотвратит кучу ошибок на этапе сборки проекта. Для react доступен typescript и flow. Вдаваться в подробности не будем. Но typescript более популярный, но не такой строгий как flow. Но она доступна, хоть и не из коробки.
✅ Плюсы: Быстрый, хорошая архитектура, удобно работа со стейтом, тестируемый
❌ Минусы: Все ещё скудный тулинг, многим не нравиться JSX, большой порог вхождения
4. Angular 2+
Вообще есть 2 большие ветки ангуляра - AngularJS (Angular 1.x) и Angular 2+. Как не трудно догадаться сначала был AngularJS, а потом гугл решил все переосмыслить и выкатил вторую версию не похожую на первую ВСЕМ КРОМЕ НАЗВАНИЯ. Я буду говорить о второй ветке (на данный момент уже 9 версия), так как первая давно легаси и я мало про нее могу рассказать.
Что такое ангуляр? Для меня это дорогущий набор инструментов. Фирменный, с шикарном противоударном кейсом. Там есть все, что только может потребоваться тебе в повседневной работе.
Тайпинг: Ангуляр написан на typescript. Тайпинг приезжает из коробки. Многих это отталкивает, нужно учить новый язык. На практике - валидный Javascript - это валидный Typescript. Пишите на js, все что вы заметите - это продвинутые подсказки IDE и расширение файлов ts, а не js. А если вы научитесь typescript, то 80% ошибок избежите на этапе сборки.
Тулинг: Angular поставляется с cli утилитой. Она умеет стартовать приложение, генерировать код (можно писать свои генераторы и кастомные команды). На этапе создания проекта вы можете выбрать свой любимый препроцессор стилей, включать ли роутер и т.п.
Ынтерпрайз: ангуляр на первый взгляд очень страшный и пахнет java. Ну в самом деле, все эти декораторы @Component, @Injectable, @Module и т.п. выглядит жутко. К этому нужно привыкнуть. Это не плохо, это просто так есть.
Стуктура проекта: ангуляр дает стрктуру проекта и стайлгайды, которым стоит следовать. Что это дает нам? А то, что при переходе с одного проекта angular на другой - у вас мало что меняется. Все лежит там же, где и на прошлом проекте. И вообще выглядит одинаково. Это круто
DI: Ох, инъекция зависимостей. Мое любимое! Как я раньше без нее жил? Для тех, кто не знает в 2 словах: работа с данными ведется в "сервисах". Это такие классы, где мы пишем методы, который как-то получают данные, а так же в этих классах эти данные хранятся. Только эти классы мы сами не создаем, а поручаем это ангуляру. В своих компонентах мы просто говорим "Ангулр, дай мне сервис UserService" (ага, просто в конструкторе объявляем этот сервис И ВСЕ). Ангулр сам догадается как его создать (например этот сервис может иметь свои зависимости, аггуляр сам это разрулит) и принесет нам инстанс этого сервиса.
rxjs: Весь ангуляр основан на парадигме реактивного программирование. Все представляется в виде потоков данных, на которые мы подписываемся и как-то реагируем. Это сложно, но невероятно удобно.
И ещё много-много всего, что приезжает нам из коробки. Работа с сетью (http запросы) - есть HttpClient, работа с service worker? Их есть у меня. Работа с формами? Вот тебе FormBuilder - дерзай. Хочешь модный Drag and drop? Пожалуйста, 2 директивы и вот у тебя самописная доска трелло.
Но за все нужно платить. Порог входа в ангуляр невероятно высок, если вы новичок во фронтенде - он сломает вам мозг. Так же он очень большой и толстый. Какие-то простые вещи на нем делают очень многословно. Где в ректе 2 компонента и 4 файла в ангуяр будет три десятка файлов и четыре сервиса. Если вам нужна страничка для кота - не стоит его брать, но, если вы пишите сложно приложение - стоит присмотреться.
✅ Плюсы: есть все и из коробки, типизация, тулинг, архитектура
❌ Минусы: огромный порог вхождения, сложность, многословность, занимает много места
5. vuejs
О, vue классный. Простой, удобный, понятный. Писать на нем сможет даже твоя бабушка. Я за вечер обучил go backend разработчика, а потом он мне неделю в телеге хвастался, как он переписал весь фронтэнд на проекте за ночь. Но давайте по порядку
Тулинг: vue дает нам cli, который сгенерирует проект, настроит роутер и сборку. Как и с react можем написать свой вебпак с блэкджеком и куртизанками.
vue file: все компоненты vue хранятся в файлах с расширение vue. Там есть 3 секции template, script и style. Очевидно для верстки, логики и стилей. Это удобно, все в одном месте. Но если компонент большой - станет больно.
работа с dom: очень просто, поменял данные - тут же отрисовалось. события вешаются просто атрибутом.
✅ Плюсы: очень простой, сложность сравнима с jquery, но лапша у вас уже не получится, позволяет писать огромные приложения, это полноценный фреймворк
❌ Минусы: vue файлы. Кому-то они не нравятся, но справедливости ради - они не обязательны. можно по старинке все хранить в js, иногда магия vue с реактивностью ломает мозг (или сама себя и все взрывает), сложно прикрутить типизацию
Эпилог
Отлично, так что же мне выбрать то? Ну, как и везде - отталкивайтесь от своей задачи. Если вам нужна страничка для кота: vue или react, если вы пишите большой и страшный Ынтерпрайз - смотрите в сторону ангуляра. Он для этого очень хорошо подходит, но я видел (и сам писал) ынтерпрайзы на react и vue. Ну а jquery и backbone лучше не рассматривать для новых проектов.
Как-то так у меня получилось. Вопросы и комментарии задавайте. Всем добра.
(Я не знаю зачем я это писал. Скорее всего, второй бокал пива был лишний, но, наверное для этого мы все тут собрались). Всем бобра.
Взял на себя смелось причесать вёрстку поста, чтобы избавиться от эффекта стены текста. Теперь как-то более уважительно к читателю.
Откровенно говоря, впервые встречаю простое и человеческим языком на русском написанное сравнение всего этого зоопарка. Спасибо от пишущих на jquery и не понимающих «нахера вы усложняете со своими фреймворками». Теперь понятно нахера.
Годная систематизация, пишиищщо
В рекате стоит посмотреть в сторону MobX. Для 99% кейсов подходит — и не нужно париться с офигеть каким лапшичным Redux.
Круто. А можно ещё 3 строчки про свелт?
Все они компилируются в читый JS, другого мир ещё не придумал (кроме web assembly, но мы же все тут в сами здоровые люди?).
По поводу vue и больших проектов. Пишется, ещё как. Если ты не видешь суслика, не значит, что его нет.
Начать писать можно на чем угодно при каком угодно уровне. Это так не работает, что если у тебя опыта менее 2 лет, то npm тебе не даст поставть react :)
Статья - не статья, а изложение опыта автора. Я не притендую на глубокую аналитику.
Ангуляр действительно хорош тем, что это коробочное решение. DI позволяет творить энтерпрайз-чудеса, стайл-гайд (если его соблюдают) обеспечивает читаемость кода. Когда я после 3 лет на своём ангуляр-проекте пришёл в другую контору, где тоже был ангуляр, то очень быстро разобрался в архитектуре, тулинге, смог читать чужой код.
С риактом в этом плане труднее, там на каждом мало-мальски сложном проекте свой зоопарк технологий, первое время ходишь офигевший, пытаешься разобраться, как оно вообще работает :))
Зато мне в реакте нравятся возможности использовать элементы ФП. Ангуляр жестковат для этого. Если знаете, напишите, как в нём удобно реализовать high-order components, например :)
Короче, ангуляр — порядок и определённость, риакт — анархия и творчество!
По поводу статистики - хорошее заменявние, но я глубоко убежден, что не надо быть "реакт программистом", надо быть Фронтэнд разработчиками, а значит, при необходимости иметь возможноть "переключиться" с одного фреймворка на другой.
Красота, спасибо за отличный dive into frontend! Язык изложения простй и понятный, читать приятно!
ps. еще можно доплнить и сказать, что этот клуб - тоже VUE :)
Клёвый стиль изложения, спасибо!
Реакт-Ангуляр-Вью-Джейквери всегда на слуху, используются и в энтерпрайзах и в стартапах, про них куча статьей на каждом углу.
А можешь так же на пальцах пояснить про «длинный хвост» других js-фреймворков, пожалуйста? Есть ли тому же Свелту место в энтерпрайзе? Надо ли что-то знать про Эмбер-Метеор-Полимер? А ещё я слышал от коллег восторженное что-то про Аурелию, которая будет убийцей других фрейморков — врут поди люди или есть в ней что-то революционное?
Ну и последний вопрос: есть ли какой-то фреймворк, который можно подключать в маленький проект (лендос, PoC/MVP) как раньше подключался Джейквери (одним тегом <script>) и быстро вот безо всякого cli, вебпаков и танцев с бубнами вокруг компиляции тайпскрипта в нативный джаваскрипт получить все эти удобства на фронтэнде? Я знаю только один такой — Mithril, но он скорее мёртв, чем жив.
Спасибо!
Хорошая сбалансированная статья!
На мой взгляд, не упомянут чудовищно важный аргумент - "популярность на рынке" (выражаемая в кол-во вакансий, кол-во известных проектов, кол-во stackoverflow вопросов и ответов).
Только из-за этого одного аргумента я, например, к сожалению, не возьму ничего кроме Реакта для нового проекта. Потому что это ну почти 90% всех проектов сейчас (да, цифра разная для разных стран. Stackoverflow например показывал статистику по странам). Вот такая "несправедливость". Но принимать решение использовать не самый-популярный-вот-сегодня фреймворк в новом проекта - очень опасное решение.
Случай про "статистику по странам". Проводил митап Stockholm.js в Стокгольме. Задал вопрос аудитории про фреймворк. Из ~100 человек 99 подняли руку на Реакт, 1 на Ангуляр. Вот такая статистика. Скандинавия очень про-Реакт.
Еще во времена jQuery было очень модно пихать данные в аттрибуты элементов DOM, а потом их оттуда использовать. Sort of State Management :)
В результате чего DOM-дерево превращалось в боольшую нетипизированную, незадокументированную и неконтролируемую глобальную переменную со всеми вытекающими из этого последствиями.
Времена те, я надеюсь, прошли, а вот унаследованный код остался.
Судя по плюсам и минусам, кажется, что Vue - лучший выбор (для маленьких и больших проектов).
Vuejs маловато. Как бы основной вопрос а как на нем нормально писать большие приложения? В основной доке как-то маловато.
У Реакта:
Я, возможно, предвзят, но на Реакте с хуками невероятно низкий порог вхождения, ниже, чем писать на чистом JS.
У Vue:
Ни одно большое энтэрпрайзное приложение не использует Vue. Facebook, Netflix, Airbnb, Slack – все используют Реакт. Удивляюсь тому, как много Vue разработчиков на рынке.
У Реакта так же есть большой плюс в виде React Native.
Статья, мягко говоря, очень устарела — сейчас уже появилось много новых фреймворков, например, веб компоненты, или Svelte, который комплируется в чистый JS.
Еще есть stimulusjs — я использую его в продакшене.
И еще если вы не хотите тащить jQuery то в стандартной библиотеке уже есть куча всего: You-Dont-Need-jQuery
Очень понравилась статья, просто и доступно написано 👍
Хотела бы спросить совета. Дано: большой энтерпрайз апп на AngularJS, костяк был написан в очень быстром темпе около 5-6 лет назад (авторы/архитекторы - по профилю .Net-чики). На сегодня несколько десятков разработчиков регулярно выкатывают апдейты на прод с новыми фичами и багфиксами. Практически все они - full stack developers (но основная экспертиза - .Net).
Проблемы: код очень запутанный (ням-ням, спагетти!), фронт not responsive, тормозит; масштабировать продукт очень сложно - например, для локализации не получилось сделать даже РОС.
Сейчас стоит выбор - переезжать потихоньку на React или на Angular 9. Что бы посоветовали?
Asking for a friend ☺️
Спасибо!
Не так давно я погружался в фронтенд с нуля, имея за плечами опыт C#. Проще всего мне зашла связка React + MobX. Все это на тайпскрипте, т.к. vanilla js это просто ужас.
Все остальное мне напоминало какие-то извращенные самоистязания. Особенно Angular и Redux в реакте.
React так-то тоже не фреймворк, а просто библиотека