E-ticarette Yazılım ve Altyapı
Startup Heroes, Developers
We Made IT Possible
Software and Hardware Help Desk Saving %40 Time for IT teams
Hazır Yazılım Deri ceket gibidir, hep birşeylerin ekliğini hisedersin.
Before going down Proactive Monitoring
‘Mükemmel iyinin düşmanıdır’, Voltaire
‘Engineering is nothing but optimization’
Yazılım, yaşayan bir organizmadır... İhmale gelmez.
In IT Complete Solution means, Agile Swat Teams
Bu sunumda başarılı bir uygulamanın kodlamadan, pazarlama aşamasına kadar hangi süreçlerden geçmesi gerektiğini anlatmaya çalıştım. Umarım beğenirsiniz.
E-ticarette Yazılım ve Altyapı
Startup Heroes, Developers
We Made IT Possible
Software and Hardware Help Desk Saving %40 Time for IT teams
Hazır Yazılım Deri ceket gibidir, hep birşeylerin ekliğini hisedersin.
Before going down Proactive Monitoring
‘Mükemmel iyinin düşmanıdır’, Voltaire
‘Engineering is nothing but optimization’
Yazılım, yaşayan bir organizmadır... İhmale gelmez.
In IT Complete Solution means, Agile Swat Teams
Bu sunumda başarılı bir uygulamanın kodlamadan, pazarlama aşamasına kadar hangi süreçlerden geçmesi gerektiğini anlatmaya çalıştım. Umarım beğenirsiniz.
DECE Yazılım, çözüm ortaklarıyla birlikte büyümeyi hedefliyoruz. yapay Zeka tabanlı rekabetçi ürünlerimiz, klasik yazılımların genellikle başarısız olduğu birçok sorunu kolayca çözüyor. Yapay Zeka denince hepimiz dikkat kesiliyoruz, ama çoğunda arkası gelmiyor. Biz gerçek uygulamalar ile karşınızdayız. Ürünlerimiz üzerine kurulu pek çok uygulama dünya çapında çalışmaya devam ediyor. Büyüyen DECE ailesine katılmak için iletişime geçin!
https://www.dece.com.tr/tr/iletisim
Yasayan Bir Organizma: YAZILIM - YTU-KVK Finans ve Yazilim Gunleri - 18.11.2013Hakan ERDOGAN
Yıldız Teknik Üniversitesi Kalite ve Verimlilik Kulübü tarafından düzenlenen Finans ve Yazılım Günleri'13 (#finansveyazilimgunleri) etkinliğinde yaptığım sunum. Yaşayan Bir Organizma: Yazılım
Uygulama diline karar vermek: HTML5 mi, Native mi yoksa Hibrit uygulama mı?mobilike
Türkiye'nin mobil sektör dergisi madreport'un Q1 2013 sayısı çıktı! İçerisinde yer alan "Uygulama diline karar vermek: HTML5 mi, Native mi yoksa Hibrit uygulama mı?" konusunu sunumdan inceleyeblirsiniz.
madreport'ta yayınlanan diğer konulara linke tıklayarak ulaşabilirsiniz. goo.gl/6LdTL
ProductTank İstanbul'un ikinci meetup'ında Invertiv'in kurucusu Akar Şümşet ürün yönetimi framework'ünü ve bu framework'te metotları nasıl kullandığını uygulamalar ile anlattı.
DECE Yazılım, çözüm ortaklarıyla birlikte büyümeyi hedefliyoruz. yapay Zeka tabanlı rekabetçi ürünlerimiz, klasik yazılımların genellikle başarısız olduğu birçok sorunu kolayca çözüyor. Yapay Zeka denince hepimiz dikkat kesiliyoruz, ama çoğunda arkası gelmiyor. Biz gerçek uygulamalar ile karşınızdayız. Ürünlerimiz üzerine kurulu pek çok uygulama dünya çapında çalışmaya devam ediyor. Büyüyen DECE ailesine katılmak için iletişime geçin!
https://www.dece.com.tr/tr/iletisim
Yasayan Bir Organizma: YAZILIM - YTU-KVK Finans ve Yazilim Gunleri - 18.11.2013Hakan ERDOGAN
Yıldız Teknik Üniversitesi Kalite ve Verimlilik Kulübü tarafından düzenlenen Finans ve Yazılım Günleri'13 (#finansveyazilimgunleri) etkinliğinde yaptığım sunum. Yaşayan Bir Organizma: Yazılım
Uygulama diline karar vermek: HTML5 mi, Native mi yoksa Hibrit uygulama mı?mobilike
Türkiye'nin mobil sektör dergisi madreport'un Q1 2013 sayısı çıktı! İçerisinde yer alan "Uygulama diline karar vermek: HTML5 mi, Native mi yoksa Hibrit uygulama mı?" konusunu sunumdan inceleyeblirsiniz.
madreport'ta yayınlanan diğer konulara linke tıklayarak ulaşabilirsiniz. goo.gl/6LdTL
ProductTank İstanbul'un ikinci meetup'ında Invertiv'in kurucusu Akar Şümşet ürün yönetimi framework'ünü ve bu framework'te metotları nasıl kullandığını uygulamalar ile anlattı.
3. Yüksek trafikli web sitelerinde
front-end mimarisi ve dijital dönüşüm
3
● Hürriyet
● Bigpara
● Mahmure
● Hürriyet Aile
● Spor Arena
● Milliyet
● Posta
● Fanatik
● Dsmart
● Cnn Türk
18. FE yapısı nasıl olmalı?
18
● Ortak font kullanmalıyız
● Daha hızlı yazmak için mixin oluşturmalıyız
● Daha temiz kod için variables tanımlamalıyız
● Front-end standartları oluşturmalıyız
22. Task runner <Gulp>
Front-end tarafında bazı şeyleri otomatize etmek için Gulp kullanıyoruz,
Nedir bu Gulp, ne gibi avantajları var.
22
● Minify, Uglify
● Image Optimization
● Sass
● Icon Font
● Concat
● Image Sprite
23. Front End Standartları:
● Sitilleri alfabetik olarak yazın
● Büyük harf kesinlikle kullanmayın
● Semantik kod kullanın (a, h1, ul)
● Alt ve Title etikenleri kullanmaya özen gösterin
● Html yapısının iyi okunması için girintilere dikkat edin
● Html içindeki attribute’lerde çift tırnak kullanın
● Id ve class isimlerini mümkün olduğunca kısa tutun
● ‘0’ kullandığınızda birim belirtmeyin
23
Merhaba,
Ben Ersin Kaya, Hürriyet’te Sr. Front-end Developer olarak çalışıyorum. 6. yıldır buradayım. YTÜ Bilgisayar Programcılığı mezunuyum.
Hobi olarak başladım
Hayatımın parçası oldu
Severek yaptığım iş
Yüksek trafikli web sayfası nedir?
Elimizde hangi projeler vardı, artık hangileri var
Bugün sizlere Hürriyet’te Front-end Mimarisi önceden nasıldı?
Şuanda ne durumda,
Gelecekte neleri hedefliyoruz
Umarım keyifli bir sohbet olur, şimdiden hepinize çok teşekkür ederim.
Html yapımız çok karışıktı, her yeni iş için yeni html yazılıyordu buda proje genelinde kod kalabalığı yaratıyordu.
Sitiller düz css ile yazılıyordu, aynen html’de olduğu gibi her bir yeni geliştirme için yeni css yazılıyordu, 10binlerce satıra çıkan sitil dosyaları mevcuttu, ki projelerimizin birçok yere dokunduğu için hala tamamından kurtulmuş değiliz
Yine css ile ilgili olarak, her developer sitilleri kendi alışık olduğu düzene göre yazıyordu. Birbirimizin kodunu anlamakta zorlanıyorduk.
Tasarımlar photoshopta geliyordu, onları developer’lar kesiyordu, dosya boyutları çok büyük olabiliyordu, imaj kaliteleri bozulabiliyordu.
Bir script yazmak gerektiğinde genellikle daha önce yazılmış varsa onu çoğaltılıp kullanılıyordu, ya da internetten benzerleri bulunup editleniyordu.
Bir iş bittiğinde test edilmes için, işin varsa sahibini çağırıp, işi yapan developer’ın makinasından test ediyordu :)
Ve buna benzer, zamanında gayet normal gibi görünen ama bugün geriye baktığımızda bizi gülümseten, hatta hey gidi günler dedirten bir çok yapı daha önce Hürriyet’te denenmiş.
Yüksek trafikli internet sitelerinin FE yapılarını araştırdık.
Daha sonra kendi yapımıza hangisinin daha iyi uyum sağlayabileceğine karar verdik.
Son olarak hangi teknolojilerin bizim yapımızda daha sağlıklı ve hızlı çalıştığını araştırıp, uygulamaya geçmeye karar verdik.
Neydi bu kararlar
Öncelikle her ürünün bir tasarımcısı ve yöneticisi var, bu kişilerle çok yakın çalışmalıyız.
Ürün şekillenip tasarımcı işe başlamadan önce bizde bu işe dahil olmalıyız, teknik analizini yapıp, hem tasarımcının işini kolaylaştırmalıyız, hemde işin development’a başladığında bir daha geriye dönme ihtimalini azaltmalıyız.
Sonraki slide: İş süreçleri ->
Tasarımlar her developer’a ayrı ayrı gelmemeli, ortak bir tasarım altyapısı kullanmalıyız. Tasarım ve ürün ekibininde destekleriyle ilk olarak Adobe Creative Cloud, daha sonra bir türk girişimi olan Zeplin ve son olarak Avocode kullanmaya başladık.
Bir iş başlanmadan önce ortak/benzer alanlar tespit edilip, kod genel için yazılmalı.
Scrpit kullanımını minimuma indirmeliyiz. Mümkün olduğunca scriptleri kendimiz temiz ve anlaşılır yazmalıyız ve daha az 3th party script kullanımına izin vermeliyiz. Şuanda swiper kullanıyoruz. bir çok slider tipini kaldırdık.
Bir grid yapımız olmalı, bootstrap’in grid yapısı bize uygun olduğu için bunu kullanmaya karar verdik. Html ve css oluşturulurken mobile-first kavramı dikkate almaya başladık.
Seo uyumlu kod yazmaya başladık.
“Mobile first” stratejisi demek, inşa ettiğiniz yapının odağına mobil cihazları ve bunları kullanan kullanıcıları oturtmak demektir.
Yazdığımız kod kontrol edilmeli. Bazı developer arkadaşlarımızın öncülük etmesiyle code-review sürecini başlattık.
Yazdığımız kodları versiyonlayabilmek için GIT kullanmaya başladık.
Yazdığımız kod kontrol edilmeli. Bazı developer arkadaşlarımızın öncülük etmesiyle code-review sürecini başlattık.
Yazdığımız kodları versiyonlayabilmek için GIT kullanmaya başladık.
Gulp, Grunt, Webpack, Yeoman
Minify: css dosyalarını minimize etmeye yarıyor
Uglify: js dosyaları minimize ve karmaşık hale getiriyor.
Image Optimization: imajların boyutlarını optimize ederek istenilen klasöre kaydedebiliyoruz
Sass: scss kod yazabiliyoruz
Icon Font: Svg eklediğimiz imajları fonta çeviriyor
Concat: Js dosyalarını birleştirmeye yarıyor
Image Sprite: imajları birleştirip sprite yapıyor
Vs vs vs