Ölçeklenebilir Reaktif UI Dəsti necə yaradılır

Blake Wheeler tərəfindən hazırlanmışdır

Travix-də 4 fərqli temalı tək bir məhsulumuz var. Hər mövzu ayrı bir markadır və hər markanın bir neçə veb saytı var. Hal hazırda platformamızda 45-dən çox veb sayt fəaliyyət göstərir.

4 fərqli markamızdan ikisi

Məhsulun hamısını işə salmaq üçün məhsul üzərində işləyən təxminən 40 qabaqcıl inkişaf etdirici var və kod bazası və dizaynının uyğun olması olduqca çətindir.

Böyük bir React layihəsi üzərində işləyirsinizsə, ehtimal ki, kod bazanıza quraşdırılmış bir növ UI dəsti var. Ümumi düymə komponenti, ümumi bir modal tətbiq, hər zaman istifadə etdiyiniz bir təqvim, iş məntiqi olmayan ümumi komponentlər.

Bu məqalənin əsas məqsədi inkişaf prosesi və layihənizin dizayn uyğunluğunu yaxşılaşdırmaq üçün istifadəçi interfeysi dəstinizi inkişaf etdirməyə və təşkil etməyə kömək etməkdir.

Təsəvvür etdiyiniz kimi, bu kitabxana yalnız inkişaf qrupunuzdan asılı deyil. Dizaynerləri də cəlb etməlisiniz. Dizayn qrupunuz 9 fərqli düymə və 22 şrift ölçüsü istədikdə nə qədər bacarıqlı olmağınız və hansı texnologiyaları seçməyiniz vacib deyil.

Şanslı olsanız, bu böyük bir problem olmayacaq. Artıq dizayn qruplarında bir stil bələdçisinə sahib olmaq yaygındır. Ancaq şans sizin ən yaxşı bacarığınız deyilsə, mövzunuzda grayCantBeLighterThanThis dəyişən ad kimi bir şeyə sahib ola bilərsiniz (əsl hekayə).

texnologiya

Başlıqdan da göründüyü kimi, tətbiqimizi yaratmaq üçün React istifadə edirik. Bu məqalədəki tövsiyələrin əksəriyyəti oxşar alətlərə və kitabxanalara sahib olduqları üçün müxtəlif arxitekturalarda asanlıqla istifadə edilə bilər.

Hekayə kitabı

Nağıl kitabı inkişaf meydançanız və komponent qalereyanız olacaq. Komponentinizi təcrid olunmuş bir paket kimi düşünmək və məhsulunuzdan ayırmaq faydalıdır ki, ümumi və yaxşı təsvir edilmiş xüsusiyyətlərə sahib ola bilərsiniz.

Təkrar istifadə edilə bilən komponent deyil

Bir düymənin spesifik tətbiqi

Ümumi komponent

Bir düymənin ümumi tətbiqi

Öykü kitabı sənəd təmin etmək üçün də əladır. Komponent JSX və dayaq növü təsvirini avtomatik olaraq komponent səhifəsinə əlavə edən storybook-addon-info adlı bir əlavə var.

Tətbiqinizin hamısını çalışdırmaq çox güman ki, yalnız bir neçə addım atacaq və çox yavaş olacaq. Hekayələr kitabının başlanğıcı ümumiyyətlə daha sürətli olur, belə ki daha sürətli inkişaf edə bilərsiniz. UI komponentlərinizi bütün tətbiqetmələrinizi (hekayə kitabı addon sürgüləri ilə istehza etmək çox yaxşıdır) əsas tətbiqinizi işləmədən tamamilə təcrid olunmuş oyun meydançasında təqlid edərək inkişaf etdirə bilərsiniz.

Dizayn komponentləri

Mövzularla məşğul olmaq üçün bir şeyə ehtiyacınız olacaq. Əvvəllər təmiz CSS dəyişənlərini sınadıq və yaxşı işlədi. Paketinizdə biri kitabxana komponenti, digəri dəyişkən elan üçün iki CSS faylı var. Birdən çox temanız varsa, mövzu faylını dəyişdirməlisiniz və işləməlidir.

