g u t x .com.tr İpek yolu - Çin'i anlamaya götürürüm

SparkUI: Referans için bir ön uç geliştirme uygulaması

Önüne yaz

SparkUI, eksiksiz ve esnek bir ön uç geliştirme çözümüdür. Çözüm, React'e dayanır ve Modula uygulaması durum yönetimi çerçevesinden, bir dizi yeniden kullanılabilir ön uç bileşeninden ve SPA'yı oluşturmak için gereken çeşitli destek kitaplıklarından oluşur. Çözüm, yeniden kullanılabilirlik, esneklik, test edilebilirlik ve geliştirme verimliliğine önem verir ve karmaşık durum, yan etki, bileşen bölme vb. Gibi ön uç toplulukta ticari ön uç uygulama geliştirme için bazı yaygın sorun noktalarını çözer ve mühendislik uygulamaları, dokümantasyonda daha fazlası Ön uç ve arka uç ayırma mimarisi altında ticari ön uç uygulamalarının geliştirilmesi için sağlam bir temel sağlayan entegrasyon ve kod kalitesi açısından yüksek standartlara ulaşmıştır. Şu anda SparkUI, FreeWheel'in ön uç projelerine başarıyla uygulanmıştır.

Spark Kullanıcı Arayüzünün Doğuşu ve Evrimi

Teknik seçim

FreeWheel'in orijinal ön uç çerçevesini yükseltme ve SparkUI'yi yeniden tasarlama fikri yaklaşık iki yıl önce başladı. Temmuz 2015'ten önce, FreeWheel aslında jQuery'ye dayalı bir ön uç geliştirme çerçevesine sahipti.Ancak, jQuery'nin eski sürümü, eski teknoloji yığını, tüm çerçevenin yetersiz bakımı ve yeni meslektaşların öğrenebileceği bir dizi belgenin olmaması nedeniyle, React'in yükselişiyle birleştiğinde, orijinal ön uç çerçevesini yükseltmeye karar verdik.

Öte yandan, genel duruma bakıldığında, giderek daha fazla İnternet şirketi, ön uç bileşenleri geliştirmek için React.js'ye yöneliyor.Performans faktörlerine ek olarak, sebebin büyük bir kısmı, karmaşık DOM işlemlerini yazmak için jQuery kullanmaktır. Daha sonra kodun bakımı gittikçe daha zor hale gelecektir.

O zamanlar JavaScript çerçevesindeki "popüler olanlar" React'e ek olarak Angular, Vue vb. İçeriyordu Ön uç ekibimiz esas olarak React ve Angular'ın teknik seçimini değerlendirdi. Değerlendirme göstergeleri, React.js'nin Angular.js'den daha düşük bir öğrenme eğrisine sahip olduğunu ve bileşenli tasarım fikirlerinin kullanımı sırasında temel fikrimiz ile daha uyumlu olduğunu gösteriyor.Bu nedenle, React'e dayalı bir ön uç geliştirme çerçevesi geliştirme eylemi takip edecek. Açılma.

FreeWheel yeni ve eski ön uç çerçeve karşılaştırması

Yinelemeli yükseltme

FreeWheel, SparkUI'yi bir buçuk yıl önce gerçekten başlattı. Bu yıl, nispeten büyük sayıda yinelemeden geçti. İlk 0.X sürümünden Spark 1.0 sürümüne, muhtemelen aşağıdaki aşamalı geçiş aşamaları vardır:

Sürüm 0.X, esas olarak Flux'ın uygulama durumu yönetimi çerçevesine dayanmaktadır. React'in kendisi yalnızca MVC mimarisi altındaki görünüm katmanı olduğundan, yalnızca görünüm bileşenleri oluşturmak için kullanılabilir (Görünüm Bileşeni). Durumu yönetme yeteneğine sahip değildir ve üst düzey bileşenlerin durumunun bakımı gittikçe zorlaşmaktadır. Bu nedenle, o zaman React ekosistemi Çemberde React + Flux gibi daha klasik mimariler de FreeWheel dışında birçok şirket tarafından daha sık kullanılmaktadır.

