2 hafta önce Google I/O 17 etkinliğinde Chrome geliştiricilerinden Addy Osmani sahne almıştı. Performans-öncelikli Progressive Web Uygulamaları (PWA) oluşturma için yeni geliştirici araçlarınının tanıtımını yapmıştı.

Progressive Web Uygulamaları (PWA) konusunda detaylı bilgi edinmek isterseniz geçtiğimiz günlerde Devnot’ta yayınlanan bu yazıyı incelemenizi öneririm.

Her geliştirici, kendi seçtiği framework’ün daha performanslı olmasını ister, fakat bu tür bir çalışma için kimse kendi zaman ve kaynağını körü körüne ayırmak istemez. Bu projeler ise gerçek bir takım ruhunun ürünü ve topluluğa gerçekten büyük katkıda bulunan birçok insan bu değerli çalışmaların üzerinde hayli bir çaba harcıyor. Yüksek hızlı bir framework’ü baz alan performansa sahip bir uygulama oluşturmaya başlamak, geliştiricilerin bu heyecan verici çatıların sunduğu verim ve ergonomi ile birlikte yarattığı uygulamaların, kullanıcı deneyimi ve uygulama hızı gibi kriterlerden maksimum oranda fayda elde etmesini sağlıyor.

Bu değerli geliştirim ortamlarının önemi ve faydalarından bahsettikten sonra dilerseniz şimdi Addy’nin sunumundan öne çıkan başlıkları ele alalım.

Sunumda öne çıkanlar

Addy kendi sunumunda, HackerNews sitesini baz alarak çeşitli PWA framework’ler ile geliştirilen uygulamalarını toplandığı HNPWA adındaki siteden bahsetti. Ve daha sonra Twitter ve diğer birkaç büyük firmanın bu framework’leri kullanarak kendi sitelerini PWA olarak tekrar kodladığına ve edindikleri performansa görsel istatistikler ile yer verdi. Addy’nin bahsettiği bu çalışma hikayelerinin altında yatan ve daha iyi bir web deneyimi için öne çıkan konular <link rel="preload" ../>, requestIdleCallback() ve HTTP2 Server Push oldu. Hangi kaynağın ilk işleneceği hakkında PRPL pattern üzerine değinirken pattern’ın açıklamasını da aşağıdaki şekilde gerçekleştirdi:

• Pushing: İlk URL isteği için istemciye uygulama için en önemli/kritik olan kaynakları gönder.
• Rendering: Başlangıç rotasını dns-prefetch‘ler ile render et.
• Pre-caching: Service worker‘lar kullanarak kaynakları cache’le.
• Lazy-loading: Sayfanın kritik yerlerini öncelikli olarak yükle, daha sonra kalan kısımlarını yüklemeye başla.

5 saniye içerisinde interaktif hale gelen mobil sayfalar ile pek çok performans kazanımları gerçekleşiyor. Framework’ün kendisi üzerinde oluşan yükün azaltılması ile de geliştiricinin 5 saniye içerisinde daha çok iş yapma imkanı bulunuyor.

Sunumda bahsedilen framework’leri yakından inceleyelim.

React

React’te create-react-app komutuyla oluşturulan uygulamaların varsayılan olarak PWA desteğinin olmasıydı. PWA desteği sayesinde React uygulamaları:

• Offline öncelikli önbellekleme için Service Worker’lara sahip oldu,
• Dinamik import() fonksiyonu ile code-splitting (kod ayırma) özelliği kazandı,
• Hatalar için yardımcı katmanlar sunabildi,
• Daha iyi Console çıktılarına sahip oldu. Daha ayrıntılı detaylar için React blogunu inceleyebilirsiniz.

Preact

React’in daha lightweight sürümü olan Preact kanadında ise artık Preact CLI‘ın olması ve komut satırı üzerinden kolayca Preact projelerinin oluşturulabilmesine olanak sağlanmasıydı. Projenin README.md dosyasındaki hoş özelliklerin yanısıra oluşturulan uygulamanın 100/100 Lighthouse skoruna sahip olması gerçekten çok tatmin ediciydi.

Eğer Preact‘i daha önce duymadıysanız size biraz bahsedeyim. React ile aynı API üzerine kurulu 3KB’lık boyutunun olmasının yanısıra, React bileşenleri ve virtual DOM gibi özellikleri içermesiyle oldukça hızlı bir React alternatifi olma özelliğini taşıyor. React’e benziyor fakat dosya boyutunun küçük olmasının merkezinde ise yazılım tasarımının yattığını söyleyebiliriz. Tek dezavantajı ise, doğası gereği küçük bir yapıda olmasından dolayı bazen React ekosistemi ile birebir uyum sağlaması için biraz uğraş gerektirebiliyor olması.

Bahsettiğimiz gibi, Preact tartışmasız bir şekilde kazananı oynuyor. İlerleyen zamanlarda geliştirici topluluğunun Preact üzerine yoğunlaşması hiç de sürpriz olmayacak gibi görünüyor.

Vue

Vue da yenilikçi JavaScript frameworkleri kervanında geliştiricilerini yüz üstü bırakmadı. Vue CLI üzerinden kolayca PWA uygulamaları oluşturmayı sağlayan vue init pwa şablonunu duyurdu.

Sunduğu yenilikler arasında dinamik import() ile kod ayırma desteğini vermesi, offline önbellekleme için service worker kullanması, preload ve prefetch edilebilen JavaScript parçaları sunması göze çarpıyor.

Eğer daha önce Vue ile ilgilenmediyseniz Vue’ın resmi sitesine bakmanızı öneririm. Vue oldukça iyi bir geliştirim ortamı ve Vue ile yazılan uygulamaların lighthouse skorları oldukça yüksek olmakta. Bu iş akışı sayesinde kolayca gösterişli ve büyük çaplı uygulamalar geliştirimine olanak sağlıyor.

Sonuç olarak

PWA’lerin yükselişi gerçekten hızlı gerçekleşiyor. Firefox ve Safari de ServiceWorkers gibi deneysel teknolojileri de bu sene içerisinde bünyesine dahil ederek PWA desteğini sunma niyetindeler. PWA uygulamalarındaki hızlı artış ve bu tip uygulamaların giderek benimsenmesiyle birlikte sizin de kendi uygulamanızı/web sitenizi PWA’e geçirmenizin vakti geldi diyebilirim.

Sunumda burada anlatmadığım birçok farklı framework de tanıtıldı. Addy’nin sunumuna youtube üzerinden erişebilmeniz mümkün. Daha sonraki yazımızda görüşmek üzere sağlıcakla kalın.