15 отличий Vue.js от React от Дениса Чернова

1) вью более предсказуемый. Он ближе к стандартам на порядок
2) vue обладает глубокой мутабельной реактивностью что в разы облегчает вход для начинающих
3) реактивность основанная на полях а не методах, что тоже более интуитивно и просто для вката
4) шаблоны имеют строгие ограничения что заставляет писать более предсказуемый флоу
5) vue это фреймворк с богатой ОФИЦИАЛЬНОЙ обвязкой, что позволяет сосредоточиться на меньшем спектре библиотек и понимать код почти любого vue проекта
6) глубокая мутабельная реактивность на основе свойств
7) слоты
8) директивы гораздо лучше решают задачи управлением флоу чем методы JS
9) HTML-совместимость (да v-for нет в самом HTML но он парсится парсером HTML и поддается обработке)
10) SFC без необходимости CSS-in-JS
11) JS-in-CSS
12) большая официальная экосистема
13) DX-ориентированность. Те если есть апишки, то они пытаются быть удобными для разработчиков
14) Экосистема растущая во вне, а не вовнутрь (мы помогаем всем - все помогают нам)
15) Хорошая расширяемость API

#vuejs #react

Реакт выкатил новую экспериментальную штуку - React Compiler, которая позволяет оптимизировать React приложения.

Попробовать можно в песочнице.

#react

Возвращение к корням

Микрософт тут полушепотом призналась, что писала свой браузер Edge на React (имеется в виду обертка над Chromium - Избранное, Загрузки, Настройки, Новая страница и т.п.), но устала от его тормозов и переписала все на Web Components + HTML-first архитектуре.

В итоге всё залетало (видео)

#react #ms #msedge #webcomponents

Вчера в стриме по результатам опроса State of JS 2023 Илья Климов не справился с элементарной математикой, заявив, что недовольных своим фреймворком разработчиков во Vue почти в два раза меньше, чем в React.

На самом деле, исходя из диаграммы именно пользователей, получивших негативный опыт, у Vue больше - 24% против 23.5% у React

Что довольно странно.

Чем вы недовольны, ***?

#vue #react

18 качественных отличий Vue от React от Artyom Tuchkov

- отсутствие легаси-абсурда: @change во вью - это реальный change, а не input, как в реакте, мимикрирующий под change
- отсутствие stale closure и всех связанных с ним проблем
- автоматический трекинг зависимостей, нет костылей типа useCallback
- удобные хелперы из коробки (привет либам clsx и classnames)
- удобный DSL, а не стремный JSX
- нет useEffect и миллиарда статей и докладов на тему “вы неправильно используете useEffect”
- нет проблем с воображением, когда добавляют новые фичи - useImperativeHandle и dangerouslySetInnerHTML
- есть сахар для работы с формами - v-model
- есть слоты
- нет костыльного стриктмода, который, прости хоспаде, твой код запускает дважды, чтобы тебе было приятнее работать избавить тебя от багов
- нет monkey-patching’а нативных console и fetch
- нет ререндеров на любой чих
- нет 50 вложенных контекстов в руте приложения
- нет прекрасного forwardRef
- есть нормальная система плагинов
- есть реактивность для Map/Set из коробки
- есть нормальная мутабельность без сотни копий всего подряд
- есть nextTick, не надо костылить с flushSync

#react #vuejs

Интересная табличка

Google проверяет какие сайты проходят их тест на Web Vitals

Как видим, у Vue результаты значительно лучше, чем и SSR-ного Nuxt, одним из заманивающих доводов которого вроде бы и является хорошие веб метрики.

Также очень точно подтвердился наш подсчет по npm пакетам о соотношении сайтов на Vue и Nuxt - Vue примерно в 6-7 раз больше.

Ну и если отмотать на статистику 2020 года, то можно увидеть, что React превалировал над Vue в 10 раз. Сейчас - примерно в 2.

Script setup - this is how it's done.

#vuejs #nuxt #react #stats

Человек пытается привить реактерам правильное и красивое

React SFC

P.S. Предлагаю зафлешмобить и наставить ему GitHub звёзд

<template>
  <div>
    <h1>Counter</h1>
    <button onClick={() => setCount(count + 1)}>Increment</button>
    <p $if={count > 0}>Count: {count}</p>
    <p $if={count === 0}>Start counting!</p>
  </div>
</template>

<script lang="ts">
import { useState } from 'react';

const [count, setCount] = useState<number>(0);
</script>

<style>
button {
  padding: 10px 20px;
  font-size: 16px;
}
</style>

#react #sfc

Принес новогодние подарки

Cтатистика от w3techs.com. Они используют Chrome User Experience Report, так что данные достаточно объективные

