Home-theater-designers
Single-page-applicaties (SPA's) en Progressive web-apps (PWA's) zorgen voor een revolutie op het web. Het zijn beide nieuwe technologieën die op elkaar lijken, maar dat niet zijn. In het gezicht gebruiken mensen ze vaak door elkaar.
Laten we ingaan op de kernfuncties en architectuur van elk van hen om ze beter te begrijpen.
Wat zijn toepassingen met één pagina?
SPA's, zoals ze klinken, zijn websites die inhoud dynamisch laden binnen een enkele pagina. In wezen strekt elke vorm van inhoud en element waarmee u interactie hebt, zich uit op één pagina. Dat betekent dat u bij het navigeren op zo'n website geen aparte Document Object Models (DOM's) hoeft te laden.
Dat gezegd hebbende, het doel is om gebruikers op dezelfde pagina te houden door alles wat ze nodig hebben om te gebruiken en te zien in één keer te laden. Dit vertaalt zich in een betere gebruikerservaring.
De gebruikersinterface hangt daarentegen af van hoe u uw SPA ontwerpt en inricht. Dit komt neer op de reden waarom u de uitgerekte pagina misschien wilt opsplitsen in navigatie. En dat weerhoudt het er niet van om een enkele pagina te zijn, omdat inhoud nog steeds maar één keer wordt geladen.
Dus wanneer u op een SPA navigeert, bladert u door vooraf geladen inhoud in een enkele DOM en bezoekt u niet verschillende DOM's zoals u misschien ten onrechte hebt gedacht.
Het opsplitsen van een SPA in afzonderlijke inhoudssecties houdt meestal in dat u elk van hen een URL geeft met behulp van JavaScript-weergaven. De data-link connector verbindt die secties met de hoofd-DOM en stelt u in staat om ze asynchroon te openen.
Hoewel andere technologieën zoals Als en iepenkuuroord komen eraan, is JavaScript nog steeds de meest gebruikte programmeertaal voor het maken van SPA's.
Gerelateerd: JavaScript-frameworks die het waard zijn om te leren
JavaScript gebruikt een asynchroon/wachten functie waarmee u zowel dynamische als statische inhoud asynchroon kunt laden zonder dat één invoer de uitvoer van een ander verzoek blokkeert. SPA's werken dus op een niet-blokkerend input-outputsysteem (I/O).
Dat gezegd hebbende, JavaScript-frameworks zoals ReactJS, Vue.js, AngularJS, Ember.js en Backbone.js ondersteunen allemaal de snelle ontwikkeling van SPA's. Om aan de slag te gaan, kun je dit beginnersoverzicht van Vue.js doornemen.
Omdat het snelheid geeft, hebben de meeste zakelijke apps het idee overgenomen om hun websites om te zetten in één enkele pagina. Netflix, YouTube, PayPal, Facebook, Instagram, Twitter en Pinterest zijn allemaal voorbeelden van SPA's.
Wat zijn progressieve web-apps?
Een PWA is een webtoepassing of software die standaard en opkomende richtlijnen voor webbrowsers gebruikt in zijn functionaliteit. In tegenstelling tot SPA's baseren PWA's hun architectuur op een aantal richtlijnen die ze schaalbaar, door de gebruiker aanpasbaar, supersnel, installeerbaar en native-achtig maken.
Geïntroduceerd in 2015 door Google, het doel van een PWA is om apps te bouwen die rechtstreeks en progressief met zijn gebruikers praten. Het is bedoeld om gebruikers met de app te laten stromen, zelfs als er een slechte of niet-bestaande netwerkverbinding is.
Steevast levert een PWA alles wat je nodig hebt in een handomdraai. Het doorloopt niet de typische initiële laadkarakteristiek van een SPA.
Bijgevolg communiceert een gebruiker vervolgens met de app alsof deze native is. Hoewel een kernkenmerk van PWA's de installeerbaarheid is, kunt u ze nog steeds on-the-fly openen via uw webbrowser zonder enige installatie. Dat gezegd hebbende, moet een PWA, net als elke andere website, ook een URL hebben.
Verwant: Wat zijn progressieve web-apps en hoe installeer je er een?
Progressieve web-apps zijn uniek omdat ze achtergrondhelpers hebben die inhoud in een oogwenk leveren. Dus zelfs voordat u naar de web-app gaat, zijn inhoud en componenten direct beschikbaar voor u om te gebruiken. Dat maakt ze supersnel en betrouwbaarder.
Apps als Spotify, Slack en Uber zijn voorbeelden van PWA's.
PWA's hebben over het algemeen een gemeenschappelijke architecturale regel. Om een PWA te laten functioneren zoals het zou moeten, moet het de volgende attributen hebben:
1. Een werker
Servicemedewerkers leveren content gemakkelijk in PWA's. Ze zorgen ervoor dat uw app herkenbare gegevens in de cache kan laden wanneer er geen netwerkverbinding is. Dit is mogelijk met behulp van de Cache API, die antwoorden op uw offline verzoeken opslaat. Een werknemer interfereert dus met navigatie en gebruikersverzoeken.
Verwant: Hoe werkt CPU-cache?
Gebruik maken van een belofte object kan een werknemer reeds gedownloade inhoud leveren in het geval van een eventueel verzoek van een gebruiker (zelfs wanneer deze offline is). Een servicemedewerker verleent echter een niet-blokkerende eigenschap aan PWA's.
2. Een veilige context
Een servicemedewerker heeft een beveiligde verbinding (HTTPS) nodig voor de vertrouwelijkheid van de aangeleverde content. Wanneer u een verzoek verzendt, brengt een werknemer beveiligde communicatie tot stand tussen de PWA en de browser. Een veilige context voorkomt daarom vertrouwelijkheidsschendingen zoals een man-in-the-middle-aanval (MITM) in PWA's.
3. Een webtoepassingsmanifestbestand
Een webmanifest is een JSON-bestand dat de kenmerken van een PWA definieert. Het beschrijft de vereisten voor het openen, ontdekken en gebruiken van de inhoud van een PWA. Het bevat meestal de naam van uw app, de URL en de componenten ervan. Uiteindelijk bevat een manifestbestand de informatie die nodig is om van uw webapp een installeerbare toepassing te maken.
Wat zijn de overeenkomsten tussen PWA's en SPA's?
Hoewel de achtergrondlogica van PWA's en SPA's anders is, hebben ze slechts een paar dingen gemeen. Hoewel hun bezorgsnelheid aanzienlijk kan verschillen, blijven conventionele websites qua snelheid en toegankelijkheid achter.
Ze zijn beide gericht op het verbeteren van de gebruikerservaring door een responsieve interface te bieden.
Omdat ze allebei een app-ervaring bieden, is het gemakkelijk om ze door elkaar te halen, en je kunt nauwelijks zien welke welke is wanneer je ermee communiceert. Ten slotte hebben beide een URL nodig voordat u ze kunt openen.
De belangrijkste verschillen tussen SPA's en PWA's
PWA's en SPA's kunnen enkele opvallende kenmerken gemeen hebben, maar het zijn twee verschillende dingen. Dit zijn de belangrijkste functieverschillen die u moet opmerken:
Belangrijkste kenmerken van toepassingen met één pagina
- Ze zijn alleen toegankelijk via de browser.
- Hoewel niet aanbevolen, kunt u ze bedienen via een onveilig netwerk (HTTP).
- Ze hebben geen servicemedewerkers nodig.
- SPA's hebben geen JSON-manifestbestand, wat betekent dat ze kunnen worden verwijderd.
- Ze moeten één pagina zijn.
- Niet toegankelijk als er geen netwerk is.
Belangrijkste kenmerken van progressieve web-apps
- Toegang tot ze via de browser is een optie, omdat ze kunnen worden geïnstalleerd.
- Alle PWA's hebben servicemedewerkers nodig en ze moeten verzoeken indienen via een beveiligd netwerk (HTTPS).
- Reacties worden in de cache opgeslagen en geleverd via a belofte object.
- Ze zijn zelfs toegankelijk als er geen netwerkverbinding is.
- Ze zijn sneller dan SPA's.
- Ze hebben altijd een manifestbestand, dus ze kunnen worden gedownload, geïnstalleerd en gemakkelijk toegankelijk zijn.
- Een PWA mag geen applicatie van één pagina zijn.
SPA's en PWA's beïnvloeden de levering van websites
Nu veel zakelijke websites deze nieuwe technologieën gebruiken, is er nu een positieve verschuiving in de richting van hun dienstverlening.
Wat nog belangrijker is, is dat de acceptatie van PWA's de algemene gebruikerservaring verbetert, wat bijgevolg de bouncepercentages verlaagt en de inkomsten voor de meeste zakelijke apps verhoogt. Aan de andere kant hebben SPA's ook sociale media verjongd, waardoor het voor mensen gemakkelijk is om via internet te communiceren zonder dat de pagina's traag worden geladen.
hoe geanimeerde wallpaper windows 10 te hebbenDeel Deel Tweeten E-mail Synchrone versus asynchrone programmering: hoe verschillen ze?
Moet u synchrone of asynchrone programmering gebruiken voor uw volgende project? Ontdek het hier.
Lees volgende Gerelateerde onderwerpen- Programmeren
- Programmeren
- App-ontwikkeling
Idowu is gepassioneerd door alles wat slimme technologie en productiviteit betreft. In zijn vrije tijd speelt hij met coderen en schakelt hij over naar het schaakbord als hij zich verveelt, maar hij vindt het ook heerlijk om af en toe uit de routine te stappen. Zijn passie om mensen de weg te wijzen in moderne technologie motiveert hem om meer te schrijven.
Meer van Idowu OmisolaAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren