React vairs nav tas, kas bija, bet vēl aizvien ir tas, kas ir

Kādu laiku atpakaļ es mācījos React un prātoju, kā to varētu ieviest savā dzīvē. Toreiz mēs abi vēl bijām salīdzinoši jauni, zinātkāri un pilni apņēmības. React man rādīja savas komponentes, es viņam pretī devu mainīgos, funkcijas un dažbrīd arī pa kādai neveiksmīgi aizvērtai iekavai. Mūsu attiecībās bija gan cerība, gan nesaprotami kļūdu paziņojumi, gan tie īpašie mirkļi, kad pēc pusotras stundas meklēšanas izrādījās, ka visa problēma bijusi vienā nepareizi uzrakstītā burtā.

Mēs kopā izveidojām dažus nelielus projektus. Pogas reaģēja uz klikšķiem, saraksti paklausīgi papildinājās, komponentes sarunājās cita ar citu, un ekrānā ik pa laikam pat parādījās tieši tas, ko biju iecerējis. Tas radīja patīkamo programmētāja varenības sajūtu — tādu, kurā cilvēks pēc veiksmīgi izveidota uzdevumu saraksta jau sāk klusībā apsvērt, vai līdz gada beigām nevajadzētu uzbūvēt pašam savu sociālo tīklu.

Tomēr agri vai vēlu pienāca jautājums, kuru mācību uzdevumi kaut kā ļoti pieklājīgi apgāja ar līkumu.

Labi, aplikācija darbojas manā datorā. Bet kā to palaist internetā?

Kur glabāsies dati?

Kā aplikācija atcerēsies lietotāju pēc tam, kad viņš būs aizvēris pārlūkprogrammu?

Kā pievienot datubāzi, lietotāju kontus, paroles, failus, rēķinus un visas tās lietas, bez kurām īsta sistēma ir tikai glīta rotaļlieta?

React uz šiem jautājumiem klusēja ar tādu pārliecību, kādu spēj demonstrēt vienīgi cilvēks, kurš ļoti labi zina, ka tas nav viņa “jājamzirdziņš”.

Drīz vien mūsu ceļi šķīrās. Es atgriezos pie pārbaudītām vērtībām, kur failiem bija saprotami nosaukumi, datubāzēm bija tabulas, PHP darīja to, ko tam lika, bet cPanel vismaz radīja iespaidu, ka pasaulē vēl pastāv zināma kārtība. React palika kaut kur mapē starp veciem kursu projektiem, nepabeigtiem eksperimentiem un failiem, kuru nosaukumos vārds “final” jau sen bija zaudējis jebkādu juridisku spēku.

Un tad, pēc vairākiem gadiem, es pēkšņi pamodos no šī konservatīvā sapņa.

Nolēmu noskaidrot, kas ar React pa šo laiku noticis, ko esmu nokavējis un vai vispār vēl kaut ko no tā atceros. Slepus cerēju, ka React būs tikai mazliet nobriedis, uzaudzējis kādu jaunu funkciju un pārkrāsojis dokumentācijas sākumlapu.

Izrādījās, ka vecais paziņa pa šo laiku bija nomainījis garderobi, pārvācies uz citu māju, ieguvis jaunus draugus, atvadījies no dažiem seniem sabiedrotajiem, sācis interesēties par serveriem un pat juridiski izvācies no vecāku divistabu dzīvokļa.

Tomēr, uzmanīgāk ieskatoties, es viņu vēl pazinu.

Toreiz React dzīve šķita vienkāršāka

React tehniski nav programmēšanas valoda, lai gan ikdienas sarunās to bieži tā sauc. Tas ir rīks lietotāja saskarnes veidošanai — visam tam, ko cilvēks redz, nospiež, aizpilda, pārslēdz un reizēm dusmās pārlādē.

Tā galvenā doma vienmēr bijusi diezgan cilvēcīga: sadalīt lielu ekrānu mazākās, atkārtoti izmantojamās daļās, šķiet, ka pēc principa “skaldi un valdi”.

