$30 off During Our Annual Pro Sale. View Details »

UI Kitlerin Karanlık Yüzü

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ı

Bilal Çınarlı

June 20, 2015
Tweet

More Decks by Bilal Çınarlı

Other Decks in Programming

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