Saf CSS ilə istilik

Yeni kitabxanamızda üslublu komponentlər barədə qərar verdik. Artıq temalı bir həll təklif edir və JS-dəki CSS React ilə olduqca yaxşı işləyir. Varsayılan olaraq CSS Alanlarını da təyin etdilər, bu da kompüter elmindəki ən böyük problem olan adlandırmağı həll etdi.

Bu, gözlənilməz CSS ləğv etməməyinizə və inkişaf etdiricilərin CSS qaydalarını bilərəkdən ləğv etmələrinin qarşısını almağa kömək edə bilər. Onların komponent davranışı öz əmlak tərifinə bağlıdır və heç kim qlobal olaraq üslubları ləğv edə bilməz.

Ayrıca, CSS siniflərini genişləndirmək və ya elementinizdə idarə etmək məcburiyyətində olmadığınız üçün üslublarınızdakı şərti qaydaları daha yaxşı müəyyənləşdirə bilərsiniz. Əsasən, bir baxış hissəsinə rekvizit ötürürsünüz və bu komponent kənar vəziyyətləri idarə etmək üçün istifadə edə bilər.

Komponentlərimizdə istifadə üçün seçilmiş mövzu

Travix-də mövzunu asanlıqla dəyişdirmək üçün bir hekayə kitabı əlavə yaratdıq. Styled Components ThemeProvider ilə oynamısınızsa, bilirik ki, əsasən Tema xüsusiyyətini dəyişdirməliyik və bu cazibədarlıq kimi işləyir. Bu əlavə, inkişaf zamanı bütün markaları sınamağımıza kömək edir və məhsul sahiblərinə (PO) və dizaynerlərin tətbiqi təsdiqləməsinə kömək edir.

Tema Seçici Addon

yazı tipi

TypeScript tətbiqetmə problemi az idi. Ən azı iki həftə həll yolumuzu dəstəkləmək üçün yenilədik və başqa bir iki həftə hər şeyi köç etdirdik. Onu istifadə etmək istəyirsinizsə, layihənizə TypeScript ilə sıfırdan başlamağınızı şiddətlə tövsiyə edirəm.

Ancaq mütləq nəticə verir və xüsusiyyətlərin və dəyərlərin avtomatik tamamlanması inkişafa kömək edir. Hər hansı bir ekzotik mülk növü tərifi doğrulama prosesi zamanı qırmızı işığa döndüyündən komponentiniz üçün daha yaxşı müqavilələr təyin etməyinizə kömək edir.

TypeScript avtomatik tamamlanması

Eslint

Kod bazasının tutarlılığını təmin etmək üçün çox ciddi bir Eslint konfiqurasiyasına sahibik. Koddakı kiçik detalları yoxlamaq üçün vaxt itirməməyimiz üçün burada sərt olmağa qərar verdik.

Linterimiz hər basmadan əvvəl avtomatik olaraq işləyir və avtomatik düzəliş sonuncu işə düzəldilir. Həm də CI kompüterimizdə işləyir. Beləliklə, kimsə doğrulamadan keçməyə qərar verərsə, tikinti zamanı uğursuz olacaq.

İnkişaf prosesi

Bizim üçün ən vacib şey texnologiyanın özü yox, prosesdi. Uzun müddət kitabxananın keyfiyyətini təmin etmək üçün onları mümkün qədər sərt tutmaq üçün çox vaxt sərf etdik. Bu, böyük bir şirkətdə çox vacibdir, çünki inkişaf etdiricilər ayrılır, inkişaf etdiricilər qoşulur, ancaq kod bazanız zamanın sınağından keçəcəkdir.

RFC çəkmə istəyi