Poga var būt komponente. Izvēlne var būt komponente. Klienta kartīte, paziņojums, rēķina rinda, kalendārs un logs ar draudīgu jautājumu “Vai tiešām vēlaties dzēst?” — arī tās visas var būt komponentes.

Tas nedaudz līdzinās mēbeļu ražošanai no standartizētām detaļām. Nav nepieciešams katru reizi no jauna izgudrot skrūvi, rokturi un eņģi. Vienreiz izveido labu detaļu un pēc tam izmanto to tur, kur nepieciešams. Protams, arī šādā sistēmā vienmēr atradīsies kāds, kurš mēģinās ar vienu komponenti uzbūvēt visu māju, bet tā jau ir cilvēces, nevis React problēma.

Pirmajos gados React pasaulē ievērojamu vietu ieņēma tā sauktās klašu komponentes. Tajās bija sava kārtība, dzīves cikli un formāls uzvedības protokols. Komponente piedzima, tika parādīta, atjauninājās un reiz pienācīgi atvadījās no sistēmas.

Tad, kaut kad šķiet 2019. gadā stabilā veidā ieradās Hooks jeb āķi. Tie ļāva funkciju komponentēm izmantot stāvokli un citas React iespējas bez nepieciešamības visu ietērpt klasēs. React komanda toreiz pat īpaši uzsvēra, ka vecās klases netiks pēkšņi iznīcinātas un esošie projekti nebūs vienā naktī jāpārraksta.

Nosaukums “āķi” sākumā var izklausīties pēc kaut kā, kas domāts zivju ķeršanai vai gleznas piestiprināšanai pie sienas. Taču būtībā tie ļāva funkcijām pieķerties React iespējām — atcerēties vērtības, reaģēt uz izmaiņām un atkārtoti izmantot loģiku.

Manā mācīšanās laikā šie āķi jau bija ikdiena. Es izmantoju useState, useEffect, useRef, useReducer un citus nosaukumus, kuri netehniskam cilvēkam varētu izklausīties pēc īpaši mierīgas jogas nodarbības programmētājiem.

Tātad es nebiju mācījies gluži seno React. Drīzāk biju ieradies pārejas periodā, kad jaunais React jau dzīvoja mājā, bet gaitenī vēl stāvēja vairākas kastes ar iepriekšējās paaudzes mantām.

React iemācījās darīt vairākas lietas vienlaikus

  1. gadā iznāca React 18. No malas viss neizskatījās dramatiski. Pogas joprojām bija pogas, komponentes joprojām bija komponentes, un neviens nebija izdomājis aizstāt JavaScript ar tamborēšanas shēmām (vai arī kā tur tamborēšanā to visu sauc…).

Tomēr zem pārsega React bija sācis domāt citādi.

Tika ieviests pamats vienlaicīgai jeb savstarpēji konkurējošai renderēšanai. Vienkāršoti sakot, React ieguva spēju gudrāk sadalīt darbus, atlikt mazāk steidzamus uzdevumus un neļaut smagai darbībai tik viegli iesaldēt visu lietotāja saskarni. React 18 atnesa arī automātisku izmaiņu grupēšanu, pāreju vadības iespējas un uzlabotu satura straumēšanu no servera.

Iedomāsimies nelielu veikalu ar vienu pārdevēju.

Vecajā kārtībā pārdevējs sāka apkalpot vienu sarežģītu klientu un tikmēr ignorēja visu pārējo pasauli. Rinda auga, kāds gribēja tikai pajautāt darba laiku, bet pārdevējs nelokāmi turpināja meklēt noliktavā to īpašo citam klientam vajadzīgo preci, kuru pēdējo reizi kāds bija kaut kur redzējis tālajā 1986. gadā.

Jaunā pieeja pārdevējam ļāva uz brīdi atlikt šīs vienas īpašās preces meklēšanu, ātri atbildēt uz vienkāršo jautājumu un tad turpināt sarežģīto, laikietilpīgo darbu. Lietotājam radās sajūta, ka sistēma ir atsaucīgāka, lai gan aizkulisēs joprojām valdīja cienījama mēroga rosība.

