Drupal'ın Tek Dizin Bileşeni ile bileşen tabanlı tema oluşturma

Drupal teması, radikal bir güncellemenin uzun süredir dokunmadığı bir alan olmuştur. Elbette iş akışını biraz daha kolaylaştırmak için tonlarca katkıda bulunulan modül var, ancak özel bir tema oluşturmak için kullanıma hazır yaklaşım aşağı yukarı aynı kaldı. Uzun süredir Drupal çekirdeğinin içinde bir tür bileşen tabanlı tema mekanizmasına sahip olmakla ilgili gevezelikler var. Önde gelen Drupal katkıda bulunanlar - Mateu Aguilo Bosch, Mike Herchel, Lauri Eskola ve Dave Reid tarafından yürütülen, katkıda bulunulan bir modül aracılığıyla bir süredir tartışılan Tek Dizin Bileşenleri (SDC) girin. Ancak şimdi, 10.1 sürümünde Drupal'ın çekirdeğine (şu anda deneysel bir özellik olarak) girmiştir.

Bir Drupal uygulamasını temalandırmaya yönelik bu bileşen tabanlı yaklaşım yeni değil, ancak sonunda çekirdeğe ulaştı. Ön uç geliştiricilere, kodlarını minimum öğrenme eğrisi ile daha sürdürülebilir bir şekilde düzenlemeleri için yepyeni bir sınır sağlar. SDC içinde, bileşeni işlemek için gerekli tüm dosyalar (Twig, CSS, JS, vb.) tek bir dizinde gruplandırılmıştır. SDC, Drupal'ın sağlam ve ileriye dönük bir CMS olarak konumunu sağlamlaştırarak, geliştiricilerin en son ön uç tekniklerinden yararlanmalarını sağlayarak Drupal'da ön uç geliştirmede devrim yaratma potansiyeline sahiptir.

Drupal'ın mevcut tema yaklaşımı

Bir Drupal teması üzerinde çalışmanın en basit yolu, işaretlemeyi şablon klasörlerinin içindeki html.twig dosyalarına eklemek olmuştur. Stil ve davranış için, bir varlığın ihtiyacına göre CSS ve JS dosyaları oluşturur ve bunları sırasıyla CSS ve JS klasörlerinin içine yerleştiririz. Buna tema başlığı menüsü, alt bilgi menüsü, bloklar, bölgeler, tek tek içerik türleri ve bunların farklı görünüm modları, farklı görünümler vb. Bu şekilde talep üzerine yüklenebilir veya küresel olarak kullanılabilir hale getirilebilir. Bunun dışında, herhangi bir ön işleme mantığı .theme dosyalarına giriyor, duyarlı tasarımlara yardımcı olmak için breakpoints.yml'ye sahibiz ve tabii ki .info.yml dosyası olmadan tüm çaba boşa gidiyor.

Bu, bazı yararlı önyüz işlerini gerçekten yapmadan önce yapılması gereken çok iş gibi görünse de, bir temanın klasör yapısını etkileşimli bir şekilde oluşturmayı ve bir standart drupal klasör yapısı.

Yukarıdaki yapı, bir proje başlatmak için yeterince iyi çalışmasına ve küçük bir proje için sorun teşkil etmemesine rağmen, daha karmaşık bir tasarım sisteminin entegre edilmesi gereken kurumsal web siteleri için bir darboğaza dönüşebilir.

1. İşler çok hızlı bir şekilde karışmaya başlar. Klasörlerinde ağzına kadar dolu birçok CSS ve JS dosyası görüyoruz.
2. Geliştiriciler, yeniden kullanabilecekleri veya genişletebilecekleri kodu bulmakta zorlanıyor.
3. Kod çoğaltma, dosyalara yayılan kod, özgüllük cehennemi ve CSS çakışmaları gibi sorunlar ortaya çıkar.
4. Bu genellikle, ilk geliştirmenin daha sonra yardımcı olmasının beklendiği sonraki geliştirme için daha fazla çaba harcanmasına yol açar.

Specbee'de temaya yaklaşımımız

