Frontendové zvesti

Pôvodne som tento článok (a snáď ním začínam celú sériu) chcel nazvať "Frontendové novinky". Potom som si uvedomil, že niektoré z tých "noviniek" nie sú tak úplne nové. Mal som totiž posledné mesiace menej času na sledovanie diania. To viete, človek občas musí riešiť aj také bežné veci, ako život mimo programovania, prácu, oddych alebo najnovšie aj chodiť hájiť demokraciu na námestia. Teraz som si však nejaký čas našiel, čo-to si prečítal a pozrel a povedal som si, že by nemusel byť zlý nápad to spísať. Tak som spísal a tu to máte.

React from Another Dimension

Ešte na minuloročnej konferencii RemixConf (Remix je veľmi populárny Reactový framework) mal Dan Abramov, jeden z hlavných vývojárov React-u, veľmi zaujímavú prednášku. Ja som sa k nej dostal len teraz, ale vysoko ju odporúčam. Dan rozpráva veľmi pútavo, odľahčene a dostal tam niekoľko vtípkov. Fakt som sa pri pozeraní bavil a 40 minút ušlo ako voda.

V prednáške sa zamyslel nad tým, ako by vyzeral React, keby sa začal vyvíjať v skorých nultých rokoch (2000-niečo) a keby sme namiesto PHP vtedy na backende používali JavaScript. Vo výsledku nám takto úplne z opačného konca vysvetlil princíp React Server Components (RSC) a ich napojenie na klientskú stranu.

Bola to naozaj dobre pripravená prednáška, z ktorej ide pocit, že RSC sú krok správnym smerom.

Dan v prednáške robí live-coding a všetci vieme, ako to dopadne, keď na prednáške programujete. Preto by som video špeciálne odporúčil každému, kto má impostor syndróm. Uvidíte core vývojára React-u, ako sa trápi s chybami, o ktorých nevie, ako vznikli a čo s nimi. Vidíte, stáva sa aj najlepším.

Video z prednášky je tu https://www.youtube.com/watch?v=zMf_xeGPn6s

Čoskoro vyjde React 19

Po desiatich mesiacoch(!) vyšiel nový článok na React blogu. Možno je to reakcia na kritiku z komunity o nedostatočnej komunikácii plánov, možno nie. Ktovie. Každopádne sme sa dozvedeli, že čoskoro vyjde nová major verzia React-u. Dátum prezradený nebol, ale keďže v máji bude React Conf, tak to zrejme načasujú takým spôsobom, aby na konferencii s veľkou slávou oznámili nové vydanie.

Čo bude nové?

React Compiler (Forget), od ktorého si všetci sľubujeme, že nebudeme musieť robiť ručnú memoizáciu a React sám zabezpečí elimináciu zbytočných re-rendrov.

Direktívy "use server" a "use client", ktorými budeme označovať klientské komponenty a serverové funkcie.

Akcie a hooky pre server, ktoré boli doteraz súčasťou Canary releasu, sa presúvajú do stabilnej verzie a tak ich môže používať každý. Ide najmä o hooky useFormStatus 🔗, useFormState 🔗 a Actions. Komunita sa tiež už dlhšie sťažovala, že pokiaľ sú tieto veci dosť stabilné na to, aby ich používala Meta v produkcii a Vercel ich dokonca zahrnul do nových verzií Next.js, tak prečo nie sú v stabilnej verzii React-u? Tak sa teraz konečne dostaneme všetci na rovnakú úroveň a môžeme s novou funkcionalitou pracovať bez toho, aby sme boli nútení použiť Canary release.

Mimochodom, pokiaľ neviete, čo Canary znamená, tak je to verzia, ktorá je síce dostatočne stabilná na to, aby ste ju mohli používať, ale zároveň nie je garantované, že veci v nej sa nezmenia. Prečo sa to volá Canary? Baníci kedysi nosili so sebou do bane klietky s kanárikmi. Pokiaľ v bani začali unikať nebezpečné plyny (napr. CO), ktoré nie je cítiť, tak typicky najskôr umrel kanárik a baníci mali šancu si to všimnúť a ujsť.

Komponenty <title>, <meta> a <link> môžeme použiť hocikde a React sám zabezpečí ich vloženie do hlavičky HTML dokumentu. Zjednoduší sa nám tak tvorba hlavičky.

Koponenty <style>, <link> a <script> budeme môcť prepojiť so Suspense, pretože React bude sledovať, či sa už načítali assety v nich uvedené (fonty, štýly, JS) a do DOM-u sa elementy vložia až po ich načítaní.

Two Reacts

Aj tretia správa je zo sveta React-u. Dan Abramov uverejnil začiatkom januára článok nazvaný Two Reacts. Ide ďalší pohľad na React zo serverovej strany (alebo aj statického renderovania). Dôležité je, že Dan hovorí o tom, ako príchod RSC zmenil známu rovnicu UI = f(state) (používateľské rozhranie je funkciou stavu) na UI = f(data, state), kde data sú stavom dát na serveri a state je stav v prehliadači. Na konci článku sa Dan pýta, ako teraz pristupovať k funkcii f, keďže musí fungovať v dvoch veľmi rozličných prostrediach? Odpoveď nám zatiaľ nedáva, vyzýva nás na premýšľanie a v nejakom budúcom článku predstaví svoj prístup.

Ink

Objavil som Ink, čo je projekt prinášajúci React do terminálu. Je to blbosť, ale hrozne sa z toho teším, lebo si budem môcť písať interaktívne CLI programy a skripty v JavaScript-e a React-e. Samozrejme, neodporúčam to na nič, čo by potrebovalo lepší výkon, ale na nejaké jednoduché veci by to mohlo byť super.

Niekto s tým urobili aj hru Hľadanie mín: https://github.com/mordv/mnswpr

Ale nie je to len hračka, na ich Github stránke nájdete v zozname použití aj nejaké seriózne projekty.

Záver

Vidím, že všetky vybrané správy sa nakoniec týkali React-u. Nebudeme si klamať, keďže je React pre mňa knižnica prvej voľby, keď potrebujem robiť frontend, tak aj veľa budúcich noviniek bude o ňom. Keď však narazím na niečo zaujímavé z iných frontendových oblastí, tak určite napíšem aj o tom.