LINUX.ORG.RU

React vs Vue vs Svelte vs somebuzzword: что лучше?

 , ,


0

2

React/pReact

App.jsx:

import { h, Component } from 'preact'

export default class App extends Component {
  state = {
    counter: 0,
  }
  increaseCounter = (e) => {
    this.setState((state) => ({
      counter: ++state.counter
    }))
  }
  render(_, { counter }) {
    return (
      <button onClick={this.increaseCounter}>
        Count: {counter}
      </button>
    )
  }
}

index.js:

import { h, render } from 'preact'
import App from './App'


render(<App />, document.querySelector('#app'))

Vue

App.vue:

<template lang="pug">
button(@click="++counter") Count: {{ counter }}
</template>

<script>
export default {
  data: () => ({
    counter: 0,
  }),
}
</script>

index.js:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

Svelte

App.svelte:

<script>
let counter = 0
</script>

<button on:click={() => ++counter}>Count: {counter}</button>

index.js:

import App from './App.svelte'

export default new App({
  target: document.body,
})

Прочее

index.html примерно общий для всех:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8" />
    <title></title>
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
  </head>
  <body>
    <div id="app"></div>
    <script src="./index.js"></script>
  </body>
</html>

Запускал все через parcel.

Можно ли сделать на основании этих примеров вывод о громоздкости реакта? Или вы можете привести примеры, где React менее многословен (это у меня еще без TypeScript). Сейчас примерно половина вакансий с React. Мне нужно определиться нужно ли вдовесок выучить эту парашу (хотя там учить особо нечего, но меня тошнит от смешения разметки и js)


React

import React, { useState, useCallback } from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);

  const increaseCounter = useCallback(
    () => setCounter(counter + 1),
    [counter, setCounter]
  );

  return (
    <button onClick={increaseCounter}>
      Count: {counter}
    </button>
  );
}
moot ★★★★ ()
Последнее исправление: moot (всего исправлений: 2)

Если доплата приличная — то почему бы и нет? Тем более, обстановка может в любой момент ухудшиться из-за «Этого Вашего Ковида»(ТМ).

А насчёт длинны кода — она не решает. Совсем. Код должен быть читабельным в первую очередь.

Korchevatel ★★★★ ()
Ответ на: комментарий от tz4678

ну можешь тогда так.

import React, { useState } from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);

  return (
    <button onClick={() => setCounter(n => n + 1)}>
      Count: {counter}
    </button>
  );
}
moot ★★★★ ()
Последнее исправление: moot (всего исправлений: 3)

Зависит от размера, до которого твоё приложение собирается вырасти, и 3-rd party компонентов.

svelte = проблемы с тайпскриптом со всеми вытекающими.

vue на достаточно крупных проектах очень, очень больно юзать с тайпскриптом. Да и без него.

Кстати, да. Где хуки в твоём реакте?

И preact не нужен нормальным людям, да.

x3al ★★★★★ ()

Можно ли сделать на основании этих примеров

Как уже писали, если на хуках Реактовый пример переписать, то количество кода ощутимо сократится.

хотя там учить особо нечего

Спорное утверждение. Сам React может быть, и не сложный, но его часто используют в связке с Redux, например. То есть освоение этой инфраструктуры может занять ощутимое количество времени. Потому что React сам по себе не фреймворк из готовых компонентов, а библиотека. Готового каркаса нет - полная свобода действий (в том числе и для превращения проекта в лютый говнокод). Я уж молчу про то, что писать нормальный код на React не так уж и просто - для этого нужен опыт.

тошнит от смешения разметки и js

Так это везде в js-фреймворках в том или ином виде. В Angular всякие ng-repeat, ng-if в шаблонах. В Vue button(@click="++counter") - это не js в разметке? Ну, ты понял. Чистых шаблонов нигде нет.

dimuska139 ★★ ()
Последнее исправление: dimuska139 (всего исправлений: 2)

Если ты думаешь, учить ли что-то, что ты называешь не иначе как «параша», то у тебя очень большие проблемы.

Можно ли сделать на основании этих примеров вывод о громоздкости реакта?

Нет.

меня тошнит от смешения разметки и js

В реакте нету никакой разметки.

Princesska ★★★ ()

