Reaksiya komponentləri ilə təkrar istifadəyə necə nail olmaq olar

Yenidən istifadə edilə bilmə, bu günlərdə proqram inkişafında ən çox yayılmış sözlərdən biridir. Bu, müxtəlif çərçivələr, alətlər və paradiqmalar vasitəsilə vəd edilir, bunların hər biri təkrar istifadəyə nail olmaq üçün öz yanaşmalarına malik deyil, həm də sözün özünün tərifini verir.

Yenidən istifadə etmək nə deməkdir?

Həqiqi təkrar istifadə ad hoc proses deyil, inkişaf strategiyasıdır. Yenidən istifadə edilə bilən komponentlər yenidən istifadə edilə biləcəyini nəzərə alaraq sıfırdan yaradılmalıdır. Bunun üçün ehtiyatlı planlaşdırma və empatetik API dizaynı tələb olunur. Müasir inkişaf alətləri və çərçivələr kodun təkrar istifadəsini dəstəkləyə və təbliğ edə bilsə də, təkrar istifadə tək texnologiya sayəsində əldə edilə bilməz. Bu ardıcıl olaraq komandalar arasında həyata keçirilən prosesləri və bir təşkilatın bütün səviyyələrində öhdəliyi tələb edir.

Buna görə təkrar istifadə haqqında danışdığımız zaman təkcə texniki müzakirə deyil. Buraya korporativ mədəniyyət, təlim və bir sıra digər mülahizələr də daxildir. Bunlardan bəzilərini burada izah edəcəyik, amma məsələ burasındadır ki, təkrar istifadə hər inkişaf mərhələsinə və bir təşkilatın hər səviyyəsinə təsir edən bir prosesdir.

Walmart, Sam's Club, Asda və Walmart Kanada və Walmart Braziliya kimi regional ofislər də daxil olmaqla bir neçə markadan ibarətdir. Bu markalar arasında yüzlərlə inkişaf etdirici tərəfindən qurulan və saxlanılan onlarla ön tətbiq var.

Bu markaların hər biri öz onlayn varlığına sahib olduğundan, tərtibatçılar Walmart markalarının hamısına ümumi olan komponentlər üzərində işləyirlər - məsələn, görüntü karuseli, çörək qırıntıları, uçuşlar və kredit kartları şəklində olan komponentlər kimi naviqasiya elementləri. Artıq başqa bir komanda tərəfindən təkrarlanan iş vaxt və pul itkisidir və səhvlər üçün daha çox yer yaradır. Bu təkrarlanmanı aradan qaldıraraq, inkişaf etdiricilər müştəri təcrübəsinə yeni dəyər verən layihələrə daha çox vaxt sərf edə bilərlər.

Arxada marka kod paylaşımı daha intuitivdir: vahid xidmət bir çox fərqli markadan sorğu ala bilər və həmin marka üçün müvafiq məlumatları geri qaytara bilər (və məlumatların formasına əsasən bunu etmək üçün bir neçə yol var). Ön tərəfdə vəziyyət daha mürəkkəbdir, çünki arxa ucun verdiyi məlumatlar istifadə edilməli və müəyyən bir marka və görünüş üçün uyğun mövzular və digər dəyişikliklər tətbiq edilməlidir. Yenidən istifadəni təşviq etmək üçün bunu etmək tam həll edilmiş bir problem deyil.

@ WalmartLabs-da komponentlərdən istifadə edərkən cavab verin

Walmart.com üçün ön çərçivə üçün React seçdik. Bunun səbəblərindən biri, komponent modelinin kodun təkrar istifadəsi üçün yaxşı bir başlanğıc nöqtəsi olması idi - xüsusən statusun idarə olunması üçün Redux ilə birlikdə. Bununla birlikdə, Walmart ölçüsündə bir təşkilatdakı ön kodun təkrar istifadə edilməsi ciddi problemlər gətirir.

Kod ötürmək üçün texniki qabiliyyət

Birinci problem kod komponentlərini bölüşmək üçün texniki imkanlara aiddir - onlar versiya olunmalı, asan quraşdırılmalı və yenilənə bilər. Bütün React komponentlərimizi ayrıca GitHub təşkilatına həvalə edirik. Komponentlər hal-hazırda onları yaradan komandalar əsasında repolara yığılmışdır. Bununla birlikdə, funksional rezervlərə keçid prosesindəyik, məsələn Bundan sonra komponentlər şəxsi npm qeydiyyatımızda yayımlanacaq. Beləliklə, inkişaf etdiricilər, tətbiqlərinin təkmilləşdirildiyi zaman qəflətən çökməməsini təmin etmək üçün xüsusi bir komponent versiyasını quraşdıra bilərlər.

