De ce aș vrea să folosesc React în locul HTML & CSS

Salut, detin o mini agentie de design web si grafic.
Eu si echipa mea voiam sa dezvoltam o aplicatie web pentru statistici de jocuri.
Imi puteti spune ce avantaje as avea daca as folosi react pentru ea și nu html si php? am vazut ca backend nu pot face cu ea, deci care este avantajul?
La fel si cu tailwind, mi se pare mult mai complicat sa fac

decat
și să aplic eu clasele în css.

Dacă nu vine o cerința explicita de la un client nu văd de ce sa schimbi ceva ce știe lumea doar sa adopți ce e la moda. In cazul vostru particular dacă faceți o soluție SPA aveți probleme de SEO sau alte chestii și se complica lucrurile fără rost.

Ce recomand in schimb e sa faceți prototipuri mici cu aceste tehnologii sa știți unde pot fi de folos și sa alegeți o soluție anume in cunoștința de cauza.

2 Likes

tbh mi se pare o bataie de cap, mai ales ca nu poti folosi aplicatia respectiva pe gazduire traditionala si vei avea nevoie de un vps

Hmm, asta nu prea am înțeles.

Poți face soluții destul de faine de UI pe react folosim JAMstack cu toată partea de HTML/CSS/JS sa fie pe edge și păstrezi partea de Api tot in Cloud (dacă sunt clienți mici poți face și o soluție serverless).
Sunt multe opțiuni disponibile, trebuie văzut care varianta e ok pentru voi.

Dacă nu ai nevoie de reactivitate, nu ai niciun avantaj.

Dacă aplicația aia pentru statistici se actualizează în timp real, poate că ai nevoie de reactivitate. Dar faptul că întrebi „de ce să folosesc […]” înseamnă că, cel mai probabil, nu ai nevoie. Doar ai picat pe hype-ul nepotrivit :slight_smile:

Caută pe forum, s-a mai discutat despre tailwind. Dar, pe scurt: în combinație cu react/vue ar putea fi o opțiune bună. Eu în continuare sunt de părere că e o mizerie, dar hei… :smiley:

1 Like

ți-am citit rantul de pe forum, de asta mi-am făcut și cont.
Ideea e că mi se par niște tâmpenii tehnologiile astea de frontent, gen next.js si tot ce mai e, daca le puteam folosi si pentru backend, atunci erau niste solutii bune, dar da, pentru actualizarea conținutului în timp real fără refresh mi se pare o soluție bună, atât.

1 Like

Le poți folosi și pentru backend, doar că nu le poți folosi cu php :smile_cat:

NextJS e pentru backend, se randează pe backend și pe front-end. Noul React poate fi folosit pe backend, cu componente care se randează exclusiv pe backend (iau date din db). Are o idee extremă: poți randa fiecare componentă pe câte un server diferit în paralel. (Vezi serverless)

Te ajută doar în cazul în care vrei ceva design pe componente de React, ai date complexe, e.g. tabele, chart-uri cu time range, infinite scroll, orice e mai complex, căutare și filtrare în timp real cu autocomplete, editor de text/imagini, tree-uri, chat în timp real…

Pentru o pagină de prezentare te ajută dacă vrei să îți faci pagina pe baza unui API de la un CMS headless sau o altă platformă. ( Elimini un backend intermediar sau refolosesti ceva existent - de pe mobile de exemplu) Ai componente de obicei gata făcute cu care faci lego și doar aplici stilul pe fiecare componentă. Cu CSS sau tailwind sau cu ce vrei. De multe ori n-au un stil și e mult mai ușor să stilizezi așa.

După repet partea cu componente, poți crea componente pe care să le reutilizezi.

O parte bună e că front-end-ul rămâne în cache la browser, o dată ce clientul îl are comunici doar prin JSON și fișiere care nu sunt deja în cache.

Frontend-ul îl poți găzdui gratuit în n locuri, e trivial și ieftin de scalat la un număr infinit de utilizatori.
Backend-ul devine complicat și cu php o dată ce ai un anumit număr de utilizatori. Hostingul shared e ok doar la ceva mic și trivial. După e foarte ușor să faci monoliti greu de scalat cu php.

