Wat is AngularJS?

AngularJS is een JavaScript-framework van Google uit 2010, bedoeld om webapplicaties te bouwen waarin veel gebeurt zonder dat de pagina herlaadt. De ondersteuning is op 31 december 2021 definitief gestopt: er verschijnen geen updates meer en geen beveiligingsoplossingen.

Daarmee is het belangrijkste over dit onderwerp gezegd. Begin er niets nieuws in, en heb je iets draaien wat erop is gebouwd, maak dan een plan om ervan af te komen.

De rest van dit artikel gaat over wat AngularJS was, waarom je het nog steeds tegenkomt, en wat je met zo'n applicatie doet. Plus de vraag die eronder ligt: heeft een gewone bedrijfswebsite überhaupt een framework nodig.

Wat AngularJS deed

Rond 2010 zag een website er anders uit. Klikte je op iets, dan haalde de browser een nieuwe pagina op bij de server en bouwde die helemaal opnieuw op. Voor een webwinkel prima. Voor iets wat aanvoelt als een programma, met formulieren, filters en lijsten die meteen meebewegen, was het onhandig.

Wie dat toch wilde bouwde het zelf met JavaScript en jQuery: overal losse stukjes code die met de hand een element opzochten en de inhoud ervan aanpasten. Dat werkte, en het werd bij elk project onhoudbaar.

AngularJS gaf daar een vorm aan. Je schreef in je HTML wat er moest gebeuren, en het framework regelde de rest. Een lijst met producten koppelde je aan een stukje HTML, en als de lijst veranderde veranderde het scherm mee. Zonder dat je ergens opschreef hoe.

Daar kwam een indeling bij die programmeurs kenden uit andere talen: gegevens, weergave en logica gescheiden houden. Google noemde het zelf gekscherend model-view-whatever, omdat de discussie over de precieze indeling meer energie kostte dan hij opleverde.

Het sloeg aan. Jarenlang was AngularJS de standaardkeuze voor webapplicaties, en er is in die periode enorm veel mee gebouwd. Daar komt het vandaan dat je het nu nog tegenkomt in beheerpanelen, portalen en interne systemen die niemand meer aanraakt.

AngularJS en Angular zijn twee verschillende dingen

Dit is de bron van eindeloze verwarring, ook bij mensen die het zouden moeten weten.

AngularJS is versie 1, uit 2010, geschreven in JavaScript. Ondersteuning gestopt op 31 december 2021.

Angular zonder JS is de opvolger vanaf versie 2, uit september 2016. Volledig opnieuw geschreven, in TypeScript, met een andere opbouw en andere begrippen. Die wordt gewoon doorontwikkeld en zit inmiddels ruim in de dubbele cijfers.

Ze delen alleen de naam en een deel van de gedachte erachter. Code van de een draait niet op de ander. Overstappen is geen update maar herbouwen, en dat is meteen de reden dat zoveel AngularJS-applicaties zijn blijven staan.

Let hierop bij offertes en vacatures. Staat er "Angular", dan kan dat allebei betekenen. Vraag door naar het versienummer, want tussen versie 1 en versie 18 zit ongeveer alles.

De ideeën die zijn blijven hangen

Het is de moeite waard om te weten waarom AngularJS zo populair werd, want die ideeën zitten nu in elk framework.

Tweezijdige koppeling. Verandert een waarde in je gegevens, dan verandert het scherm mee. Typt de gebruiker iets in een veld, dan verandert de waarde mee. Dat scheelde bergen code en het voelde destijds als toveren. Later bleek het ook de belangrijkste bron van prestatieproblemen.

Directives. Eigen HTML-elementen en attributen met eigen gedrag. Je schreef ergens een element met een naam die je zelf had verzonnen, en AngularJS wist wat het daarmee moest. Het idee dat je een interface uit herbruikbare blokken opbouwt komt hier vandaan en heet tegenwoordig overal componenten.

Dependency injection. Onderdelen krijgen aangeleverd wat ze nodig hebben in plaats van het zelf op te halen. Dat klinkt abstract en het levert iets heel praktisch op: je kunt bij het testen een nepversie aanleveren en zo een stuk code los beproeven.

