akwa: Dahili önyüz çerçevemiz

bencede

New member


  1. akwa: Dahili ön uç çerçevemiz

Bunun anlamı: ya bir çerçeve (ön uç) kullanırsınız ya da kendinizinkini geliştirirsiniz. Biz ikincisini seçtik ve şimdi onu sunmak istiyoruz.


Zaten ilk blog gönderilerimizden birinde dahili ön uç çerçevemiz olan “akwa”dan bahsetmiştik. Çerçevede, bileşen olarak gruplandırılabilecek her şeyi birleştirmeye çalışıyoruz ve sayfalarda sıcak çevrimiçi birkaç kez kullanılır. Burada aynı aralık, renkler, yazı tipi boyutları ve kutu görünümü gibi düzen ilkelerini de oluşturmayı hedefliyoruz. Ancak yıllar geçtikçe, akwa bu gerekliliği aştı ve hiçbir zaman çerçeve için tasarlanmamış bir kod getirdi. Akwa’nın geliştirilmesinden önce, Bootstrap gibi hazır çerçevelerle de bazı girişimler oldu. Ancak ihtiyaçlarımıza çok fazla uyum sağlamamız gerektiğini ve bitmiş bileşenlerin hiçbir zaman %100 uymadığını gördük.

Başlangıçlar


akwa, zaman içinde bizimle birçok değişiklik geçirdi. Her bileşenin kendi sürüm kontrolü ile kendi deposu olduğu yaklaşımıyla başladık. Bununla birlikte, bazı bileşenlerin birbirine bağımlılıkları vardı (örneğin, birçoğunda tipografi bileşeni bağımlılık olarak vardı) ve kendimizi hızlı bir şekilde bağımlılık cehenneminde bulduk. Her zaman paketleri güncellemekle meşguldük (her şey dahili bir kayıt defterinde npm paketleri olarak) ve açıkçası, özellikle başlangıçta birkaç büyük değişiklik oldu. Tüm proje SemVer’e göre güncellendi ve güncelleniyor. Bu yapı ilk yıldan öteye gitmedi. Bazı projelerin yalnızca bireysel akwa bileşenlerini kullanabileceğini düşünmek güzeldi, ancak bunu daha sonra farklı bir şekilde çözdük.

akva birleşik


Akwa’nın kilometre taşları 2016’da atıldı ve Haberler online’ın üretim kodundaki başlangıçlar 2017’de bulundu. Bu aynı zamanda yeniden başlamaya karar verdiğimiz yıldı. Tüm bileşenler ortak bir “akwa” projesine taşındı, bir değişiklik günlüğü ve çeşitli kitaplıkları paylaştı. Tüm proje biraz sakinleşti ve tekrar 1. versiyonumuz oldu – değişiklik günlüğüne bakıldığında, 10 Ağustos 2017’nin ikinci versiyon 1.0.0’ın ilk sürümü olduğu görülüyor.

Geliştirilmiş bakım kolaylığına ek olarak, artık ilk kez her bir bileşen için ortak ve eksiksiz bir akwa dokümantasyonu mevcuttu. Bu, akwa’yı bugüne kadarki en iyi belgelenmiş ve temizlenmiş yayınlanmış projelerimizden biri yapar.


Akwa mimarisi


CSS (Sass biçiminde) ve JavaScript (vanilya) çerçevede yaşar. Birkaç istisna dışında her bileşen CSS göstermez. CSS çıktısı, akwa yapılandırmasındaki Sass değişkeni tarafından kontrol edilir. Birçok bileşen, işlevlerini bir karışım olarak da sağlar. Bunun faydası ızgarada iyi gösterilebilir. Prensip olarak, ızgaramız on iki sütuna ayrılmıştır, ancak bu ayrıntılı bir şekilde gereklidir. sıcak çevrimiçi aslında hiç de değil. On iki sütun için tam CSS ızgara çıktısı gereksiz bir ağırlık olacaktır. Bu nedenle, yalnızca dörde ayırmaya izin veren (CSS sınıfları aracılığıyla) bir düzen bileşenimiz var.

İstisnai olarak, bir bileşen farklı bir ızgaraya ihtiyaç duyarsa, örneğin beş sütunlu bir ızgara kullanmak için ızgara karışımlarını kullanabilir. Kodumuzu temiz ve tutarlı tutmak için Prettier ile işbirliği içinde Stylelint ve ESLint kullanıyoruz. Artık sayfalarında yaygın olarak kullanılan yaklaşık 60 bileşenimiz var. sıcak çevrimiçi Bulmak.

Sevgili yabancı cisimler


İlk özel öğeler a sıcak çevrimiçi onlar da akva bileşenleriydi. Böylece zamanla küçük yardımcılardan, çoklu dolgulardan ve diğer sözdizimsel şekerden oluşan bir ekosistem rahat bir şekilde özel öğeler geliştirmek için akwa’da oluştu. Bir noktada, resimde gerçekten yeri olmayan bazı yabancı cisimlerin yavaş yavaş içeri sızdığını fark ettik. Özel öğelere uygun altyapı nedeniyle, tüm özel öğeler tek bir amaca sahip olmalarına rağmen akwa’da geliştirildi ve bu nedenle çerçevede sonuçlanmak için genellikle uygulanabilir değildi.

Bugün hala var olan bir temizlik eksikliği, çünkü beni gerçekten rahatsız etmiyor. Belki bir noktada açıklama basitçe akwa’dan “Ön uç”a değişecektir.çerçeve itibaren sıcak çevrimiçi“. Cidden, biz her zaman bir çerçeve olarak akva geliştiririz.

Gelecek


akwa değişmeye devam ediyor. Onu yeniden saf bir çerçeve haline getirmek için yukarıda bahsedilen ayrıma ek olarak, onu genel olarak geliştirici arkadaşlarımız için daha kolay hale getirme planlarımız var. akwa şu anda bir projeye bir bağımlılık olarak dahil etmeniz ve bir derleme süreci (bizim durumumuzda şu anda Webpack) kullanarak oluşturmanız gereken bir npm deposudur, böylece CSS ve JavaScript bir noktada birbirinden ayrılır. Ön uç ormanına pek aşina olmayan iş arkadaşları için “bir an için akwa ile bir şeyler denemek” için hızlı bir kurulum mümkün değildir.

Bu arada, çerçeveyi yayınlamak için herhangi bir plan yok. İlk başta bunu bir noktada yapmanın mümkün olacağını düşündük, ancak şimdi bunun ihtiyaçlarımıza fazlasıyla uygun olduğunu fark ediyoruz. Akwa’nın nasıl geliştiğine bağlı olarak, zaman içinde akwa’nın ne hale geldiği hakkında burada blogda bir güncelleme verebiliriz.

Okurlarımızın önyüz çerçeveleriyle ilgili deneyimleri nelerdir? Kendinizinkini de geliştirdiniz mi veya her proje için tekrar memnuniyetle kullandığınız mükemmel açık kaynaklı önyüz çerçevesini buldunuz mu? Deneyimlerinizi ve düşüncelerinizi bu yazının forumunda bizimle paylaşmaktan çekinmeyin.


(hehe)



Haberin Sonu
 
Üst