Vue VS React

Vue VS React

Cu React am scris o aplicație acum un an și un pic. Au fost câteva chestiuțe care m-au făcut să mă scarpin mai mult, dar, în ansamblu, și-a făcut treaba.

Zilele astea fac mici chestii cu Vue și… la naiba, e o diferență mare. Lucrurile sunt mult mai separate. Îmi plac câteva chestii:

  • Nu se mai amestecă HTML în JS în abominația aia de JSX. Sigur, folosești atribute v-*, dar… hey, trebuie să faci un compromis.
  • Fiecare modul este … ei bine, independent. Markup, stil și logică în același fișier. Pe de altă parte, asta poate deveni o problemă dacă ai o componentă mare, cu multă logică și/sau markup. Darrrr… treaba asta încurajează indirect spargerea în module cât mai mici.

Mâine mă uit peste TDD, vedem cât de abordabil este.

15 Comentarii

Alex Mihăileanu a scris

Abominația aia e grozavă pentru că-ți permite să te joci mult mai bine cu datele dintr-un API prin { object.result } oriunde în cod. Nu tre’ să-ți bați capul cu chestii precum Handlebars sau Mustache. Sînt cîteva chestii enervante, gen obligativitatea de a avea întotdeauna un părinte într-un return, dar asta se poate face cu

<React.Fragment>

Dar avantajul mare e că poți face mapping, e practc

{ object.map( (item, i) => ( { item } ) ) }

Mă rog, acu’ cre’ că depinde și de cît de repede te obișnuiești. Altfel, vezi și documentația pentru hooks, în React, că e feature nou și te scutește de lifecycles în cazul unor componente – majoritatea, practic.

Ionuț Staicu a scris

@Alex Mihăileanu: Treaba cu părintele este o problemă și în alte framework-uri, deci nu e chiar o problemă.

Argumentul tău cu mustache/handlebars deși valid, nu e foarte… solid.

Pentru că nu ai {{ item }} ai { item }. Great success :D

Pentru treaba asta renunți la html valid. Dacă este om care face HTML și om care face implementarea propriu-zisă, este o adevărată plăcere să modifici fiecare atribut, să îl faci valid jsx…

Nu mă înțelege greșit, nu zic că în React sau în Vue poți/nu poți face anumite lucruri, ci doar modul în care ajungi să faci acele lucruri poate fi mai mult sau mai puțin plăcut.

Despre hooks: la momentul la care scriam eu aplicația în React, hooks erau anunțate că vor fi lansate (erau deja în core dar nu erau documentate parcă). La câteva săptămâni după ce am terminat eu, s-a lansat oficial, dar… nu am mai avut chef să reiau :)

Alex Mihăileanu a scris

Păi, pe principiul ăsta, nici ce scrie unul sau altul într-o temă de WordPress nu e HTML valid. Și oricum, who cares about jsx/html cîtă vreme rezultatul e tradus corect în html valid? În fine, ce voiam să zic:

1. hooks – functional components with state management :) Mă rog, chiar declarative dacă ții morțiș să le scrii sub forma const func = () => { return() } via useState
2. Tot n-a ieșit ce voiam mai sus, la map-ul ăla. { object.map( ( item, i ) => ( { item } ) ) }

În fine, ideea e că între paranteze rotunde de return poți băga html (eu băgasem un span cu key=’i’). Sau că poți să bagi un map într-o variabilă înainte de return și s-o verși unde ai nevoie – de exemplu, într-un tabel unde LI-urile sînt generate dinamic/din db.

Dar per total, singura diferență semantică dintre HTML și JSX e că JSX îți cere key la liste/map-uri și pui className în loc de class și te obligă să fii mai atent la quotes (simple/double). Fine, I’m oversimplifying, dar chiar nu văd o diferență așa de mare și de brutală încît să te sperie.

Ionuț Staicu a scris

@Alex Mihăileanu: ca să pui cod: [limbaj] cod [/limbaj] :D

La atribute e ceva mai complicat decât className. Practic toate atributele trebuiesc puse în formatul JS, iar unele sunt… neașteptate dacă nu ai experiență cu manipularea DOM-ului din JS chior (e.g. colSpan).

Nu e o chestie care mă sperie, e o chestie de… cât de ușor este de digerat la o primă vedere :)

Ionuț Staicu a scris

@Alex: M-am uitat puțin peste Svelte, mi se pare o struțocămilă:

{#if user.loggedIn}<button on:click={toggle}>

Dacă tot pui eventuri inline, de ce să nu pui și condiții?

	// the `$:` means 're-run whenever these values change'
	$: doubled = count * 2;
	$: quadrupled = doubled * 2;

De bine de rău, Vue păstrează JS valid. Cu excepția abominației mai sus menționate (jsx), React la fel păstrează JS valid. Apoi vine svelte și zice „bă, ia stai așa….”

Alex a scris

@Ionuț Staicu: Asta cred ca e subiectiv. Cum am zis de la inceput, nu prea am experienta in JS, dar Svelte mi s-a parut cel mai ok dintre cele 3. La React am renuntat rapid din cauza JSX, imi amintea de vremurile cu PHP si HTML, cand totul era amestecat. Vue mi-a placut mai mult, dar mi s-a parut si ala cam dificil pentru un incepator in JS.

Ionuț Botizan a scris

Mi-e lene să mă dau jos din pat să pornesc laptop-ul așa că o să încerc să fiu succint de pe telefon, că sunt câteva chestii care mă rod prea tare… 😛

1. *JSX nu e HTML!* Aduce a ceva limbaj de markup, dar nu e. Este doar un pic de syntactic sugar pentru niște apeluri de funcții ce construiesc niște arbori… 😏
Știu, știu… Și eu, la primul contact, am zis că-i fain, dar parcă nu-mi place amestecul ăla așa că primul lucru pe care l-am făcut înainte să învăț React a fost să scriu un loader de Webpack care îți permite să separi în fișiere diferite UI-ul de logica din spate (cam cum ar fi în C# separarea între XAML și fișierele de „code-behind”). (https://github.com/ionut-botizan/external-jsx-loader/) Nu l-am folosit niciodată, pentru că m-am pus totuși pe învățat React cum trebuie, dar arată cât de puternică a fost și la mine repulsia inițială față de JSX.
În fine, ideea e că, la fel cum e și-n PHP, cine nu știe scrie spaghetti-code, iar restul își separă frumos componentele. 😁

2. Svelte e Javascript valid! Sintaxa aia cu $: nu sunt decât „labeled statements” (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label) cărora compilatorul Svelte le dă un înțeles aparte… Bine, nu fac ele ce zice în documentație dacă nu le compilezi, dar codul în sine este corect și poate fi rulat în browser! …dacă nu s-o fi schimbat ceva de când nu m-am mai uitat eu peste el! 😁

3. Se făcea că a fost o dată ca niciodată un limbaj urât de toată lumea pe nume PHP. Au existat mulți care, de-a lungul timpului, au încercat să-l facă prietenos pentru programatorii cu standarde înalte prin crearea de framework-uri care mai de care mai deosebite, cum ar fi:
– Simfony – o capodoperă a ingineriei, în care instanțiai clase peste clase pentru cel mai simplu lucru, dar totul avea sens pentru că implementa design pattern-uri bine definite de generații de programatori înainte
– Cake PHP – o minunăție inspirată de Ruby on Rails, în care prima filozofia „convention over configuration” și Active Record-ul
– Code Igniter – cel mai eficient framework MVC clasic din PHP unde autorii au folosit cele mai obscure particularități ale limbajului pentru a stoarce și ultimul strop de performanță
– Zend Framework – mai are nevoie de vreo descriere? Dacă numele „Zend” nu zice destule în lumea PHP, atunci nu știu ce-o face…
– Phalcon PHP – un framework MVC scris în fuck*ng C și livrat ca extensie de PHP 😶
– Li3 (a.k.a. Lithium PHP, fie-i țărâna ușoară, că drag mi-a mai fost 🥺) – *primul* framework ce a suportat numai PHP de la 5.3.5 în sus, versiunea în care PHP a devenit un limbaj de programare adevărat! (cunoscătorii știu de ce)

No, astea fiind zise, într-o dimineață, un noob s-a trezit cu fața la cearșaf și a zis „la naiba, toate astea sunt prea grele, îmi fac eu framework-ul meu!!!”. Și a luat el niște componente din Simfony, niște cod de pe Stack Overflow, le-a lipit cu „scuipinol” și rezultatului strădaniei lui i-a dat numele de Laravel!
…și au venit apoi alți noobi și au privit cu uimire și au zis, asemeni suporterilor lui Trump: „I understand it because it uses simple words and it’s a straight talker”.
…și au venit alții mai apoi și au zis „Milioane de oameni folosesc Laravel deci e ceva de capul lui, doar n-or fi toți ăștia noobi” (Spoiler: ba erau)
…și astfel o mizerie a ajuns să domine lumea PHP pentru că deh… Întotdeauna vor fi mai mulți noobi decât oameni inteligenți, cu experiență.

Revenind la ale noastre: a fost o dată un limbaj urât de toată lumea numit Javascript!
…și niște oameni deștepți au încercat să-l facă mai plăcut și au făcut Angular și React și Aurelia și etc.
…și apoi unu’ a făcut Vue și multora le-a plăcut pentru că era „simplu”. 😒

Sfârșit! …?

Alexandru a scris

Legat de repulsia ta fata de React, exact acelasi sentiment l-am avut si eu „wtf is that garbage”?

Pana la urma, acum mi se pare un alt templating language cum au si Angular si Vue. Toate framework-urile au chestii atat de similare in ziua de azi:

1) o forma de reactivitate, astfel incat sa nu mai faci tu rerender de manuta

2) un templating language compilat

3) au adoptat sub o forma sau alta o varianta de Redux :))

Adaugă un comentariurăspuns pentru

Poți adăuga bucăți de cod folosind [code]codul tău aici[/code], [js][/js], [php][/php] etc.

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Acest sit folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter