webtoepassingen vervangen onbewust de oude bureaubladtoepassingen. Ze zijn handiger in gebruik, ze zijn gemakkelijk bij te werken en ze zijn niet aan één apparaat gebonden. En hoewel gebruikers voorzichtig bewegen van browser-gebaseerde webapplicaties naar de mobiele, de vraag naar complexe en verfijnde apps is al enorm en groeit nog steeds., Als u denkt over het maken van uw eigen applicatie, je hebt waarschijnlijk gehoord dat er twee belangrijkste ontwerppatronen voor web apps: multi-page applicatie (MPA) en single-page applicatie (SPA). En natuurlijk hebben beide modellen hun voor-en nadelen.

voordat u begint met het omzetten van uw idee in de echte toepassing, moet u een aantal belangrijke vragen beantwoorden. Om te beslissen welk app-model is beter voor u, moet u content-first aanpak te volgen, die het belang van het zetten van uw applicatie-inhoud boven alles benadrukt., Dat komt omdat inhoud de belangrijkste reden is waarom gebruikers de applicatie wel of niet zullen gebruiken. En dit leidt ons tot de belangrijkste vragen: welke content wil je presenteren en welke content jouw gebruikers het meest belangrijk vinden.

Er zijn vele voor-en nadelen van SPA en van MPA. Ik hoop dat de onderstaande lijnen de verschillen tussen deze twee ontwerppatronen zullen ophelderen en u dichter bij het punt brengen waar u weet wat voor soort toepassing meer bij uw idee past. En laat uw idee over eigen toepassing uitkomen.,

een enkele pagina applicatie is een app die werkt in een browser en vereist geen pagina herladen tijdens het gebruik. U gebruikt dit soort toepassingen elke dag. Dit zijn bijvoorbeeld: Gmail, Google Maps, Facebook of GitHub.
Spa ‘ s zijn allemaal over het bedienen van een uitstekende UX door te proberen een “natuurlijke” omgeving in de browser te imiteren — geen pagina herlaadt, geen extra wachttijd. Het is slechts een webpagina die u bezoekt, die vervolgens laadt alle andere inhoud met behulp van JavaScript — die ze sterk afhankelijk van.,

SPA vraagt de opmaak en gegevens onafhankelijk aan en maakt pagina ‘ s recht in de browser. We kunnen dit doen dankzij de geavanceerde JavaScript frameworks zoals AngularJS, Ember.js, meteoor.js, Knock-Out.js .
Single-page sites helpen de gebruiker in één, comfortabele webruimte te houden waar de inhoud op een eenvoudige, gemakkelijke en werkbare manier aan de gebruiker wordt gepresenteerd.

voordelen van de toepassing met één pagina:

  • SPA is snel, omdat de meeste bronnen (HTML+CSS+Scripts) slechts eenmaal worden geladen gedurende de hele levensduur van de toepassing. Alleen gegevens worden heen en weer verzonden.,
  • de ontwikkeling is vereenvoudigd en gestroomlijnd. Het is niet nodig om code te schrijven om pagina ‘ s op de server te renderen. Het is veel gemakkelijker om aan de slag te gaan omdat je meestal de aftrap van de ontwikkeling van een file file://URI, zonder gebruik te maken van een server op alle.
  • SPAs zijn eenvoudig te debuggen met Chrome, omdat u netwerkbewerkingen kunt monitoren, pagina-elementen en gegevens die ermee verbonden zijn kunt onderzoeken.
  • het is gemakkelijker om een mobiele applicatie aan te maken omdat de ontwikkelaar dezelfde backend code kan hergebruiken voor webapplicatie en native mobiele applicatie.
  • SPA kan elke lokale opslag effectief cachen., Een applicatie stuurt slechts één verzoek, slaat alle gegevens op, dan kan het deze gegevens gebruiken en werkt zelfs offline.

