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
2. Bilal Çınarlı
 Front-end Architect Senior UX Developer@Turkcell
 @bcinarli github.com/bcinarli bcinarli.com
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
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