Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Bilal Çınarlı
 Front-end Architect Senior UX Developer@Turkcell
 @bcinarli github.com/bcinarli

Slide 3

Slide 3 text

Siz?

Slide 4

Slide 4 text

Arayüz Atölyesi

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Başlamadan

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Arayüz Mimarisi

Slide 10

Slide 10 text

• 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?

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

• 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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

SASS

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Biraz Elimizi Kirletelim

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

• 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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Markup

Slide 24

Slide 24 text

• 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!

Slide 25

Slide 25 text

Tasarımı İnceleyelim

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Komponentler

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Komponentleri Planlama

Slide 30

Slide 30 text

• 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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Mimari’nin Temelleri

Slide 38

Slide 38 text

Front-end Kimdir?

Slide 39

Slide 39 text

• 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

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Tasarımı Yönetmek

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Reusable CSS

Slide 46

Slide 46 text

Single Responsibility Principle

Slide 47

Slide 47 text

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ı.

Slide 48

Slide 48 text

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ığı

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Bunu istemiyoruz!

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

…

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

…

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Seçim Sorunu

Slide 61

Slide 61 text

• İ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

Slide 62

Slide 62 text

CSS Seçiciler - Atomik Yaklaşım

Slide 63

Slide 63 text

• 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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

header .menu ul { }

Slide 67

Slide 67 text

.main-navigation { }

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

• 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

Slide 71

Slide 71 text

Slide 72

Slide 72 text

Kaynaklar

Lorem ipsum dolor…

Slide 73

Slide 73 text

Kaynaklar

Lorem ipsum dolor…

Slide 74

Slide 74 text

Kaynaklar

Lorem ipsum dolor…

Slide 75

Slide 75 text

• 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

Slide 76

Slide 76 text

…

Slide 77

Slide 77 text

…

Slide 78

Slide 78 text

…

Slide 79

Slide 79 text

…

Slide 80

Slide 80 text

İsimlendirme

Slide 81

Slide 81 text

• 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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

… … … …

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

… … … …

Slide 87

Slide 87 text

.main-navigation { }

Slide 88

Slide 88 text

.button-primary { }

Slide 89

Slide 89 text

İsimlendirme Yöntemleri

Slide 90

Slide 90 text

• 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ı

Slide 91

Slide 91 text

• Yandex! • Block / Element / Modifiers BEM Metodolojisi

Slide 92

Slide 92 text

…

Block

Slide 93

Slide 93 text

…

Element

Slide 94

Slide 94 text

…

Modifier

Slide 95

Slide 95 text

• 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

Slide 96

Slide 96 text

• 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

Slide 97

Slide 97 text

…

Block

Slide 98

Slide 98 text

…

Element

Slide 99

Slide 99 text

…

Modifier

Slide 100

Slide 100 text

… … … Örnek

Slide 101

Slide 101 text

…

…
Örnek

Slide 102

Slide 102 text

Tanım Sıralaması

Slide 103

Slide 103 text

• 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

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

Kod/Yeni Geliştirme Süreci

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

Layout

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

Layout Kurgusu Yoksa

Slide 111

Slide 111 text

Layout Kurgusu Olduğunda

Slide 112

Slide 112 text

Toparlarsak

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

• 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

Slide 115

Slide 115 text

Teşekkürler @bcinarli