Komandamın RxJS-i sevməsinə necə kömək edə bilərəm?

Səbəb və nəticəni anlamaq hər hansı bir tətbiqi başa düşməkdədir və reaktiv proqramlaşdırma onları aydın görmək qabiliyyətini məhv edir. Həm də çox güclüdür. Əməkdaşlarımızın bundan həzz almasına necə kömək edə bilərik?

Hər kəs reaktiv proqramlaşdırmanı sevmir. Bir çox inkişaf etdirici sadə və sadə olduğu üçün cəlbedici proqramlaşdırmaya üstünlük verir. Bir düyməni basarsanız və məlumatın səhifədəki 3 yerdə dəyişdirilməsi lazımdırsa, o zaman ... gəlin həmin 3 yerə və mətni dəyişdirək!

Redux və RxJS istifadəçilərinin sayı getdikcə artdıqca, bir çox tətbiqi anlamaq, ayıklamaq və inkişaf etdirmək çətinləşir. Bu texnologiyalar uyğun olmayan vəziyyətlərin səbəb olduğu səhvlərin qarşısını almağa kömək edir. Bununla yanaşı, uzlaşma özləri ilə gətirdikləri böyük dolayılıqdır.

Məsələn, bir söhbət tətbiqetməsində, bir inkişaf etdirici, Söhbəti Çıx düyməsini basaraq sohbet mövzularını görünüşdəki söhbət mövzuları siyahısından çıxardığını, ancaq veb cibini düzgün bağlamadığını görə bilər. Reaktiv memarlıq artıq bunun niyə baş verdiyini başa düşə bilmir. Geliştirici tərk edilmiş söhbət üçün hadisə işləyicisinə baxarsa, yalnız this.store.dispatch ({type: 'LEAVE_CHAT', id}) görür. Kodu bir müddət izlədikdən sonra, söhbət elementinin siyahıdan çıxmasına səbəb olurlar. Onlara elə gəlir ki, bu müddətdə səbəb və nəticə mexanizmini müəyyənləşdirmək demək olar ki, çətin olmayacaqdı. Tədbir işləyicisində bu kimi bir şey gözləyirdiniz.chatService.removeChatFromList ({id}); beləliklə this.chatService.ohAndCloseThisWebSocketPlz ({id}) istifadə etsinlər; əlavə edə bilərsiniz. Ancaq orada deyildi!

Reaktiv Proqramçılar Sadistdirlərmi?

Bəlkə də. Bununla birlikdə, reaktiv proqramlaşdırmaya alışmış olsanız, kodun həqiqətən reaktiv olsaydı, bu nümunədəki səhvin ümumiyyətlə mövcud olmayacağını fərq etmiş ola bilərsiniz. Söhbət siyahısı mərkəzi söhbət şəxsiyyətlərinin siyahısına, həmçinin veb yuva əlaqələrinin açılması və bağlanmasından məsul olan müşahidə olunanlara abunə olacaqdı və hər ikisi də doğru zamanda cavab vermiş olardı. Əməliyyat işçisinin hər ikisini xatırlamasına ehtiyac yox idi.

Etməli olduğunuz hər şeyi edərkən bir hərəkət edərkən meydana çıxa biləcək təsirlərin bütün mümkün birləşmələrini nəzərə aldığınızdan əmin olmalısınız. İmperativ proqramlaşdırma sadə və asanlıqla həyata keçirilə bilər, lakin bir tətbiq müəyyən bir mürəkkəblik səviyyəsinə çatdıqda, inkişaf etdiricilərin burada və orada kiçik şeyləri unutması və uyğunsuz dövlətlərin səhvlərin əksəriyyətini izah etməyə başlayacağı ehtimalı çox yüksəkdir.

İmperativ kod da gözlənilməz nəticələrə səbəb ola bilər. Qaranlıq xüsusiyyət başqa bir xüsusiyyətin asılı olduğu vəziyyəti birdən-birə dəyişdirə bilər və ya vəziyyət sıradan çıxarıla bilər. Bu, bir portalı cəhənnəmə aparacaq və bir portal tapmaq üçün fərqli rənglərdə açar kartları toplamalıyıq.

Fərqli rənglərdə kartlar

Bununla birlikdə, əksər inkişafçılar hələ də açıq, cəlbedici kodu seçirlər. Bəs bu dolayı Redux / RxJS arxitekturasını istifadə etmək mandatı yuxarıdan gəlirsə nə edirsiniz?