De multe ori SEO nu contează, nimeni nu îți va găsi site-ul direct pe Google dacă trebuie autentificare ca să vezi orice conținut. E.g. cursuri de fitness.

Poti sa faci in HTML && CSS, dar la un moment dat o sa ai nevoie si de niste D-HTML (cum ii zicea pe vremea mea)

Nu e nici o problema. VSCode si altii suporta sau au built-in Emmet
Poti sa scoti pe banda rulanta HTML si CSS
Dar chiar si asa e muuuuuuult de scris. Plus ca mai trebuie sa se intample tot felul de chestii cand dai click.
Deci o sa trebuiasca si niste ES6. Dar chiar si asa e mult de scris. jQuery are niste shortcuts foarte misto, imediat iti faci treaba.

Da doar ca jQuery e bun doar pt manipulare DOM, ceva events, xmlhttprequest.
As mai baga un Lodash ca are 24Kb, e micut, nu se simte si e puternic.

A! Si am uitat ca suntem in 2023 AD. Mobile vs. Desktop e cam jumi-juma

Si daca ar avea toti Android cu Chrome, ce viata ar fi … Da mai sunt corporatisti cu Safari si aia care si-au luat Samsung-ul ieftin la oferta de la Digi (Samsunt Internet Browser)

Deci CSS-ul meu trebuie sa suporte si pe masa si pe tasu. Fara SASS o sa injur de toti sfintii, scriind CSS chior

La Jquery-UI / Bootstrap / Tailwind / Vue / React ajungi de nevoie nu de voie

Si pe partea de PHP lafel. Oricat de micro ar fi proiectul, nici nu ma gandesc sa nu am un minim de
composer require symfony/http-foundation

Defapt in ziua de azi, micro la mine inseamna
composer create-project symfony/skeleton
Si daca mai imi trebuie ceva, Symfony Flex are tot ce iti trebuie si tot ce nu iti trebuie :rofl:

Si din nou, de nevoie tot cam la un framework ajungi

Orice ai face insa, nu folosi tailwind css.

3 Likes

daca ai nevoie de interactivitate, adica cand apesi ceva sa se intample ceva fara un full reload, ai nevoie de o librarie ca react, am vazut monstrozitati scriise in vanila js, la fel la inceput, ca ce am nevoie noi de fancy, dar apoi, has sa adugam un popup, hai un widget real time, comments, etc si atunci vezi ce struto camila imbarligata de php/js/html iese,

Sau poti folosi svelte

Am urmat tutorialul lor si mi s-a parut usor de utilizat. L-am recomandat unui prieten care este pe backend si prima lui reacte a fost

omg, no react bullshit!!

1 Like

React mai are ceva in plus:

Programarea declarativa, functionala si non-magic (inafara de JSX/TSX). Ai garantia ca ceva se va randa doar daca se schimba props/state-ul, ceea ce e extrem de important la o aplicatie foarte complexa. (uni-directional data flow)

Cu svelte e mult mai usor sa faci ceva, dar e mult magic ascuns in compilator, e.g. observable-uri/proxy-uri automate pe aproape tot ce faci. Sigur apar probleme cand faci logica fara sa o gandesti de dinainte.

Codul cu react e declarativ, scrii ce sa fie o componenta, nu ce sa faca in mod ideal. De obicei cand te apuci sa scrii ce sa faca ai anti-pattern-uri si bug-uri.

Tailwind e o problema doar daca nu esti pus pe facut doar componente si vrei sa faci o tema in html/css in React. Tailwind e extrem de puternic, intelegi asta dupa ce ai facut ceva foarte complex cu el. Nici nu ai nevoie de tailwind, doar de filozofia din spate.

Solid.JS duce mai pur filozofia din spatele React daca vrei sa vezi o librarie cu adevarat declarativa si functionala. E un alt mod de gandire, pe care nu il intelegi daca inca nu l-ai folosit.

3 Likes

Nu e adevarat, build-ul transpilat de react se poate hosta oriunde vrei tu. Daca e pagina SPA-only trebuie doar sa vorbesti cu host-ul sa te indrume in functie de server-ul folosit in spate (Apache/Nginx) sa configurezi ca orice request sa te redirectioneze catre index.html.

Deci, pana la urma in ce ati facut aplicatia?