Om de beste performance uit Javascript-applicaties te halen, moeten er afwegingen gemaakt worden. Deze keuzes zijn als developer altijd de basis bij het ontwikkelen van applicaties voor organisaties. In dit blog geef ik 3 tips om nog meer performance uit je JavaScript-applicatie te halen.
Tip 1: API-versie
Denk goed na over de ArcGIS API for JavaScript-versie die je wilt gebruiken. Veel developers ontwikkelen applicaties op basis van versie 3 van de ArcGIS API for JavaScript. Vaak is de ontwikkeling van deze applicaties gestart in de tijd dat versie 4 nog niet bestond. Het komt echter ook voor dat op basis van kennisniveau en gewoonte de keuze wordt gemaakt om voor nieuwe applicaties versie 3 van de JavaScript API te blijven gebruiken. Ondanks dat deze situaties volkomen begrijpelijk zijn, wil ik graag benadrukken dat voor nieuwe ontwikkelingen versie 4 van de API de voorkeur zou moeten hebben vanwege de vele verbeteringen.
30% performance verbetering
Versie 3 van de API wordt op dit moment alleen onderhouden, er vinden geen updates meer plaats. Nieuwe ontwikkelingen vinden alleen plaats in versie 4 van de API. Dat geldt ook voor ontwikkelingen die de performance vergroten. Het is zelfs zo dat er in versie 4 van de API al significante verschillen in performance te zien zijn. Tussen versie 4.9 en 4.15 zijn aanpassingen gedaan waardoor een performance verbetering van ongeveer 30% is gehaald.
Versie 3 versus versie 4 van de ArcGIS API for JavaScript
De User Experience in versie 4 is verder geoptimaliseerd. Dit zorgt ervoor dat applicaties prettiger in gebruik zijn, iets dat vaak van invloed is op de acceptatie van een nieuwe applicatie door eindgebruikers. Dit wordt bereikt door bijvoorbeeld een snellere respons van de applicatie en het vloeiend laden van de kaart. Dit maakt het ook eenvoudiger om applicaties te ontwikkelen die interactiever zijn, omdat de interface sneller reageert op de gebruiker.
Een groot verschil tussen versie 3 en 4 van de API is bijvoorbeeld het laden van achtergrondkaarten en kaartlagen. In versie 3 worden deze zichtbaar opnieuw geladen. Hierdoor zie je bij de basemap witte vlakken ontstaan wanneer de betreffende tiles nog niet geladen zijn. Voor de kaartlagen geldt dat ze zichtbaar opnieuw getekend worden tijdens het pannen en zoomen. In versie 4 blijft de kaartlaag in beeld bij het zoomen. Wel wordt deze opnieuw getekend omdat de API afhankelijk van het schaalniveau autogeneralisatie toepast. Hierdoor is de kaartlaag continue in beeld, wat resulteert in een betere beleving van de applicatie. Daarnaast haalt de API bij het pannen en zoomen zoveel mogelijk eerder geladen tiles op andere zoomniveau’s op. Hierdoor wordt het aantal witte vlakken tijdens het gebruik tot een minimum beperkt. Dit geeft, zeker bij het gebruik van een donkere basemap, een prettiger beeld en het gevoel van een snelle en responsive applicatie.
Ervaar het performanceverschil tussen versie 3 en versie 4 direct met deze demo.
https://esrinederland.github.io/WebinarJSPerformance/Demos/323vs415.html
JS 4.9 versus JS4.15
Ook tussen de releases van versie 4 zijn significante verschillen waarneembaar. Zeker in de laatste releases zijn grote stappen gemaakt. Esri geeft aan dat versie 4.15 een performance verbetering heeft van ongeveer 30% ten opzichte van versie 4.9. Je ziet dit onder andere terug in snellere laadtijden van feature services.
Ervaar het performanceverschil tussen versie 4-releases direct met deze demo:
https://esrinederland.github.io/WebinarJSPerformance/Demos/49vs415.html
Tip 2: Vector tiles versus raster tiles
Met de keuze voor een basemap gebaseerd op vector tiles is de performance van een JavaScript-applicatie te verbeteren. De initiële laadtijd is net iets langer dan bij raster tiles, maar daarna performen ze beter omdat er minder data richting de client gestuurd wordt. Dat verschil wordt nog eens benadrukt wanneer je inzoomt op de requests die gedaan worden: bij vector tiles zijn dat er aanzienlijk minder, net als het aantal KB’s dat naar de client is gestuurd. Hoe verder ingezoomd, hoe groter de verschillen worden. Bovendien is het oppervlak dat wordt bestreken door een vector tile groter dan dat van een raster tile. Daardoor kan je verder pannen dan bij raster tiles zonder nieuwe data naar de client te hoeven halen. En daarnaast een mooie bijkomstigheid: vector tiles zijn te stylen zodat de kaart volledig aansluit bij de huisstijl van een organisatie.
Ervaar het performanceverschil tussen vector en raster tiles direct met deze demo. Zoom bijvoorbeeld in en uit op een gemeente en pan naar naastgelegen gebied.
https://esrinederland.github.io/WebinarJSPerformance/Demos/vectorvsraster.html
Tip 3: LayerViews
In versie 4 van de ArcGIS API for JavaScript zijn LayerViews geïntroduceerd om de performance nog verder te verbeteren. LayerViews zijn ontzettend krachtig. Niet alleen zijn ze verantwoordelijk voor de uiteindelijke visualisatie, maar ze bevatten ook heel veel rekenkracht. Wanneer de data uit een laag in één keer in de client wordt ingeladen is deze beschikbaar in de LayerView en kan deze door de client gebruikt worden. Er worden dan geen query’s meer gedaan naar de Feature Service. Hierdoor wordt de applicatie zeer snel en responsive. Wijzig symbologie op grote hoeveelheden data die nagenoeg zonder vertraging in de client worden doorgevoerd. Het “knipperen” van kaartlagen is hierdoor verleden tijd.
SQL-engine
LayerViews bevatten ook een SQL-engine die spatial query’s aankan. Pas in de client spatial filters toe en deze worden razendsnel getoond in de applicatie. Kortom: heb je veel data in een applicatie en pas je daarin de visualisatie aan of voer je spatial query’s uit op basis van user input? Bekijk de mogelijkheden van LayerViews, dit zorgt voor een enorme performance verbetering en betere User Experience.
Ervaar de performance van het gebruik van LayerViews in deze demo: Klik op ‘Go’ en selecteer verschillende mogelijkheden in het drop-down-menu.
https://esrinederland.github.io/WebinarJSPerformance/Demos/viewandfilter.html
Zelf met performance aan de slag
Wat kun je aan de hand van dit blog nu zelf doen? Bekijk je applicaties en kijk hoe je deze op basis van bovenstaande tips nog sneller kunt maken. Heb je daarover nog vragen, of wil je een keer sparren over andere ArcGIS Developer onderwerpen, stuur gerust een email naar developers@esri.nl. We denken graag met je mee!