Specbee'de, sıfırdan geliştirdiğimiz ve açık kaynaklı Drupal Theme Init adlı bir NPM aracını kullanarak temalarımızı nasıl oluşturduğumuzu standart hale getirdik. Bir Yeoman oluşturucu olarak, NPM/Yarn ile kolayca kurulabilir ve bu daha sonra etkileşimli olarak özel bir temanın oluşturulmasına yardımcı olur. Drupal Theme init fikri, Drupal uygulamalarını takiben tema dosyalarının nasıl yapı iskelesi oluşturduğuna dair tutarlı bir yaklaşıma sahip olmak ve geliştiricilerin her yeni projeye başladıklarında dosyaları ayarlama zahmetine girmeden tema üzerinde çalışmaya başlamalarına yardımcı olmaktır. Yapının temel fikri, BEM sözleşmesini kullanarak SASS'ı bileşenlere ayırmaktır. Blok, görünüm, içerik türü vb. bir varlıkla ilişkili her CSS dosyasının kendi CSS'si oluşturulur ve dal şablonu veya ön işleme yoluyla bu varlığa eklenir. Aynısı JS dosyaları için de geçerli. Library.yml'nin kapsamlı kullanımı, sayfada oluşturduğumuz CSS ve JS miktarını sınırlamamıza yardımcı olur.

Temayı bu şekilde kurmanın avantajı, herhangi bir harici kitaplığa veya eklentiye bağlı olmadan bileşen tabanlı tema oluşturmak için bir sistemimizin olması. Sayfaya yüklenecek bileşenlere göre CSS/JS kitaplıklarını ayırmamıza yardımcı olur, bu da performansa yardımcı olur. Ancak, özellikle proje boyut olarak büyüdüğünde, bu yaklaşımın hala sınırlamaları vardır. Bileşenlerin atomik seviyelere ayrılması, library.yml dosyasını gerekli bağımlılıklarla korumamızı gerektirdiğinden biraz külfetli hale gelir. Ayrıca, bir tasarım sisteminin mevcut yapıya düzgün bir şekilde entegrasyonunu kolayca yapmanın kolay bir yolu yoktur, çünkü bileşenleri yüklemek için tasarım sisteminde de her bir bileşen yolunu ve bağımlılığını kendimiz tanımlamamız gerekecektir.

Bileşen tabanlı tema nedir?

Vanilya yaklaşımı oldukça basit görünse de, son zamanlarda daha iyi yaklaşımlara sahip olmak için katkıda bulunan modüller aracılığıyla çok büyük ilerlemeler kaydedilmiştir. Popüler yaklaşımlardan biri, kullanıcı arayüzünü bileşenler adı verilen yeniden kullanılabilir ve tutarlı birimlerin bir koleksiyonu olarak hayal etmektir. Çoğu durumda bu, her bileşenin daha küçük yapı taşlarına ayrıldığı Atomik Tasarım'ı izler. UI Modelleri, Bileşenler gibi modüller! veya PatternLab, Fractal ve Storybook gibi bileşen kitaplıkları, temaların geliştirilmesini daha düzenli ve sağlam hale getiren yenilikçi yöntemler getirmiştir. Bileşen tabanlı temanın, geleneksel temaya göre belirli bir üstünlüğü vardır:

1. En büyük darboğazlardan biri, ön uç çalışmasının Arka Uç çalışması olmadan başlayamadığı arka uç bağımlılığıdır. Bu bir gecikme yaratır. Bileşen tabanlı bir yaklaşım kullanan ön uç, bağımsız olarak ve Drupal hakkında çok fazla derin bilgiye sahip olmadan çalışabilir.
2. Bileşenler, gerekli yer tutucularla yalnızca mevcut tasarımdan oluşturulabilir. Bu yer tutucuların değerleri daha sonra arka uç çalışması tamamlandığında doldurulabilir.
3. Şablonlar klasöründeki işaretlemeyi değiştirmediğimiz ve gereksinime göre biçimlendirdiğimiz bir iş akışı oluşturur. Bunun yerine, ayrı ayrı biçimlendirilmiş daha küçük yapılarımız var ve ardından bu daha küçük birimlerin bir koleksiyonunu Drupal şablonları tarafından kullanılabilen daha büyük bileşenler halinde oluşturuyoruz.
4. Bu, her bileşenle ilgili kodu ayrı ayrı korumaya yardımcı olur ve daha az yan etki olasılığı yaratır.
5. Uygulama genelinde UX tutarlılığını onaylar.
6. Tek bir yerde yapılan değişiklikler, kullanıldığı alanlara da yansıdığından, özelliğin kurulumu için harcanan emeğin azaltılmasına yardımcı olur.

