Dlaczego przeszedłem z Vue.js na React

W dniu, w którym rozpocząłem nowoczesny frontend development, zająłem się rzeczą, którą robi każdy programista: wyborem odpowiedniego frameworku. Nadszedł czas, aby przestać pisać brzydki i stary kod JavaScript z pomocą jQuery. Postanowiłem, zamiast tego wejść w erę nowych i modnych frameworków JS — wybrałem Vue.js. Oto powody, dla których pokochałem (i nadal kocham) Vue.js.

1. Utrzymuje moją strukturę HTML/CSS/JS w jednym miejscu

Jest to moim zdaniem największy selling point Vue.js. Pliki Vue są bardzo przyjemne dla początkujących, ponieważ łatwo je zrozumieć. Niezwykle prosto można też rozbić cały szablon HTML na pliki Vue.

Dzięki temu mogę szybko sprawdzić strukturę (szablon), zachowanie (skrypt) oraz wygląd (styl).

<template>
<div id="myComponent">
  <Counter />
  <span v-if="reading">Hello reader !</span>
</div>
</template>

<script>
import Counter from "@/components/Counter";
export default {
  name: "myComponent",
  components: {
    Counter
  }
}
</script>

<style>
#myDiv {
  display: block;
}
</style>

2. Vuex

Kiedy odkryłem, jak działają systemy zarządzania stanem, to zacząłem od Redux. Wydaje się on jednak być skomplikowany i ciężki do nauczenia. A z Vuex wszystko było bardzo łatwe. 

W grę wchodzą tylko akcje, mutacje i magazyny danych w porównaniu z akcjami, reduktorami i magazynami danych należącymi do Redux. Nie byłem w stanie zrozumieć reduktorów albo z powodu braku ogólnej wiedzy, albo dlatego, że używałem złych materiałów edukacyjnych. 

Dlatego wydaje mi się, że Vuex jest łatwiejszy dla początkujących.

3. NuxtJS

Szczerze mówiąc, NuxtJS, zainspirowany przez React NextJS, był frameworkiem, którego najczęściej używałem w projektach z Vue. W Nuxt bardzo podoba mi się podejście convention-over-configuration.

Strony znajdują się w katalogu page. Komponenty są w katalogu component. Magazyny danych są w katalogu store. Oprogramowanie pośredniczące jest w katalogu middleware i tak dalej.

Wstrzykiwanie zależności jest zrozumiałe, a nuxt.config.js centralizuje wszystkie konfiguracje, co jest niesamowite. Pozwala to łatwo budować strony internetowe z renderowaniem po stronie serwera i SPA.

Spróbowałem jednak z Reactem

Zapomniałem wspomnieć, że przed nauczeniem się Vue wypróbowałem React, ale wydawał się wtedy zbyt trudny. Później jednak moja wiedza na temat tego, jak działa zarządzanie stanami i specyfikacja języka ES6 znacząco się zmieniła. Dosyć sporo o tej bibliotece słyszałem — wystarczająco dużo, aby móc użyć jej w swoich projektach. 

Oto, moim zdaniem, największe zalety Reacta. 

1. Przyjazny dla ES6 i TypeScript

Kursy dla developerów, interfejsy i typy wyliczeniowe — to dlatego mogłem zrozumieć, jak działają komponenty Reacta i w jaki sposób integrują się z aplikacją. Tutaj również możesz używać składni ES6 tak samo, jak w Vue, ale React jest lepiej zaprojektowany. Zobacz, jak należy tam rejestrować komponenty:

class MyComponent extends React.Component {
  render() {
    return(<div />)
  }
}

W przypadku Vue.js przekazujesz obiekt do funkcji Vue.component:

Vue.component({
  template: `<div></div>`
})

Vue.js oferuje teraz obsługę języka TypeScript. Nie jest ona jednak tak dobrze dopracowana, jak w React, gdy używamy CRA (Create React App) z obsługą TS w jednym poleceniu.

W przypadku Vue nadal potrzebujemy zewnętrznych pakietów z niestandardowymi dekoratorami i funkcjami, aby stworzyć prawdziwą, kompletną aplikację TypeScript, a oficjalna dokumentacja nie zawiera wszystkich informacji potrzebnych do rozpoczęcia pracy.

2. JSX

JSX nie jest takie złe. Istnieją dwie szkoły: pro-JSX i anty-JSX. Nie lubię brać udziału w tym konflikcie, ponieważ, według mnie, JSX może być zarówno dobry, jak i zły — wszystko zależy to od tego, jak chcesz pracować ze swoim szablonem. Dla mnie bardziej logiczne jest pisanie JSX w następujący sposób:

return (
  <div>
    {students.map(student => <p>{student}</p>)}
  </div>
)

Jest to lepsze niż coś w stylu HTML:

<div>
  <p v-for="student in students">{{ student }}</p>
</div>

To kwestia preferencji. Osobiście uważam, że JSX jest bardziej elastyczny i ma więcej możliwości.

3. Otrzymywanie hooków przez hooki

Używanie Reacta sprawiło, że zacząłem się bardziej rozwijać. Przykładowo utworzenie pojedynczego komponentu jako klasy rozszerzającej React.Component to sporo roboty.

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
  }

  render() {
    return(<div/>)
  }
}

Komponenty funkcyjne natomiast pozwalają użyć lokalnego stanu w hookach. To znacznie upraszcza kod i zwalnia z konieczności pisania bezużytecznych konstruktorów.

function MyComponent() {
  const [counter, setCounter] = useState(0)
	
  return(<div />)
}

Hooki Reacta upraszczają używanie stanu i innych elementów tej biblioteki, takich jak useEffect (zamiast componentDidMount i componentDidUpdate). Niektórzy programiści lubią podejście OOP, pozostając przy klasach, a inni preferują podejście funkcyjne. W projekcie możesz użyć ich obu!

4. Społeczność

Za wielkimi projektami stoją wspaniali ludzie. Z doświadczenia wiem, że dla Reacta jest znacznie więcej dokumentacji, zewnętrznych narzędzi i modułów niż dla Vue. Czasami męczyłem się, szukając rozwiązań problemów dotyczących Nuxta, a znajdowałem wiele tematów dotyczących Next od Reacta. Liczby zresztą mówią same za siebie, jeżeli chodzi o repozytoria na GitHubie. 

Lub jeśli chodzi o odpowiadające im frameworki.

Dzięki społeczności poprawia się niezawodność Twojego kodu, dzięki temu, że jesteś w stanie szybciej naprawić bugi. Znalezienie osób, które miały ten sam problem, co Ty, przyspieszy rozwiązanie.

Nadchodzi Vue 3

Vue jest obecnie w wersji 2; wersja 3 jest nadal w fazie beta, ale jest tam wiele dużych zmian. Jedną z nich jest Composition API, w którym możesz zarządzać stanem bez Vuex. Jest tego jeszcze więcej.

Zatem, czy lubię Vue.js? Tak.

Czy lubię Reacta? Tak.

Czy React jest lepszy od Vue? To już kwestia preferencji.

Oryginał tekstu w języku angielskim możesz przeczytać tutaj.