вот ещё посмотри https://medium.com/dailyjs/a-realworld-comparison-of-front-end-frameworks-2020-4e50655fe4c1

Мне нужно определиться нужно ли вдовесок выучить эту парашу

кстати согласен, уродская параша этот React.

Прикольно что там по тестам, Svelte и Elm и некоторые другие Js фреймворки быстрее, чем Rust WebAssembly :)

fsb4000 ★★★★ ()
Последнее исправление: fsb4000 (всего исправлений: 1)
Ответ на: комментарий от dimuska139

Тут эффект утенка определяющий. Ты первым выучил какой-то язык со статической типизацией, поэтому тебя отсутствие необходимости указывать типы в JavaScript вводит в когнитивный диссонанс. Когда начинаешь с динамической типизации, таких проблем нет.

tz4678 ()

parcel без TypeScript громоздкости реакта меня тошнит от смешения разметки и js эту парашу

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

Про то, что ты сел в лужу с разметкой тебе уже сказали. У тебя в той пасте, что ты перепастил из методички есть логика в разметке.

Точно так же тебе уже сказали, что в реакте нету никакой разметки. Разметка - это для эникей-птушников. Какое-то разделение - туда же.

По поводу самих примеров. Увидел реактивность в говнуе? Дак это было в реакт-мире тысячи лет и развивалось там же. Всякие стейты, редуксы и прочее - это мусор рождённый подобными тебе. И сейчас пропаганда сделала финт и объявила этим потугам джихад.

anonymous ()
Ответ на: комментарий от tz4678

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

Бред, как будто это отменяет объективные плюсы и минусы тайпскрипта

abs ★★★ ()
Ответ на: комментарий от anonymous

Многоуважаемый, царь, епта, все верно 10 лет нас учили, что смешивать разметку и js нельзя, т.е. через getElementById получаем элемент, а потом через addEventListener вешаем обработчик, но прошло время, и эти же учителя начали учить нас делать все наоборот, восхваляя очередное ангуляроподобное поделие. Оно выглядит мерзко, противоречит каким-то старым принципам, но реально разработка на ЭТОМ быстрее. Что качается размера, то jQuery-параша больше весит этого скомпилированного мусора. Я ничего не рождал, я лишь выучил это говно, потому как за него платят дебилы.

tz4678 ()

Elm, тут все вместе, с HTML. Типы контроллируются через эту границу тоже

module Main exposing (..)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

main =
  Browser.sandbox { init = init, update = update, view = view }

type alias Model = Int

init : Model
init = 0

type Msg
  = Increment

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment -> model + 1

view : Model -> Html Msg
view model =
  div []
    [ div [] [ text (String.fromInt model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

Тут потыкай https://elm-lang.org/examples

Например https://elm-lang.org/examples/first-person

vertexua ★★★★☆ ()
Последнее исправление: vertexua (всего исправлений: 3)
Ответ на: комментарий от vertexua

я на hh видел чуваков, которые бэкенд на haskell пишут. им бы понравилось. на самом деле я уже смотрел elm. ничего о нем говорить не буду, чтобы не обидеть чьих-то религиозных чувств.

tz4678 ()
Последнее исправление: tz4678 (всего исправлений: 1)
import { h, Component } from 'preact'

export default class App extends Component {
  state = {
    counter: 0,
  }
  increaseCounter = (e) => {
    this.setState((state) => ({
      counter: ++state.counter
    }))
  }
  render(_, { counter }) {
    return (
      <button onClick={this.increaseCounter}>
        Count: {counter}
      </button>
    )
  }
}

Ух... Да это же прошлый век! Там недавно новый фреймворк вышел, теперь кода нужно писать еще меньше! Вот код вместе со страницей:

<button id="btn_counter">Counter: <span id="txt_counter">0</span></button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#btn_counter").click(() => {
  $("#txt_counter").text(parseInt($("#txt_counter").text()) + 1);
});
</script>
Так же доступна новая технология переиспользования, просто оборачиваешь код выше в функцию, и все, это большой шаг в построении графических интерфейсов!

stasolog ()
Ответ на: комментарий от tz4678

Так-то не угадал) В универе изучал когда-то языки со статической типизацией, но в работе, в основном, использую PHP. В последнее время частенько пишу на Go. Иногда пишу на React с тайпскриптом, если какая-то админка мне требуется. Вообще я писал и на php, когда там тайпхинтинга не было, на js без тайпскрипта я тоже писал, на питоне тоже пишу (есть пара проектов на Django и всякие парсеры) - так что сравнить есть с чем. Когда пишешь на языке со статической типизацией, код сам по себе становится гораздо более надежным и приятным, да и IDE тебя отлично понимает и автодополняет, где только можно. А динамика - это ненадежно, особенно если в проекте нет тестов. Вот ты в js юниты пишешь?

