AngularJS naar Angular migreren

Vóór end of life van AngularJS je bedrijfsapplicatie in Angular

met

Flusso logo def v2 diap RGB.png

Vanaf juli 2021 krijgt het front-end framework AngularJS de status "end-of-life". Leverancier Google, zal het framework uit 2010 niet meer onderhouden vanaf dat moment. Als je applicaties of apps gebruik maken van AngularJS, is het raadzaam om nu vast na te denken over de gevolgen en opties van de end of life.

van AngularJS naar Angular Migreren met Flusso

Gevolgen van AngularJS end of life voor je organisatie

Gebruikt je bedrijfsapplicatie nu AngularJS, dan blijft het per juli 2021 gewoon functioneren. De stop op ondersteuning vanuit Google heeft geen directe gevolgen, maar doordat andere onderdelen waarmee het framework samenwerkt wel blijven vernieuwen kunnen op den duur kwetsbaarheden of problemen ontstaan. Denk bijvoorbeeld aan browsers of dependencies die wel worden doorontwikkeld. Als je organisatie dan nog moet beginnen met migreren naar een nieuwe versie van Angular, dan ben je te laat en functioneert (een deel) van je applicaties per direct niet meer. 

 

AngularJS migratie in het kort

Een transitie naar Angular heeft een paar algemene gevolgen:

TypeScript i.p.v. JavaScript

In het Angular-framework zal je (op termijn) geen JavaScript meer gebruiken, maar overgaan op TypeScript.

Gebruik van Angular CLI met NPM

Je gebruikt geen Bower, Gulp of Grunt meer, maar Angular-CLI met NPM.

Code wordt componenten

Je huidige code ga je ombouwen naar componenten, de standaard in Angular.  

 

Flusso ontwikkelt maatwerk software voor bedrijven, met o.a. Java, Progress en Outsystems. Angular en voorheen AngularJS gebruiken we veel als framework in onze applicaties en apps. We kunnen je bedrijf vanuit die expertise adviseren of helpen migreren naar de nieuwste Angular versie. 

Overstappen naar Angular

Iedere maatwerk applicatie is uniek, maar inmiddels hebben we uit onze eerdere migraties voor verschillende klanten grofweg drie mogelijke scenario’s kunnen ontwikkelen. Drie van AngularJS naar Angular scenario’s:

  1. AngularJS hybride (met NgUpgrade)
  2. AngularJS look a like (met Decorator)
  3. Een Big Bang, de volledige ombouw in één keer

 

1. In hybride vorm van AngularJS naar Angular

In dit scenario maakt je organisatie stapsgewijs de transitie. Met gebruik van de tool NgUpgrade kun je wél overstappen naar de nieuwste versie van Angular en werken met Typescript, maar ga je niet direct alles ombouwen. Nieuwe functionaliteit ontwikkel je met Typescript, terwijl de oude functionaliteit met behulp van de tool wordt omgezet. 

 

Wat is de impact op je bedrijf?

De impact is matig, doordat in eerste instantie veel code ongewijzigd blijft. De NgUpgrade-integratie moet echter wel goed worden getest. Daarin gaat mogelijk veel tijd verloren voor code die op natuurlijke wijze later toch uitfaseert. 

 
voordelen:
  • Je organisatie zal langzaam en stapsgewijs kunnen ombouwen naar Angular

  • De huidige complexe schermen van je applicatie kunnen nog in AngularJS blijven

 

nadelen:
  • Een ontwikkelteam zal zich snel veel nieuwe technieken eigen moeten maken (zoals bijv. TypeScript, NgUpgrade en Angular)

  • Er ontstaat in het ontwikkelteam en je applicatie een mix van programmeertalen

  • NgUpgrade implementeren vraagt de nodige tijd en kennis. 

 

In dit scenario zal je de applicatie verschillende iteraties ondergaan. Dat is zowel een voordeel als een nadeel. De impact van de iteraties is minder groot, maar meerdere iteraties vraagt ook meerdere transities. Daarnaast blijven zowel AngularJS als NgUpgrade ‘mee draaien’ totdat uiteindelijk alles wordt overgezet naar Angular.

2. Met een look a like van AngularJS naar Angular

Met behulp van de tool Decorator werk je in dit scenario wel met Typescript en de nieuwe Angular, maar bouw je niet direct alles om. Deze tool zorgt bijvoorbeeld dat annotaties of classes aansluiten op de manier van werken in het nieuwe Angular. 

 

Wat is de impact op je bedrijf?