Die drie zijn de reden dat mensen met warme gevoelens over AngularJS praten. Ze hebben alleen niets te maken met de vraag of je het nu nog moet gebruiken.

Waarom het langzaam werd

Die tweezijdige koppeling had een prijs, en die werd zichtbaar zodra een scherm groter werd.

AngularJS wist namelijk niet wat er was veranderd. Het hield een lijst bij van alle waarden die het in de gaten moest houden, en na elke gebeurtenis liep het die hele lijst af om te kijken of er iets anders was dan de vorige keer. Bij een handvol velden merk je daar niets van. Bij een tabel met honderden regels die elk een paar waarden tonen loopt die lijst in de duizenden, en dan wordt het merkbaar traag bij elke toetsaanslag.

Je herkent zo'n scherm meteen: typen in een zoekveld voelt stroperig, en de cursor loopt achter op wat je intikt. Ontwikkelaars gingen dat oplossen met trucjes om waarden juist niet in de gaten te laten houden, en daarmee verdween het gemak waar het framework om gekozen was.

Dat is ook waarom de opvolgers het anders doen. Angular, React en Vue laten je aangeven wat er verandert, of houden zelf bij welke onderdelen echt zijn geraakt. Je moet er iets meer voor opschrijven en je krijgt er een scherm voor terug dat bij duizend regels nog steeds vlot reageert.

Wat het betekent dat de ondersteuning is gestopt

Google heeft dit ruim van tevoren aangekondigd en de datum daarna nog eens verschoven naar 31 december 2021. Sindsdien geldt: wordt er een lek gevonden, dan blijft dat open.

Dat is geen theoretisch risico. AngularJS haalde in eerdere versies zelf al een beveiligingsmechanisme weg dat de illusie wekte code af te schermen, met de mededeling dat het geen echte grens was. Alles wat daarna is gevonden en alles wat nog gevonden wordt blijft staan.

Er is een tweede probleem dat mensen minder zien aankomen. Een applicatie bestaat niet alleen uit AngularJS zelf, maar uit tientallen pakketten eromheen. Die worden ook niet meer bijgewerkt, of ze zijn helemaal uit de lucht gehaald. Ik heb meegemaakt dat een team een oude applicatie wilde aanpassen, de code binnenhaalde en er simpelweg geen werkende versie meer van kon bouwen: de bouwgereedschappen waren te oud, de pakketbron bestond niet meer en de vereiste versie van Node draaide niet op een moderne computer. Dan ben je een week bezig voordat je één regel hebt gewijzigd.

En dan is er de kant waar je op wordt aangesproken. Werkt jouw applicatie met persoonsgegevens, dan verlangt de AVG passende technische maatregelen. Software draaien waarvan bekend is dat er geen beveiligingsupdates meer voor komen is daarmee lastig te rijmen. Moet je ooit uitleggen waarom er iets is uitgelekt, dan is dat een vervelend startpunt.

Hoe je ziet of iets op AngularJS draait

Bij een overgenomen site of een systeem waarvan niemand meer weet hoe het gebouwd is, kun je dit in een minuut nakijken.

Open de pagina en bekijk de broncode. Zie je attributen die met ng beginnen, zoals ng-app, ng-controller, ng-repeat of ng-model, dan is het AngularJS. In Angular zien die er anders uit, met blokhaken en ronde haken om de namen heen.

Kijk daarnaast in het netwerkscherm van je browser welke bestanden er worden geladen. Staat daar een bestand met angular in de naam, dan zie je er meestal ook het versienummer bij. Begint dat met een 1, dan heb je AngularJS te pakken.

De snelste controle van allemaal: open de console van de browser en vraag om de versie van het framework. Bij AngularJS krijg je daar een antwoord op, bij alle andere frameworks niet.

Wat je doet met een bestaande AngularJS-applicatie

Er zijn vier routes en ze zijn geen van alle gratis.