Šī bija viena no svarīgākajām React pārvērtībām — tas vairs nedomāja tikai par to, ko parādīt, bet arvien vairāk arī par to, kad un kā to izdarīt, lai cilvēks ekrāna otrā pusē nezaudētu pacietību un vispārēju uzmanību.

React bija izaudzis no čakla skatlogu dekorētāja par nelielas digitālas satiksmes vadības centra priekšnieku.

Vecā skola tika pārcelta uz muzeju

  1. gada martā React ieguva jaunu oficiālo mājvietu — react.dev. Jaunā dokumentācija jau no paša sākuma mācīja funkciju komponentes un Hooks, savukārt vecā dokumentācija tika pārvietota uz īpašu arhīvu. React komanda skaidroja, ka iepriekš jaunajiem lietotājiem faktiski nācās React apgūt divreiz: vispirms ar klašu komponentēm un pēc tam vēlreiz ar Hooks.

Vecās klases gan netika aizliegtas. Tās neviens neizmeta uz ielas ar kartona kasti un novēlējumu meklēt darbu citā bibliotēkā. Tās joprojām darbojas un tiek atbalstītas, taču vairs noteikti nesēž mācību telpas pirmajā solā.

Šajā brīdī React beidzot publiski nostiprināja to, kas praksē bija noticis jau agrāk: funkciju komponentes un Hooks kļuva par galveno valodu, kurā React stāsta pats par sevi.

Tas bija arī laiks, kad React arvien uzstājīgāk sāka iepazīstināt cilvēkus ar ietvariem.

Un te sākas viens no mūsdienu React paradoksiem.

React pats joprojām sevi uzskata par bibliotēku lietotāja saskarnēm. Taču, tiklīdz cilvēks vēlas izveidot īstu aplikāciju ar vairākām lapām, datu ielādi, lietotāju kontiem, kļūdu apstrādi un labu veiktspēju, viņam diezgan drīz tiek ieteikts paņemt vēl kaut ko.

Maršrutēšanai vajag vienu rīku, savaukārt datu ielādei var noderēt cits. Servera pusei — vēl kaut kas. Projekta uzbūvēšanai — vēl viens palīgs. Kad visi šie draugi sapulcējušies vienā telpā, React joprojām ir vakara galvenais viesis, bet reizēm kļūst grūti saprast, kurš patiesībā organizē pasākumu.

Pazuda komanda, ar kuru agrāk sākās gandrīz viss

Kad es mācījos React, viena no pirmajām komandām bija create-react-app. Tā izveidoja gatavu projekta pamatu, kurā varēja sākt rakstīt kodu, īpaši neiedziļinoties tajā, cik daudz dažādu mehānismu strādā aiz dekoratīvā priekškara.

Tas bija kā iegādāties dzīvokli ar jau ievilktu elektrību, uzstādītiem logiem un pieslēgtu ūdeni. Varbūt ne viss bija ideāli, bet vismaz nevajadzēja sākt ar jautājumu, kāpēc virtuvē no griestiem karājas trīs vadi.

Create React App sākotnēji atrisināja ļoti reālu problēmu. Pirms tā React projekta sagatavošana prasīja vairāku atsevišķu rīku uzstādīšanu un savstarpēju savienošanu. Taču laika gaitā šis glābējs pats sāka novecot. Tam trūka aktīvu uzturētāju, bet mūsdienīgas aplikācijas prasīja arvien sarežģītākus risinājumus maršrutēšanai, datu ielādei, koda sadalīšanai un servera darbībām.

  1. gada februārī React komanda oficiāli paziņoja, ka jauniem projektiem Create React App vairs nav ieteicams. Esošie projekti nepārstāja darboties, taču jaunajiem tika ieteikti ietvari vai tādi projekta būvēšanas rīki kā Vite.

Te arī slēpjas viens no iemesliem, kāpēc, pēc pārtraukuma atgriežoties React pasaulē, var rasties sajūta, ka esi nejauši iekāpis citā laika līnijā.

Agrāk pamācība sacīja: ievadi šo komandu un sāc.