Bununla birlikte, FreeWheel ön uç uygulama süreciyle, sayfa etkileşimleri gittikçe daha karmaşık hale geliyor. Çok sayıda bileşenle, her bileşenin durumu çok karmaşıktır ve durumlar arasında birçok eşleştirme ilişkisi vardır. Bu nedenle, durum yönetiminde Flux'ın performansı bizimkileri tatmin etmekte gittikçe daha fazla yetersiz kalmaktadır. talep. O zaman, geliştirme topluluğunda yeni bir durum yönetimi kavramı ve teknolojisi-Redux ortaya çıktı, bu nedenle 0.X sürümünden Spark1.0 sürümüne yükseltme sürecinde, durum yönetimi tasarımı açısından da Flux'tan Redux'a geçtik.

1.0 sürümünden sonra Redux, durum yönetimi için bir çerçeve olarak tamamen tanıtıldı, ancak bu, Redux'un durum yönetimi mekanizmasının tam bir kopyası olduğu anlamına gelmez. Aslında, FreeWheel yalnızca Redux'un temel durum erişim arayüzünü ve bazı temel araçlarını kullanır.Bu temelde, SparkUI çerçevesinin çekirdek modülü (dahili olarak Modula olarak adlandırılır) tüm durum yönetiminde önemli bir rol oynar. Nesne Ağacı (Model Ağacı) gibi kavramlar da tanıtıldı - Redux'daki durum hiyerarşik olmadığı için hepsi paralel olarak genişletilir, ancak FreeWheel uygulamasında bir nesne çok karmaşık bir hiyerarşik yapıya sahip olabilir, bu nedenle Uygulama verilerini merkezi olarak yönetmek için Model Ağacı'nı tanıtın (Modül ile ilgili tasarım konseptleri daha sonra ayrıntılı olarak açıklanacaktır).

Çeşitli aşamalarda uygulama durumu yönetimi çerçevelerinin karşılaştırılması

1.0, durum yönetimi çerçevesinin ayarlanmasına ek olarak, "işlevsel programlama" kavramını da tanıttı. Sözde "işlevsel programlama" kavramı, çerçeve içinde durum akışını sağlamak için işlevsel bir programlama yöntemini tamamen kullanmaktır. "Fonksiyonel programlamanın" en büyük avantajı, bir programın dinamik sürecini fonksiyonel bir şekilde soyutlamaktır. Durum tersine çevirme işlemi bir işlevse, aslında işleve iletilen orijinal nesnenin durumunun değişmemesini, ancak işlevin yeni bir durumda çıktı vermesini sağlayabilir. Bir uygulama daha karmaşık olduğunda, bu, uygulama durumu değişikliklerinin verimli bir şekilde izlenmesini ve yönetilmesini sağlayabilir. SparkUI çerçevesinde, aynı zamanda temel bir programlama paradigması olarak da kullanılmaktadır.

Aynı zamanda topluluk, Yan Etkinin "işlevsel programlamadaki" rolü konusunda her zaman farklı görüşlere sahip olmuştur, ancak pratik uygulamalarda Yan Etkiden kaçınmanın zor olduğunu görüyoruz. Örneğin, operasyondaki iki bileşen arasında bir korelasyon vardır - bir Grid'deki operasyon diğer Grid'in görüntüsünü veya davranışını etkilemeye mecbur olduktan sonra, bu süreç de Yan Etki ile desteklenir.