Çox güman ki, nəticə, inkişaf etdiricilərin vəziyyətə və yaddaşa hadisələrin baş verməsi prosesində əlavə bir addım kimi baxmağa başlamalarıdır. Beləliklə dövlət ağaclarını belə etməyə başladılar:

// Bunu etmə: İnterfeys statusu: {showModal: boolean; loadItemDetails: boolean; showLoadingIcon: boolean; cancelRequest: boolean; hidePopup: boolean; navigateToPage: string; cleanRoom: boolean; goOutside: boolean; hər şey: boolean; engageInPhilanthropy: Boolean; }

Dövlət əmrlər üçün təsirli bir vasitə olur. Bununla birlikdə, həqiqətən tək bir görünüşün yaradıla biləcəyi bir məlumat şəkli olmalıdır. Bizi hara aparır? Sadə məcburi proqramlaşdırmadan daha pisdir, çünki yalnız hər yerdə bu gülünc Redux / RxJS maşınlarına sahib deyilik, həm də bütün bu əmrlərin təsirlərini xatırlamalıyıq.

(Qeyd: RxJS əlbəttə ki, Redux olmadan istifadə edilə bilər, lakin Redux olmadan reaksiya vermədiyiniz təqdirdə əmrləri müşahidə oluna bilən dəyərlər kimi vermək probleminiz olacaq.)

İmperativdən reaktiv düşüncə tərzinə keçmək çox çətindir və buna görə də bunu həqiqətən istəməlisiniz. Bir çox inkişaf etdirici, uyğunsuzluq səbəbindən çox ağrı hiss etmədikləri üçün reaktiv düşüncə ilə maraqlanmırlar və ya uyğun olmayan vəziyyətin meydana gələn səhvlərin çoxu arasında ortaq olduğunu düşünməmiş ola bilərlər.

Reaktiv proqramlaşdırma nə vaxt seçiləcək

Motivasiya olmadığı zaman reaktiv proqramlaşdırmaya yönəltməyin əks effektiv olduğu üçün reaktiv proqramlaşdırma aşağıdakı hallarda mənalıdır:

  1. Layihədəki reaktiv proqramlaşdırmanın dəyəri kifayət qədər açıqdır ki, bütün komanda üzvləri çatışmazlıqlarına baxmayaraq istifadə etmək istəyirlər
  2. Layihə bunun üçün orta dərəcədə yaxşıdır, qrup xüsusilə buna qarşı deyil və reaktiv nümunələri təmin etmək üçün yaxşı seçimləriniz var (məsələn, mağazada yalnız bir unikal statusa sahib olmaq, çıxarılan məlumatlardakı seçicilərdən istifadə etmək və yerli statusdan qaçmaq ).
  3. Reaktiv proqramlaşdırmanın dəyəri bir şəkildə endirilə bilər ki, sadə layihələr üzərində işləyən komandalar da istifadə etmək istəsinlər

Reaktiv proqramlaşdırma mürəkkəb tətbiqetmələri kəskin dərəcədə sadələşdirə bildiyindən vəziyyət 3 mənim fikrimcə idealdır. Reaktiv bir arxitekturanın maliyyətini bir şəkildə azalda bilsəydik, komandalar tətbiqləri kiçik olarkən, paylaşılan, dəyişkən vəziyyətin səbəb olduğu atəşləri təqib edən çox sayda qaynaq itirmədən əvvəl tətbiq edə bilərdi.

Reaktiv xərclərin azaldılması

Reaktiv kodlaşdırma problemi ilk dəfə həll etmək və mövcud həlli başa düşmək çətinliyini artırır. Xoşbəxtlikdən, cəmiyyətdəki bir çox insan bu problemləri həll etmək üçün alətlər üzərində işləyir. Bu yazının qalan hissəsi üçün ən böyük həvəs partlayışlarımın bir qismini, eləcə də reaktiv kodun anlaşılmasını və yaradılmasını necə asanlaşdıracağımıza dair bəzi düşüncələrimi bölüşmək istəyirəm.

Reaktiv kodu anlamaq

