- 21 Mar 2021
- 1,314
- 370
- Çevrimiçi zamanı
- 7d 8h 48m
- 153
- Best answers
- 0
- Oyuncu
- Metin2
Tek sayfalı uygulamalar (SPA'lar) ve Aşamalı web uygulamaları (PWA'lar) web'de devrim yaratıyor. Her ikisi de benzer görünen ama olmayan yeni teknolojiler. Yüz yüze, insanlar genellikle bunları birbirinin yerine kullanır.
Onları daha iyi anlamak için her birinin temel özelliklerini ve mimarisini inceleyelim.
SPA'lar, göründüğü gibi, içeriği dinamik olarak tek bir sayfada yükleyen web siteleridir. Özünde, etkileşim kurmanız gereken her türlü içerik ve öğe bir sayfada uzanır. Bu, böyle bir web sitesinde gezinirken ayrı Belge Nesne Modelleri (DOM'ler) yüklemeniz gerekmediği anlamına gelir.
Bununla birlikte amaç, kullanmaları ve görmeleri gereken her şeyi bir kerede yükleyerek kullanıcıları aynı sayfada tutmaktır. Bu, daha iyi bir kullanıcı deneyimi anlamına gelir.
Kullanıcı arayüzü ise SPA'nızı nasıl tasarladığınıza ve düzenlediğinize bağlıdır. Bu, uzatılmış sayfayı neden gezinmelere bölmek isteyebileceğinize bağlıdır. Ve bu, içerik hala yalnızca bir kez yüklendiğinden, tek bir sayfa olmasını engellemez.
Bu nedenle, bir SPA'da gezinirken, tek bir DOM'de önceden yüklenmiş içeriğe göz atıyorsunuz ve yanlış inandığınız gibi farklı DOM'leri ziyaret etmiyorsunuz.
Bir SPA'yı ayrı içerik bölümlerine bölmek, genellikle her birine JavaScript görünümlerini kullanarak bir URL vermeyi içerir. Veri bağlantı konnektörü ana DOM bu bölümleri bağlayan ve zaman uyumsuz bunlara erişmek için izin verir.
Mint ve elm-spa gibi diğer teknolojiler gelişiyor olsa da JavaScript, SPA'ları hazırlamak için hala en yaygın programlama dilidir.
JavaScript, bir giriş başka bir isteğin çıkışını engellemeden hem dinamik hem de statik içeriği eşzamansız olarak yüklemenizi sağlayan bir zaman uyumsuz/bekleme işlevi kullanır . Bu nedenle, SPA'lar bloke olmayan bir giriş-çıkış (I/O) sistemi üzerinde çalışır.
Bununla birlikte, ReactJS, Vue.js, AngularJS, Ember.js ve Backbone.js gibi JavaScript çerçevelerinin tümü SPA'ların hızlı gelişimini destekler. Başlamak için, bu yeni başlayanlar için Vue.js genel bakışını inceleyebilirsiniz.
Hız sağladığı için çoğu kurumsal uygulama, web sitelerini tek bir sayfaya dönüştürme fikrini benimsemiştir. Netflix, YouTube, PayPal, Facebook, Instagram, Twitter ve Pinterest, SPA örnekleridir.
PWA, işlevselliğinde standart ve gelişmekte olan web tarayıcı yönergelerini kullanan bir web uygulaması veya yazılımıdır. SPA'lardan farklı olarak PWA'lar, mimarilerini ölçeklenebilir, kullanıcı tarafından uyarlanabilir, süper hızlı, kurulabilir ve yerel benzeri yapan bir dizi yönergeye dayandırır.
2015 yılında Google tarafından tanıtılan bir PWA'nın amacı, doğrudan ve aşamalı olarak kullanıcılarıyla konuşan uygulamalar oluşturmaktır. Zayıf veya mevcut olmayan bir ağ bağlantısı olduğunda bile, kullanıcıların uygulama ile akışını sürdürmeyi amaçlar.
Her zaman bir PWA, ihtiyacınız olan her şeyi anında sunar. Bir SPA'nın tipik ilk içerik yükleme özelliğinden geçmez.
Sonuç olarak, bir kullanıcı uygulamayla yerelmiş gibi etkileşime girer. PWA'ların temel bir özelliği kurulabilirlik olmasına rağmen, bunlara herhangi bir kurulum yapmadan web tarayıcınız aracılığıyla anında erişebilirsiniz. Bununla birlikte, diğer herhangi bir web sitesi gibi, bir PWA'nın da bir URL'si olması gerekir.
Aşamalı web uygulamaları, içeriği göz açıp kapayıncaya kadar sunan arka plan yardımcılarına sahip olmaları bakımından benzersizdir. Bu nedenle, web uygulamasına geçmeden önce bile içerik ve bileşenler kullanmanız için hazırdır. Bu onları süper hızlı ve daha güvenilir yapar.
Spotify, Slack ve Uber gibi uygulamalar, diğerleri arasında PWA'lara örnektir.
PWA'ların genellikle ortak bir mimari kuralı vardır. Bir PWA'nın olması gerektiği gibi çalışması için aşağıdaki özelliklere sahip olması gerekir:
Bir söz nesnesi kullanarak , bir kullanıcı tarafından nihai bir istek olması durumunda (çevrimdışı olduklarında bile) bir çalışan önceden indirilmiş içeriği teslim edebilir. Ancak bir hizmet çalışanı, PWA'lara engelleyici olmayan bir özellik verir.
Her ikisi de duyarlı bir arayüz sağlayarak kullanıcı deneyimini iyileştirmeyi amaçlar.
Her ikisi de bir uygulama deneyimi sunduğundan, bunları karıştırmak kolaydır ve onlarla etkileşime geçtiğinizde hangisinin hangisi olduğunu hemen hemen anlayamazsınız. Son olarak, bu notta, erişebilmeniz için her ikisinin de bir URL'ye ihtiyacı vardır.
PWA'lar ve SPA'lar bazı göze çarpan ortak özellikleri paylaşabilir, ancak bunlar iki farklı şeydir. Dikkat etmeniz gereken temel özellik farklılıkları şunlardır:
Daha da önemlisi, PWA'ların benimsenmesi genel kullanıcı deneyimini iyileştirir ve sonuç olarak hemen çıkma oranlarını düşürür ve çoğu kurumsal uygulama için geliri artırır. SPA'lar ise sosyal medyayı canlandırarak, insanların ağır sayfa yüklemeleri olmadan web üzerinden etkileşim kurmasını kolaylaştırdı.
Onları daha iyi anlamak için her birinin temel özelliklerini ve mimarisini inceleyelim.
Tek Sayfa Uygulamaları Nelerdir?
SPA'lar, göründüğü gibi, içeriği dinamik olarak tek bir sayfada yükleyen web siteleridir. Özünde, etkileşim kurmanız gereken her türlü içerik ve öğe bir sayfada uzanır. Bu, böyle bir web sitesinde gezinirken ayrı Belge Nesne Modelleri (DOM'ler) yüklemeniz gerekmediği anlamına gelir.
Bununla birlikte amaç, kullanmaları ve görmeleri gereken her şeyi bir kerede yükleyerek kullanıcıları aynı sayfada tutmaktır. Bu, daha iyi bir kullanıcı deneyimi anlamına gelir.
Kullanıcı arayüzü ise SPA'nızı nasıl tasarladığınıza ve düzenlediğinize bağlıdır. Bu, uzatılmış sayfayı neden gezinmelere bölmek isteyebileceğinize bağlıdır. Ve bu, içerik hala yalnızca bir kez yüklendiğinden, tek bir sayfa olmasını engellemez.
Bu nedenle, bir SPA'da gezinirken, tek bir DOM'de önceden yüklenmiş içeriğe göz atıyorsunuz ve yanlış inandığınız gibi farklı DOM'leri ziyaret etmiyorsunuz.
Bir SPA'yı ayrı içerik bölümlerine bölmek, genellikle her birine JavaScript görünümlerini kullanarak bir URL vermeyi içerir. Veri bağlantı konnektörü ana DOM bu bölümleri bağlayan ve zaman uyumsuz bunlara erişmek için izin verir.
Mint ve elm-spa gibi diğer teknolojiler gelişiyor olsa da JavaScript, SPA'ları hazırlamak için hala en yaygın programlama dilidir.
JavaScript, bir giriş başka bir isteğin çıkışını engellemeden hem dinamik hem de statik içeriği eşzamansız olarak yüklemenizi sağlayan bir zaman uyumsuz/bekleme işlevi kullanır . Bu nedenle, SPA'lar bloke olmayan bir giriş-çıkış (I/O) sistemi üzerinde çalışır.
Bununla birlikte, ReactJS, Vue.js, AngularJS, Ember.js ve Backbone.js gibi JavaScript çerçevelerinin tümü SPA'ların hızlı gelişimini destekler. Başlamak için, bu yeni başlayanlar için Vue.js genel bakışını inceleyebilirsiniz.
Hız sağladığı için çoğu kurumsal uygulama, web sitelerini tek bir sayfaya dönüştürme fikrini benimsemiştir. Netflix, YouTube, PayPal, Facebook, Instagram, Twitter ve Pinterest, SPA örnekleridir.
Aşamalı Web Uygulamaları Nelerdir?
PWA, işlevselliğinde standart ve gelişmekte olan web tarayıcı yönergelerini kullanan bir web uygulaması veya yazılımıdır. SPA'lardan farklı olarak PWA'lar, mimarilerini ölçeklenebilir, kullanıcı tarafından uyarlanabilir, süper hızlı, kurulabilir ve yerel benzeri yapan bir dizi yönergeye dayandırır.
2015 yılında Google tarafından tanıtılan bir PWA'nın amacı, doğrudan ve aşamalı olarak kullanıcılarıyla konuşan uygulamalar oluşturmaktır. Zayıf veya mevcut olmayan bir ağ bağlantısı olduğunda bile, kullanıcıların uygulama ile akışını sürdürmeyi amaçlar.
Her zaman bir PWA, ihtiyacınız olan her şeyi anında sunar. Bir SPA'nın tipik ilk içerik yükleme özelliğinden geçmez.
Sonuç olarak, bir kullanıcı uygulamayla yerelmiş gibi etkileşime girer. PWA'ların temel bir özelliği kurulabilirlik olmasına rağmen, bunlara herhangi bir kurulum yapmadan web tarayıcınız aracılığıyla anında erişebilirsiniz. Bununla birlikte, diğer herhangi bir web sitesi gibi, bir PWA'nın da bir URL'si olması gerekir.
Aşamalı web uygulamaları, içeriği göz açıp kapayıncaya kadar sunan arka plan yardımcılarına sahip olmaları bakımından benzersizdir. Bu nedenle, web uygulamasına geçmeden önce bile içerik ve bileşenler kullanmanız için hazırdır. Bu onları süper hızlı ve daha güvenilir yapar.
Spotify, Slack ve Uber gibi uygulamalar, diğerleri arasında PWA'lara örnektir.
PWA'ların genellikle ortak bir mimari kuralı vardır. Bir PWA'nın olması gerektiği gibi çalışması için aşağıdaki özelliklere sahip olması gerekir:
1. Bir İşçi
Hizmet çalışanları, içeriği PWA'larda kolayca sunar. Ağ bağlantısı olmadığında uygulamanızın ilişkilendirilebilir önbelleğe alınmış verileri yükleyebilmesini sağlarlar. Bu, çevrimdışı isteklerinize verilen yanıtları depolayan Önbellek API'sinin yardımıyla mümkündür. Böylece, bir çalışan gezinmelere ve kullanıcı isteklerine müdahale eder.Bir söz nesnesi kullanarak , bir kullanıcı tarafından nihai bir istek olması durumunda (çevrimdışı olduklarında bile) bir çalışan önceden indirilmiş içeriği teslim edebilir. Ancak bir hizmet çalışanı, PWA'lara engelleyici olmayan bir özellik verir.
2. Güvenli Bir Bağlam
Hizmet çalışanı, teslim edilen içeriğin gizliliği için güvenli bir bağlantıya (HTTPS) ihtiyaç duyar. Bir istek gönderdiğinizde, bir çalışan PWA ile tarayıcı arasında güvenli iletişim kurar. Bu nedenle güvenli bir bağlam, PWA'larda ortadaki adam saldırısı (MITM) gibi gizlilik ihlallerini önler.3. Bir Web Uygulaması Manifest Dosyası
Web bildirimi, bir PWA'nın özelliklerini tanımlayan bir JSON dosyasıdır. Bir PWA içeriğine erişmek, keşfetmek ve kullanmak için ön koşulları detaylandırır. Genellikle uygulamanızın adını, URL'sini ve bileşenlerini içerir. Sonuç olarak, bir bildirim dosyası, web uygulamanızı yüklenebilir bir uygulamaya dönüştürmek için gerekli bilgileri içerir.PWA'lar ve SPA'lar Arasındaki Benzerlikler Nelerdir?
PWA'lar ve SPA'ların arka plan mantığı farklı olsa da, yine de birkaç ortak noktayı paylaşıyorlar. Teslimat hızları önemli ölçüde farklılık gösterse de, geleneksel web siteleri hala hız ve erişilebilirlik açısından geride kalmaktadır.Her ikisi de duyarlı bir arayüz sağlayarak kullanıcı deneyimini iyileştirmeyi amaçlar.
Her ikisi de bir uygulama deneyimi sunduğundan, bunları karıştırmak kolaydır ve onlarla etkileşime geçtiğinizde hangisinin hangisi olduğunu hemen hemen anlayamazsınız. Son olarak, bu notta, erişebilmeniz için her ikisinin de bir URL'ye ihtiyacı vardır.
SPA'lar ve PWA'lar Arasındaki Temel Farklılıklar
PWA'lar ve SPA'lar bazı göze çarpan ortak özellikleri paylaşabilir, ancak bunlar iki farklı şeydir. Dikkat etmeniz gereken temel özellik farklılıkları şunlardır:
Tek Sayfalı Uygulamaların Temel Özellikleri
- Bunlara yalnızca tarayıcı üzerinden erişilebilir.
- Tavsiye edilmemesine rağmen, bunları güvenli olmayan bir ağ (HTTP) üzerinden sunabilirsiniz.
- Servis elemanı gerektirmezler.
- SPA'ların bir JSON bildirim dosyası yoktur, bu da kaldırılabilir oldukları anlamına gelir.
- Tek sayfa olmalıdırlar.
- Ağ olmadığında erişilemez.
Aşamalı Web Uygulamalarının Temel Özellikleri
- Yüklenebilir olduklarından bunlara tarayıcı aracılığıyla erişmek bir seçenektir.
- Tüm PWA'ların hizmet çalışanlarına ihtiyacı vardır ve güvenli bir ağ (HTTPS) üzerinden istekte bulunmaları gerekir.
- Yanıtlar, bir söz nesnesi aracılığıyla önbelleğe alınır ve teslim edilir .
- Ağ bağlantısı olmadığında bile erişilebilirler.
- SPA'lardan daha hızlılar.
- Her zaman bir bildirim dosyasına sahiptirler, bu nedenle indirilebilir, kurulabilir ve kolayca erişilebilir durumdadırlar.
- Bir PWA, tek sayfalık bir uygulama olmayabilir.
SPA'lar ve PWA'lar Web Sitesi Teslimini Etkiliyor
Pek çok kurumsal web sitesi artık bu yeni teknolojileri benimserken, hizmet sunumuna doğru olumlu bir geçiş var.Daha da önemlisi, PWA'ların benimsenmesi genel kullanıcı deneyimini iyileştirir ve sonuç olarak hemen çıkma oranlarını düşürür ve çoğu kurumsal uygulama için geliri artırır. SPA'lar ise sosyal medyayı canlandırarak, insanların ağır sayfa yüklemeleri olmadan web üzerinden etkileşim kurmasını kolaylaştırdı.