Dolayısıyla Spark1.0'ın temelde 0.X versiyonunun kapsamlı bir yeniliğini tamamladığı söylenebilir ancak aynı zamanda orijinal ürünlerde 0.X kullanan sayfa ve uygulamaların tamamen farklı bir API'ye geçiş yapmasına da neden olmuştur.Bu süreç de biz haline gelmiştir. Önemli bir deneyim. Çerçevenin yükseltilmesi ve dönüştürülmesinden sonra, uyduğumuz temel ilke, uygulama tarafına sorunsuz bir geçiş süreci sağlamak için tüm değişikliklerin geriye dönük olarak uyumlu bir şekilde değiştirilmesidir. Şimdiye kadar, 1.0 sürümünün tüm çerçevesi nispeten kararlı bir durumda ve üretim ortamımızda yaygın olarak kullanılmaktadır.

SparkUI mimarisinin genel analizi

SparkUI, sözde hiyerarşik tasarım konseptimiz olarak anlaşılabilir.Tüm SparkUI'nin yapısı ve işlevleri aşağıdaki gibidir:

En alt katman, React tarafından sağlanan ve yaşam döngüsü yönetimi için API'ler dahil olmak üzere temel bileşenlerin oluşturulmasını sağlayan API'dir.
Daha sonra Modula modülü bunun üzerine kapsüllenir. Modula modülü esas olarak uygulama durumunu yönetmek için kullanılır. Gerçek durum erişimi ve olay dağıtımı için kendisi Redux kullanır ve nesne ağacını (Model Ağacı) sağlamak için Immutable.js kullanır. ) Değişmezlik.
Modula, durum yönetiminde kullanılan ve SPA (Tek Sayfa Uygulaması) için güvenilen bazı araçlar sağlar.
Bu araç katmanının üzerinde, SparkUI'nin bileşen kitaplığı bulunur. FreeWheel şu anda esas olarak ticari uygulamalara dayandığından, nispeten daha yavaş arayüz değişiklikleri ve gelişimi ile karakterize edilir, ancak özellikle yeni ve eski arayüzler arasındaki yüksek tutarlılığı vurgular. Bu nedenle, uygulamadaki ön uç bileşen kitaplığını (Grid-son derece özelleştirilmiş bir form bileşeni vb.) Soyutladık ve tüm uygulamalar, ilgili işlevlerini uygulamak için bu bileşenleri kullanacaktır.

SparkUI çerçevesi

Modula modülü

SparkUI çerçevesinin tasarım süreci aslında birçok Redux durum yönetimi fikrini özümsedi.Şimdi Redux, uygulama durumu erişimi ve olay dağıtımı için de kullanılıyor, ancak Redux'ten en büyük farkı, durum yönetiminin karmaşıklığı ve uygulama durumlarının sayısında yatıyor. Yönetim fikirlerinin de belirli farklılıkları vardır.

Yukarıda bahsedilen SparkUI çerçevesinin temel modülü - Modula, aslında Redux (ancak Redux ile sınırlı değildir) yönetimine dayanmaktadır.Redux ekosisteminin bir parçasıyla (Redux-devtools gibi) uyumludur ve temeldeki Redux'u tamamen kapsüllenmiş ve gizlemiştir. . Aşağıdaki şekil Modula, React ve Redux arasındaki ilişkiyi kısaca açıklamaktadır:

Modula uygulaması durum yönetimi çerçevesi

Örneğin Redux'te uygulama durumunun yapısı tamamen düzdür ve hiyerarşik bir ilişki yoktur.Nesne yönelimli bir organizasyonun olmaması nedeniyle birçok durum olduğunda Redux Mağazasında bir durum bulmak gerekir. Sadece saf hafızaya güvenebilir. Modula, Model Ağacı'nı tanıttıktan sonra, tüm durumlar nesneleştirilebilir, yani durumlar önceden tanımlanmış bir yapı aracılığıyla düzenlenir. Daha karmaşık bir bileşen olmasına rağmen, sayfadaki görüntü yalnızca bir form veya tablo olabilir.

