Kuidas saaksin aidata oma meeskonnal RxJSi armastada?

Põhjuse ja tagajärje mõistmine on kõigi rakenduste mõistmise keskmes ja reaktiivne programmeerimine hävitab võimaluse seda selgelt näha. Kuid see on ka väga võimas. Niisiis, kuidas saaksime aidata meie teistel arendajatel sellega töötada?

Mitte kõigile ei meeldi reaktiivne programmeerimine. Paljud arendajad eelistavad hädavajalikku programmeerimist, kuna see on lihtne ja otsene. Kui klõpsate nuppu ja lehe 3-kohalised andmed peavad muutuma, siis haarake need 3 kohta ja laske see tekst muuta!

Üha enam inimesi, kes kasutavad Reduxit ja RxJS-i, on paljudest rakendustest keerulisem aru saada, siluda ja arendada. Need tehnoloogiad aitavad vältida ebajärjekindlast olekust põhjustatud vigu, kuid kompromiss seisneb nende kaudses suuruses.

Võtke see näide: vestlusrakenduses võib arendaja näha, et kui nad klõpsavad nupul „Jäta vestlus”, eemaldatakse vestluse lõng vaates olevate vestlusteemade loendist, kuid veebitasku pole korralikult suletud. Reaktiivne arhitektuur saab nüüd aru, miks see juhtub. Kui arendaja vaatab lahkumisvestluse sündmuste käitlejat, näevad nad ainult seda.store.dispatch ({tüüp: 'LEAVE_CHAT', id}). Pärast koodi mõnda aega jälgimist jõuavad nad lõpuks vestlusobjekti loendist kadumiseni. Neile näib, et põhjuse ja tagajärje mehhanismi tuvastamine protsessis ei oleks tohtinud olla nii keeruline. Nad ootasid sündmuste käitlejalt midagi sellist nagu see.chatService.removeChatFromList ({id}); et nad saaksid lisada ka selle.chatService.ohAndCloseThisWebSocketPlz ({id}) ;. Kuid seda polnud seal!

Kas reaktiivse programmeerimise pooldajad on sadistlikud?

Võib olla. Kuid kui olete harjunud reaktiivse programmeerimisega, siis võisite märgata, et selle näite viga poleks üldse olemas olnud, kui kood oleks tõesti olnud reageeriv. Vestlusloend oleks tellinud keskuse vestluse ID-de loendi, nagu ka veebipistikupesa ühenduste avamise ja sulgemise eest vastutavad vaatlejad ning mõlemad oleksid reageerinud õigel ajal. Tegevuste töötleja poleks pidanud mõlemat meeles pidama.

Kõigi ilmtingimata tegemine tähendab, et veenduge, et oleksite võtnud arvesse kõiki võimalikke efektide kombinatsioone, mis võivad toimingu tegemisel tekkida. Kohustuslik programmeerimine võib olla otsene ja hõlpsasti järgitav, kuid kui rakendus on jõudnud teatud keerukuse tasemele, on väga suur tõenäosus, et arendajad unustavad pisiasjad siin ja seal ning ebajärjekindel olek hakkab arvestama enamiku vigadega.

Kohustuslik kood võib põhjustada ka ootamatuid tagajärgi. Ebamäärane funktsioon võib ootamatult muuta olekut, millest sõltub mõni teine ​​funktsioon, või olekut võib muteeruda vales järjekorras, rippides portaali põrguks ja nõudes, et me koguksime portaali tagasi leidmiseks erinevat värvi võtmekaardid.

Erinevate värvidega klaviatuurid

Kuid enamik arendajaid eelistab endiselt otsest, hädavajalikku koodi. Mida nad siis teevad, kui volitus on ülalt seda kaudset Redux / RxJS arhitektuuri kasutada?

Kõige tõenäolisem tulemus on see, et arendajad hakkavad osariiki ja kauplust nägema lihtsalt täiendava sammuna asjade toimumise protsessis. Nii et nad hakkavad riigipuid tegema niimoodi:

// Ärge tehke seda:
liidese olek: {
  showModal: tõeväärtus;
  loadItemDetails: tõeväärtus;
  showLoadingIcon: tõeväärtus;
  CancelRequest: tõeväärtus;
  hidePopup: tõeväärtus;
  navigateToPage: string;
  cleanRoom: tõeväärtus;
  goOutside: tõeväärtus;
  tegemaKõik: loogiline;
  engageInPhilanthropy: loogiline;
}

Riik muutub käskude jaoks ebamugavaks vahendiks. Kuid see peaks tegelikult olema teabe ülevaade, millest saab genereerida ühe ja ühe vaate. Kuhu see meid paneb? Halvem kui tavalise hädavajaliku programmeerimisega, sest mitte ainult meil pole kogu seda naeruväärset Redux / RxJS-i masinat nüüd kõikjal olemas, vaid peame siiski meeles pidama ka kõigi nende käskude mõju.

(Märkus. RxJS-i saab muidugi kasutada ka ilma Reduxita, kuid ilma Reduxita on teil tõenäoliselt endiselt probleem, kus käsud väljastatakse jälgitavate väärtustena, kui te ei kodeeri reaktiivselt.)

