ReactJS na serveru rubrika: Programování: JavaScript

4 zvitek
položil/-a 6.10.2015
 
upravil/-a 6.10.2015

Zdravím, nasadil jsem ReactJS do expressu jako view když mi došlo, že v tu chvíli nevyžiju React v jeho plné kráse.
Respektivě se v response vrátí čistě vygenerované HTML které nemá ponětí o eventech apod. Takže se v tu chvíli jedná opět o aplikaci request -> repsonse.

Má otázky zní, jaké je ideální best practice?

1) Opravdu všechny komponenty vykompilovat do souboru, zavolat si ho a renderovat HTML u klienta? (podstata Reactu a všech jeho vymožeností)
2) Má v tu chvíli smysl s Reactem používat třeba Express s jeho routama, controllerama apod. když aplikaci v rámci reactu nerequestuju ale jenom měním view a potřebuju jenom api pro komunikaci?
3) Má všeobecně smysl React na serveru? (Když React v plném rozsahu pracuje u klienta a ne na serveru)

Díky moc

odkaz Vyřešeno
5 VojtechMiksu
odpověděl/-a 7.10.2015
 
upravil/-a 7.10.2015

React ma pro server 2 zasadni funkce React.renderToString a React.renderToStaticMarkup. Ta prvni vrati stejny DOM (vcetne react data-react-id atributu) jako kdybys zavolal React.render v prohlizeci. Pokud si tedy vystup z renderToString posles do prohlizece a nasledne (po dotazeni a spusteni JS) nad tim zavolas React.render, tak React uz jenom povesi event handlery. Ve vysledku tedy uzivatel (i treba vyhledavac) ihned vidi celou stranku i s vypnutym JS, po dotazeni JS zacnou fungovat udalosti (tu prodlevu nejspis uzivatel ani nepostrehne). => Idealni a velmi vykonne. Teoreticky bys mohl timto zpusobem podporovat plnou funkcionalitu i se zakazanym JavaScriptem. Vsechny formulare by delaly klasicky GET/POST reload, pokud by se nenahral JavaScript, ktery by to pomoci .preventDefault() zakazal a poslal XHR. React.renderToStaticMarkup nepridava data-react-id atributy. Hodi se pro casti DOMu, ktere nebude spravovat React (napriklad html hlavicka..).

  1. Nic do souboru kompilovat nemusis, muzes rovnou renderToString posilat v odpovedi na jednotlive route requesty. Vsechny vymozenosti Reactu mas k dispozici i na serveru (deklarativni zapis, sablony jako JS, kompozice komponent...).
  2. To moc nechapu. React ma smysl na serveru i pokud by cela frontend aplikace bezela bez JavaScriptu (staticke stranky). Porad se ti hodi silny sablonovaci nastroj... muzes pouzit React stejne dobre tak jako Latte (imo lepe). A pokud se jednou rozhodnes, ze FE stranky budou vice interaktivni, tak to budes mit zadarmo.
  3. Ano. V server rezimu funguje jako skvely sablonovaci nastroj a nabizi moznost budouci snadne interaktivity.

React (react-dom) v prohlizeci je dnes uz jen jedna z aplikaci. Existuje react-native pro Android i iOS. React pro terminal. React pro desktopove aplikace. A hadam ze brzo bude treba i v televizi ci hodinkach. Tezistem je hlavne odlisny pristup v navrhovani a spravovani uzivatelskych rozhrani (ci obecneji komponent). Cilova platforma je uz jen "implementacni detail". (Nechci tu sirit nejakou nabozenskou React vlnu, ale coz... stejne uz jsem tak zaskatulkovanej.)

Komentáře

  • Kit : Pro mne ten příspěvek byl zajímavým představením, co ReactJS umí a jak se s ním pracuje. — 7.10.2015
  • zvitek : Děkuju za vyčerpávající odpověď, je mi to jasné až na jednu věc. Metoda renderToString mi sic vrátí html s data-react-id, na kterém v browseru zavolam React.render(), nicméně kde on vezme navěšené eventy apod? Nebo mi tu uniká nějaký základní point? — 7.10.2015
  • tdvorak : @Kit: souhlasím, pěkně napsáno. Zajímavý je i článek http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-kn... . Asi je čas zkusit si v tom něco napsat. — 7.10.2015
  • VojtechMiksu : Pointa je v tom, ze pouzijes uplne stejnou React komponentu (soubor) na serveru i frontendu. Bude tedy obsahovat uz i eventy - tedy definice handleru a atributy typu "onClick". Ovsem na serveru tu komponentu vyrendrujes jen do stringu pomoci renderToString a posles jako HTTP odpoved. Jelikoz je to opravdu jen string, tak React nemuze povesit handlery a proste nejake onClicky bude ignorovat. Na FE se pak deje uplne to same, jako kdyby ti ze serveru prisla jenom bila stranka cekajic na to, az ji JavaScript naplni obsahem (a vytvori cely DOM). Nicmene React si vsimne toho, ze to bila stranka neni, ale je v ni uz hotova DOM struktura, rozpozna svoje data-react-idcka a nemusi tak vytvaret cely DOM od nuly. Po React.render ho uz jen porovna a zavesi eventy. — 7.10.2015
  • zvitek : Je mi to jasný, díky ;) — 8.10.2015

Pro plný přístup na Devel.cz se prosím přihlaste:

Rychlé přihlášení přes sociální sítě:

Nebo se přihlaste jménem a heslem:

Zadejte prosím svou e-mailovou adresu.
Zadejte své heslo.

Aktuální otázky v rubrice Programování: JavaScript

Otázky uživatele zvitek