In mijn vorige column over frameworks werd gesproken over de populaire JavaScript-frameworks React, Angular en VueJS. Hierin werd ook gezegd dat het voor de eindgebruiker eigenlijk niet uitmaakt welk framework wordt gebruikt. Als de website maar gebruikersvriendelijk en duidelijk is. Maar voor ons als developers kan het wel degelijk interessant zijn. Soms willen we gewoon graag eens bekijken hoe een bepaalde pagina werkt, welke lettertypen op een pagina zijn gebruikt, of er misschien een CMS is ingezet (en zo ja, welke?) en of gebruik wordt gemaakt van cloudopslag. Toegegeven, dat zijn allemaal nerdy zaken, maar als webontwikkeling je werk of je hobby is, is het toch interessant om te weten. Maar hoe kom je daar als developer nu eenvoudig achter? Met Wappalyzer!

Bron weergeven

Van oudsher hebben alle browsers de optie om de broncode van een pagina te tonen. Dit werkt via het menu, de sneltoets F12, of via de rechtermuisknop en de optie Bron Weergeven, Show Source of vergelijkbaar. Echter, moderne frameworks en CMS’en proberen de code te comprimeren en optimaliseren, zodat de website zo min mogelijk bandbreedte verbruikt en zo snel mogelijk te laden is. Zelfs een minimalistische pagina als Google.nl gebruikt deze techniek en is op deze wijze zo goed als onleesbaar (en in ieder geval onbruikbaar) voor de ontwikkelaar.

Wappalyzer

Een tamelijk onbekende, maar uitermate handige tool om snel te bekijken welke technologie op een website wordt gebruikt, is Wappalyzer (www.wappalyzer.com). Wappalyzer is beschikbaar als add-on voor Google Chrome en als extension voor Firefox. Ook in de nieuwe versies van Microsoft Edge kan Wappalyzer worden geïnstalleerd. Wappalyzer analyseert tijdens het laden van de website welke technieken worden gebruikt. Een greep uit de technieken die Wappalyzer kan herkennen:

• Het gebruikte Content Management System (WordPress, Joomla),
• eCommerce platforms (Shopify, WooCommerce, Magento),
• Web frameworks en -libraries (React, Angular, jQuery),
• Welke analysetools worden gebruikt (Google Analytics, New Relics)
• De gebruikte programmeertaal (PHP, Java)
• Serversoftware (Apache, Nginx, IIS)
• Cloudtechnologie (AWS, Azure)
• …en vele andere categorieën

Maar behalve de hiervoor genoemde technieken zijn er nog tientallen andere categorieën en in totaal meer dan twaalfhonderd technologieën die worden herkend. Het is een uitermate handige analysetool voor de webdeveloper. Nee, u leert er niet direct de gebruikte techniek mee, maar het geeft wel inzicht in de wijze waarop een website draait en hoe technologieën in combinatie met elkaar kunnen worden gebruikt.

Gebruik

Het gebruik van Wappalyzer is eenvoudig. Ga naar de website waarvan u een kijkje achter de schermen wilt nemen en klik op de knop die na installatie van de add-on in de Chrome werkbalk is verschenen. Er verschijnt een pop-up met daarin de geanalyseerde technieken. Zo leert Wappalyzer ons bijvoorbeeld dat dit blog (computercreatief.nl) is gebaseerd op WordPress, PHP en MySQL. Als analysetool wordt Google Analytics gebruikt .Daarnaast zijn aanvullende plug-ins als MediaElement.js (de videospeler op dit blog) en een aantal jQuery-aanvullingen zoals Lightbox ingezet (niet zichtbaar in de screenshot, check dit zelf). Het zou veel lastiger zijn geweest om dit uit de broncode op te maken.

Stel bijvoorbeeld dat u er op deze wijze achter bent gekomen dat MediaElement.js is gebruikt, en u wilt deze videospeler zelf ook inzetten. Dan is een klik op de technieknaam in Wappalyzer voldoende om u naar de Wappalyzer-site te brengen waar meer informatie over deze techniek wordt gegeven. Er is bijvoorbeeld een top-10 zichtbaar waarin is te zien welke sites nog meer van de betreffende software gebruik maken. ComputerCreatief bevindt zich in goed gezelschap, want ook Tutsplus.com, Treehouse.com en 9to5mac gebruiken deze videospeler. Dit zijn bekende namen. Ook is een link opgenomen naar de site van de makers. Hier is ongetwijfeld meer informatie te vinden over het gebruik ervan.

Rechtstreeks via Wappalyzer

Daarnaast kunt u via de website van Wappalyzer rechtstreeks een url intypen of kopiëren/plakken om inzicht te krijgen. Ook andersom is mogelijk. Vul een techniek in (bijvoorbeeld Google Adwords) en ontvang via e-mail een overzicht van alle honderdduizenden sites die AdWords gebruiken. De basisdiensten zijn gratis, voor meer uitgebreid gebruik moet worden betaald – want ook bij Wappalyzer moet de schoorsteen natuurlijk roken.

Maar voor de gemiddelde webontwikkelaar zijn de gratis mogelijkheden meer dan voldoende. Op deze manier is Wappalyzer een waardevolle aanvulling in de gereedschapskist van elke internetprogrammeur. Doe er uw voordeel mee.

Web Development Library

Van Duuren Media geeft de Web Development Library uit, waarin de meeste populaire frameworks vertegenwoordigd zijn. Lees bijvoorbeeld Web Development Library – Angular, door Peter Kassenaar. Een uitgave over VueJS staat voor deze zomer op de planning. Leest u liever in een rustiger tempo eerst over HTML, CSS en JavaScript dan zijn daar ook voldoende recente uitgaven voor te vinden.

Peter Kassenaar

Peter Kassenaar is auteur van vele boeken over algemeen pc-gebruik, programmeertalen en internettechnieken. Hij is gespecialiseerd in frond-endtools, -frameworks en -toepassingen. Via zijn eigen bedrijf verzorgt hij trainingen op deze gebieden voor bedrijven en organisaties. De boeken van Peter vind je hier.