Modern Ön Uç Mimarisi — 101

Birkaç hafta önce meslektaşlarım ön uç mimarimizi ve proje yapımızı merak ettiler. Birkaç küçük sunumdan sonra, hepsini toparlamanın ve yaklaşımımı burada paylaşmanın iyi bir fikir olacağını düşündüm.

Motivasyon

Modern çerçeveler ve kitaplıklar, UI bileşenleri geliştirirken yeniden kullanılabilirliğe odaklanmamızı kolaylaştırıyor. Bu, sürdürülebilir ön uç uygulamaları geliştirmek için çok önemli bir kavramdır. Birçok proje boyunca, yalnızca yeniden kullanılabilir bileşenler oluşturmanın genellikle yeterli olmadığını gördüm. Gereksinimler önemli ölçüde değişirse veya yeni gereksinimler ortaya çıkarsa, uygulamalar sürdürülemez hale gelebilir.
Doğru dosyaları bulmak veya bir şeyde hata ayıklamak giderek daha fazla zaman alıyordu.

Elbette, hafıza becerilerimi geliştirebilir veya Visual Studio Code'u kullanmayı daha da iyi öğrenebilirim. Ama çoğunlukla bir ekibin parçasıyım, bu yüzden kod üzerinde çalışan tek kişi ben değilim. Bu nedenle, projelerimizin kurulumunu herkes için daha iyi hale getirmemiz gerekiyor. Bu, onları daha sürdürülebilir ve daha ölçeklenebilir hale getirmemiz gerektiği anlamına gelir. Amaç, mevcut işlevlerde olabildiğince hızlı değişiklik yapmak ve aynı zamanda yeni özellikleri daha hızlı geliştirebilmektir.

Üstten görünüm

Tam bir yığın geliştirici olarak, aslında arka uç tarafından geliyorum.
Orada yararlanabileceğimiz birçok mimari yaklaşım bulunabilir. Yaygın olarak kullanılan iki kavram, “Alan Odaklı Geliştirme” ve “Endişelerin Ayrılması” dır.
Ön uç mimaride de oldukça kullanışlıdırlar.
"DDD", teknik olarak birbiriyle ilişkili gruplar oluşturmaya çalışılan bir yaklaşımdır. “SoC” ile mantık, kullanıcı arayüzü ve verilerin sorumluluklarını ve bağımlılıklarını birbirinden ayırıyoruz.

Ön uç mimarisi tabanı

Bir kullanıcı web uygulamamızla etkileşime geçtiğinde, uygulama onları doğru modüle yönlendirir. Her modül belirli işlevleri ve iş mantığını içerir. Ayrıca her modül, bir API (REST, GraphQL) üzerinden uygulama katmanını (http/s) kullanarak arka uç ile iletişim kurma seçeneğine sahiptir.

React Proje Kurulumu

React proje yapımızı kurmak istiyorsak, aşağıda gösterilen yapıya güvenebiliriz. Uygulamanın tüm kodu, uygulama dizininde bulunur. Çoğunlukla bir rotaya karşılık gelen her modül, modüller klasöründe bulunur.
Çoğu herhangi bir özel mantık içermeyen yeniden kullanılabilir UI bileşenleri, bileşenler dizininde bulunur.
Redux ara yazılımı, istekler veya sabitler için axios gibi tüm yapılandırmalar, config klasöründe bulunabilir. Servislerde, modüller tarafından kullanılan iş mantığı fonksiyonları bulunur. Paylaşılan dizinde özellikle spesifik olmayan model arabirimleri, çeşitli diller için destek, genel redux indirgeyicileri veya yardımcı işlevler bulunur. Birkaç dil için JSON'lar ve ayrıca metin dizeleri i18n klasöründe bulunabilir.

app/ > config/ > components/ > services/ > modules/ > shared/
content/ > css/ > img/ > fonts/ > js/
cypress/
i18n/
webpack/
.gitignore
package.json
tsconfig.json
Readme.md

İçerik dizini varlıklarımızı içerir (örn. resimler, yazı tipleri veya 3. taraf JS kodu). Kişi her zaman kendi dizininde bulunan bir test çerçevesi (burada Cypress) kullanmalıdır.
Webpack, bir varlık paketleyici olarak kullanılır. Kalan .json dosyaları yapılandırmalardır. Elbette benioku dosyamızı unutmak istemiyoruz.

detayları kontrol edelim

Temel mimari ve proje yapısı ile iyi bir temele sahibiz. Şimdi ön uç mimarisini uygulamak için daha fazla ayrıntıya ihtiyacımız var.
Bir bileşen mimarisi oluşturmak her zaman faydalıdır.
Bunun için draw.io kullanmayı seviyorum.
Orada bireysel bileşenleri ve modülleri adlandırıyoruz.
Bu kısım çok önemli çünkü burada bileşenlerin hiyerarşisini ve kullanımını görüyoruz. Birkaç kez kullanılmış bileşenleri ve modüle özgü bileşenleri görsel olarak ayırmaya çalışıyorum (kesikli ve normal çizgi). Buraya ara yazılım veya ek işlevler eklemek de iyi bir fikirdir.