Tagad tā var sākties ar jautājumu: kāda veida aplikāciju tu veidosi, kā tā tiks renderēta, vai tev vajadzīgs serveris, kādu ietvaru izvēlēsies un vai esi emocionāli gatavs izlasīt salīdzinošu tabulu par sešiem dažādiem būvēšanas rīkiem?

Vite daudzos vienkāršos projektos ir kļuvis par ātru un ērtu Create React App aizvietotāju. Tas sāk darbu veikli un neveido iespaidu, ka katras izmaiņas saglabāšanas laikā dators ir devies īsā pārdomu pastaigā.

Tomēr kopā ar veco palaišanas rīku React zaudēja arī kaut ko netveramu — vienu visiem saprotamu ieejas durvju komplektu.

Tagad durvju ir vairāk. Dažas ved uz vienkāršu pārlūkprogrammas aplikāciju, citas uz servera renderēšanu, vēl citas uz mobilajām ierīcēm. Izvēles iespējas ir lieliskas, līdz brīdim, kad ir jāizvēlas.

React sāka apmeklēt servera pusi

Sākotnēji React bija diezgan skaidri saistīts ar pārlūkprogrammu un to, ko redz lietotājs. Serveris, datubāze un citas aizkulišu darbības dzīvoja atsevišķu dzīvi.

Mūsdienu React pasaulē šī robeža kļuvusi daudz izplūdušāka.

React Server Components jeb servera komponentes ļauj daļu komponentu izpildīt pirms to nosūtīšanas lietotāja pārlūkprogrammai. Tā vietā, lai visu darbu, visu kodu un visu atbildību nogādātu pie lietotāja durvīm, daļu iespējams paveikt jau kaut kur aiz durvīm ar uzrakstu “ieeja tikai personālam”.

Tas var samazināt pārlūkprogrammai nosūtāmā JavaScript apjomu, pietuvināt datu iegūšanu serverim un palīdzēt aplikācijām ielādēties gudrāk. Tajā pašā laikā tas padara React arhitektūru sarežģītāku, jo programmētājam jāsaprot, kura koda daļa dzīvo pārlūkprogrammā, kura serverī un kura tikai izlikās, ka visu laiku dzīvojusi vienā vietā.

React 19, kas stabilā versijā iznāca 2024. gada decembrī, turpināja šo virzienu. Tas atnesa uzlabojumus asinhronām darbībām, formu apstrādei, optimistiskiem atjauninājumiem un servera iespējām.

Optimistisks atjauninājums ir skaists tehnisks nosaukums sistēmas spējai izturēties tā, it kā viss jau būtu izdevies.

Piemēram, lietotājs nospiež pogu “Saglabāt”, un sistēma uzreiz parāda jauno rezultātu, nevis liek cilvēkam vairākas sekundes vērot griežamies aplīti. Fonā saglabāšana vēl tikai notiek. Sistēma gluži vienkārši tic labākajam iespējamajam scenārijam.

Tā ir pieeja, kuru cilvēki sadzīvē izmanto jau sen, īpaši iesniedzot dokumentus valsts iestādēs, vai Curriculum Vitae – plašāk zināmu kā CV pretendējot uz kādu nepieciešamu darba vietu.

React ieguva arī savu neredzamo optimizētāju

Ilgu laiku React programmētājiem pašiem nācās domāt par dažādiem veiktspējas uzlabojumiem un norādīt, kuras vērtības vai darbības nav nepieciešams aprēķināt no jauna. Tas radīja papildu kodu, kuru dažkārt pievienoja pamatoti, dažkārt profilaktiski, bet reizēm vienkārši tāpēc, ka internetā kāds bija teicis, ka tā dara profesionāļi.

  1. gada oktobrī stabilu versiju sasniedza React Compiler. Tas ir būvēšanas laikā strādājošs optimizētājs, kas analizē komponentes un automātiski veic daļu iepriekš manuāli rakstīto optimizāciju. React komanda norādīja, ka tas spēj uzlabot komponentes un Hooks bez nepieciešamības tās pārrakstīt.