Reaktiv kodu başa düşməyin açarı tətbiqinizə səbəb və nəticə şəffaflığını bərpa etməkdir. Mükəmməl bir iş gördüyünü düşündüyüm bəzi alətlər:

  • Redux dev alətləri. Redux tətbiqetmələrində dolayı bir qaynaq, baş verənləri və vəziyyətin necə dəyişməli olduğunu ayıran hərəkətlərdir (vəziyyət hərəkətlərə reaksiya verir). Redux-devtools, hərəkətlərin vəziyyəti necə dəyişdirdiyini göstərərək bu anlayışları birləşdirir. Budur nə edə biləcəyini göstərən gözəl bir video.
  • Andre Staltz, JS kitabxanasında CycleJS-də müşahidə edilə bilənlər üçün aydın bir vizual vasitə yaratdı. Seçdiyiniz sürətlə tətbiqiniz vasitəsilə məlumat axınını izləyə bilərsiniz. RxJS tətbiqetmələri üçün belə bir şey görmək istərdim.
  • Andre Staltz və başqalarından ilham alaraq, bu veb saytdakı hər hansı bir müşahidə zəncirini görüntüləyə bilərsiniz. Bir VSCode uzantısı kimi inanılmaz olduğunu düşünürəm.

Bunlar əla vasitələrdir və reaktiv kodun görmə qabiliyyətini yaxşılaşdırmağın bir çox yolu var. Hər hansı bir fikiriniz varsa, xahiş edirəm aşağıda bir şərh buraxın. Bəlkə siz və ya kimsə bir fikir götürüb onunla işləyə bilərsiniz.

Reaktiv olaraq həll edin

Bir problemi reaktiv həll etməkdə çətinlik, tutumunuzun tez bir zamanda aşıb-daşacağını və nəhayət başa düşməmişdən əvvəl, ehtimal ki, bir neçə dəfə başlamalı olduğunuzu unutmamalı olduğunuz bir çox şeyin olmasıdır. Başınızdakı bu kimi bir riyaziyyat problemini həll etməyinizi istəyən birinə bənzəyir:

32058 X 17 -----

Bütün rəqəmləri əzbərləmək çətindir, ancaq aralıq addımları əzbərləmək və sonra rəqəmlər arasındakı qarşılıqlı əlaqəni hesablamaq çox insanın bacardığı qədərdir.

Yaxşı ki, bu problemi yalnız başınızda həll edə bilməzsiniz. Bir neçə kiçik pilləni qeyd etməyi əhatə edən daha asan bir metod var. Bu proses əsas problemi işləyən yaddaş məhdudiyyətlərindən uzaqlaşaraq öyrənilə və öyrədilə bilən daha etibarlı bir prosesə keçir.

Reaktiv kodlaşdırma üçün oxşar bir proses varmı?

Ümumi bir nümunə götürək və vacib və reaktiv həlləri müqayisə edək. Reaktiv həlldən daha mürəkkəb problemləri həll etmək üçün istifadə edə biləcəyimiz bir prosesi çıxara bilməyəcəyimizə baxın.

Əsas nümunə: asinxron avtomatik tamamlama

Əksər inkişaf etdiricilər bu nümunə ilə kifayət qədər tanışdırlar. Bir istifadəçi bir girişə bəzi mətnlər daxil edir, daxil edilmiş sətirlə süzülmüş məlumatların siyahısı alınır və nəticələr istifadəçiyə göstərilir.

Məcburi həll sadədir. Tədbir işləyicisi ilə başlayırıq (dəyişdirin). Bu funksiya axtarış terminini giriş olaraq qəbul edir və məlumat alan bir işə ötürür. Verilər geri qaytarıldıqda, məlumatlar şablona baxıla bilməsi üçün komponent sinifinə bağlıdır. Bunun tətbiqetmə nümunəsi:

Avtomatik tamamlama məcburidir

Əla. Çox çətin deyildi.

Reaktiv həlli izah etmək daha çətindir, amma düşündüyüm proses belə idi: məlumatlar bir istifadəçi tərəfindən daxil edildikdən sonra götürülməlidir, buna görə müşahidə oluna bilən bərpa məlumatları istifadəçi girişinə diqqət yetirir. İstifadəçi girişi (dəyişdirmə) hadisə işləyicisində .next metodu deyilən bir mövzudur. Beləliklə, məlumat alma metodu bu mövzunun xəritəsini söndürməli olur. Bununla birlikdə, bu axın, asenkron boruya çatması üçün komponent üzərində bir xüsusiyyət olaraq təyin edilməlidir. Buna görə kodumuz başlayır. Bir şeyi unutmadan əvvəl hamısını yazaq:

Avtomatik tamamlama reaktiv olaraq həyata keçirilir

Bu o qədər də pis deyildi. Bu reaktiv olduğundan, indi bu komponent üçün dəyişiklik aşkarlanmasını söndürə bilərik və əvvəlki axtarış şərtləri üçün məlumatları yükləyə bilmərik. Bu, nəticələrin axtarış termini ilə heç vaxt sinxronlaşmamasını təmin edir. (Budur iki tətbiq ilə StackBlitz layihəsi.)

Dərhal bu qədər narahat olmayaraq bir az daha rəvan bu qərara gələ bilərikmi?

Bu iki həlli yan-yana müqayisə etsək, vacib və reaktiv həllərin prosesdəki fərqli addımları birləşdirdiyini görə bilərik:

İmperativ proqramlaşdırma hadisəni dərhal təsirə, reaktiv proqramlaşdırma isə son nəticəni dərhal məlumat mənbəyinə təyin edir. Ben Lesh və başqaları bir neçə dəfə “reaktiv düşüncənin” geriyə və ya tərs düşünməyə bənzədiyini söylədilər. Reaktiv həll yoluna baxsanız və əvvəlcə sonunda başlasanız, ümumi məlumat hissəsinin "$ =" olay işləyicisini nəzərə almadan yazıldığını tapa bilərsiniz.

Beləliklə, əsas əvvəl şablonda asenkron boru olan son istifadəçi barədə düşünməkdir. Süzülmüş məlumatlar tələb olunur, buna görə $ = data ilə başlayırsınız. Süzülmüş məlumatların dərhal mənbəyi olan searchTerm => fetchData (searchTerm) bir axtarış termini tələb edir. Axtarış termininin haradan gəldiyindən narahat olmayaraq, birlikdə zəncirvənd edə biləcəyimiz bir müşahidənin olduğunu düşünək. Beləliklə, onu təyin etməzdən əvvəl yalnız searchTerm $ yazırıq və onu switchMap () ilə birləşdiririk. Sonra (axtarış) üçün hadisə işləyicisini quraraq bu axtarış sözlərinin müşahidə oluna bilən yerə vurulduğunu öyrənə bilərik. Beləliklə, geriyə doğru düşünsək, hər dəfə yalnız bir şeyi nəzərə alan bir həll yolu tapa bilərik.

Bu prosesi bir neçə mərhələdə ümumiləşdirək:

  1. İstehlakçını müəyyənləşdirin
  2. Dəyərlərin müşahidə oluna biləcəyini düşünmədən zəncirini tamamlaya biləcəyiniz müşahidə olunan bir ad verin
  3. İstehlakçını bu yeni müşahidə olunan cihaza qoşun
  4. İlk müşahidə olunan dəyişəni təyin edin və öz dəyərlərini haradan aldığını göstərin

Birdən çox asinxron hadisəni ardıcıl olaraq emal etməyiniz lazımdırsa, ilk müşahidə olunan zəncirə (addım 4) çatana qədər hər bir müşahidə zənciri üçün 1-3 addımları təkrarlaya bilərsiniz.

İndi bu prosesi daha mürəkkəb bir problem üzərində sınamaq istəyirəm. Ancaq bu çox uzun olacaq, buna görə növbəti yazıma buraxacağam.

Nəticə

Reaktiv proqramlaşdırma bir çox bahalı səhvlərdən qaçınmağımıza kömək edə bilər, ancaq bunlarla tanış olmaq böyük bir maneədir. Əminəm ki, veb inkişaf etdirən icma reaktiv proqramlaşdırmanı xeyli asanlaşdıran həllər axtarmağa davam edəcəkdir. Bu, inkişaf etdiricilərə çox məyusluqdan, vaxtdan və mənbələrdən qənaət edir.

Oxuduğunuz üçün təşəkkür edirik! Son yazımı görmüsənsə, sonrakı yazılarımın bundan ibarət olacağını söylədiyimi xatırlaya bilərsən. Bu yazı ilə yan təsir göstərdiyim zaman bu yazı üzərində işləyirdim. Beləliklə, digər yazı hələ gələcəkdir.

Hər halda, fikirlərinizi şərhlərdə paylaşın! Başqa hansı alətləri bilirsiniz? Nə görmək istəyirsən? Burada təsvir olunan proses kimi istifadə etdinizmi? Başqa hansı tövsiyələriniz var?