dimuska139 ★★ ()
Ответ на: комментарий от tz4678

Вот Elm - не Haskell. Он еще более строг, значительно более прост. Вот весь язык с нуля сделан чтобы быть оптимизирован под Redux паттерн.

Главное, в нем не нужно придумывать архитектуру приложения, как не пиши все равно получится по сути «Elm Architecture», вариации мало. И это хорошо

vertexua ★★★★☆ ()
Последнее исправление: vertexua (всего исправлений: 1)

В общем, меньше жри пропаганды. Выбор у тебя не большой.

Реакт

плюсы

  • Нету убого хтмл, его можно засунуть в кишки и забыть про него. Далее там дойдёшь до стилизованных компонентов.
  • Общая минималистичность и примитивность api. Малыми усилиями можно сделать/оборачивать что угодно. А можно вообще всё переписать.
  • Следующая из предыдущего гибкость. Можно полностью уйти от навязываемой жертва пропаганды херни. Декоратор написал и пробрасываешь что и как угодно.
  • Достаточно просто рендерить в 10 разных мест одновременно и независимо. Ты можешь построить/использовать нормальное api(как в десктопных гуёвых фреймворках).
  • Это js - это обычная логика. Умеешь писать код - автоматически знаешь скриптухи, реакт и прочее. Ничего учить ненужно.
  • В связи с этим ~идеальная поддержка туллингом. Поддержка тайпскрипта(как писать на скриптухе я даже не представляю).

минусы

  • Разрабатывают его идиоты.
  • Он базируется на полностью несостоятельных концепциях.
  • Засилие эникеев, которые везде и всюду пытаются превратить его в хтмл. Это всякие api на компонентах, потому как макаки не могут писать код.
  • Тысячи навязанного мусора и комьюнити сплошь состоящее из сектантов. Упомянутые выше сторы, редаксы и прочий бездарный мусор.
  • Миллиарды проблем со связями с dom. Через жопу делается всё, даже базовый двусторонний биндинг. В 95% случаев ref через ref и пердолинг с самим реактом.
  • Столько же проблем с передачей данных между компонентами.
  • Их бесконечное кол-во, минусов

Ангуляр

плюсы в сравнении с реакт

  • Перспективность. Концептуально он более состоятельный и писали его не совсем идиоты.
  • Следовательно, если в рекате ты можешь что-то сделать только вопреки реакту(его комьюнити, подходу и тд), то здесь 50 на 50 и более.
  • Комьюнити более адекватное. Да, всё равно много дошколятских фп-обезьян, но много и людей знакомых с разработкой. Людей для которых прикладное больше идеологического. Видно, что люди пытались решить проблемы, а не впаривать тебе убогую идеологически-обусловленную херню.
  • Проблем с dom"ом практически нет.
  • Проблем с передачей данных тоже.

минусы в сравнении с реакт

  • хтмл со всем вытекающим. Этого уже достаточно, но. Следует из этого множество проблем, но основных две: 1) отсутствие какой-либо валидации. Текстовая хтмл-лапша валяется отдельно, никакие используемые там переменные и прочее нигде не определены. Никак непонятно что где меняется/используется. Перечислять можно бесконечно. 2) статичность хтмл"а и его убогость. Связанная с этим необходимость его расширять и как следствие появление в нём убогих форов, ифов, инлайн-логики и прочего. Очевидно, что зачем тебе там убогий огрызок ЯП, когда у тебя уже есть ЯП(правда такой же огрызок)?

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

  • Сложность. Тысячи либ говна с гигантскими api. Если в какой-то момент времени тебя что-то не устроит, то шансы твои не велики что-то сделать. Правда, как уже было сказано, писали всё это не совсем идиоты. В связи с этим шансы прийти в тупик малы и хоть через жопу, но путь существует.