Bu anda kod komandalar arasında bölüşüldüyündən, asılılıqlar yeniləndikdə və tələblər dəyişsə belə yüzlərlə komponent üçün vahid quruluş və kodlaşdırma standartlarını təmin etməliydik. Bu səbəblə komponentlər və tətbiqlər üçün elektrod arxetipləri yaratdıq. Arxetiplər, əyilmə, köçürmə və bağlama üçün konfiqurasiya fayllarını ehtiva edir və ən vacib bağlantıları və tapşırıqları / skriptləri idarə edə biləcəyimiz bir mərkəz təklif edir. Bir ortaq bir quruluş götürsək və bütün layihələr arasında vahid kodlaşdırma standartlarını təyin etsək, şirkət daxilində ən yaxşı təcrübələri qorumaq və inkişaf etdiricilərin bir-birlərinin kodlarına inamını artıra bilərik. Bu təkrar istifadə edilə bilən komponentlərin əslində təkrar istifadəsi ehtimalını artırır. Bu etimad, birdən çox cihaz, brauzer və ekran qətnamələrində şifrələmə, performansın ölçülməsi və sınaq qaydaları daxil edilmiş ardıcıl Davamlı İnteqrasiya / Davamlı yerləşdirmə sistemi ilə daha da artır. CI sistemi PR təqdim edildikdə bir komponentin beta versiyasını yayımlamaq qaydalarını ehtiva edə bilər və PR-nın problem yaratmadığını təmin etmək üçün bu komponenti istifadə edən bütün tətbiqlərdə funksional testlər edə bilər.

Meta komandası

Bu layihənin ilk günlərində paylaşılan komponentlərin əksəriyyətinə yalnız bir neçə komanda kömək etdi və bu komponentlər ümumiyyətlə çox tez dəyişdi. Nəhayət, elektrod çərçivəsini və Walmart daxili hissələrini xüsusilə dərindən bilən bəzi inkişaf etdiriciləri seçdik və meta komandamız adlandırdığımız bir qrup yaratdıq. Bu insanlar, komponent təşkilatındakı kodu nəzərdən keçirmək, bütün ən yaxşı təcrübələrin izlənməsini təmin etmək və ümumiyyətlə hər hansı bir şəkildə kömək etmək üçün bir neçə saat və ya bir neçə gün ərzində pul ayıracaqlar. Bu komanda ayrıca təşkilat daxilində qurulan şeylər haqqında geniş məlumat inkişaf etdirdi və öz komandalarında elektrod layihəsi üçün səfir kimi çıxış etdi. Meta komandasının üzvləri, həmçinin komandalarında arxetipdə gözlənilən dəyişikliklər haqqında məlumat toplayaraq əsas elektrod komandası ilə bölüşmək istədikləri rəyləri topladılar.

Bu addımlar başlamaq üçün yaxşı bir yer idi, ancaq bir təşkilat olaraq kodun təkrar istifadəsini yaxşılaşdırmağın başqa yollarını gördük.

Yüzlərlə komponentin tapma problemi

Sırf kanallarımızda ortaq bir mövzu ilə əlaqəli bir çox xəbər gördük. Yaradıcılar müəyyən bir tapşırıq üçün bir komponentin artıq yaradıldığını bilmək istədilər. UX komandaları hansı komponentlərin mövcud olduğunu görə bilmək istədilər. Layihə rəhbərləri digər komandalar tərəfindən hansı komponentlərin qurulduğunu görmək istədilər. Bütün bu mesajlar arasında ortaq mövzu tapılma idi. Hansı komponentlərin mövcud olduğunu tapmaq, istifadədə olduqlarını görmək, onlarla qarşılıqlı əlaqə yaratmaq və onların tətbiqi, konfiqurasiya və asılılıqları öyrənmək üçün sürətli və asan bir yola ehtiyac duyduq.

Bu problemə cavabımız, əvvəlki yazıda müzakirə etdiyim Elektrod Explorer-dir. Explorer ilə hazırlayıcılarımız @WalmartLabs-da mövcud olan yüzlərlə komponenti nəzərdən keçirə, sənədlərini oxuya və nəyə bənzədiyini görə bilər, hətta zamanla dəyişdiklərini görmək üçün versiya tarixlərindən də keçə bilər. Electrode Explorer bir təşkilatdakı bütün React komponentləri üçün bir veb interfeysi təmin etdiyinə görə, inkişaf etdiricilər npm görüntüləmək və qarşılıqlı əlaqə qurmaq məcburiyyətində qalmırlar.

Çatlar tərəfindən tökülmüş çoxalma

