Series for React Architecture
React Örnek Proje Mimarisi — 5 (Figma vb.. Tasarım Yapısı)
React Örnek Proje Mimarisi’nde orta ölçekli veya büyük bir projede yazılım mimarisi , süreçleri, konseptleri neler olmalı, nasıl olmalı şeklinde değerlendirmeler yapıyorum.
Bu kısma kadar olan yazılarda Routing, Store, Component, Container yapılarından Icon yapısından bahsettik ama UIX Designer oluşturduğu tasarımların Frontend Developer nasıl bir yapıda gelmesi mimari yapıya hem uygunluk hem de geliştirmeye hız kazandırır.
Architecture bir miktar UIX belli miktarda kalıplar ve yapılar içerisinde tutmaya çalışır. Tabi burada ki amacı görselliğin, işlevselliğin yapısına karışmak değildir. Amacı geliştirmelerin kendi yapısına mimari yapıya olan uygunluğudur.
Peki geliştirmelerimiz sırasında bunu nasıl gerçekleştireceğiz. Önce geliştirme mantığını analiz edelim. Frontend aşamasından uygulamanın farklı dönemlerinde farklı öncelikler alsada Mimari Yapı Haricinde ürüne katkı sağladığımız 3 tipte geliştirme bulunuyor. BugFix, Refactoring ve Feature geliştirim.
Bu kısımda BugFix ve Refactoring ister UI ile ister Mimari ile ilgili olsun zaten mevcut tasarım ile ilgili olmadığı için yani mevcut tasarımın
- yanlış geliştirimi
- eksik geliştirimi
- veya kalitesiz geliştirimini
ilgilendirdiği için BugFix ve Refactoring konusunu bu yazının dışında bırakıyorum. Bizim ilgilendiğimiz Feature ve bunların Task’ları olacaktır.
Örneğin
- Yeni bir ürüne başlıyoruz basit 1,2 Feature olsun diye Feature ve taskları Product Manager belirledi.
- Veye belli bir olgunlukta projemizi düşünelim Market-Fit amaçlı olabilir, Müşteriden Gelen yorumlar olabilir, vb nedenlerden yeni bir Feature ve Tasklarını Product Manager belirleyebilir.
Bu durumda UIX Designer ve Product Manager arasıda ortak bir çalışma ile arayüzlerin belirlenmesi gerekiyor.. Burada genelde Figma vb tasarım araçları ile gelecekte ki uygulama nasıl olacak şeklinde arayüzler ve bu arayüzlere uygun Prototip geliştirme çalışmalaları yapılır.
Mevcut projeden Hedef Proje giderken biz Frontend geliştiriciler için gereken Feature ve alt kırımları olan Task’lar ile ilgili
- Story / Gereksinim Dökümanı
- UIX Design anlamında Figma vb.. araçlarda tasarımlar
Bu kısımda tasarım yapısının mimariye uygun verilmesi ve sadece Mevcut Proje’den → Hedef Projeye ulaşmak için yapılacak değişkliğin verilmesi Geliştiricilerin odaklanmasına ve Mimari yapıda hazır ise değişen parçaları mimaride ilgili yerlerde koymasından ibaret olacaktır.
Yani Geliştirme ortamında UI ilgilendiren tasarım kısımlarını mimaride yapısal bir şekilde oluşturduğumuzda..
- Pages (Sayfalar) ve Nested Children Pages (Alt sayfalar)
- Page Components
- Custom Comp
Asset kısmında
- Font, Coloring, Layout, Styling, Images ve Icon kısmında da bir takım sınırlandırmaların olması lazım ki Figma UIX tasarımları Feature/Task ile gelecek farkın bu yapılara yani Mimarinize uygun olsun.
Örneğin Icon kısmındaki standarlaştırma sonrasında
- UI_ICONS: Ekranın tasarımı ve mekanikliğini sağlayan ikonlar. Örneğin Sayfa Iconları, Tab Iconları, Chevron (Sag, Sol, Üst, Alt), Alarm iconları gibi..
- DOMAIN_ICONS: Uygulamanızın uzman olduğu içerik alanı doğrultusunda Örneğin Hastane Doküman Sistemi yapıyorsanız , Doküman Türlerine ait iconlar, Dokümanların statuslarine ait iconlar bu içerik alanına göre özelleşmesi gereken iconlardır.
yapısını belirlediğimizde artık Figma Tasarımından gelen yeni Feature/Task farkının bu Mimari Yapıda doğru yerleri adresleyerek oluşturması biz geliştiricilerin işlerini çok daha fazla rahatlatacak ve hızlandıracaktır.
Bu yapıda Figma yapısının bizim Frontend’e yapacağımız Feature veya Feature/Task yukarıdaki resme benzer bir şekilde yapılması, mimarimize uygunluğu geliştirme hızına çok fazla avantaj sağlayacaktır.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki(react-mimarisi) diğer yazılara erişmek için bu linke tıklayabilirsiniz.
