Yönetilebilir Arayüz Mimarisi

Web ve Mobil için arayüz geliştirirken yönetilebilir kod hazırlamanın önemi

Transcript

1. Yönetilebilir Arayüz Mimarisi
   Web, Mobil ve Karmaşık Sistemler için HTML/CSS
   

   View Slide

2. Bilal Çınarlı

   Front-end Architect
   Senior UX Developer@Turkcell

   @bcinarli
   github.com/bcinarli
   

   View Slide

3. Siz?
   

   View Slide

4. Arayüz Atölyesi
   

   View Slide

5. • Tasarımı Nasıl Ele Almayız?
   • Tekrar Kullanılabilirlik
   • Seçiciler
   • İsimlendirme / Gruplama
   • Kod tekrarlarını azaltma
   Neler Yapacağız?
   

   View Slide

6. Başlamadan
   

   View Slide

7. Chat Odası
   http://tlk.io/arayuz2015
   Çalışmalar İçin
   https://jsfiddle.net
   http://codepen.io/
   

   View Slide

8. • Text editor
   • Sass
   • Photoshop (Size bağlı)
   • Github
   Gün Boyu İhtiyacınız Olabilecekler
   

   View Slide

9. Arayüz Mimarisi
   

   View Slide

10. • Sistemler ve takımlar büyüdü
    • Arayüz geliştirme karmaşıklaştı
    • Çok fazla tarayıcı ve cihaz çeşitliliği
    • Sayfalardan uygulamalara geçildi
    Neden?
    

    View Slide

11. View Slide

12. View Slide

13. • Daha kolay ve hızlı çalışma
    • Daha akıllıca çalışma
    • Daha kısa öğrenme/adapte olma süresi
    • Daha kolay yönetim ve geliştirme
    Hedef
    

    View Slide

14. View Slide

15. SASS
    

    View Slide

16. • Fonksiyonlar
    • Değişken
    • Modüler Çalışabilme
    

    View Slide

17. Biraz Elimizi Kirletelim
    

    View Slide

18. $ git clone https://github.com/bcinarli/scalable-frontend-architecture.git arayuz2015
    GitHub
    

    View Slide

19. View Slide

20. • Klasörünüzü Prepros ya da Codekit içine ekleyin
    • “styles-sass/styles.scss” dosyasını “styles/styles.css” şeklinde çıktı
    vermeye ayarlayın
    Prepros/Codekit
    

    View Slide

21. View Slide

22. Çalışma (5 dakika)
    Örnek repoyu inceleyelim, istediğiniz kod örneğini ve denemeyi yapın
    

    View Slide

23. Markup
    

    View Slide

24. • Sayfa mimarisinin temeli
    • Bütün sunum ve etkileşim katmanını etkiler
    • Karmaşık kurguların kolay uygulanmasını sağlar ya da kabus haline
    gelmesine neden olur!
    

    View Slide

25. Tasarımı İnceleyelim
    

    View Slide

26. View Slide

27. Komponentler
    

    View Slide

28. • Sayfaları unutun
    • Sayfalar içindeki komponentleri düşünün
    • Komponentleri birleştirerek sayfaları oluşturuyoruz
    

    View Slide

29. Komponentleri Planlama
    

    View Slide

30. • Bir tane komponenti ele alın
    • Kullanım yapısını düşünün
    • Aynı yapıyı başka elemanlarda arayın
    • Farklı noktaları ayırın
    • Benzer noktaları ortak tanımlayın
    

    View Slide

31. Çalışma (10 dakika)
    Tasarımdaki ana menümüzü oluşturalım
    

    View Slide

32. View Slide

33. Çalışma (Beraber)
    Menü için hazırladığımız yapıyı başka nerde kullanabiliriz?
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. Mimari’nin Temelleri
    

    View Slide

38. Front-end Kimdir?
    

    View Slide

39. • OOCSS - Arayüz geliştirmeye mühendis bakış açısı
    • Kurgu - Sadece renkleri ekleyen değil, akışı planlayan
    • Adaptive - Sürekli değişen/güncellene teknoloji ve sistemlere hızlı
    çözüm üretebilen
    

    View Slide

