$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

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

  3. None
  4. UI Framework?

  5. • Tasarımdan Bağımsız • Genişletilebilir • Küçük parçalar halinde kullanılabilir

    • HTML ve kurguyla ilgilenmez #thefrontiers @bcinarli
  6. Tasarımdan Bağımsız

  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
  8. Genişletilebilir

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

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

  11. • Birbiriyle uyumlu küçük parçalardan oluşur • Her parça kendi

    başına bağımsız çalışabilir #thefrontiers @bcinarli
  12. HTML ve Kurguyla İlgilenmez

  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
  14. UI Kit?

  15. • Ön tanımlı tasarıma sahip • Bütün bir set halindedir

    • HTML yapısı belli • JS içerebilir #thefrontiers @bcinarli
  16. Ön Tanımlı Tasarım

  17. • Hemen kullanım için bir tasarıma sahiptir • Buton, form,

    tablo gibi elemanların görsel tasarımları mevcut #thefrontiers @bcinarli
  18. Bütün bir set

  19. • Her kullanım için çözüm üretmeye çalışır • JS komponentlerini

    de içeren kompleks yapıya sahiptir #thefrontiers @bcinarli
  20. HTML Yapısı Bellidir

  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
  22. None
  23. Karanlık Taraf

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

    @bcinarli
  25. • Kodun temelini öğrenmeyi azaltıyor • İhtiyaçtan fazlasını sisteme yüklüyor

    • Performans problemlerine sebep olabiliyor #thefrontiers @bcinarli
  26. Popüler UI Kitler

  27. Bootstrap

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

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

  30. Materialize

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

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

  33. Foundation

  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

  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

  36. PureCSS

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

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

  39. Melange

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

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

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

  43. “When you look at the dark side, careful you must

    be. For the dark side looks back.” — Yoda #thefrontiers @bcinarli
  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
  45. Sorularınız? Merak ettikleriniz, detaylandırmak istedikleriniz…

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