По сравнению с прошлым годом - у Vue явная положительная динамика

А теперь смотрим на top 1000 (сайтов по посещаемости) и... закуриваем безникотиновую сигару

Элита интырнэта

#benchmark #vue #react #angular #stats

Создатель React Jordan Walke назвал вью-шников психически больными людьми

Кстати, у Эвана в X подписчиков в 5 раз больше, чем у него.

#react #vuejs

Любители JSX и TS всё стремятся извратить SFC

vue-vine

#jsx #react #sfc

#vuejs #react #meme #humor

Автор - админ самого большого Vue.js community в Twitter

#x #react

В Твиттере обсуждение большого поста разработчика OpenNext (инициативы по облегчению деплоя Next приложений куда-то окромя Vercel)

Отмазывает компанию, говорит, всё это случайности, а не злой умысел. Что в Next.js было мало намеренных изменений, ломающих совместимость, но много ненамеренных багов при обновлениях версий.

Пишет, что Next.js стал популярным благодаря своим достоинствам, но в какой-то момент его "перепродвигали" из-за больших вложений в маркетинг. Теперь разработчики начинают понимать, что Next.js не всегда подходит для их задач. Предостерегает от того, чтобы называть тех, кто чувствует странности в продвижении Next.js, теоретиками заговора

Что сейчас у Vercel небольшая команда по связям с разработчиками (DevRel), и они не платят инфлюенсерам за продвижение. Однако раньше это было не так - Vercel активно спонсировал людей, как официально, так и неофициально.

#react #sst #nextjs #spa

Продвинув Vite в экосистему React Эван выстрелил в свою Vue ногу - React попер как на дрожжах, согласно статистике w3tech.

#stats #react

Тут знакомый попросил потестить его приложение на React Native на Андроиде

Столкнулся с непонятным поведением - курсор мигает в поле ввода, тыкаю на ссылку в другом месте - ноль реакции. С 10 раза как-то только получается

Зависания непонятные. Было пару раз что нижняя половина экрана становилась белой, пополам надпись прям какую-нибудь разделяя по горизонтали

То есть, артефакты, в обычной веб разработке вообще не встречающиеся.

Стало интересно - это он криво накодил/нагенерил, или это React Native сам по себе такой?

#react #mobile

Очередной бессмысленный и беспощадный лонгрид: React vs Vue – подробное сравнение и перспективы

Комментировать не буду

#react #article

#meme #react #creative #video

Дал порассуждать о Vue разным LLM

ChatGPT: Давайте сразу к делу. Vue.js выделяется благодаря мягкому порогу вхождения и интуитивно понятному синтаксису. Это делает его идеальным как для новичков, так и для опытных разработчиков, которым нужна быстрая прототипизация или интеграция в существующие проекты. Его компонентная архитектура также способствует поддержанию кода.

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

DeepSeek: Добавлю, что однофайловые компоненты Vue (.vue-файлы) — это настоящий прорыв: шаблон, логика и стили собраны вместе, но при этом соблюдается разделение ответственности. Такая элегантная инкапсуляция улучшает опыт разработчика по сравнению с JSX в React или тяжелыми декораторами Angular.

Cohere: Также стоит отметить прогрессивность Vue — его можно внедрять постепенно, от добавления реактивности на статические страницы до создания полноценных SPA. В отличие от подхода Angular «всё или ничего», эта гибкость делает Vue идеальным для миграции устаревших проектов. Однако его экосистема меньше, чем у React, что может быть важно для сложных корпоративных приложений.

Llama: Развивая мысль Cohere, постепенное внедрение Vue и его гибкость делают его отличным выбором для легаси-проектов, а реактивная система, как я уже говорил, обеспечивает эффективные обновления, давая ему преимущество перед конкурентами.

Cohere: Точно! Vue находит редкий баланс между мощью и доступностью. Структура .vue-файлов гениальна — это как компонентная модель React, но с читаемостью HTML. Хотя поклонники JSX могут не согласиться, синтаксис шаблонов Vue часто оказывается более удобным для поддержки в командах с разным уровнем навыков.

Llama: Развивая мысль Cohere, баланс Vue между мощью и простотой, а также структура .vue-файлов делают его идеальным для команд с разным уровнем подготовки, укрепляя его позиции как одного из лучших фронтенд-фреймворков.

system:
Ключевые аргументы:
- Vue.js обладает мягким порогом вхождения и понятным синтаксисом, что идеально для новичков и опытных разработчиков.
- Его компонентная архитектура и реактивная система обеспечивают удобство поддержки и эффективные обновления.
- Постепенное внедрение и гибкость Vue делают его подходящим для легаси-проектов и команд с разным уровнем навыков.

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

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

#ai #react #vuejs