Modüller ve Modüler Ön Uç Geliştirmeye Başlarken

Herkes Lego tuğlalarını bilir ve sever. Çocukken legolara bayılırdım ve bugün hala onları seviyorum. Her çeşit legodan oyuncağınızı her seferinde tek parça olacak şekilde her türlü şekilde monte edebilirsiniz. Daha sonra yeniden başlayabilir ve aynı parçalardan farklı bir oyuncak yapabilirsiniz. İmkanlar sonsuzdur.

Bir web sitesindeki modüller Legolara çok benzer. Modülleri, web sitenizi oluşturmanıza olanak tanıyan Lego parçaları olarak düşünün. Bunları doğru bir şekilde birbirine bağladığınızda web sayfaları oluştururlar. Legolar gibi web siteleri oluşturmak için web sitelerini bağımsız modüllerin bir koleksiyonu olarak düşünmelisiniz. Bu makale, ön uç geliştirme ve tasarımınızla tam da bunu yapmanıza yardımcı olacaktır.

Modül Kolajları

Bir projenin tasarım aşamasına girerken, tasarım ilhamı kolajlarını ve modül kolajlarını bir araya getirerek işleri başlatma eğilimindeyim. Bu, bu kolajlara komp-son dönem için tasarım çıktıları diyen Dan Mall'ınkine çok benzeyen bir süreç. İlham verici kolajlar, sadece gittiğimiz görsel yön hakkında genel bir fikir edinmek için müşteriye sunduğum ekran görüntülerinden oluşan koleksiyonlardır. Bunlar sadece hem benim hem de müşterinin beğendiği web sitelerinin ekran görüntüleridir.