Vienkāršoti sakot, React ieguva gudru meistaru, kurš pirms aplikācijas nodošanas ekspluatācijā izstaigā telpas un pārbauda, vai gaisma netiek lieki ieslēgta desmit reizes un vai katra durvju atvēršana neizraisa visas mājas pārbūvi.

Tas nenozīmē, ka programmētājs tagad drīkst rakstīt jebko un paļauties, ka kompilators visu pārvērtīs zeltā. Arī visgudrākais meistars nevar pilnībā izglābt māju, kuras vannasistaba ieprojektēta uz balkona, vai tualetes pods novietots virtuves centrā starp plīti un ēdamgaldu.

Taču React pamazām virzās uz pasauli, kurā cilvēks vairāk domā par aplikācijas loģiku, bet mašīna pārņem daļu tehniskās rosīšanās.

React beidzot izvācās no Meta mājām

React savulaik radās uzņēmumā Facebook, kas vēlāk kļuva par Meta. Lai gan React jau sen bija atvērtā pirmkoda projekts ar plašu starptautisku kopienu, tā vārds un infrastruktūra joprojām bija cieši saistīta ar vienu uzņēmumu.

  1. gada februārī oficiāli darbu sāka React Foundation — neatkarīgs fonds Linux Foundation paspārnē. React, React Native un tādi saistīti projekti kā JSX vairs nepieder Meta, bet gan jaunajam fondam. Tā dibinātāju lokā ir vairāki lieli tehnoloģiju uzņēmumi, savukārt tehnisko virzienu paredzēts nošķirt no fonda uzņēmumu pārvaldības.

Cilvēciskā valodā — React pēc ilgas dzīvošanas vecāku mājā beidzot ir paņēmis savu krūzi, dokumentus un telefona lādētāju un pārcēlies uz neatkarīgu dzīvesvietu.

Meta gan nav pazudusi no tā dzīves. Tā joprojām ir viena no fonda dalībniecēm, gluži kā vecāki, kuri palīdz ar pirmo iemaksu, bet vairs nedrīkst vienpersoniski noteikt, kādā krāsā krāsot virtuvi.

React šajā procesā ieguvis plašāku un neitrālāku pamatu nākotnei. Projekts, kuru izmanto neskaitāmi uzņēmumi un programmētāji, vairs juridiski neatrodas tikai viena uzņēmuma kabatā.

Tas ir diezgan iespaidīgs pieaugšanas stāsts rīkam, kurš sākumā vienkārši centās sakārtot lietotāja saskarnes.

Ko React ir ieguvis?

React ir kļuvis nobriedušāks, ātrāks un daudz piemērotāks lielām, sarežģītām aplikācijām. Tas labāk pārvalda gaidīšanu, ielādi, pārejas un asinhronas darbības. Tas prot sadarboties ar serveri, ļauj ietvariem izvēlēties piemērotāko satura sagatavošanas veidu un sāk daļu optimizācijas darba uzticēt kompilatoram.

Tam ir arī daudz skaidrāka mūsdienu dokumentācija. Jaunam cilvēkam vairs nav vispirms jāapgūst vecā klašu pasaule, lai pēc tam svinīgi uzzinātu, ka lielu daļu no tās jaunajos projektos vairs neraksta.

React ekosistēma spēj apkalpot gan nelielu iekšējo darba rīku, gan milzīgu platformu ar miljoniem lietotāju. To var izmantot pārlūkprogrammās, mobilajās aplikācijās un dažādās servera arhitektūrās.

Tā vairs nav tikai kastīte ar detaļām. Tā ir kļuvusi par veselu būvniecības rajonu ar instrumentu nomām, projektētāju birojiem, piegādātājiem, ceļu zīmēm un vismaz trim cilvēkiem, kuri ļoti pārliecinoši apgalvo, ka visi pārējie ēku ceļ nepareizi.

Ko React ir zaudējis?

Vispirms tas zaudējis daļu sākotnējās nevainības.

Agrāk React varēja aprakstīt samērā vienkārši: tu izveido komponentes, iedod tām datus, un tās parāda saskarni.