De risico’s en impact is klein doordat in eerste instantie veel code ongewijzigd kan blijven. Vooral de manier van werken en packaging wijzigen, waarbij Decorator als vertaler naar het nieuwe Angular fungeert.

 
voordelen:
  • Je organisatie zal langzaam en stapsgewijs kunnen ombouwen naar Angular.

  • Ook zal langzaam en stapsgewijs ombouwen naar TypeScript mogelijk zijn in dit scenario. 

 

nadelen:
  • Dit scenario is geen migratie, maar meer een overgangsfase. Uiteindelijk zal alle code toch een keer daadwerk gemigreerd moeten worden naar een nieuwe versie van Angular. Decorator zorgt slechts voor uitstel van die migratie. 

 

In dit scenario zal het ontwikkelteam stapsgewijs kennis kunnen maken met TypeScript en het nieuwe Angular, wat de afhankelijkheid van de leercurve minder groot maakt. Bij een daadwerkelijke migratie hebben ze die kennis al en kunnen ze direct door met ontwikkelen in de juiste taal. In dit scenario schuif je de daadwerkelijke migratie verder voor je uit.

3. In één keer AngularJS ombouwen naar Angular

In dit scenario bouw je de huidige software met AngularJS in één keer om van Javascript naar Typescript. Dat klinkt als meer werk, maar heeft ook aantrekkelijke voordelen en is stapsgewijs mogelijk. Alle schermen kunnen worden aangepast met de laatste wensen en nieuwste functionaliteit. Daardoor kun je meteen nadenken over nieuwe of efficiëntere workflows van de front-end en ontwikkeling daarvan. 

 

Wat is de impact op je bedrijf?

De impact van deze transitie is groter dan bij de andere scenario’s, doordat je de hele applicatie of app in één keer aanpast. Stapsgewijze aanpak kan bijvoorbeeld door AngularJS code vast om te zetten naar componenten of functionaliteit op te splitsen, in meerdere applicaties waarbij die voorheen één applicatie zat. Denk bijvoorbeeld aan meerdere portalen voor meerdere soorten gebruikers, die stapsgewijs worden gemigreerd. 

 
voordelen:
  • In deze variant gaat geen ontwikkeltijd zitten in oude software of techniek. Alle tijd wordt gestoken in een framework waar je weer jaren op kunt bouwen. 

  • Deze migratie bestaat uit minder stappen en heeft weinig iteraties. 

  • Vaak ontstaat op natuurlijke wijze betere workflow in je front-end, omdat één op één overbouwen niet noodzakelijk is. 

 

nadelen:
  • Een ontwikkelteam moet zich in hoog tempo veel nieuwe techniek eigen maken. 

  • Ondanks de voordelen in de toekomst, voelt dit scenario als alles overnieuw bouwen. 

 

In dit scenario kan je bedrijf in de transitie direct doorbouwen aan nieuwe features en functionaliteit. Zo gaat geen tijd verloren in oude software of techniek onderhouden. Wel vraagt dit scenario om een flinke en snelle transitie, maar daar kunnen we je over adviseren of bij helpen. 

Stap over van AngularJS naar Angular

In alle scenario’s kunnen we je organisatie adviseren of ondersteunen. Sommige scenario’s vragen om kennis en expertise van zowel Angular als AngularJS. Onze consultants hebben actuele ervaring met het framework en willen die kennis graag met je organisatie delen. Daarnaast kunnen ze natuurlijk de migratie voor je uitvoeren of je team (tijdelijk) ondersteunen.

Leer ons beter kennen

Bij Flusso blijf je altijd eigenaar van de code, werken we niet met vendor lockin of licenties en starten we onze samenwerking altijd met een persoonlijke kennismaking en vrijblijvend voorstel. Met zo'n zestig collega's werken we vanuit onze kantoren in Leusden (Utrecht) en Glimmen (Groningen) voor een diversiteit van zakelijke klanten. Lees meer over ons of bekijk de blog voor de meest recente ontwikkelingen in ons bedrijf. 

Collega Siemen is mede-eigenaar van Flusso en je eerste aanspreekpunt. Hij brengt je na een (telefonische) inventarisatie in contact met de consultant die het best bij past bij je bedrijf. Benieuwd naar de mogelijkheden? Stuur Siemen rechtstreeks een bericht of bel hem direct over migratie van AngularJS naar Angular. 

Siemen Klaver
Siemen kent alle oplossingen van Flusso en brengt je in contact met de consultant die je zoekt.
Generic placeholder image
Vereist
Vereist
Vereist