On väga raske muutuda imperatiivsest reaktiivseks mõtteviisiks ja seetõttu peate seda tõesti tahtma. Paljud arendajad pole huvitatud reaktiivsest mõtlemisest, kuna nad pole veel ebajärjekindlast olekust suurt valu kogenud või pole nad ehk märganud, et ebajärjekindel olek on paljude vigade hulgas tavaline.

Millal valida reaktiivne programmeerimine

Kuna reageeriva programmeerimise nõudmine motivatsiooni puudumisel on kahjulik, näib reaktiivne programmeerimine olevat sellistes olukordades mõistlik:

  1. Reaktiivse programmeerimise väärtus projektis on piisavalt enesestmõistetav, et kõik meeskonna liikmed soovivad seda kasutada, vaatamata selle puudustele
  2. Projekt sobib sellele mõõdukalt, meeskond ei ole sellele eriti vastu ning teil on häid võimalusi reaktiivsete mustrite tagamiseks (nt kui kaupluses on ainult unikaalne olek, tuletatud andmete jaoks valijate kasutamine ja kohaliku riigi vältimine)
  3. Reaktiivse programmeerimise kulusid saab kuidagi vähendada, nii et isegi lihtsate projektide kallal töötavad meeskonnad soovivad seda kasutada

Kuna reaktiivne programmeerimine võib keerulisi rakendusi dramaatiliselt lihtsustada, on kolmas olukord minu arvates ideaalne. Kui me saaksime kuidagi vähendada reaktiivse arhitektuuri kulusid, saavad meeskonnad selle kasutusele võtta, kui nende rakendused on endiselt väikesed, enne kui nad kaotavad tohutul hulgal ressursse, mis jahutavad tulekahjusid, mis on põhjustatud jagatud, muutuva olekuga.

Reaktiivse kulu vähendamine

Kodeerimine suurendab reaktiivselt nii probleemi esmakordset lahendamist kui ka olemasoleva lahenduse mõistmist. Õnneks töötavad paljud kogukonna töövahendid nende väljakutsetega toimetulemiseks. Ülejäänud osa sellest postitusest tahaksin jagada mõnda, mis mind kõige rohkem erutab, ja ka oma mõtteid selle kohta, kuidas meil oleks lihtsam reageerimist mõista ja luua.

Reaktiivse koodi mõistmine

Reaktiivse koodi mõistmise võti on põhjuse ja tagajärje läbipaistvuse taastamine rakenduses. Siin on mõned tööriistad, mis minu arvates teevad selles suurepärast tööd:

  • Redux-devtools. Reduxi rakenduste ükskõiksuse allikas on toimingud, mis eraldavad toimunu sellest, kuidas olek peaks muutuma (olek reageerib toimingutele). Redux-devtools ühendab need mõisted uuesti, näidates, kuidas toimingud olekut muudavad. Siin on kena video, mis näitab, mida see teha saab.
  • Andre Staltz on oma JS-i raamatukogus, CycleJS, loonud jälgitavate jaoks ilusa visualiseerimisvahendi. Saate vaadata rakenduse kaudu voolavaid andmeid teie valitud kiirusel. Mulle meeldiks RxJS-i rakenduste jaoks midagi sellist näha.
  • Andre Staltzi ja teiste inspireeritud see veebisait võimaldab teil visualiseerida mis tahes vaadeldavat ahelat. Ma arvan, et see oleks VSCode laiendina hämmastav.

Need on fantastilised tööriistad ja veel on palju võimalusi reaktiivkoodi läbipaistvuse parandamiseks. Kui teil on ideid, jätke kommentaar allpool ja võib-olla saate teie või keegi idee välja valida ja selle ellu viia.

Reaktiivselt lahendamine

Probleemi reaktiivse lahendamise keerukus seisneb selles, et peate oma peas hoidma nii palju asju, et ületate kiiresti oma võimete ja peate alustama otsast, võib-olla mitu korda, enne kui lõpuks aru saate. See tundub sarnane sellega, kui keegi palub teil teie peas lahendada selline matemaatikaülesanne:

32058
X 17
-----

Ainuüksi kõigi numbrite meeldejätmine on keeruline, kuid siis on vaja meelde jätta ka vaheetapid ja arvutada seejärel numbrite vaheline vastastikmõju, mida enamik inimesi suudab.

Seega on hea, et seda oma peas tehes pole ainus viis selle probleemi lahendamiseks. On olemas lihtsam meetod, mis hõlmab mitmete väikeste sammude üleskirjutamist. See protsess viib põhiprobleemi töömälu piirangutest eemale usaldusväärsemast protsessist, mida saab õppida ja õpetada.

Kas on olemas sarnane protsess reaktiivselt kodeerimiseks?

Võtame tavalise näite ja võrrelgem hädavajalikke ja reaktiivseid lahendusi ning uurime, kas me ei saa reaktiivsest lahendusest eraldada protsessi, mida saaksime kasutada keerukamate probleemide lahendamisel.

Põhinäide: asünkroonne automaatne täitmine