Kodun təkrar istifadəsini asanlaşdırmaq üçün bütün bu alətlər və proseslər olsa da, yenə də problemlər gördük. Bir problem komandaların digər komandalar üçün faydalı ola biləcəyini bilmədən tez-tez yeni komponentlər hazırlamaları idi. Komponentlər təkrar istifadə edilə bilən ekosistemdə olmadıqda təkrar istifadə edilə bilməz. Paylaşılan komponent sistemi içərisində də, çox oxşar problemlərə bir az fərqli yanaşma qəbul edən çoxsaylı cüt və ya komponentləri müəyyən edə bildik. Nə başa düşdük ki, texnoloji həllər yetərli deyil - bütün səviyyələrdə hər kəsin təkrar istifadə olunmasını şərtləndirən bir yanaşma tətbiq edən düşüncə sahəsində şirkət dəyişikliyi olmalıdır. Buraya komponentləri ümumiləşdirmək üçün vaxt ayırmaq lazımdır ki, yenidən istifadə etmək daha asan olsun, mövcud komponentləri yenidən başlatmaq əvəzinə genişləndirin və mümkün olduqda kodu paylaşma yollarını axtarın.

Düşüncə bu dəyişikliyini dəstəkləmək üçün bir komponent təklifi prosesi yaratdıq. Bu sistem altında, inkişaf etdiricilər işə başlamazdan əvvəl yeni komponentləri müzakirə edirlər. Bu, digər komandaların inkişaf etdiricilərinə mövcud həll yollarını və ya alternativ yanaşmaları təklif etmək imkanı verir və şirkətdə baş verənləri göstərir.

Təklif sistemi, meta prosesi ilə birlikdə, çatların təkrarlanmamasına kömək edir.

CI / CD-nin mənası

Böyük bir problem bir komandanın bir komponent üzərində işləməsi və digər komandanın tətbiqini pozması idi. Komponent versiyasını kilidləməmisinizsə, CI / CD uğursuz ola bilər, çünki bir komponent başqa bir komanda tərəfindən dəyişdirilmişdir. Bu dəhşətli bir hissdir və bir çox komandanın müəyyən bir versiya üçün komponentləri kilidləməsinə səbəb olur.

CI / CD-nin gəldiyi yer budur. Bir komponent versiyası yeniləndikdə, avtomatlaşdırma, bu əsas versiyada istehlak olunan tətbiqlərin zədələndiyini görməlidir. Tətbiqin komponent versiyasını kilidlədiyi təqdirdə bu da yoxlanılmalıdır. Heç bir fasilə yoxdursa, CI / CD sistemi, kilidlənmiş versiyanı tətbiqin dayandırılmadığı yeni versiyaya yeniləyən PR sorğusu göndərməlidir. Fasilə olduqda, məsələni həll etmək üçün hər iki komandaya məlumat verilməlidir.

İnsurs mənbəyi

Yenidən istifadəyə dair yanaşmamızın əsasını, əvvəlki məqalədə Laurent Desegurun açıqladığı kimi açıq mənbə / daxili mənbə fəlsəfəsinin qəbulu təşkil edir. Hapi, OneOps və Elektrod kimi layihələr sübut etdikcə, @WalmartLabs illərdir açıq mənbə istifadəçisi olub və ona töhfə verib. Açıq mənbə modelinin daxili tətbiqi olan Daxili Mənbə ilə bağlılığımız şirkət xaricində daha az aydın görünür. Daxili Mənbə yanaşması ilə heç bir komanda və ya geliştirici bir komponentə "sahib deyil" - bütün komponentlər şirkət arasında bölüşdürülmür. Bu, çətinlikləri aradan qaldırır və inkişaf etdiricilərə mövcud komponentləri yaxşılaşdırmağa imkan verir.

Bu qaydalar təkrar istifadə imkanlarını xeyli artırır, lakin daha da önəmlisi, inkişaf etdiricilərə bir əməkdaşlıq və əməkdaşlıq fəlsəfəsinə bir şirkət olaraq sadiq olduğumuzu xəbərdar edir. Onlar inkişaf etdiricilərə vaxtlarını və təcrübələrini problemlərin həllini gözləmək əvəzinə ən çox ehtiyac duyduğu yerlərdə keçirməyə imkan verir və şirkətə həqiqi və ölçülə bilən bir fayda verirlər.

Nəticə

Yenidən istifadə edilə bilmək təkcə texniki deyil, həm də təşkilati bağlılığı tələb edən və geniş təsir göstərən fəlsəfi bir qərardır. @WalmartLabs-da nəticə verə biləcək faydaları gördük. Hal-hazırda SamsClub.com-u elektrod platformasına çeviririk. Tərtibatçılarımız Walmart.com-dan yüzlərlə komponentdən Sam's Club markası ilə əlaqəli mövzularda istifadə edirlər.

Yenidən istifadə olunma hekayənizi bizə deyin - hansı maneələrlə qarşılaşdınız? Bunu necə həll etdiniz? Hansı inkişafları görürsünüz?