Modüller, mantığa sahip büyük UI bileşenleridir. Diğer modüller bileşenleri kullanabilir, ancak diğer modülleri kullanamaz. Farklı modüller birbirleriyle iletişim kurmak isterse Redux kullanırız. Her modül, ana bileşen, bir mantık dosyası ve bir indirgeyici dosyasından oluşur. Tüm işimiz ve kullanıcı arabirimi mantığımız, mantık kancasında bulunabilir. İndirgeyicide, Redux uygulamasını ve tüm API çağrılarını yerleştirebiliriz.

app/ > modules/ > shop/ > shop.tsx > shop.logic.ts > shop.reducer.ts

React'te kanca standartlarını kullanarak, tüm işlevselliği mantığa devrediyoruz ve ardından bu kancayı modül bileşenimizde kullanıyoruz.
Mağaza modülündeki bileşen bu şekilde görünebilir.

//app/modules/shop/shop.tsx
const Shop = (props) => { const { state, actions, reducer } = useShopLogic(props); return ( <div id="shop"> <Header /> {!state?.loading && <Button onClick={actions?.buyNow}> <Translate contentKey="shop.buyNow"/> </Button>} <FeaturedProducts products={reducer?.products} /> <Footer /> </div> );
};
export default Shop;

Şimdi bir kanca örneğine bakalım. Bu, UI ile etkileşim için ilgili kodun tamamını ve ayrıca Reducer / Redux aracılığıyla API ile iletişim kurmayı içerir.

//app/modules/shop/shop.logic.ts
export const useShopLogic = (props) => { const dispatch = useDispatch(); const history = useHistory(); const [loading, setLoading] = useState(false); const { products } = useSelector(({shop}) => { products: shop?.products; }); const buyNow = () => { history.push("/product/1"); }; const loadProducts = () => { setLoading(true); dispatch(ShopReducer.loadProducts()); }; useEffect(() => { if (ProductService.areValid(products)) setLoading(false); }, [products]); useEffect(() => { loadProducts(); }, []); return { state: { loading }, actions: { buyNow }, reducer: { products }, };
};

Burada açıkça görülebileceği gibi, UI tanımı ve işlevselliği arasındaki sorumluluk ayrılmıştır. Bu, mantığın yeniden kullanılmasını ve arayüzün kolayca uyarlanmasını sağlar.

Shop Reducer, küresel durum mantığını Redux aracılığıyla yönetir.
API fonksiyonlarımız da burada bulunur ve daha sonra herhangi bir yerden çağrılabilir.

//app/modules/shop/shop.reducer.tsexport const ACTION_TYPES = { FETCH_PRODUCTS: "shop/FETCH_PRODUCTS", RESET: "shop/RESET",
};
const initialState = { products: null, loading: false, success: false,
};
export type ShopState = Readonly<typeof initialState>;
export default (state: ShopState = initialState, action): ShopState => { switch (action.type) { case PENDING(ACTION_TYPES.FETCH_PRODUCTS): return { ...state, success: false, loading: true, }; case FAILURE(ACTION_TYPES.FETCH_PRODUCTS): return { ...state, success: false, loading: false, }; case SUCCESS(ACTION_TYPES.FETCH_PRODUCTS): return { ...state, products: action.payload.data, success: true, loading: false, };case ACTION_TYPES.RESET: return { ...initialState, }; default: return state; }
};
export const getProducts = () => async (dispatch) => { const requestUrl = `${SERVER_API_URL}${API_MAP.getProducts}`;const result = await dispatch({ type: ACTION_TYPES.FETCH_PRODUCTS, payload: axios.get < any > requestUrl, });return result;
};
export const reset = () => ({ type: ACTION_TYPES.RESET,
});

API çağrılarını bileşende saklamanın daha az mantıklı olduğunu düşünüyorum. API istekleri genellikle birkaç yerde ve farklı modüllerde kullanılır, bu yüzden onları iş mantığından ayrı tutmayı tercih ederim. Doğru ara katman yazılımı ile indirgeyiciler çok modülerdir ve çok az kod gerektirir. İsteklerin işlenmesi, sonuçta neredeyse yalnızca API çağrı işlevlerini bırakan merkezi bir indirgeyici tarafından da çözülebilir.

Özet

Bu yazıda bir ön uç mimarisinin nasıl görünebileceğini göstermek istedim. Ön uç, kullanıcılarımız için ilk giriş noktasıdır.
Uygulamalarımız sürekli uyum sağladığı ve büyüdüğü için hatalara daha yatkın hale geliyor. Ancak hatalar ürünlerin piyasaya sürülmesini engelliyor ve yeni özelliklerin daha da hızlı oluşturulması bekleniyor.
Bu, bir tür yapı ve düzen olmadan mümkün değildir.
Bununla birlikte, iyi bir ön uç mimarisiyle, bu zorlukların üstesinden çok daha iyi gelebileceğimiz istikrarlı bir temel oluşturabiliriz.

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• PlatoAiStream. Web3 Veri Zekası. Bilgi Genişletildi. Buradan Erişin.
• Adryenn Ashley ile Geleceği Basmak. Buradan Erişin.
• Kaynak: https://www.codementor.io/davidminkovski/the-path-to-a-scalable-and-maintainable-react-frontend-architecture-24ei82g29m