Enamik arendajaid on selle näitega üsna tuttavad. Kasutaja tipib sisendisse teksti, tõmmatakse sisestatud stringi sisaldav andmete filtriloend ja tulemused kuvatakse kasutajale.

Kohustuslik lahendus on otsekohene. Alustame sündmuste käitlejaga (muuda). See funktsioon võtab otsingusõna sisendina, edastab selle funktsiooni, mis tõmbab andmeid, seejärel seob andmed tagasi komponendi klassi, et mall seda kuvada. Siin on selle rakendamise näide:

Automaatne täitmine on hädavajalik

Suurepärane. See polnud liiga raske.

Reaktiivset lahendust on raskem kirjeldada, kuid see oli minu mõttekäik: Andmed tuleb tõmmata pärast kasutaja sisestamist, seega jälgib andmete toomist jälgitav andmete sisestamine. Kasutaja sisestatud subjektiks on subjekt, kellel on (muutmise) sündmuste käitlejas kutsutud .next-meetod, nii et tundub, et andmete hankimise meetod peab selle subjektiMap välja lülitama. Kuid see voog tuleks määrata komponendi atribuudina, nii et see oleks asünkri toru jaoks saadaval, nii et meie kood tegelikult algab. Kirjutame kõik enne alla, kui me midagi unustame:

Automaatne täitmine on rakendatud reageerivalt

See polnud halb. Ja kuna see on reageeriv, võime nüüd selle komponendi muudatuste tuvastamise välja lülitada ja me ei laadi alla varasemate otsinguterminite andmeid. See tagab, et tulemused ei lähe kunagi otsinguterminiga sünkroonis. (Siin on 2 teostusega projekt StackBlitz.)

Kas oleksime jõudnud selle lahenduseni pisut sujuvamalt, ilma et oleksime pidanud nii palju oma meeles korraga hoidma?

Kui võrrelda neid kahte lahendust kõrvuti, näeme, et imperatiivsed ja reaktiivsed lahendused seostavad protsessi erinevad etapid:

Imperatiivne programmeerimine seob sündmuse kohese mõjuga, samas kui reaktiivne programmeerimine seob lõpliku efekti selle vahetu andmeallikaga. Ben Lesh ja teised on mõned korrad öelnud, et “reaktiivselt mõtlemine” on nagu tagurpidi või tagurpidi mõtlemine. Kui vaatate reaktiivset lahendust ja alustate kõigepealt selle lõpust, märkate, et avalike andmete $ = osa oleks võinud kirjutada, isegi ilma sündmuse käitlejat (muutmist) arvestamata.

Seejärel on oluline mõelda kõigepealt lõpptarbijale, mis on malli asünkrooputk. Ta soovib filtreeritud andmeid, nii et alustate andmetega $ =. Filtreeritud andmete vahetu allikas searchTerm => fetchData (searchTerm) vajab otsingusõna. Ilma et peaksite muretsema selle üle, kust otsingusõna pärineb, eeldame, et on olemas selle jälgitav osa, millest me saame aheldada. Kirjutame otsingutermi $ lihtsalt enne selle määratlemist ja aheldame selle lülitiMapM abil (). Siis saame aru saada, kuhu need otsinguterminid sellesse jälgitavasse pumbatakse, seadistades sündmuste käitleja (muutmiseks). Niisiis, tagantjärele mõeldes, suudame kujundada lahenduse, milles oleks vähem asju, mida korraga jälgida.

Kapseldame selle protsessi paar sammu:

  1. Tuvastage tarbija
  2. Pange tähele mõni jälgitav, kellega ahelduda, mitte muretsema selle pärast, mis sellele väärtusi paneb
  3. Ühendage tarbija selle uue jälgitavaga
  4. Määratlege esimene jälgitav ja kust see saab omaenda väärtused

Kui peame käsitlema mitmeid jadana toimuvaid asünkroonseid sündmusi, võime korrata samme 1–3 iga vaadeldava ahela kohta, kuni jõuame kõige esimese jälgitavuseni (4. samm).

Nüüd tahan proovida seda protsessi palju keerukama probleemi lahendamisel. Kuid see läheb tõesti pikaks, nii et jätan selle oma järgmisesse postitusse.

Järeldus

Reaktiivne programmeerimine aitab meil vältida paljusid kulukaid vigu, kuid sellega mugavaks muutmine on suur takistus. Usun, et veebiarenduskogukond otsib jätkuvalt lahendusi, mis muudavad reaktiivse programmeerimise palju lihtsamaks ja see säästab arendajaid palju pettumust, aega ja ressursse.

Täname, et lugesite! Kui nägite minu viimast postitust, võite võib-olla lõpus meenutada, et ütlesin, et minu järgmine postitus loob selle üles. Töötasin sellel ametikohal, kui sain selle postitusega külili. Nii et see teine ​​postitus alles tuleb.

Igatahes palun jagage oma mõtteid kommentaarides! Milliseid muid tööriistu te teate? Mida sa sooviksid näha? Kas olete kasutanud sellist protsessi, nagu siin kirjeldasin? Millised muud nõuanded teil on?