Stil açısından aynı sayfada olduğumuz onayını aldığımızda, grafik düzenleyicime (Sketch'i tercih ederim) atlayabilir ve modül kolajları oluşturabilirim. Bu kolajlar, en sık kullanılan modüllerin koleksiyonlarıdır - düğmeler, formlar, başlıklar, paragraflar, listeler, resimler vb. Modül kolajları, web sitesinin nasıl görüneceğini ve nasıl hissedileceğini hızlı bir şekilde oluşturmamı sağlıyor.

İşte bir projenin başlangıcında Sketch'te tasarladığım bir düğme örneği olan son modül kolajımın bir parçası:

Statik kompozisyonlar ve mükemmel piksel tasarımlarını müşteriye sunmanın ne zaman devreye girdiğini merak ediyor olabilirsiniz. Yapmıyorlar - Bunları neredeyse tamamen kendi sürecimde atlıyorum. Sürecin bu kısmını atlamak, projede çok erken koda girmemi ve prototipleri kodlamamı (bunlara birazdan geleceğim) veya başka bir deyişle tarayıcıda tasarlamamı sağlıyor. Tarayıcıda tasarım yapmanın avantajlarından bazıları şunlardır:

• Tarayıcı, bir web sitesi için doğal ortamdır ve bir grafik düzenleyicide yapılan fikirlere bağlı kalmak geri tepebilir. Tarayıcılarda test etmek ve tasarım kararları vermek yalnızca doğaldır. Daha önce duydunuz, tekrar duyacaksınız - önemli olan nasıl göründüğü değil, nasıl çalıştığı.

• Statik alaylar ile koda çevrildikten sonra tarayıcıda elde ettiğiniz şey arasında her zaman tasarım tutarsızlıkları olacaktır. Bu tutarsızlıklardan kaçınmak için, gerçek tasarım sorunlarını çözmek için kod düzenleyiciye ve tarayıcıya atlayın.

• Statik kompozisyonlar doğru mesajı iletmeyebilir. Fareyle üzerine gelme durumları, geçişler ve animasyonlar gibi etkileşimi entegre ettiğinizde görünüm ve his çok daha farklı olacaktır.

• Birkaç çözünürlük için birkaç statik model tasarlamak için saatlerce saatler harcamak yerine, koda erken girerek çok zaman kazanabilirim. CSS'de ince ayar yapmak, değişiklikleri ve müşteriye yanıt veren yönü çeşitli cihazlarda (akıllı telefonlar, tabletler vb.) hızlı bir şekilde göstermemi sağlıyor.

Bu nedenle, zamandan tasarruf edin ve UX'i olabildiğince erken oluşturmaya başlamak için kod düzenleyicinizi ve tarayıcıyı açın. Deneyimlerime göre, çoğu müşteri biz kodlamaya devam etmeden önce bir veya iki sayfanın tam bir maketini isteyecek ve bu tamamen sorun değil. Müşterinin gelecekteki tasarım hakkında iyi bir fikre sahip olması önemlidir. Genellikle ilk örnekleri, değişiklikleri, yorumları ve daha fazlasını takip etmek için harika bir araç olan InVision'ı kullanırım. Ancak, müşterilerin Sketch ve InVision'ın onları çok ileriye götürmeyeceğini anlamaları çok önemlidir.

Ön Uç Geliştirme için Modüller Oluşturma

Müşteri, tasarladığım modül kolajından ve maketlerden memnun kaldığında, kodlamaya başlayabilir ve bu öğelerin gerçek görünümünü ve hissini tanımlayabilirim.

Modüler tasarım, yinelemeli bir süreçte modüler geliştirme ile iç içedir. Bir modülü kodluyorum, ardından nasıl çalıştığını görmek için tarayıcıda deniyorum, sonra gerekirse yineliyorum. Yine, bu süreç Legoları inşa etmeye çok benzer - temelde aynı anda tasarlar ve geliştirirsiniz ve bu konuda iyi hissedene kadar farklı varyasyonları deniyorsunuz.

Modüllerin geliştirilmesine genellikle bir düğme gibi basit bir şey inşa ederek başlarım. Kendiniz oluşturduğunuzu ve genellikle iletişim formu için kullanılan turuncu bir düğmeyi kodlamanız gerektiğini hayal edin. İşte bulabilecekleriniz:

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

Yeterince basit, değil mi? .submit-button sınıfını HTML'nize uygularsınız ve bu, mevcut probleminizi çözer. Şimdi, tıpkı bunun gibi, ancak mavi bir arka plan rengiyle yeni bir düğme oluşturmanız gerektiğinde ne olur? Muhtemelen aynı sınıfı kopyalar, ardından sınıf adını ve arka plan rengini değiştirirsiniz. Hızlı ve kirli. Şimdi, aynı düğmeyi kullanmanız gerektiğini, ancak turuncu bir arka plana sahip olduğunuzu hayal edin. Bunun nereye gittiğini görebilirsiniz - birçok CSS'nin tekrarlanmasıyla sonuçlanabilir. Süper küçük bir projede bu gerçek bir sorun olmayabilir, ancak daha büyük projelerde muhtemelen olacaktır. Siz farkına varmadan, CSS'niz şişiyor ve bakımı zorlaşıyor.

Orta ila büyük ölçekli bir proje geliştirdiyseniz, şüphesiz baş ağrılarınızdan payınızı almışsınızdır. Bunlara aşağıdaki nedenlerden herhangi biri neden olmuş olabilir:

• Dağınık, tutarsız, taranması ve anlaşılması zor kod.
• Çok fazla yinelenen şişirilmiş kod ve XXL CSS dosyaları.
• Bakımı zor olan kod.
• Yapı ve cilt ayrımının olmaması.

Endişelenme, yalnız değilsin. Bahse girerim, tüm ön uç geliştiriciler zaman zaman bu acı verici sorunları ve muhtemelen daha fazlasını yaşadılar. Geçmişte tüm bu tipik sorunlarla karşılaştığım birçok projem olduğunu güvenle söyleyebilirim.

Bu sorunları önlemenin veya en aza indirmenin bir yolu, modüler bir şekilde inşa etmektir.

Modüler Düğme

Bu düğmeyi modüler bir şekilde nasıl kodlayabilirim? Modüler bir yaklaşım, yeniden kullanabileceğiniz kod yazmak olacaktır. Tekrar tekrar kullanılabilen ve yeniden kullanılabilen Legoları hatırlayın.

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

Yaptığımız şey, stillerin akıllıca ayrılmasıdır. .button sınıfı, projenizdeki her düğmenin kullandığı stilleri içerir, böylece tekrarlamanız gerekmez. .button-orange sınıfı, yalnızca turuncu düğmeyle ilgili stilleri kullanır. Diğer tüm düğmeler için de aynısını yapar ve arka plan ve metin renklerini tanımlarsınız.

Düğme modülünüz, ihtiyacınız olduğunda kullanılmaya hazır birkaç bağımsız düğmeden oluşabilir.

Peki ya Daha Karmaşık Şeyler?

İhtiyaç duyabileceğiniz diğer tüm bileşenler için aynı ilkeleri takip edersiniz. Amaç, diğer modüllerden bağımsız, bağımsız elemanlar olan modüller oluşturmaktır. Birleştirildiğinde, bu modüller, modülleri gerektiği gibi yeniden kullandığınız ve tasarımınızı tamamlamaya çalıştığınız şablonlar oluşturacaktır.

Modüler ön uç geliştirme hakkında daha fazla bilgi için, büyük veya küçük tüm projelerimde kullanma eğiliminde olduğum mimari olan SMACSS'yi şiddetle tavsiye ederim.

Modüler sürecin tamamen oluşturma, test etme ve yineleme ile ilgili olduğunu unutmayın. Bir modül önce düzenleyicinizde üretilir, ardından bir tarayıcıda test edilir ve gerekirse yinelenir. Gerektiğinde bu döngüyü tekrarlayın.

Müşteriyi Dahil Etmek

Müşterinin ihtiyaçlarını unutmayın - döngüde tutulmak ve paralarının karşılığını aldıklarını teyit etmek isterler. Bu geliştirme sürecinin güzelliği, müşterilerin ekibinizin aktif üyeleri olabilmesidir. Onlara modülleri güvenle gösterebilir ve geliştirme sürecini gözden kaçırabilir ve ürünü daha iyi hale getirmek için her zaman devreye girebilirler. Gerçek ilerlemeyi görmeden önce statik bir kompozisyonun tamamlanmasını veya bir dönüm noktasına ulaşılmasını beklemek zorunda değiller. Müşterilerinize modüllerin nasıl çalıştığını açıklamak için biraz zaman ayırırsanız, tasarım sürecini ve onları oluşturmak için harcanan zamanı daha iyi anlayacak ve takdir edeceklerdir.

Genellikle bir istemciye modülleri sunma yöntemim Bootstrap'ın yaptığına çok benzer — koduyla birlikte yalıtılmış bir modül kurmak, tüm tasarımcıları, geliştiricileri ve müşterileri sürece dahil etmenin harika bir yoludur.

Oluşturduğunuz modülleri sayfalar için yapı taşları olarak kullanın. Dizin sayfanız için, gezinme modülünü en üste, bir kahraman modülünü yanına, bazı içerik modüllerini sonra, ardından alt bilginizi en alta yerleştirebilirsiniz. Siz farkına bile varmadan, zaten bir HTML prototipi için bir sayfanız var. Ama tam olarak bir prototip nedir? Leah Buley'nin harika kitabı The User Experience Team of One'daki prototip tanımını her zaman sevmişimdir:

Tasarımın uygulandıktan sonra nasıl davranması ve çalışması gerektiğine dair işlevsel veya yarı işlevsel örnekler.

Bir prototip oluşturarak, projenin ilk aşamasında tam olarak elde edeceğiniz şey budur - yarı işlevli bir web sitesi. Statik maketlerin ve InVision'ın yetersiz kaldığı yerlerde, HTML prototipleri üstündür. Prototip, müşterileriniz için mükemmel bir duyarlı çıktı işlevi görür. Ve müşteri prototipinizin görünümü ve hissi konusunda bir onay verdiğinde, yapmanız gereken tek şey, gerektiği gibi çalışana kadar onu cilalamaktır. Oluşturun, test edin, yineleyin.

Yapı Taşlarını Yeniden Kullanın

Modüller ve prototipler, kodu mevcut proje için olduğu kadar gelecekteki projeler için de yeniden kullanmanızı sağlayacaktır. Son projenizden bir modül üzerinde ince ayar yapmak size çok zaman kazandırabilir - her projede ihtiyaç duyduğunuz modüller genellikle benzerdir. Sık sık yeniden kullandığım büyük bir modül kitaplığım var: sekmeler, gezinme menüleri, düğmeler, kırıntılar, formlar, tablolar, sayfalandırma, listeler, vb. Bu modüllerin kodu tüm projelerde tam olarak aynı olmasa da, iyi parçaları yeniden kullanılabilir, bana çok fazla geliştirme süresi kazandırır. Size tavsiyem, kendiniz için de yeniden kullanılabilir modüller oluşturmanız. İlham almak için BASSCSS, Pure ve Refills'e göz atın.

Modüler tasarım ve geliştirmeye geçiş zaman alıyorsa cesaretiniz kırılmasın. Doğal olarak, modüler ilkeler sizin için yeniyse, tasarım ve geliştirme sürecinizde ince ayar yapılması gerekecek, ancak değişiklik faydalı olabilir.

Bu makalede ele aldığım modüler yöntemler ve teknikler sadece yüzeyi çiziyor. Yine de, içtenlikle bu makalenin yararlı olduğunu ve modüler tasarım ve geliştirmeye dalmak için ilginizi çektiğini umuyorum.