UI Kitlerin Karanlık Yüzü

Hayatımızı kolaylaştıran UI Kitlerin bazen işlerimizi zorlaştırmasının önüne geçmek için kullanacağımız frameworkler nasıl olmalı

Transcript

1. Arayüz Kitlerinin Karanlık Yüzü
   İşi Hızlandırırken, Kaybettiklerimiz
   

   View Slide

2. Bilal Çınarlı

   Front-end Architect
   Senior UX Developer@Turkcell

   @bcinarli
   github.com/bcinarli
   bcinarli.com
   

   View Slide

3. View Slide

4. UI Framework?
   

   View Slide

5. • Tasarımdan Bağımsız
   • Genişletilebilir
   • Küçük parçalar halinde kullanılabilir
   • HTML ve kurguyla ilgilenmez
   #thefrontiers @bcinarli
   

   View Slide

6. Tasarımdan Bağımsız
   

   View Slide

7. • Her işin/projenin özgün tasarımı var
   • İhtiyaç olmayan tasarımsal kodlardan arınmış
   • Genel layout ve eleman tanımlarını içerir
   #thefrontiers @bcinarli
   

   View Slide

8. Genişletilebilir
   

   View Slide

9. • Ön tanımlı yapıları kullanılarak yenileri oluşturulabilir
   #thefrontiers @bcinarli
   

   View Slide

10. Küçük parçalar halinde kullanılabilir
    

    View Slide

11. • Birbiriyle uyumlu küçük parçalardan oluşur
    • Her parça kendi başına bağımsız çalışabilir
    #thefrontiers @bcinarli
    

    View Slide

12. HTML ve Kurguyla İlgilenmez
    

    View Slide

13. • Sadece genel tanımlara sahiptir
    • HTML yapısının tasarıma göre değiştiğini göz önüne alır
    • Tanımlarının HTMLden bağımsız çalışmasını sağlar
    #thefrontiers @bcinarli
    

    View Slide

14. UI Kit?
    

    View Slide

15. • Ön tanımlı tasarıma sahip
    • Bütün bir set halindedir
    • HTML yapısı belli
    • JS içerebilir
    #thefrontiers @bcinarli
    

    View Slide

16. Ön Tanımlı Tasarım
    

    View Slide

17. • Hemen kullanım için bir tasarıma sahiptir
    • Buton, form, tablo gibi elemanların görsel tasarımları mevcut
    #thefrontiers @bcinarli
    

    View Slide

18. Bütün bir set
    

    View Slide

19. • Her kullanım için çözüm üretmeye çalışır
    • JS komponentlerini de içeren kompleks yapıya sahiptir
    #thefrontiers @bcinarli
    

    View Slide

20. HTML Yapısı Bellidir
    

    View Slide

21. • Ön tanımlı tasarım uygun çalışan HTML
    • Form kurgusunun nasıl olacağını tanımlar
    • Hata mesajı, tablo gibi yapıları tanımlar
    #thefrontiers @bcinarli
    

    View Slide

22. View Slide

23. Karanlık Taraf
    

    View Slide

24. “Fear is the path to the darkside” — Yoda
    #thefrontiers @bcinarli
    

    View Slide

25. • Kodun temelini öğrenmeyi azaltıyor
    • İhtiyaçtan fazlasını sisteme yüklüyor
    • Performans problemlerine sebep olabiliyor
    #thefrontiers @bcinarli
    

    View Slide

26. Popüler UI Kitler
    

    View Slide

27. Bootstrap
    

    View Slide

28. #thefrontiers @bcinarli http://cssstats.com/stats?link=http%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.1%2Fcss%2Fbootstrap.min.css&name=Bootstrap
    

    View Slide

29. #thefrontiers @bcinarli http://cssstats.com/stats?link=http%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.1%2Fcss%2Fbootstrap.min.css&name=Bootstrap
    

    View Slide

30. Materialize
    

    View Slide

31. #thefrontiers @bcinarli http://cssstats.com/stats?url=http%3A%2F%2Fmaterializecss.com%2F&name=Materialize
    

    View Slide

32. #thefrontiers @bcinarli http://cssstats.com/stats?url=http%3A%2F%2Fmaterializecss.com%2F&name=Materialize
    

    View Slide

33. Foundation
    

    View Slide

34. #thefrontiers @bcinarli http://cssstats.com/stats?link=http%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Ffoundation%2F5.4.7%2Fcss%2Ffoundation.css&name=Foundation
    

    View Slide

35. #thefrontiers @bcinarli http://cssstats.com/stats?link=http%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Ffoundation%2F5.4.7%2Fcss%2Ffoundation.css&name=Foundation
    

    View Slide

36. PureCSS
    

    View Slide

37. #thefrontiers @bcinarli http://cssstats.com/stats?link=http%3A%2F%2Fyui.yahooapis.com%2Fpure%2F0.5.0%2Fpure-min.css&name=Pure%20CSS
    

    View Slide

38. #thefrontiers @bcinarli http://cssstats.com/stats?link=http%3A%2F%2Fyui.yahooapis.com%2Fpure%2F0.5.0%2Fpure-min.css&name=Pure%20CSS
    

    View Slide

39. Melange
    

    View Slide

40. #thefrontiers @bcinarli http://cssstats.com/stats?link=https%3A%2F%2Fraw.githubusercontent.com%2Fbcinarli%2Fmelange-sample%2Fmaster%2Fassets%2Fstyles%2Fstyles.css
    

    View Slide

41. #thefrontiers @bcinarli http://cssstats.com/stats?link=https%3A%2F%2Fraw.githubusercontent.com%2Fbcinarli%2Fmelange-sample%2Fmaster%2Fassets%2Fstyles%2Fstyles.css
    

    View Slide

42. Işığa Çıkış
    

    View Slide

43. “When you look at the dark side, careful you must be. For the dark
    side looks back.” — Yoda
    #thefrontiers @bcinarli
    

    View Slide

44. • Her tasarım özeldir ve özel ihtiyaçlara sahiptir
    • Kendi alt yapınızı oluşturun
    • Sass/Less ile UI Frameworkleri kullanın
    • Hangi tanımın neden yapıldığını anlayarak kodların
    • İhtiyacınız olmayan tanımı/kodu sisteme eklemeyin
    #thefrontiers @bcinarli
    

    View Slide

45. Sorularınız?
    Merak ettikleriniz, detaylandırmak istedikleriniz…
    

    View Slide

46. Teşekkürler
    Bilal Çınarlı
    @bcinarli
    

    View Slide