Tagad šim teikumam bieži seko piebilde par servera komponentēm, renderēšanas stratēģijām, datu plūsmām, maršrutēšanu, straumēšanu, koda sadalīšanu, kešošanu un ietvariem.

Tomēr nevar arī gluži teikt, ka React kļuvis īpaši sarežģītāks pašā kodolā. Vienkāršu komponenti joprojām var uzrakstīt dažās rindās. Taču pasaule ap to ir kļuvusi plašāka, un līdz ar plašumu atnāk dažādas papildu izvēles.

Kā jau minēju iepriekš tas ir zaudējis arī vienu acīmredzamu sākuma ceļu. Create React App laikos gandrīz visi iesācēji iegāja pa vienām durvīm. Tagad vieni sāk ar Vite, citi ar Next.js, vēl citi ar React Router, bet kāds noteikti uzrodas ar jaunu rīku, kura mājaslapā rakstīts, ka tas beidzot atrisinājis visas tīmekļa izstrādes problēmas – kas visdrīzāk ir pielīdzināms “perekupa” teiktajam autoplacī par 20 gadus vecu žurku ar kuru braucis tikai mācītājs svētdienās uz baznīcu.

React ir zaudējis iespēju izlikties, ka eksistē viens pats.

Agrāk varēja mācīties komponentes un kādu laiku neuzdot neērtus jautājumus par datubāzēm, lietotāju kontiem un publicēšanu. Tagad kļūst daudz skaidrāk redzams, ka īsta aplikācija ir vesela sistēma, kurā React ir tikai viena — lai arī ļoti svarīga — daļa.

Taču varbūt tas nav zaudējums.

Varbūt React vienkārši beidzis uzdoties par visu māju un godīgi atzinis, ka ir ļoti labi izstrādāta dzīvojamā istaba, kurai tomēr vajadzīga arī virtuve, apkure, kanalizācija un vieta, kur glabāt datus.

Un ko no tā visa vēl atceros es?

Atgriežoties pie saviem vecajiem projektiem, pārsteidzošākais nebija tas, cik daudz mainījies.

Pārsteidzošākais bija tas, cik daudz vēl aizvien ir pazīstams.

Komponentes joprojām ir komponentes. props joprojām nodod datus. useState joprojām palīdz kaut ko atcerēties. useEffect joprojām spēj kļūt par nelielu personīgu traģēdiju, ja tam neuzmanīgi norāda atkarības. Notikumi, formas, saraksti un nosacījumi nav aizbēguši.

Mainījušās galvenokārt durvis, pa kurām projektā ieiet, un iespējas, ko darīt pēc tam, kad vienkāršā aplikācija sāk pārvērsties par īstu sistēmu.

Es neesmu pamodies pasaulē, kurā viss iepriekš mācītais būtu kļuvis nederīgs. Drīzāk esmu atgriezies pilsētā, kurā saglabājušās vecās ielas, bet starp tām uzcelti jauni rajoni, pārvadi un dažas ēkas, kuru arhitektūru pat vietējie vēl apspriež.

React vairs nav tas, kas bija.

Tas ir izaudzis no salīdzinoši vienkārša saskarņu rīka par pamatu veselai aplikāciju pasaulei. Tas ieguvis gudrāku darbu sadali, servera iespējas, modernākus ietvarus, automātisku optimizāciju un pat savu neatkarīgu fondu.

Pa ceļam tas zaudējis daļu vienkāršības, vienu ierasto sākuma pogu un iespēju izskaidrot visu ekosistēmu vienā mierīgā rindkopā.

Tomēr React vēl aizvien ir tas, kas ir.

Veids, kā sadalīt sarežģītu saskarni saprotamās daļās. Veids, kā likt ekrānam reaģēt uz cilvēku. Veids, kā no pogām, formām un datiem uzbūvēt kaut ko, kas sāk līdzināties īstai aplikācijai.

Un varbūt mūsu ceļi nemaz nebija šķīrušies.

Varbūt es vienkārši biju uz mirkli aizgriezies, lai nošķaudītos un tagad pavēršot skatienu atpakaļ ieraugu citu ainu…

Loading

Noderīgs raksts? Dalies ar citiem: