bencede
New member
Heise online için yeni bir mimari: Janus – Bölüm 2
Son gönderide, arka uçta yeni Janus mimarimizde yapılan değişiklikleri açıkladık. Bugün ön yüz inovasyonlarına odaklanmak istiyoruz.
Heise online’ın ön ucu, uzun süredir tarihsel koşullar tarafından şekillendirildi. HTML::Template ve daha sonra Template Toolkit, Perl arka uç dilinden şablon motorları olarak ortaya çıktı. İkincisi, kullanışlı bir dizi özellik sunarken, yenilikler her zaman yavaş geliyordu.
Arka uçta Janus mimarisinin tanıtılmasıyla birlikte, ön ucu da revize etme fırsatı bulduk.
ReactSSR
Ön uç, React’e dayalıdır, ancak şu ana kadar yalnızca Sunucu Tarafında Oluşturulan (SSR). Heise online’ı oluşturan bireysel alanlar, açıkça ayrılmış bileşenler halinde yapılandırılmıştır ve sunucu tarafından önceden işlenmiş olarak teslim edilir. Tek tek bileşenler daha sonra bütün bir sayfa oluşturmak için bir araya getirilir. JSX veya TypeScript TSX ile bağlantılı olarak şablon dili olarak kullanılır.
Arka uçta olduğu gibi, bunun bizim için çok büyük faydaları var. Bir değişkenin her zaman var olduğunu varsayan ve daha sonra durum böyle olmadığında gizemli boş metin döndüren modeller: TSX ile tamamen imkansızdır, editör model oluşturma sırasında bir değişkenin yalnızca isteğe bağlı olsa ve bir kod ayarı.
bileşen geliştirme
Storybook’ta çeşitli özelliklere sahip bir makale modülü.
Bileşen geliştirme Storybook’ta gerçekleşir. Storybook, bileşenleri kapsüllenmiş bir şekilde geliştirmemizi ve olası tüm durumlara bakmamızı sağlayan bir araçtır. Storybook, bileşen parametrelerinin çeşitli veri türleri (örn. Boolean, String ve Number) için daha sonra ayrı ayrı uyarlanabilecek anahtarlar ve giriş alanları oluşturur. Efektler, bileşen üzerinde canlı olarak görüntülenebilir. Örneğin, iX’in bileşeni neye benziyor? Açılır menüden markanızı seçmeniz yeterlidir. Ve başlık uzadığında nasıl davranıyor? Sadece birkaç karakter daha yazın. Ve mobilde? Sadece kesme noktasını değiştirin ve bu soru zaten cevaplanmıştır.
Storybook’un önemli bir avantajı da işte teknik bir odaklanma olmadan meslektaşlarımıza bir bileşen sunabilmemiz ve onlara bakmaları ve test etmeleri için verebilmemizdir. Geçmişte, bazı varyantları “üretmek” veya bunları ekran görüntülerinde sunmak zorundaydık, ancak bu artık gerekli değil.
kuyruk rüzgarı
Tarza gelince, BEM (Block Element Modifier) şemasına dayanan el yazısı Sass’a veda ettik ve Janus’ta Tailwind’i seçtik. Yıllar geçtikçe, BEM yaklaşımıyla ilgili bizi giderek daha fazla rahatsız eden şey, sürekli “bir şeyleri adlandırıyor olmamız” ve kod tabanının sürekli büyümesiydi. Kuşkusuz, Tailwind’in de zorlukları var, ancak şu anda onları çok daha az ciddi buluyoruz (eğer bu değişirse, bu konuya bu blogda kesinlikle geri döneceğiz). Yeni mimarimiz için Tailwind’i kullanmaya karar vermeden önce, AMP sayfalarımızda bir ilk test gerçekleştirdik.
VS Code’da Tailwind otomatik önerileri.
Tailwind 3 ile tanıtılan JIT derleyicisi bize çok yakıştı. Geliştirme sırasında tüm CSS sınıfları başlangıçta bizim için kullanılabilir, ancak yalnızca kullanılan sınıflar son CSS dosyasında yer alır.
Düzenleyiciye (VS Code Extension aracılığıyla) başarılı entegrasyon sayesinde, Tailwind belgelerine nadiren göz atmanız gerekir. Örneğin, bir şirkette çalışıyorsanız class– veya. classNameözniteliği, siz yazdıkça eşleşen Tailwind sınıfları için öneriler otomatik olarak görüntülenir.
Arka uçta olduğu gibi, her şeyi yeni teknolojiye bir çırpıda geçirmedik. Geçiş aşamasında daha uzun süre karma modda çalışmaya devam edeceğiz. Örneğin, Haberler+ ana sayfasının neredeyse tamamı yeni mimariye dayalıyken, Haberler online ana sayfasının da önümüzdeki günlerde aynı şeyi yapması bekleniyor.
(hehe)
ana sayfaya