40. View Slide

41. Tasarımı Yönetmek
    

    View Slide

42. Öğeleri Nasıl Sadeleştirebiliriz?
    Benzer görünüme sahip elemanları en sade şekilde tanımlama
    

    View Slide

43. View Slide

44. Çalışma (Beraber)
    Ögeler için genel grupları en sade haliyle planlayalım
    

    View Slide

45. Reusable CSS
    

    View Slide

46. Single Responsibility Principle
    

    View Slide

47. Object Oriented Programlamada, bütün ortamlar (class, function,
    variable vs), sadece bir işlemden sorumlu olmalı ve bu işlem o ortamın
    içinde başlayıp sonlanmalı.
    

    View Slide

48. Tanımlanan her stil, temel anlamda her zaman bir iş için tanımlanmalı
    ve her zaman o iş için uygun kullanılmalı
    CSS’de Karşılığı
    

    View Slide

49. View Slide

50. Bunu istemiyoruz!
    

    View Slide

51. View Slide

52. Başlıksız, kırmızı arkaplan, beyaz metin
    Widget - Banner
    

    View Slide

53. 
    …
    
    

    View Slide

54. • Widget
    • Beyaz Metin
    • Kırmızı Arkaplan
    Widget - Banner
    

    View Slide

55. widget-banner”>
    …
    
    

    View Slide

56. • Daha sade kodlama
    • Tekrar kullanılabilen kod bloklarına sahip olma
    • Farklı tanımları bir arada kullanabilme avantajı
    Single Responsibility Principle
    

    View Slide

57. Çalışma (Beraber)
    Tasarım’dan SRP kullanımlarını inceleyelim
    

    View Slide

58. View Slide

59. View Slide

60. Seçim Sorunu
    

    View Slide

61. • İyi kurgulanmamış tanımlarda sayfaya göre küçük değişiklikleri olan
    komponentleri düzenleme zorlaşmaktadır
    • İstenilen görünüm vermek için çok spesifik seçiçi tanımı
    gerekmektedir
    • Kod tekrarı artar, dolayısıyla kontrol zorlaşır
    

    View Slide

62. CSS Seçiciler - Atomik Yaklaşım
    

    View Slide

63. • Tahmin edilebilir - isimleri, tanımları ile yaptıkları uyumlu olmalı
    • Tekrar kullanılabilir - farklı ögeler için de kullanılabilmeli
    • Stabil olmalı - eklendiği ögeyi etkilerken başka bir ögeyi bozmamalı
    • Düşük Spesifiklikte olmalı - bir ögeye “nokta atışı” yapmamalı
    Uyulması Gerekenler
    

    View Slide

64. • * (global selector)
    • a, div (tag selector)
    • [class*=“like”], [class^=“like”], [class$=“like”], [class~=“like”]
    • .class, .media
    • #unique
    

    View Slide

65. Belki de bütün kötü kodun temeli!
    Spesificity
    

    View Slide

66. header .menu ul { }
    

    View Slide

67. .main-navigation { }
    

    View Slide

68. View Slide

69. Anlamlı/Anlaşılır Tanımlar
    

    View Slide

70. • HTML - tanımları itibariyle anlamlı ve makine/tarayıcı için bir ifadeye
    sahiptir
    • Class - cihaz için anlamlı değildir, insanın okuyup, anlamlandırması
    için tanımlanır, subjektiftir
    

    View Slide

71. 
    
    
    

    View Slide

72. 
    Kaynaklar
    Lorem ipsum dolor…
    
    

    View Slide

73. 
    Kaynaklar
    Lorem ipsum dolor…
    
    

    View Slide

74. 
    Kaynaklar
    Lorem ipsum dolor…
    
    

    View Slide

75. • Class ismi verirken görünümden bahsetmek gereksizdir
    • Tanımın yapıtığı iş/eyleme göre isimlendirmek her zaman daha
    doğrudur
    Anlamlı/Anlaşılır Tanımlar
    

    View Slide

76. 
    …
    
    

    View Slide

77. 
    …
    
    

    View Slide