Opnieuw bouwen. Van de grond af aan in iets van nu. De duurste route en meestal de eerlijkste, zeker als de applicatie inhoudelijk toch al niet meer klopte met hoe je nu werkt. Je krijgt er de kans bij om de helft van de functies weg te laten die toch niemand gebruikte.

Stapsgewijs vervangen. Onderdeel voor onderdeel omzetten terwijl de rest blijft draaien. Er bestaat gereedschap om oud en nieuw tijdelijk naast elkaar te laten leven in één applicatie. Het duurt langer, het is minder spannend, en je hebt onderweg altijd iets werkends. Bij een systeem waar dagelijks mee gewerkt wordt is dit meestal de verstandigste route.

Betaalde ondersteuning inkopen. Er zijn partijen die tegen betaling beveiligingsoplossingen voor AngularJS blijven leveren. Dat koopt je tijd om het netjes te plannen. Het is geen eindpunt, en de rekening loopt door zolang je niets doet.

Uitzetten. Serieus overwegen. Ik kom regelmatig oude portalen tegen die door drie mensen per maand worden gebruikt en die vervangen kunnen worden door een formulier en een gedeeld document. Herbouwen wat niemand mist is de duurste vorm van gewoonte.

Wat je kiest als je iets nieuws begint

Voor een nieuwe webapplicatie zijn React, Vue en Angular de gangbare keuzes: React als je makkelijk mensen wilt kunnen vinden, Vue als je iets lichters zoekt met een vlakkere leercurve, en Angular als je een groot project met een vast team hebt en de strengheid van een compleet kader wilt. De volledige vergelijking, ook met de kleinere spelers, staat in het artikel over bibliotheken en frameworks.

Kijk bij die keuze naar iets anders dan wat een framework kan. Kijk naar hoe lang een versie ondersteund wordt, hoe vaak er een grote versie uitkomt en hoe zwaar een overstap dan is. Angular brengt tegenwoordig twee keer per jaar een hoofdversie uit met een vaste ondersteuningstermijn erachter, en die termijn is korter dan de levensduur van de meeste bedrijfssoftware. Dat betekent dat bijwerken structureel werk is, geen eenmalige actie.

Vraag dus niet welk framework het beste is. Vraag wie het over vier jaar bijwerkt en wat dat kost.

Waarom een gewone bedrijfssite hier niets mee te maken heeft

Dit deel ontbreekt in vrijwel elk artikel over frameworks, terwijl het voor de meeste lezers het enige is dat telt.

Een framework als AngularJS, Angular, React of Vue is gemaakt voor applicaties: schermen waar mensen in werken, met gegevens die voortdurend veranderen. Een boekingssysteem, een dashboard, een klantportaal.

Een bedrijfswebsite is dat niet. Een homepage, dienstpagina's, een blog, een contactformulier en misschien een webshop bestaan uit pagina's die door de server worden opgebouwd en daarna nauwelijks veranderen. Daar heb je HTML, CSS en een beetje JavaScript voor nodig, en verder een systeem waarin je de teksten beheert. WordPress doet precies dat.

Bouw je zo'n site toch in een framework, dan krijg je er problemen bij die je niet had. De bezoeker moet eerst een flinke lading code binnenhalen voordat er iets op het scherm staat. Je hebt een bouwstap nodig voordat je een komma kunt wijzigen. En je bent afhankelijk van een ontwikkelaar voor werk dat de eigenaar anders zelf had gedaan.

Ik zeg dat niet omdat frameworks slecht zijn. Ik zeg het omdat ik regelmatig sites overneem die met de beste bedoelingen zijn gebouwd in techniek die drie maten te groot was, en waar de eigenaar nu voor elke tekstwijziging een factuur krijgt.

Frameworks en je vindbaarheid

Er zit een kant aan die je pas maanden later merkt.

Bij een applicatie die alles in de browser opbouwt staat er in de eerste versie van de pagina vrijwel niets: een leeg element en een verwijzing naar een berg JavaScript. Pas als die code is uitgevoerd verschijnt de inhoud.

