2019-05-01+Web+Designer+UK

feature _________________________________________________ 87

multipleclient/serverrequests.Asuser
experienceshavegrownincomplexity,sohave
thedemandstheyputontheservers.Oneoftheweb’searliest
foraysintoSinglePageApps(SPAs)cameintheearly2000s
withAJAX.Thisallowedwebpagestorunmultipleupdates
withoutreloading,reducingthenumberofrequestsservers
wereprocessinganduserswerewaitingon.
Afterthatcamea stringofJavaScriptframeworksincluding
JQueryandBackbone.js,a moveawayfromJavaScriptentirely
withFlashandSilverlight,beforecomingfullcirclein 2010 withthe
releaseoftherobustAngular.jsandlaterReact.js.Thecommon
ideaacrossalltheseevolutionswasthata web‘page‘couldhold
moreconversationswithitsusersoutsideofthestandardwebof
hyperlinkstoadditionalpages.
Today,SinglePageAppsdominateourmostusedweb
applications— Facebook,Twitter,GmailandGoogleDocstoname
buta few.Theserichlyinteractiveappsarea farcryfromthe
hyperlinkedHTMLdocumentsofthepast,andshowhowSPAs
candelivercomplex,highlyperformantexperiencestowebusers.

SinceHTML,CSSandscriptfilesaredownloadedandparsedjust
oncethroughouttheapp’slifespan(onlydatais transmittedback
andforth,)userstransitioningbetween‘pages‘inSingle-Page
PWAscandosomuchfasterthanina multi-pagesolution.By

Onebenefittooperatingundera singleserverrequestis thatthe

samedataexistingbetweentwopages/statescanbedisplayed

instantlywithoutinterruption.Anapp-likestickyheaderis a

commonwaywebappsmaintainusercontextthroughpersistent

UI.WealsoseethisincommercePWAs,wherea user

transitioningfroma listofproductstoa singleproductin fulldetail

canseetheproductnameandimagefromthepreviouspage.

Reusingproductdatain thisway,insteadofdisplayinga black

screenwhilethatdatais fetchedandrendered,createsa faster,

smootherloadingexperiencefortheshopper.

Whether it be finding a specific piece of information or browsing

multiple information sets, most users arriving at a site are

looking to complete a task quickly, especially on mobile. For

every two additional seconds of load time, the number of users

leaving the site (bounce rate) goes up to 50 per cent, and for

every extra second it takes for a page to load, the number of

users reaching the end of that task (conversion rate) falls by 12

per cent. The combination of faster load times, fewer server

request interruptions and increased visual continuity means that

users in SPAs take less time to move through and complete

tasks faster than in MPAs.

Gmaili
most—
pagew
applica

ackintheweb’searly days, it wasnormalfor

MultiplePage Applications(MPAs), built-instatic

HTMLandserver-sidetechnology likePHP,ASP

and Python, to drive user navigation through

reducingthenumberof‘whiteflash‘interruptionsfortheuser

wherenocontentis visible,SPAshavemorecontroltosmooth

outpage transitionsandmaintainuserattention,providing visual

continuity and positive feedback to their interactions.

s oneofthe

usedsingle

web

ations

The Debenhams PWA is able to

take data, such as product

name, from the listing page and

immediately display it on the

product detail page while the

other assets are loading.