Kardan adamlar yaptım, hepsini kahramanım sandım. Avuçlarımda eridiler..

Angular Neden Kullanılmamalı?

Kategori: Bilgisayar | 27 Haziran 2017 de Enes Turan tarafından yazılmıştır.Ayrıca 767 Kere okundu.

Birçok “angular neden kullanılmalı” yazısı bulabilirsiniz ancak neden kullanılmaması gerektiğini anlatan bir yazıyı ben bulamadım, bari yazayım dedim 🙂

Tilki.co projemizde klasik web teknolojileri yerine yeni teknolojilerden faydalanalım istedik ancak klasik teknolojiler ile devam etmemiz ve kısmen yeni teknoloji kullanmamızın daha doğru olacağına karar verdim.

İlk önce bizim proje senaryomuz nedir bir bakalım; otel fiyatı karşılaştırması yapan, reklam ile gelir elde eden, son kullanıcıya yönelik, mobil öncelikli, Türkçe dili ile çalışan ve SEO ağırlıklı bir web sayfası yapmayı planlıyoruz.

Şimdi tek tek inceleyelim;

SEO Ağırlıklı Web Sayfası

Klasik teknolojilerde devam etmemiz gerektiğine karar vermemdeki en önemli etmen SEO konusu oldu. Angular, React, Polymer vb tüm javascript framework/kütüphaneleri SEO konusunda şüpheli durumdalar. Angular vb sistemler SPA (single page application / tek sayfalık uygulama) geliştirmek için hazırlanmış sistemler. Haliyle web sayfanızın kaynak koduna her hangi bir veri eklemeden kendi oluşturdukları sanal bir ortamda (virtual DOM) web sayfasını gösteriyorlar/render ediyorlar. Haliyle arama motoru botu siteye geldiğinde javascript kodlarını çalıştırmazsa hiç birşey göremiyor, içeriği alamıyor. Son zamanlarda google’ın javascript kodlarını çalıştırabildiğini söylüyorlar. Google’ın resmi blog sayfalarında da bu konudan bahsediliyor. Ancak biraz araştırınca konunun hiçte öyle olmadığını, SPA geliştiren birçok insanın SEO konusunda sıkıntı yaşadığını görebiliyoruz. Kimisi sayfa içeriğinden bahsediyor, kimisi meta bilgilerinden bahsediyor ve sonuç olarak bir problem var. E bizim gelişme kaydedebilmemiz için SEO yapmamız gerektiğine göre, yeni teknolojiler yerine klasik teknolojileri kullanmamız gerekli.

Son Kullanıcıya Yönelik Web Sayfası

Angular gibi sistemlerde ilk açılış ve ilk kullanılabilir hale gelme sürelerinde bazı sıkıntılar var. Bir kere yüklemeniz gereken dosyalar klasik teknolojilere göre daha yüksek boyutlu. Örneğin standart html, css, jquery ve bootstrap kullansanız 400-500 kb ile bitirebileceğiniz bir işi angular ile 1 mb civarından ancak çözebiliyorsunuz. Ayrıca şunu da belirmem gerekli; jquery ve bootstrap kütüphanelerini CDNler aracılığı ile kullandığınızda 100-200 kb ı 10-20 kb bile çekebilirsiniz. Örneğin jquery kütüphanesini google cdn’den çektiğinizi düşünelim. Sitenize gelecek olan kişi çok yüksek ihtimalle daha önce gittiği bir sayfada google cdn’den çekilen jquery kütüphanesi ile karşılaşmış ve tarayıcısı bu kütüphaneyi bilgisayara kaydetmiştir. Haliyle kişi sizin sayfanıza geldiğinde, siz aynı kütüphaneyi referans göstediğiniz için tarayıcı o dosyayı sunucudan hiç çekmeyecek, daha önce bilgisayara kaydettiği dosyayı kullanacaktır. Böylece toplam indirme boyutu azalmış olur. Haliyle sayfanın ilk kullanılabilir hale gelme süresi azalır. Örneğin kullanıcı 5 saniye bekleyeceğine 3 saniye bekler. Bir sayfanın 2 saniye daha erken açılmasının site gelirlerini %100 arttırdığına dair istatistikler mevcut. Siz angular kullanırsanız, javascript dosyaları sitenize özel olarak hazırlanır ve herhangi bir CDN kullanamazsınız. Haliyle sayfa 5 saniyede değil, 10 saniyede ancak açılır.

Başka bir konuda javascripy dosyalarının yorumlanma süreleri. Muhteşem bir optimizasyon yaptık ve herşeyin boyutunu küçültük vs, klasik teknolojiler ile aynı boyuta getirdik. Problem yine çözülmüyor. Şöyleki, standart bir html dosyasına “merhaba dünya” yazın ve sunucuya yükleyin. Sayfayı ziyaret ettiğinizde dosya içeriğini sunucudan çekildikten sonra çok kısa bir gecikmeden (0.1 saniye olsun) sonra sayfanız render edilir ve ekranda “merhaba dünya” yazısını görürsünür. Ancak Angular vb bir sistem ile aynı işi yapmak isterseniz bu gecikme süresi en azından 1-2 saniye olacaktır. Başka bir konu tarayıcı uyumluluğu; örneğin polymer ile bu işi yaparsanız chrome tarayıcıda gecikme süresi 0.5 saniye iken firefox’ta 5 saniye olacaktır.

Bizim senaryomuzda anlık tepki vermemiz gerektiği için klasik teknolojiler daha uygun olmaktadır.

Daha birçok konu sayabilirim ancak bu maddeler yeterli. Peki ne yapmalı?

Bence angular vb SPA sistemleri, kullanıcı adı ve şifre ile girilen sistemler için çok uygun. Kullanıcının giriş bilgilerini yazdığı ekranda tüm gerekli dosyaları önceden getir (prefetch) yaparak kullanıma hazır hale getirebilirsiniz. Ayrıca kullanıcı adı ve şifre ile girilen bir yerin 5-10 saniye içinde açılıyor olmasını kimse yadırgamaz.

Benim planım ne?

Tilki.co için klasik teknolojiler ile web sayfasını biran önce hazırlayacağım. Bunu yaparken masaüstü ve mobil ikisi bir arada olacak, yani responsive tasarım yapacağız. Ancak burada ajaxify tekniklerini kullanıp sistemin daha hızlı çalışmasını sağlayağım ve çeşitli json iletişim tekniklerini kullanıp sadece gerekli veriyi çekip kullanıcının bilgisayarında sayfayı render edeceğiz. Mobil tarafta ise PWA (progresive web app) nimetlerinden yararlanmamız gerekli. PWA için polymer kütüphanesini kullanacağız. Ancak yukarıda bahsettiğim üzere polymer chrome’da hızlı çalışırken diğerlerinden aynı şekilde çalışmıyor. Bu yüzden mobil tarafta chrome tarayıcı için polymer ile hazırlanmış bir sistem ve diğer tarayıcılar için responsive tasarım olmak üzere 2 farklı versiyon olacak. Google bot siteye geldiğinde standart siteyi görüp indeksleyecek, haliyle SEO konusunda bir sıkıntı yaşamayacağız.

Plan bu, gelişmeleri yazarım 🙂

Bilgisayar Mühendisi, Teknoarge Teknoloji Genel Müdürü ve bu sitenin medarı iftiharı :P Saygılar
EtiCanlar:

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*