Google kan JavaScript uitvoeren, maar doet dat in een tweede ronde die later komt. Andere zoekmachines en de meeste sociale netwerken zijn daar minder goed in. Het gevolg is dat pagina's later in de index komen of dat de gedeelde link op LinkedIn een lege voorvertoning geeft. Hoe dat proces werkt staat in het artikel over indexering door zoekmachines.

Er bestaat een oplossing voor: de pagina alsnog op de server laten opbouwen en compleet uitleveren. Elk modern framework kan dat. Het is wel extra techniek, een extra server en extra dingen die stuk kunnen. Voor een site die gevonden moet worden is dat een reden om bij de gewone route te blijven, waarbij de pagina al af is voordat hij wordt verstuurd.

De kosten die je niet in de offerte ziet

Een framework kiezen is geen technische beslissing maar een financiële, en de rekening komt later.

Bijwerken is de eerste post. Een applicatie die je vier jaar niet aanraakt is bij oplevering af en daarna langzaam kapot. Reken op periodiek onderhoud, ook als er functioneel niets verandert.

Daarnaast is er de bouwomgeving. Alles moet worden vertaald en samengevoegd voordat het naar de server kan. Dat gereedschap veroudert net zo hard als het framework zelf, en niemand kijkt ernaar om totdat het op een dinsdagochtend weigert.

Dan de mensen. Bij een gangbare keuze vind je makkelijk iemand. Bij een keuze die uit de mode is geraakt betaal je een toeslag, of je vindt niemand. AngularJS is daar het levende voorbeeld van.

En ooit komt het overzetten zelf. Dat moment komt bij elk framework, want ze hebben allemaal een houdbaarheidsdatum. Zet er van tevoren een bedrag en een jaartal bij, dan is het een begrotingspost in plaats van een schrikmoment.

Wat je vraagt aan een bouwer

• Waarom deze techniek? Een antwoord in de trant van "daar werken wij mee" is geen antwoord.
• Tot wanneer wordt deze versie ondersteund? Vraag om een datum en zet die in je agenda.
• Wat kost bijwerken per jaar? Laat het benoemen in de offerte, ook als het nul is.
• Kan ik zelf teksten en afbeeldingen wijzigen? En zo ja, waar precies.
• Wat gebeurt er als jullie ermee stoppen? Krijg ik de broncode en kan een ander het overnemen.
• Wordt de pagina op de server opgebouwd? Belangrijk zodra vindbaarheid meetelt.

Dit zijn geen technische vragen maar ondernemersvragen. Een bouwer die ze goed vindt is een bouwer die aan je volgende jaren denkt. Meer over de kant van het vak die de bezoeker ziet staat in het artikel over front-end ontwikkeling.

Veelgestelde vragen over AngularJS

Wat is AngularJS precies?

AngularJS is een JavaScript-framework dat bij Google is ontstaan en vanaf 2010 werd gebruikt om webapplicaties te bouwen die reageren zonder de pagina te herladen. Het is de eerste generatie, ook wel Angular 1 genoemd, en het wordt sinds 31 december 2021 niet meer ondersteund.

Wat is het verschil tussen AngularJS en Angular?

AngularJS is versie 1 uit 2010, geschreven in JavaScript en niet meer ondersteund. Angular is de opvolger vanaf versie 2 uit 2016, volledig opnieuw geschreven in TypeScript en nog volop in ontwikkeling.

Ze delen alleen de naam. Code van de een werkt niet op de ander, dus overstappen is herbouwen en geen update.

Wordt AngularJS nog ondersteund?

Nee. Google heeft de ondersteuning op 31 december 2021 beëindigd. Er verschijnen geen updates meer en ook geen beveiligingsoplossingen. Er zijn wel commerciële partijen die tegen betaling reparaties leveren voor wie tijd nodig heeft.

Is een AngularJS-applicatie nog veilig?

Niet op de manier waarop je dat van software mag verwachten. Elk lek dat na eind 2021 is gevonden blijft open, en dat geldt ook voor de tientallen pakketten die zo'n applicatie eromheen gebruikt.