nadelen van de toepassing met één pagina:

  • Het is zeer lastig en geen gemakkelijke taak om SEO-optimalisatie van een toepassing met één pagina te maken. De inhoud wordt geladen door AJAX (Asynchronous JavaScript en XML) – een methode voor het uitwisselen van gegevens en het bijwerken in de applicatie zonder de pagina te vernieuwen.UPDATE 27.09.2017: in haar commentaar wees Iris Shaffer er terecht op dat het ook op de server kan. Het is vandaag immers gemakkelijker dan vroeger.,
  • het is traag om te downloaden omdat zware client frameworks nodig zijn om te worden geladen naar de client.
  • Het vereist dat JavaScript aanwezig en ingeschakeld is. Als een gebruiker JavaScript in zijn of haar browser uitschakelt, zal het niet mogelijk zijn om toepassing en zijn acties op een correcte manier te presenteren.
    UPDATE 27.09.2017: in haar commentaar heeft Iris Shaffer opgemerkt dat met isomorfe rendering / server side rendering, u de pagina op de server al kunt renderen. Wanneer de initiële render op de server staat en gecached kan worden, zou het uitschakelen van JS geen probleem zijn om een gerenderde pagina te krijgen., Theoretisch gezien klopt dat. Uiteraard kunt u renderen op de server kant. Maar gebrek aan JS kan een zorg voor andere functionaliteiten. Veel dingen kunnen worden gedaan in HTML & CSS, maar uit mijn ervaring zou het hel zijn om het op deze manier te doen in plaats van JavaScript te gebruiken.
  • vergeleken met de” traditionele ” toepassing is SPA minder veilig. Als gevolg van Cross-Site Scripting (XSS), het stelt aanvallers in staat om client-side scripts te injecteren in webapplicatie door andere gebruikers.,
  • geheugenlek in JavaScript kan zelfs leiden tot een krachtig systeem om te vertragen
  • in dit model, back en forward knoppen disfunctioneel geworden. UPDATE 27.09.2017: tegenwoordig is het geen probleem meer.

toepassing met meerdere pagina ‘s

toepassingen met meerdere pagina’ s werken op een “traditionele” manier. Elke verandering bijvoorbeeld. geef de gegevens weer of stuur gegevens terug naar serververzoeken die een nieuwe pagina van de server in de browser weergeven. Deze toepassingen zijn groot, groter dan spa ‘ s omdat ze nodig zijn. Vanwege de hoeveelheid inhoud, deze toepassingen hebben vele niveaus van UI., Gelukkig is het geen probleem meer. Dankzij AJAX hoeven we ons geen zorgen te maken dat grote en complexe applicaties veel gegevens tussen server en browser moeten overbrengen. Die oplossing verbetert en het maakt het mogelijk om alleen bepaalde delen van de applicatie te vernieuwen. Aan de andere kant, het voegt meer complexiteit en het is moeilijker te ontwikkelen dan een enkele pagina applicatie.

voors van de toepassing met meerdere pagina ‘ s:

  • Het is de perfecte aanpak voor gebruikers die een visuele kaart nodig hebben van waar te gaan in de toepassing., Solide, weinig niveau menu navigatie is een essentieel onderdeel van de traditionele Multi-pagina applicatie.
  • Zeer goed en gemakkelijk voor goed SEO management. Het geeft betere kansen om te rangschikken voor verschillende zoekwoorden, omdat een toepassing kan worden geoptimaliseerd voor een zoekwoord per pagina.

nadelen van de toepassing met meerdere pagina ‘ s:

  • Er is geen optie om dezelfde backend te gebruiken met mobiele toepassingen. UPDATE 27.09.2017: toen ik dit artikel schreef, had ik niet veel ervaring met backend en met mobiele apps., Het is nu duidelijk voor mij dat je dezelfde backend voor beide kunt gebruiken. En Ik wil graag alle lezers bedanken die daarop gewezen hebben.
  • Frontend en backend ontwikkeling zijn nauw met elkaar verbonden.
  • de ontwikkeling wordt vrij complex. De ontwikkelaar moet frameworks te gebruiken voor zowel client en server kant. Dit resulteert in de langere tijd van applicatie ontwikkeling.

SPA of MPA?

voordat u een webtoepassing implementeert, moet u het doel ervan overwegen., Als je weet dat je meerdere categorieën nodig hebt (omdat je bijvoorbeeld een online winkel hebt of veel andere content publiceert)-gebruik dan een site met meerdere pagina ‘ s. Als u er zeker van bent dat uw site geschikt is voor een pure single-page ervaring — ga ervoor. En als je van SPA, maar kan net net passen alles in een enkele pagina, overwegen de hybride site in plaats daarvan. Dit is een andere manier die ik niet eerder heb genoemd. Een hybride applicatie neemt Wat is het beste in beide benaderingen en proberen om de nadelen te minimaliseren., Het is, in feite, een enkele pagina applicatie die URL-ankers gebruikt als synthetische pagina ‘ s waardoor meer in build browser navigatie en voorkeur functionaliteit. Maar dit is het onderwerp voor een ander artikel.

misschien zal in de toekomst iedereen een enkel pagina applicatie model gebruiken (inclusief een hybride app), omdat het veel voordelen lijkt te bieden. Veel apps op de markt migreren naar dit model. Omdat sommige projecten echter niet in SPA passen, is het MPa-model nog steeds levendig.

oorspronkelijk gepubliceerd door Paweł Skólski op neoteric.eu/blog op 1 December 2016.