Bu Tablo için daha karmaşık bir durum ayarlarsanız - bir arama çubuğu ekleyin, arama çubuğunun kendisinin basit arama ile karmaşık arama arasında bir farkı vardır, ayrıca karmaşık araç çubukları, eylem çubukları vardır ve ayrıca sayfa çevirmeyi vb. Desteklemesi gerekebilir. . Redux ile bu kadar çok durumda, bir mağazada yüzlerce durum olabilir, bu nedenle yönetimi çok zor olacaktır; ancak Modula daha iyi organize edilebilir. Modula'nın ana tasarım konseptleri şunlardır:

Uygulama Durumu = Başlangıç Durumu + Deltalar, burada Delta Eylemler tarafından tetiklenir (referans Akı, Elm);
Uygulama Durumu, bir Model Ağacı ile tanımlanabilir, bu ağacın her bir düğümü, etkili iş birimlerini tanımlayabilen bir Modeldir (Redux, Elm tarafından bahsedilmektedir);
Belirli bir Uygulama Durumundan başka bir Duruma geçiş, Model Ağacı tarafından sağlanan Reaksiyonlar ile tanımlanabilir Başarılı bir Eylemden Reaksiyona eşleşmesi, Model Ağacı'nı bir sonraki duruma (orijinal) geliştirecektir;
Yan Etki, güncellenmiş bir Model örneğini ve sıfır veya daha fazla Geri Çağırma İşlevini (Elm tarafından belirtilir) içeren yukarıdaki Durum Geçişlerinin sonucudur;

Modula'daki Yan Etki sorununun işlenmesi için Modula modülündeki Alıcı Yan Etki'ye dönebilir.Bir Yan Etki Gönderen veya Kabarcık Olayına referans olabilir veya anonim bir işlev (ok işlevi); Liste-A okunduğunda görüntülenecektir. Liste-A'da bulunan ID'ye göre, Liste-B'nin okunması otomatik olarak tetiklenir.

Bu nedenle, durum yönetimi açısından Modula, Redux'ten daha karmaşık ön uç durumunun uygulama iyileştirmesi için daha uygundur.

Ön uç yönlendirme çerçevesi Spark Router

Ek olarak, tipik bir SPA'nın yapımını destekleyebilmek için Spark Router adlı bir bileşen geliştirdik. Aynı zamanda esas olarak Modula'ya dayanmaktadır.React Router ile karşılaştırıldığında (durumu Redux Store'da saklanmayan), Spark Router'daki durum yönetimi uygulamanın diğer bölümlerindeki durum yönetimi ile aynı mekanizmayı kullanabilir.

Daha önce, uygulama durumu React Router'ın Durumunda ve Modül Modelinde (Redux durumu) dağınıktı.Sıklıkla karşılaşılan iki senkronizasyon sorunu Çözümümüz, yönlendirmeyle ilgili Durumu Modula ile birleştirmekti. Bu nedenle, Spark Router esas olarak Model için yönlendirmeyi yapılandırır.Bileşen ilgili arayüzü Modele göre değiştirebilir.Bu, Spark Router'ın durum yönetimi ile uygulamanın diğer bölümlerinin durum yönetimi arasında bir senkronizasyon tasarımı ekleme ihtiyacını ortadan kaldırır ve ayrıca programı daha basit hale getirir .

SparkUI'nin mevcut uygulamaları

SparkUI, FreeWheel'in üretim ortamında bir yıldan uzun süredir kullanılmaktadır. Neredeyse tüm dahili UI ürünlerimiz SparkUI'yi kullanmaya başlıyor. Ancak bu aşamada, hala eski uygulamadan yeni SparkUI tabanlı uygulamaya geçiş sürecindedir.

React tabanlı bir ön uç MVC çözümünü kendimiz tasarlayıp oluşturmamızın nedeni, FreeWheelin sisteminin bir reklam kaynakları yönetim sistemi olmasıdır. Sistemin müşteri gruplarının çoğu, çok karmaşık iş akışlarına sahiptir ve kullanıcı arayüzü aracılığıyla uygulanır. Ön ucun uygulama durumu çok ve karmaşıktır. Bu nedenle, SparkUI çerçevesinin özellikleri veya uygulama senaryoları şunlardır: daha karmaşık ön uç durumlarına sahip uygulamalar oluşturmada iyidir.

Uygulama sırasında, Redux, Mobx vb. Dahil olmak üzere sektördeki birçok iyi uygulamayı ödünç aldık ve temel ve diğer temel bileşenler gibi yeniden kullanılabilen şeyleri yeniden kullanmaya çalışıyoruz, bu da kullanıcıların SparkUI'de gerekli ek öğrenme maliyeti. Ayrıca, öğrenmek için SparkUI kullanması gereken meslektaşlarımıza yardımcı olmak için çok zengin tanıtımlara sahip olan SparkUI için özel olarak bir Dokümantasyon Portalı hazırladık. Şu anda, FreeWheel içinde, ön uç ekibi düzenli olarak iletişim kurar ve diğer ekiplerle paylaşır ve en son iyileştirmeleri zaman içinde senkronize eder.

SparkUI şu anda yalnızca FreeWheel tarafından dahili olarak kullanılmaktadır ve henüz açık kaynak değildir. Bununla birlikte, FreeWheel ve ana şirketi Comcast'in açık kaynağı çok teşvik ettiği ve açık kaynak SparkUI için ilgili yasal prosedürleri izlemeye başladıkları anlaşılıyor. FreeWheel'in baş mimarı Zhang Han, SparkUI'nin tamamı açık kaynak olmayabilir. Örneğin, ürüne özgü gereksinimlere ait bileşen kitaplıkları kaldırılacak ve Modula gibi ortak model parçaları açık kaynak kategorisine girecek. Uygulamalar karmaşık ön uç işlevleri gerektirir, özellikle birbiriyle ilişkili durumların daha fazla bakımı gerektiğinde, Modula'mızı kullanmayı düşünebilirsiniz. "

SparkUI'nin gelecek planı

Öncelikle, şu anda çerçeve çekirdek yükseltmesinin performansını optimize etmemiz gerekiyor. React çerçevesinin performansı sürekli olarak optimize edilmesine rağmen, aslında performansta iyi değildir.Performansı etkileyen çok önemli bir nokta, durum değişikliklerinin hesaplanmasıdır ve sayfa, durum değişikliklerinin hesaplanmasına göre yeniden oluşturulur. Özellikle daha fazla durum olduğunda, bu tür bir denetim daha fazla zaman alıcı olacaktır. Bu bağlamda, bazı işaretleme yöntemleri önerecek ve tanıtacağız Nesne ağacında (Model Ağacı) bir aralık belirleyerek, bu aralıktaki alt durum güncellendiği sürece, hizmet durumuna karşılık gelen görünümün yeniden açılması gerekir. Oluşturun.

İkinci olarak, tek sayfalık Web uygulamalarının niteliklerini sürekli geliştiriyoruz. Çünkü FreeWheel, yeni ön uç çerçevesi ve ön uç ürün yükseltmesi sürecinde ön uç ve arka uç ayrımını da yapıyor. Aynı zamanda iş sistemimiz ön ve arka uçları da ayırır. Bu nedenle, tüm görüntüleme mantığını ve veri olmayan mantığı mümkün olduğunca ön uç uygulamaya taşımayı umuyoruz ve sonunda tüm uygulama SPA haline gelebilir. Şu anda, yönlendirme ve uluslararasılaştırma için zaten desteğe sahibiz. Bu aşamada hala bir izin modülü geliştiriyoruz. Mevcut izin kontrolü sunucu tarafında. Bir sonraki hedef izin kontrolünü ve oturum yönetimini geliştirmek.

Bugünün Tavsiyesi

Okumak için aşağıdaki resme tıklayın