Atomic Design Nedir? Atomic Design Prensipleriyle Angular Uygulama Geliştirme
Bu yazıda NGTurkey meetup’ında anlattığım Atomic Design Principles konusunu ve Angular tarafta nasıl ilerletildiğiyle alakalı örnek bir uygulama paylaştım.
Atomic Design UX’le beraber tasarlanması/planlanması gereken bir süreç, İlgili Analyst&Product ekipleri proje öncesinde atomic design prensiplerini bilerek, kullanarak projeleri oluşturmaya başlamalılar, buna paralel Tasarım ve Frontend ekipleri(bazı durumlarda backend ekipleri dahil) geliştirmelerini atomic design prensipleriyle yürütmesi gerekir. Girişte belirttiğim gibi bu yazıda Angular ile uygulama geliştirirken atomic design prensiplerinden nasıl faydalanırız ve ilerleyen süreçlerde projeyi daha hızlı ve daha doğru şekilde nasıl büyütürüz bu konulara değineceğim.
30 Martta NG Turkey tarafından düzenlenen Meetup’ta Atomic Design Prensipleriyle Angular Uygulama geliştirme konusunu sundum. NGTurkey olarak Amacımız sadece meetup yapmakla kalmayıp, makaleler yazıp, projeler geliştirip güçlü bir angular community’si oluşturmak. Her hafta Angular/Javascript hakkında yeni yazılar ekip üyeleri tarafından yayınlanıyor. Ayrıca Github’da yayınladığımız 2 tane çok iyi projemiz var, starlarınızı bekleriz; https://github.com/ng-turkey
Atomic Design Nedir?
Atomic design geliştirme aşamaları şunlardır :
- Atom
Atomlar en küçük temel iş parçacıklarıdır.
HTML etiketleri, Html elemanları; input, button, label gibi.
Soyutlanmış, yazı tipleri, renkler, animasyonlar, form alanları.
2. Molekül / Molecules
Bir grup atomun beraber kullanılabildiği, Organismaları oluşturan fonksiyonel iş parçacıklarıdır.
3. Organizma / Organisms
Molekül ve/veya atomların bileşiminden oluşan, görece daha kompleks komponent katmanıdır.
4. Şablonlar / Templates
Molekül ve/veya atomların bileşiminden oluşan, görece daha kompleks komponent katmanıdır.
5. Sayfalar / Pages
Molekül ve/veya atomların bileşiminden oluşan, görece daha kompleks komponent katmanıdır.
Atomik Design’i neden tercih etmeliyiz?
İçerikten bağımsız, çalışan uygulamalar elde ederiz.
— Component API
Tekrar kullanılabilir.
— Komponentleştirme sürecinde dikkat edilmesi gereken en önemli şey, tekrar kulllanılıp, kullanılmayacağıdır.
Dökümante etmeyi kolaştırır.
— Komponent seviyesinde yapılan geliştirmeler küçük iş parçacıklarıdır.
Test yazmayı kolaylaştırır.
— Dökümante edilirken yaşanan sürece benzer olarak, bu küçük iş parçacıklarını test etmek daha kolaydır. Kendi başına çalışmasını sağlarken aslında testlerini yazmış oluruz.
Yaşayan bir Style Guide elde ederiz.
— Klasik style guide’lar genellikle PDF ya da static dosyalar(JPG,PSD) olur. Bu style guide’larla çalışmak, versiyonlamak revizeler geldikçe uğraştırıcı bir hale bürünür.Ayrıca farklı ekranlar için bu tarz dosyaları dolaştırmak bir süre sonra iyice yönetilmez hale gelir. Yaşayan STYLE GUIDE, bizim için hem farklı ekranları aynı anda test edebileceğimiz hem de versiyonları, farklılıkları daha kolay takip edebilmemizi sağlar.
Aktarım kolaylığı
— Projeyi bir ya da birilerine aktarmak çok daha kolaydır.
Geliştirme süreci hızlanır.
— İzlenen komponentleştirme süreci doğru şekilde uygulandığında, yeni komponentler yazmak, sayfaları oluşturmak, gerçek datalar ile buluşturmak kolaylaşır, hızlanır.
Revize dostudur.
— Herhangi bir değişiklik, revize talebi, sizin ilgili komponentte değişiklik yaparak uygulama genelinde değiştirebilmenizi sağlar. Bu komponentler içerik bağımsız çalışabildiği için, komponent seviyesinde yaptığınız revize ve değişiklikler tüm uygulama da, uygulama genelinde değişir.
Sözü fazla uzatmadan geliştirdiğim Angular proje üzerinden atomic design konusuna bir giriş yapalım.
Beni twitterdan takip edebilirsiniz; https://twitter.com/mhmtakifalp
Küçük bileşenlerle uygulamanızı nasıl kurgularsınız?
Atomlar
Genişletilmiş Atomlar
Organisms — Molecules
- Siyah 1 — Login organisms
- Siyah 2 — Header organisms
- Kırmızı 1 — Search Molecules
- Kırmızı 2 — Nav Molecules
Komponent Isımlendirme Kuralları
- İlk kelime atom, organism, molecule, neyi temsil ettiğini belirtmelidir.
- İkinci kelime eleman type’ini belirtmelidir
- Kalan kısım ise ilgili komponenti açıklamalıdır.
— atoms-icon-arrow-to-btlr — BLTR = bottom, top,left,right
Library ve Yardımcı Araçlar
- Playground
— Playground atomic design takip ederken çok fazla yardımcı olacak ve işimizi görebilecek önemli librarylerden biri. Sandbox kavramı, componentleri, uygulamadan bağımsız çalıştırabilmemizi sağlar.
- Storybook
— Storybook popüler bir UI geliştirme ortamıdır. Angular, React, vue içinde libraryleri bulunmaktadır. Oluşturduğumuz componentleri uygulamadan bağımsız bir şekilde çalıştırıp/build alıp, test etmenizi sağlayan, aynı zamanda showcase görevi görür.
- Patternlab
Projenin tamamını github profilimde paylaştım; https://github.com/mehmetakifalp/atomic-design-presentation-ng-turkey
Sunumda daha detaylı aktarmıştım başlıkları, medium versiyonu biraz daha kısa.
Atomic Design Nedir? Atomic Design Prensipleriyle Angular Uygulama Geliştirme
Önerilen okumalar
1 — http://bradfrost.com/blog/post/atomic-web-design/
2 — Angular Playground, Storybook Güzel bir inceleme yazısı. https://medium.com/@mehmeterim/angular-playground-sa%C4%9Flam-bir-storybook-alternatifi-3f361cc19580
Bizi twitter’dan takip edebilir @ngTurkiye, yayınladığımız projeleri github hesabımızdan starlayıp, takip edebilirsiniz.
