Ali, açık kaynaklı Flutter uygulama çerçevesi Fish Redux'u duyurdu!
Kaynak: Kullanıcı Arabiriminin Üstü
5 Mart'ta Xianyu, GitHub'da Fish Redux'un açık kaynağını duyurdu. Fish Redux, Redux veri yönetimine dayalı birleştirilmiş bir flutter uygulama çerçevesidir. Özellikle orta ve büyük karmaşık uygulamalar oluşturmak için uygundur. En önemli özelliği işlevsel programlamadır. Model, öngörülebilir durum yönetimi, takılabilir bileşen sistemi, en iyi performans. Aşağıda, Fish Redux'un özelliklerini ve kullanım sürecini ayrıntılı olarak tanıtacağız: Aşağıdaki içerik InfoQ'nun Xianyu Flutter ekibiyle yaptığı özel röportajdan ve Fish Redux'un açık kaynak belgelerinden geliyor.
1. Açık kaynak arka planı
Xianyu'nun Flutter'a erişiminin başlangıcında, çünkü iniş planımız en karmaşık ana bağlantılardan flutter'ın bütünlüğünü doğrulamayı umuyordu ve ayrıntılarımız genel olarak iş açısından daha karmaşıktır, esas olarak ikiye yansır. Yönler:
- Sayfa, merkezi durum yönetimi gerektirir; bu, sayfanın farklı bileşenlerinin bir veri kaynağını paylaştığı ve veri kaynağındaki değişikliklerin sayfanın tüm bileşenlerini bilgilendirmesi gerektiği anlamına gelir.
- Sayfada pek çok UI görüntüleme biçimi vardır (genel ayrıntılar, ücretsiz balık parası ayrıntıları, topluluk ayrıntıları, açık artırma ayrıntıları vb.) Ve iş yükü ağırdır, bu nedenle kullanıcı arabirimi bileşenlerinin mümkün olduğunca yeniden kullanılması gerekir, bu da daha iyi bileşenli segmentasyonun gerekli olduğu anlamına gelir. .
Piyasadaki mevcut çerçeveleri (google tarafından sağlanan redux ve bloc) kullanmaya çalıştığımızda, çerçevelerin hiçbirinin yalnızca merkezi durum yönetimini çözemeyeceğini, aynı zamanda kullanıcı arayüzünün bileşenleştirmesini de çözemediğini gördük, çünkü bu iki sorunun belirli Çelişki (yoğunlaşmaya karşı böl ve fethet). Bu nedenle, bir çerçevenin sorunlarımızı çözebileceğini umuyoruz ve balıkların yeniden yapılandırılması ortaya çıktı.
Fish redux, nispeten çok sayıda yinelemeden geçti Şu anda, herkesin gördüğü sürüm, nispeten büyük üç yinelemeden geçti.Aslında, ekip tarafından daha fazla tartışmaya ve düşünmeye de maruz kaldı.
İlk sürüm, topluluktaki flutter_redux dönüşümüne dayanmaktadır. Temel, UI kodunun bileşenlenmesini sağlamaktır.Tabii ki, sorun da çok açıktır.Karmaşık detaylar ve yayıncılık işi için, genellikle çok fazla iş mantığı vardır ve mantık kodu bileşenlerine ulaşmak imkansızdır..
İkinci versiyon, birinci versiyonun problemlerinde büyük değişiklikler yaparak UI kodu ve mantık kodunun böl ve fethet problemini çözdü, aynı zamanda redux standardına uygun olarak redux prensibini de kırdı. Balık takımı söz konusu olduğunda, kabul edilemez;
Bu nedenle, üçüncü sürüm yeniden düzenlendiğinde, genel mimari ilkeleri ve katmanlama gereksinimlerini belirledik ve bir yandan, reduxjs koduna göre flutter tarafında redux uygulamasını, redux ilkelerini olduğu gibi bırakarak uyguladık. Öte yandan, bileşenleştirme sorununa yanıt olarak, bileşenin yeniden yerleştirme üzerine kapsüllenmesini sağlar ve yenilikçi bir şekilde bu mimari tasarım katmanı aracılığıyla iş kodunu bölme ve ele geçirme yeteneği sağlar.
Bu noktada, balıkların yeniden temel tasarımını tamamladık, ancak sonraki uygulamalarda, iş montajından sonra bir kod performans sorunu bulduk.Bu soruna yanıt olarak, uzun liste senaryosunda büyük resmi sağlamak için bir kez daha ilgili adaptör kabiliyetini sağladık. hücre sorunu. Şu anda, balık redux'u 3 aydan fazla bir süredir çevrimiçi olarak istikrarlı bir şekilde çalışmaktadır.Gelecekte, balık redoksunun topluluğa daha fazla girdi getirmesini bekliyorum.
2. Fish Redux teknik analizi
Katmanlı mimari diyagramı
Yapı diyagramı: Ana gövde aşağıdan yukarıya doğru iki katmana bölünmüştür, her katman farklı düzeylerdeki sorunları ve çelişkileri çözmek için kullanılır ve sırayla aşağıdakiler genişletilir.
3. Redux
Redux, ön uç topluluğundan bir veri yönetimi çerçevesidir. Yerel geliştiricilere biraz yabancı olabilir. Kısa bir giriş yapalım.
Redux ne yapar?
Redux, veri yönetimi için bir çerçevedir. Veri ekleme, silme, değiştirme ve kontrol etme gibi tüm işlemler Redux'tan merkezi olarak sorumludur.
Redux nasıl tasarlanır ve uygulanır?
Redux, işlevsel bir veri yönetimi çerçevesidir. Veri yönetimi için geleneksel OOP genellikle bazı Fasulyeleri tanımlar ve her Bean, dahili verileri (tıkanıklık modeli) işlemek için bazı Genel API'leri açığa çıkarır.
İşlevsel yaklaşım daha soyut bir boyuttur, verilerin tanımı biraz Struct'tır (anemi modeli) ve verileri işleme yöntemleri aynı işlev imzasına sahip olacak şekilde birleştirilmiştir (T, Eylem) = > T Redüktör.
FP: Struct (anemi modeli) + Redüktör = OOP: Fasulye (tıkanıklık modeli)
Aynı zamanda Redux, FP'de yaygın olarak kullanılan Middleware (AOP) modunu ve Abone olma mekanizmasını ekler ve bu da çerçeveye son derece yüksek esneklik ve ölçeklenebilirlik getirir.
Anemi modeli ve tıkanıklık modeli için lütfen şunlara bakın:
https://en.wikipedia.org/wiki/Plain_old_Java_object
Redux'un dezavantajları
Redux çekirdeği sadece veri yönetimini önemsiyor ve onu kullanmak için belirli senaryoları önemsemiyor, bu onun avantajı ve dezavantajı.
Gerçek Redux kullanımımızda iki özel sorunla karşı karşıyayız:
- Redux yoğunlaşması ile Bileşenin bölünmesi ve ele geçirilmesi arasındaki çelişki;
- Redux's Reducer, hantallık ve hataya açıklık getiren manuel olarak katman katman montaj gerektirir.
4. Fish Redux'un İyileştirilmesi
Fish Redux, merkezi ve gözlemlenebilir veri yönetimi için Redux kullanır. Ancak sadece bu da değil, kullanım düzeyinde geleneksel Redux'un eksiklikleri için, son taraf flutter sayfa enleminin geliştirilmesinde daha iyi ve daha yüksek soyutlama yoluyla iyileştirmeler yaptık.
Bir bileşenin bir veri (Struct) ve bir İndirgeyici tanımlaması gerekir. Aynı zamanda ebeveyn ile çocuk arasında bir ilişki vardır. Bu bağımlılık sayesinde,
[Merkezileştirme] ile [böl ve fethet] arasındaki çelişkiyi çözdük ve aynı zamanda Redux kullanmanın zorluğunu büyük ölçüde basitleştiren Reducer'ın manuel katmanı Combine of Reducer çerçeve tarafından otomatik olarak tamamlandı.
İdeal konsantrasyon etkisine sahibiz ve kodu böl ve yönet.
5. Topluluk standartlarına uyun
Yukarıdaki State, Action, Reducer, Store ve Middleware kavramları topluluğun ReduxJS'si ile tamamen tutarlıdır. Redux'un tüm avantajlarını orijinal haliyle koruyacağız.
Redux'u daha yakından anlamak istiyorsanız, lütfen şu adrese bakın: https://github.com/reduxjs/redux
6. Bileşen
Bileşenler, kısmi görüntü ve işlevin kapsüllenmesidir. Redux prensiplerine dayanarak, fonksiyonları veri değiştirici fonksiyonlar (Reducer) ve değiştirmeyen veri fonksiyonları (yan etkiler) olarak alt gruplara ayırıyoruz.
Böylece üç bölümümüz var: Görünüm, Etki ve İndirgeyici, bileşenlerin görüntülenmesinden, değiştirilmeyen verilerin davranışından ve verilerin değiştirilmesinden sorumlu olan bileşenlerin üç öğesi olarak adlandırılır.
Bu, şimdiki zamana ve geleceğe bakan bir bölünmedir. Redux'un günümüze bakışı açısından bakıldığında, veri yönetimi ve diğerleri. Geleceğe yönelik UI-Otomasyonda, UI ifadesi ve diğerleri gibi görünüyor.
UI'nin ifadesi, programcılar için kara kutu çağına girmek üzere ve Ar-Ge mühendisleri, veri davranışını değiştirmeme ve veri davranışını değiştirmeye daha fazla odaklanacak.
Bileşenler, görünümün bölünmesi ve ele geçirilmesidir, aynı zamanda verilerin bölünmesi ve ele geçirilmesidir. Katmanı katmanlara bölerek ve fethederek karmaşık sayfaları ve verileri bağımsız modüllere böleriz. Bu, ekip içinde işbirliğine dayalı gelişimi kolaylaştıracaktır.
7. Görünüm Hakkında
Görünüm sadece bir işlev imzasıdır: (T, Dispatch, ViewService) = > Araç
Esas olarak bilginin üç yönünü içerir
- Görünüm tamamen veriler tarafından yönlendirilir.
- Görünüm tarafından oluşturulan olaylar / geri çağrılar, belirli bir uygulama olmaksızın Sevk yoluyla "niyet" gönderir.
- Kullanılması gereken bileşen bağımlılıkları, ViewService aracılığıyla standartlaştırılmıştır. Örneğin, View imzasına uyan tipik bir işlev.
8. Etki Hakkında
Etki, değiştirmeyen veri davranışının standart bir tanımıdır, bir işlev imzasıdır: (Bağlam, Eylem) = > Nesne
Esas olarak bilginin dört yönünü içerir
- Karşılık gelen yaşam döngüsü geri aramaları da dahil olmak üzere Görünüm'den "amacı" alın ve ardından belirli işlemleri yapın.
- İşlenmesi eşzamansız bir işlev olabilir ve veriler süreç içinde değiştirilebilir, bu nedenle veri tutmayı savunmuyoruz, ancak bağlam aracılığıyla en son verileri elde ediyoruz.
- Verileri değiştirmez.Gerekirse, işlenmek üzere Redüktöre bir Eylem gönderilmelidir.
- Dönüş değeri, eşzamanlı işlevleri ve eşgüdümleri destekleyen işlem akışına karşılık gelen bool veya Future ile sınırlıdır.
Örneğin, iyi bir korutinin desteği:
9. Redüktör Hakkında
Redüktör, Redux spesifikasyonuna tam olarak uyan bir fonksiyon imzasıdır: (T, Action) = > T
İmzaya uyan bazı redüktörler:
Aynı zamanda, büyük bileşenlerin bağlı olduğu küçük bileşenlerin ve bağdaştırıcıların kaydını tamamlamak için açık yapılandırma kullanıyoruz Bu bağımlılık yapılandırmasına Bağımlılıklar denir.
Yani bu formül var Bileşen = Görünüm + Etki (isteğe bağlı) + Azaltıcı (isteğe bağlı) + Bağımlılıklar (isteğe bağlı).
Tipik bir montaj:
Bileşen soyutlaması yoluyla, tam bölme ve yönetme, çoklu enlem yeniden kullanımı ve daha iyi ayrıştırma elde ettik.
10. Adaptör
Adaptör ayrıca kısmi ekran ve işlevin bir kapsüllemesidir. ListView yüksek performanslı senaryoları için doğmuştur ve Bileşen uygulamasında bir değişikliktir.
Amacı, flutter-ListView senaryosunda Bileşen modelinin 3 problemini çözmektir:
1) Bileşene bir "Büyük Hücre" koyun, ListView kodunun performans optimizasyonundan yararlanamazsınız;
2) Bileşen, görünmek | kaybolmak ile init | yok etmek arasında ayrım yapamaz;
3) Effect'in yaşam döngüsü ile View arasındaki bağlantı, ListView senaryosundaki sezgisel beklentileri karşılamıyor.
Özetle, mantıksal bir ScrollView, bir performans ListView, böylesi bir kısmi görüntüleme ve işlevsel paketleme soyutlaması istiyoruz. Böylesine bağımsız bir soyutlama katmanı oluşturmak, gerçek etkiye dayanmaktadır.Sayfa için Çerçeve Bileşeni kullanmıyoruz ve performans temelini karşılaştırmak için Bileşen + Bağdaştırıcı çerçevesini kullanıyoruz.
- Redüktör uzun ömürlüdür, Efekt orta ömürlüdür, Görünüm kısa ömürlüdür.
Bir Android makineyi örnek alarak sürekli testler yoluyla karşılaştırmalar yapıyoruz:
- Ayrıntılar sayfamızın FPS'si olan çerçeveyi kullanmadan önce temel 52FPS'dir;
- Çerçeveyi kullanarak, yalnızca Bileşen soyutlamasını kullanarak, FPS 40'a düşer ve "Büyük Hücre" tuzağıyla karşılaşır;
- Çerçeveyi kullandıktan ve aynı zamanda Adaptör soyutlamasını kullandıktan sonra, FPS 53'e yükseldi ve bu da hafif bir iyileşme ile taban çizgisinin üzerine çıktı.
11. Dizin
Önerilen dizin yapısı şöyle olacaktır
Kodu kopyala
Örnek Sayfa - action.dart - page.dart - view.dart - effect.dart - redüktör.dart - state.dart bileşenleri sample_component - action.dart - component.dart - view.dart - effect.dart - redüktör.dart - state.dartÜst katman montajdan, alt katman ise uygulamadan sorumludur.Aynı zamanda hızlı bir şekilde doldurmamız için bir eklenti sağlanacaktır.
Örnek olarak Xianyu'nun ayrıntılı sahnesini ele alalım:
Bileşenler ve bileşenler arasında bileşenler ve kaplar tamamen bağımsızdır.
12. İletişim Mekanizması
- Bileşenler | Adaptör İçi İletişim
- Bileşenler | Adaptörler Arası İletişim
Kısa açıklama: Öncelikli işlem süresi olan kendi kendine ilk yayın yapan bir yayın kullanır.
Gönderilen eylem önce kendi kendine işlenir, aksi takdirde işlenmek üzere diğer bileşenlere ve Redux'a yayınlanır. Sonunda, basit ve sezgisel bir gönderi ile bileşenler içindeki ve arasındaki (ebeveynden çocuğa, çocuktan ebeveyne, erkek kardeşler vb.) Tüm iletişim gereksinimlerini tamamladık.
13, Yenileme Mekanizması
Veri yenileme
- Kısmi veri değişikliği, üst katman iş koduna göre şeffaf olan üst katman verilerinin yüzeysel bir kopyasını otomatik olarak tetikler.
- Veri kopyalama katmanları:
- Bir yandan, kesinlikle Redux veri değişikliğini takip eder.
- Öte yandan, veri odaklı görüntülemeye sıkı sıkıya bağlıdır.
Yenileme görüntüle
Tüm bileşenlere yönelik bildirimleri düzleştirin ve bileşenler, yenilenmeleri gerekip gerekmediğini belirlemek için shouldUpdate'i kullanır.
14. Fish Redux'un Avantajları
Merkezi veri yönetimi
Merkezi ve gözlemlenebilir veri yönetimi Redux aracılığıyla yapılır. Redux'un tüm avantajlarını olduğu gibi koruyacağız ve aynı zamanda Reducer'ın birleşmesi çerçeve aracı tarafından otomatik olarak tamamlanacak ve bu da Redux kullanmanın hantallığını büyük ölçüde basitleştirecek.
Bileşenlerin yönetimini böl ve ele geçir
Bileşenler, yalnızca görünümü bölmek ve fethetmek değil, aynı zamanda verilerin bölünmesi ve ele geçirilmesidir. Katmanı katmanlara bölerek ve fethederek karmaşık sayfaları ve verileri bağımsız modüllere böleriz. Bu, ekip içinde işbirliğine dayalı gelişimi kolaylaştıracaktır.
Görünüm, Düşürücü, Efekt izolasyonu
Bileşeni durum bilgisi olmayan üç bağımsız işleve bölün. Durum bilgisi olmayan bir işlev olduğundan, yazmak, hata ayıklamak, test etmek ve sürdürmek daha kolaydır. Aynı zamanda kombinasyon, yeniden kullanım ve inovasyon için daha fazla olasılık getiriyor.
Bildirime dayalı konfigürasyon montajı
Bileşenler ve bağdaştırıcılar, ücretsiz bildirim temelli yapılandırmayla birleştirilir. Görünümü, İndirgeyici, Etkisi ve bağımlı alt öğeleri dahil.
İyi ölçeklenebilirlik
Çekirdek çerçeve, üst katman için esnek ölçeklenebilirliği korurken, kendi temel üç katmanlı odağını korur, temel odak dışında hiçbir şey yapmaz.
- Çerçevede herhangi bir basılı kod satırı bile yok, ancak standart Middleware aracılığıyla veri akışını ve bileşenlerdeki değişiklikleri gözlemleyebiliriz.
- Çerçevenin temel üç katmanına ek olarak, üst katman özelleştirmelerini ve yeteneklerini esnek bir şekilde birleştirmek ve geliştirmek için dart'ın dil özellikleri aracılığıyla Bileşen veya Adaptör'e karışımlar da ekleyebilirsiniz.
- Çerçeve ve otomatik pozlama, yüksek kullanılabilirlik vb. Gibi diğer ara yazılımlar birbirine bağlıdır. Ara katman ve çerçeve şeffaftır ve üst katmanın montajı serbesttir.
Küçük, basit ve eksiksiz
- Çok küçüktür, yalnızca 1000'den fazla kod satırı içerir;
- Kullanımı basittir, birkaç küçük işlevi tamamlar, montajı tamamlar ve ardından çalıştırır;
- Tamamlandı.
15. Gelecek hakkında
Açık kaynaktan sonra Xianyu, Fish Redux'u aşağıdaki şekillerde sürdürmeyi amaçlamaktadır:
- Bir dizi harici tanıtım aracılığıyla, daha fazla geliştiricinin katılmasını veya kullanmasını sağlayın. Mevcut Flutter ekosisteminde, uygulama çerçevesi hala boştur ve fiili bir standart olma fırsatına sahiptir;
- Açık kaynak için bir dizi ücretsiz balık Flutter mobil ara yazılım matrisi ile işbirliği yapın;
- Ayrıca, üst düzey Flutter geliştirmenin verimliliğini ve deneyimini iyileştirmek için bir dizi destekleyici geliştirme yardımcı hata ayıklama aracı sağlanmıştır.
Fish Redux, Alibaba Xianyu teknik ekibinde birden fazla senaryoda uygulandı. Son olarak, Talk ucuz, Bana kodu göster, bugün resmi olarak GitHub'da kaynak açıyoruz.Daha fazla bilgi için lütfen GitHub'ı ziyaret ederek daha fazlasını öğrenin.
GitHub adresi: https://github.com/alibaba/fish-redux