Drupal'da bileşen tabanlı tema nasıl yapılır?

Bileşen tabanlı geliştirmeyi takip etmenin öne çıkan yollarından biri, bir süre önce kullanıma sunulan PatternLab'ı kullanmaktır. Başlangıçta, şimdi arşivlenen ve düğüm tabanlı bir paketle değiştirilen bir Drupal sürümüyle geldi. PatternLab kurulumu, Drupal için şablonlar klasörünün dışındaki Twig dosyalarından işaretlemenin alınmasına yardımcı olacak bir Bileşenler modülünün kurulmasını gerektirir. Bunu, dal veya bıyık tabanlı şablonlar (tabii ki bizim için dal) oluşturma seçenekleri sunan npm aracılığıyla patternlab paketinin yüklenmesi izler. Bu yapıldıktan sonra, hazır bir hesaplayıcı stil kılavuzumuz, stil kılavuzunun oluşturulmasına yardımcı olan bazı ortak kodlarımız ve gereksinimlere göre bileşenleri oluşturduğumuz bir desenler klasörümüz var. Bu bileşenler daha sonra şablonlar klasöründe bulunan html.twig dosyalarına dahil edilir.

Tüm bu adımların gerçekleştirilmesi iyi olsa da, bunun ayarlanmasının biraz zor olduğu ve biraz öğrenme eğrisine sahip olduğu durumlar vardır. Patternlab ile gelen en büyük dezavantaj, tüm CSS'nin daha sonra tüm sayfalara dökülen tek bir dosyada toplanmasıdır (bazen JS'nin dahil olduğu durum da böyledir). Temel fikir bileşenin yeniden kullanılabilirliği olduğu için bu başlangıçta önemli olmasa da, proje büyüdükten sonra bu sayfa performansını etkilemeye başlar.

SDC ile bileşen tabanlı tema oluşturma nasıl yapılır?

SDC'nin ilk sürümünün deneysel bir modül olarak çekirdeğe girmesiyle, çevresinde çok fazla heyecan yaşandı. SDC, Twig'in piyasaya sürülmesinden bu yana Drupal temasındaki en büyük değişiklik olarak lanse edildi. SDC yine Ön Uç Geliştirme ekibi için eksiksiz bir çözüm değil, kullanıma hazır temel yapıyla tema oluşturmaya yönelik bileşen odaklı bir yaklaşımdır. Bu, belirli bir tür iş akışı için bir dizi modülle genişletilebilir. Temel fikir, bir bileşenle ilgili her şeyin tek bir dizinde kalmasıdır. Buna Bileşen Twig dosyası, JS, CSS, diğer varlıklar ve bileşenin özelliklerini bildiren tek bir şema YAML dosyası dahildir.

SDC kullanmanın bazı acil faydaları:

1. Bir bileşenle ilgili tüm kodlar tek bir dizindedir (adından da anlaşılacağı gibi!).
2. Bileşen için kitaplıklar otomatik olarak oluşturulur, bu da bileşenin library.yml dosyasında bildirilmemesi nedeniyle daha az travmaya yol açar. Bağımlılıkları component.yml dosyasına eklememiz gerekebilir, ancak bu, library.yml dosyasına atlamak yerine tek bir yerde yapılıyor.
3. SDC'yi uygulamak için çok daha küçük bir öğrenme eğrisi vardır. Drupal temasının temellerini biliyorsanız, tek yapmanız gereken bu modülü etkinleştirmek ve bileşenleri yazmaya başlamak.
4. Dalın gücü (include/extend/embed) hala mevcuttur ve bu da kodun yeniden kullanılabilirliğine yardımcı olur.
5. Bileşenler, Drupal tarafından kolayca keşfedilebilen ve aynı API yapısına sahip bir bileşenle kolayca değiştirilebilen YML eklentileridir.
6. Bileşenler, oluşturma dizileri aracılığıyla da oluşturulabilir!
7. Bir Tasarım sistemini kolaylaştırmak için harici kitaplıkları entegre etmek için iyi bir mekanizma sağlar.
8. Bileşenler organize edildiğinden, bunun sonucu, son ürünün tutarlı bir görünümü ve hissi olur.
9. Bağımsız olarak test edilebilen birimlerimiz (okuma bileşenleri) olduğu için kod daha test edilebilir hale gelir
10. Şemayı bir bileşenin YAML tanımı içinde tanımladığımız için, modüller verileri doldurmak için otomatik olarak formlar oluşturabilir.