78. …
    

    View Slide

79. …
    

    View Slide

80. İsimlendirme
    

    View Slide

81. • Her zaman kafa patlatıcı bir iş olmuştur
    • Programlamadaki en zor işlerden biri olarak düşünülür
    • Düzgün yapıldığında her zaman değerli olur
    

    View Slide

82. • Görünümden çok işlevselliğe odaklanmalı
    • İş güdüsel olmalı
    • Farklı ögelere uygulanabilir olmalı
    İsimlendirme Nasıl Yapılmalı
    

    View Slide

83. 
    …
    …
    …
    …
    
    

    View Slide

84. Çalışma (Beraber)
    Tasarımımızdaki anlamlı ögeleri bulalım
    

    View Slide

85. • Tasarımdaki ögelerin özelleşmiş durumlarıdır
    • Objelere göre daha tanımlayıcı isimleri olabilir
    Componentler
    

    View Slide

86. 
    …
    …
    …
    …
    
    

    View Slide

87. .main-navigation { }
    

    View Slide

88. .button-primary { }
    

    View Slide

89. İsimlendirme Yöntemleri
    

    View Slide

90. • Elemanın ne işe yaradığını anlatmalı
    • Elemanın ek özelliğe sahip olup olmadığını anlatmalı
    • Elemanın hangi durumda olduğunu anlatmalı
    

    View Slide

91. • Yandex!
    • Block / Element / Modifiers
    BEM Metodolojisi
    

    View Slide

92. 
    …
    
    Block
    

    View Slide

93. 
    …
    
    Element
    

    View Slide

94. 
    …
    
    Modifier
    

    View Slide

95. • Elemanın ne olduğunu anlatıyor
    • Markup ve CSS içinde elemanların ilişkisini gösteriyor
    • Tanımları bir namespace içine ekliyor
    BEM Metodolojisi
    

    View Slide

96. • Tanıtım ayraçlarından hoşlanmıyorsanız
    • modifier için kullanılan “- -“ tanımı
    • element için kullanılan “__” tanımı
    BEM Metodolojisi - Alternatif
    

    View Slide

97. 
    …
    
    Block
    

    View Slide

98. 
    …
    
    Element
    

    View Slide

99. 
    …
    
    Modifier
    

    View Slide

100. 
     …
     …
     …
     
     Örnek
     

     View Slide

101. 
     …
     …
     
     Örnek
     

     View Slide

102. Tanım Sıralaması
     

     View Slide

103. • Spesifikliğin yanında, tanım kurgusu da overwritelerı azaltır.
     • Piramidin durumuna göre yazılan kodlar, SRP kullanımını arttırır.
     • Tanım kurgusu içinde ilk en üstteki kodlar genel kullanım içindir
     • En altta kalan tanımlar ise, atomik yapıda, ögeye ya da duruma özel
     kodlardır
     

     View Slide

104. View Slide

105. Kod/Yeni Geliştirme Süreci
     

     View Slide

106. • Bir sürü dosya
     • Farklı klasörler
     Kod Kurgusu
     

     View Slide

107. View Slide

108. Layout
     

     View Slide

109. • Bir bütün olarak düşünülmeli
     • Elemanların kendi genişlikleri yerine bulundukları yerler planlanmalı
     • Grid sistem ile karıştırmamak önemli
     

     View Slide

110. Layout Kurgusu Yoksa
     

     View Slide

111. Layout Kurgusu Olduğunda
     

     View Slide

112. Toparlarsak
     

     View Slide

113. View Slide

114. • Her zaman html ögesini olabilecek en sade yapı ile kurgulayın
     • CSS seçicileri kısa, düşük spesifiklikte ve tekrar kullanılabilir olacak
     şekilde tanımlayın
     • Küçük parçaları yönetmek daha kolaydır, kodunuzu küçük bloklara
     bölerek yönetin
     • Uygulamayı bir bütün olarak düşünüp, her zaman tekrar kullanım ve
     extend etmeyi planlayarak çalışın
     

     View Slide

115. Teşekkürler
     @bcinarli
     

     View Slide