RFC "Şərhlər üçün İstək" deməkdir. Bu çəkmə tələbində heç bir kod sətri tətbiq olunmur. Əsasən komponentimizi təsvir edən bir qeyd sənədini əlavə edirik. İşləri, xüsusiyyətləri, xatırladır, mümkün yan təsirləri istifadə edin.

Yeni kitabxananız bütün şirkət tərəfindən istifadə olunur və tənzimlənməsi lazım olan bir çox kənar vəziyyət və kiçik detallar var. Çəkmə istəkləri asanlıqla komponentin bir HOC və ya RenderProps komponenti, birləşdirilə bilən və ya daha sərt, nəzarətli və ya nəzarətsiz və s. Olmasını müzakirə edərək böyük bir müzakirə mövzusu ola bilər. Beləliklə, RFC sizə kömək edəcəkdir, heç biri Baxışdan sonra tamamilə dəyişdiriləcək bir şeyi həyata keçirmək üçün vaxt itirmək.

Tələb sorğusunu nəzərdən keçirin

Çəkmə istəyi nəzərdən keçirməyimiz üçün yalnız bir neçə avtomatlaşdırılmış addım, üç inkişaf etdirici təsdiq və PO / dizaynerlərin nəzərdən keçirilməsi tələb olunur. Bu addımlardan biri uğursuz olarsa, heç bir şey birləşdirilməyəcəkdir.

CI addımları: - Eslint və testləri işə salın. - Kod əhatə dairəsinin azalmadığını yoxlayın. - Bənzərsiz bir hekayə kitabı mühiti yaradın (yeni bir şey etdiyiniz zaman mühiti də yeniləyir).

Çekmə tələbinizi nəzərdən keçirən inkişaf etdiricilər, tətbiqetmənin artıq təsdiqlənmiş RFC-yə uyğun olub olmadığını və dizaynın düzgün olduğunu yoxlamalıdırlar.

Dizaynerlər və hesab menecerləri tətbiqinizi CI-nin yaratdığı Storybook mühitində nəzərdən keçirə bilərlər.

Yeni versiyanın nəşri

Buraxılış dövrümüzü idarə etmək üçün Semantic Release istifadə etməyə qərar verdik. Beləliklə, birləşmə öhdəliyi mesajımıza yalnız "Yamaq", "Kiçik" və ya "Major" əlavə etməliyik. Bu avtomatik olaraq xüsusi NPM üçün yeni bir versiyanı dərc edəcəkdir. CI, Master Storybook mühitimizi də yeniləyir.

Nəticə

Bir istifadəçi interfeysi dəsti yaratmaq asan bir iş deyil və komandanızdan çox səy tələb edir. Bununla birlikdə, tətbiqinizi miqyaslandırmağa və ardıcıl saxlamağa kömək edəcəkdir.

UI komponentlərimizi təcrid etdiyimiz üçün hər hansı bir böyük UI yeniləməsini etmək asandır və yeni bir marka əlavə etmək də asandır. Sadəcə yeni bir dizayn faylı əlavə etmək lazımdır.

Mövzu bəyannaməmizi xarici kitabxanaya köçürməyin bir faydası da əsas tətbiqetməmizin mövzu ilə heç maraqlanmamasıdır. Bu baxımdan, istifadəçi interfeysi kitabxanamızın bütün mövzulara cavab verməsi vətənsizdir.

Kod istifadə edən dizaynerlər qrupunuz olduqda (tək boynuzlu atlar da deyilir) bu kitabxananın prototipini yaratmağa başlaya bilərlər. Ən sədaqət prototipidir, yoxsa yox?

Travix ilə istifadə etdiyimizə bənzər bir şey istifadə etmək istəyirsinizsə, kod bazasının bir hissəsini çıxaracağam və Styled Components, TypeScript və Jest ilə kiçik bir qazan düzəldirəm. Hər şeyi qurmaq çox zəhlətökən idi, buna görə xoşunuza gəlir: https://github.com/leandrooriente/react-ui-kit-boilerplate.

Oxuduğunuz üçün təşəkkür edirəm.