Şu anda çekirdekte deneysel bir özellik olarak yer almasına rağmen, SDC'yi kurmak oldukça kolaydır. Bir Drupal 10.1.x kurulumu olduğunu varsayarsak:

1. Deneysel SDC çekirdek modülünü etkinleştirin.

2. SDC eklemek için özel bir tema oluşturun veya kullanın. Amacımız için, temel tema olarak Olivero ile Dondurma adlı özel bir tema oluşturduk.

3. Amacımız için kutudan çıkan temel sayfayı kullanalım. Özel bir Başlık alanı ekleyerek ve daha sonra şöyle görünen ekranda bazı ayarlamalar yaparak onu yeniden tasarladım:

4. Şablon dal dosyası temel koddan oluşur:

5. Özel temanızın içinde bileşenler adlı bir klasör oluşturun. Bu, Drupal şablonları için bir şablonlar klasörümüz olmasına benzer.

6. Şimdilik temel fikir, doğada yeniden kullanılabilir olacak şekilde başlık ve açıklama stili oluşturmaktır. Simple-article adlı bir bileşen oluşturalım. Gereksinim duyacağımız simple-article.component.yml dosyası ve simple-article.twig olacak. Bunun dışında ayrıca stiller için simple-article.css ekleyeceğiz.

7. Simple-article.twig dosyasını oluşturalım. Bunun için temel bir işaretlememiz olacak.

8. https://www.drupal.org/node/3352951 adresinde belirtilen şemaya sahip simple-article.component.yml dosyasını ekleyin. Fikir, twig dosyasına girdilerin ne olacağını tanımlamaktır. Bizim için şöyle bir şeye benzeyecek:

9. simple-article.css içindeki bileşene bazı temel stiller ekleyelim.

10. Önbelleği temizleyin.

11. Abrakadabra! Bileşen artık kullanıma hazırdır. Ama yine de kullanılması gerekiyor. Bu olmadan bileşen, bileşenler klasöründe boşta kalır.

12. Bu bileşeni [tema_adı:bileşen-adı] biçiminde gerekli şablon dosyasına (bu, özel temadaki şablonlar klasörünün altındaki html.twig dosyasıdır) ekleyin. Bileşende kullanılacak twig değişkenlerini eklediğimiz içerme ifadesine dikkat edin.

13. Bileşen artık yeni işaretlememiz ve daha iyi stilimizle işleniyor.

14. İşaretlemeye dikkat edin. Dal hata ayıklama etkinleştirilirse, işlenen SDC bileşenimizle birlikte bazı özel simgeler de alırız.

Ve bu kadar!

Referanslar

• https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/about-single-directory-components
• https://www.drupal.org/project/sdc
• https://herchel.com/articles/creating-your-first-single-directory-component-within-drupal

Son düşünceler

SDC'nin inşa edilme şekliyle, çevresinde yüksek yoğunluklu bir gelişme olacak. Popüler yollardan biri, modüllerin bileşenleri otomatik olarak algılayıp ilgili formlarını Layout Builder, CKEditor, Paragraflar, Bloklar, Alanlar vb. Buna ek olarak, SDC şu anda CL Sunucusu adı verilen katkıda bulunan bir modül (SDC proje sahipleri tarafından sürdürülen) aracılığıyla Storybook ile iyi oynuyor. Halihazırda CL Devel, CL Generator ve hatta UI Patterns gibi SDC etrafında inşa edilen başka modüller var.

Bu ayrıca, daha önce tartıştığımız kendi tema oluşturucumuzu (Drupal Theme Init) yerinde bir Tasarım Sistemiyle birlikte SDC'yi, tercihen Storybook'u kullanma seçeneği sunmak için yükseltmemize yardımcı olacaktır. Bu, herkesin SDC uygulamasını anında başlatmasına yardımcı olacak ve daha iyi tema geliştirmenin önünü açacaktır.

Drupal'da buna benzer daha fazla ilginç içerik okumak istiyorsanız, bugün haftalık bültenimize abone olun!