Конечно, мало знаком с рядовой вебнёй и что там и как у вас, но. Вижу ангуляр куда более подходящим.

Реакт так же юзабельный, но только в связки с теми же styled components, mobx и прочим. Потенциально он более мощный, но скорее вопреки. Это вечная борьба.

Если ты не хочешь чего-то осиливать и хочешь быть рядовой макакой - иди в vue. Это примитивная, убогая херня для бедных. Но даже выбор vue говорит о том, что тебе близок ангуляр. Просто не осилил. Осиливай и не жри говно.

anonymous ()
Ответ на: комментарий от tz4678

все верно 10 лет нас учил

Учили так только бездарные идиоты с помойки. Везде и всюду никто никаких разделений не делал.

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

И вот в результате боязнь кода убогих и родилось это поверье, но тебе то оно зачем? Это просто оправдание эквивалентное «я не осилил».

но прошло время, и эти же учителя начали учить нас делать все наоборот

Нет, всё было точно так же. Но практика говорит иначе. Этот подход не состоятельный, люди не хотят жрать говно.

Я тебе больше скажу, веб родился из php, а php это как раз таки про смесь. И именно реакт тот самый php-way.

Оно выглядит мерзко, противоречит каким-то старым принципам, но реально разработка на ЭТОМ быстрее.

Выглядит ангуляр мерзко именно там, где есть то самое мусорное хтмл. И да, правильно. Практика говорит о том, что это быстрее, проще, удобнее и лучше.

Здесь тебе нужно понять то как всё происходило. Реакт был рождён как обычный шаблонизатор, как пхп. И сразу же начал кормить убогих сектантов, которые начали идеологически это обосновывать. Начали пытаться решить проблему.

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

Но где-то сбоку существовал mobx и его аналоги, существовал тот же ангуляр. И очевидно, что подход бездарных обезьян не состоятелен.

И вот это родило тот самый раскол, который уже, в свою очередь, родил vue и прочую подобную херню.

И тут вдруг хомячки поняли, что их годами имели. И побежали в этот vue и побежали ради одного - ради реактивности. И рядовой хомячок даже не понимаешь почему он бежит в vue, от чего он бежит.

И вот реакт с обдристанными портками побежал срочно прикручивать реактивность. Правда не особо помогает.

Но на самом деле проблема ещё глубже. Там у сектантов жопы подорвались ещё давно. Люди поняли, что фп кормило их говно и они открыли для себя реактивность, открыли мутации и сайд-эффекты.

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

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

anonymous ()
Ответ на: комментарий от tz4678

а теперь попробуй vue

Здесь нечего пробовать. Выше я уже ответил за причины его существования.

Если кратко - это несостоятельное говно. Тот самый angularjs. Попытка угодить хтмл-макакам, только под знаменем магии и реактивности.

В основном ты идёшь туда только потому, что иное не осилил. А всё остальное - оправдания.

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

От части да, если сравнивать с говнодуксом, то vue имеет смысла. И в ситуации отсутствия выбора выбор не за реактом, но.

Это не особо работает. Говнукс породил миллионы обезьян, которые не могут писать нормально. И они будут ваять это говно и тащить его за собою. И что же? Обезьяны уже его притащили.

И сейчас уже не тогда. У тебя не будет всё «красиво» и не будет выбора. vue не vue всё равно заставят жрать говно.

Эта аргументация потеряла свою актуальность. И тебе что там, что там нужно искать адекватный стек, что-бы не жрать говно. И по всем параметрам vue сливает нормальному реакту и ангуляру.

anonymous ()
Ответ на: комментарий от vertexua

Вот весь язык с нуля сделан чтобы быть оптимизирован под Redux паттерн.

Тащемта, Redux был сделан с оглядкой на Elm, а не наоборот.

theNamelessOne ★★★★★ ()
Последнее исправление: theNamelessOne (всего исправлений: 1)
Ответ на: комментарий от abs

посмотри выхлоп компилятора: огромный размер сборки, куча ненужных вспомогательных структур, классов и т.д. код, компилируемый через babel в es6, должен значительно быстрее работать. typescript популярным сделали сишарписты: у них типичный стек ASP.MVC + Angular.js, но так как им лень учить JavaScript, то для них изобрели Сишарп в браузере

tz4678 ()