Draait de applicatie alleen binnen je eigen netwerk en zonder persoonsgegevens, dan is het risico kleiner. Staat hij op internet en werken er mensen met klantgegevens in, dan is dit iets voor dit kwartaal en niet voor volgend jaar.

Kan ik van AngularJS naar Angular updaten?

Niet met een update. Het is een verbouwing, waarbij je onderdeel voor onderdeel opnieuw schrijft.

Er bestaat wel gereedschap waarmee je oud en nieuw tijdelijk naast elkaar in één applicatie laat draaien, zodat je in stappen kunt overzetten in plaats van in één keer. Dat is bij een systeem waar dagelijks mee gewerkt wordt bijna altijd de verstandigste route.

Waarmee vervang je AngularJS het beste?

Dat hangt af van wie het gaat onderhouden. React levert de grootste vijver om uit te vissen, Vue is lichter en sneller op te pakken, en Angular ligt qua opbouw het dichtst bij wat je had.

Bij een klein systeem is er nog een antwoord dat mensen overslaan: gewoon HTML met een beetje JavaScript, of een oplossing binnen het systeem dat je al hebt.

Hoe zie ik of een website AngularJS gebruikt?

Bekijk de broncode van de pagina en zoek naar attributen die met ng beginnen, zoals ng-app of ng-repeat. Kijk daarnaast in het netwerkscherm van je browser of er een bestand met angular in de naam wordt geladen, en welk versienummer daarbij staat. Begint dat met een 1, dan is het AngularJS.

Is AngularJS hetzelfde als JavaScript?

Nee. JavaScript is de programmeertaal die in elke browser zit. AngularJS is een verzameling code die in die taal is geschreven en die je werk uit handen neemt.

Je kunt JavaScript gebruiken zonder framework. Andersom kan niet.

Heb ik een framework nodig voor mijn bedrijfswebsite?

Vrijwel zeker niet. Een site met pagina's, een blog en een contactformulier heeft baat bij een systeem waarin je zelf teksten beheert, en niet bij techniek die is gemaakt voor schermen waar mensen in werken.

Een framework wordt pas interessant als je site eigenlijk een programma is: een klantportaal, een planner, een configurator, een dashboard.

Kan AngularJS samen met WordPress?

Technisch kan het, want WordPress kan gegevens uitleveren aan iets dat in de browser draait. Doen zou ik het niet met AngularJS, want je bouwt dan nieuwe code op een fundament dat geen updates meer krijgt.

Wil je binnen een WordPress-site één interactief onderdeel, kies dan iets kleins en modern, of los het op binnen WordPress zelf.

Wat is een single page application?

Een webapplicatie die één keer wordt geladen en daarna alles binnen dezelfde pagina afhandelt. Klik je op een menu-item, dan haalt de applicatie alleen de gegevens op en tekent het scherm opnieuw, zonder dat de browser een nieuwe pagina ophaalt.

Dat voelt snel bij gebruik en het kost je iets bij de eerste keer laden en bij de vindbaarheid. AngularJS was een van de eerste frameworks die deze aanpak breed toegankelijk maakte.

Kun je met AngularJS mobiele apps maken?

Dat kon, met omhulsels waarmee een webapplicatie als app in een telefoon draait. Er zijn destijds veel apps op die manier gemaakt.

Voor nieuw werk is dat geen route meer. Wie vandaag zo'n app wil bouwt hem in een moderner framework, of maakt er een progressive web app van die gewoon vanuit de browser werkt.

Waarom kom ik AngularJS nog zo vaak tegen?

Omdat er tussen 2013 en 2018 enorm veel mee gebouwd is, en omdat interne systemen zelden worden vervangen zolang ze draaien. Beheerpanelen, klantportalen en bedrijfsapplicaties zitten vaak achter een inlog, dus niemand ziet ze en niemand denkt eraan.

Precies daarom is het verstandig om een keer een lijst te maken van wat er binnen je bedrijf draait en waarop het gebouwd is. Die inventarisatie kost een middag en levert bijna altijd een verrassing op.