Inhoud
- 01. Hoekig
- 02. Reageer
- 03. Vue
- Hoe verhoudt de syntaxis van frameworks zich?
- Populariteit en markt
- Ontwikkeling van mobiele apps
- Andere kaders om naar uit te kijken in 2020
- Conclusie
In 2020 zijn we gezegend met een aantal frameworks en bibliotheken om ons te helpen bij webontwikkeling. Maar er was niet altijd zo veel variatie. In 2005 werd een nieuwe scripttaal genaamd Mocha gemaakt door een man genaamd Brendan Eich. Maanden nadat de naam was gewijzigd in LiveScript, werd de naam weer gewijzigd in JavaScript. Sindsdien heeft JavaScript een lange weg afgelegd.
In 2010 zagen we de introductie van Backbone en Angular als de eerste JavaScript-frameworks en in 2016 gebruikte 92 procent van alle websites JavaScript. In dit artikel gaan we kijken naar drie van de belangrijkste JavaScript-frameworks (Angular, React en Vue) en hun status in het komende decennium. Wilt u uw eigen site maken? Probeer deze lijst met websitebouwers.
Bekijk voor een aantal briljante bronnen onze lijst met de beste webontwerptools, onze verzameling webhostingservices en ook deze lijst met uitstekende software voor het testen van gebruikers.
01. Hoekig
AngularJS werd uitgebracht in 2010, maar in 2016 werd het volledig herschreven en uitgebracht als Angular 2. Angular is een volledig webframework ontwikkeld door Google, dat wordt gebruikt door Wix, Upwork, The Guardian, HBO en meer.
Voordelen:
- Uitzonderlijke ondersteuning voor TypeScript
- Met MVVM kunnen ontwikkelaars werk aan dezelfde app-sectie scheiden met dezelfde set gegevens
- Uitstekende documentatie
Nadelen:
- Heeft een beetje een leercurve
- Migreren van een oude versie kan moeilijk zijn.
- Updates worden vrij regelmatig geïntroduceerd, wat betekent dat ontwikkelaars zich eraan moeten aanpassen
Wat is het volgende?
In Angular 9 is Ivy de standaardcompiler. Het is ingevoerd om veel problemen met de prestaties en bestandsgrootte op te lossen. Het moet applicaties kleiner, sneller en eenvoudiger maken.
Wanneer u eerdere versies van Angular met React en Vue vergelijkt, is de
de uiteindelijke bundelmaten waren een stuk groter bij gebruik van Angular. Ivy maakt ook Progressive Hydration mogelijk, iets wat het Angular-team liet zien op I / O 2019. Progressive Hydration gebruikt Ivy om progressief op de server en de client te laden. Zodra een gebruiker bijvoorbeeld met een pagina begint te communiceren, wordt de code van de componenten samen met de runtime stukje bij beetje opgehaald.
Ivy lijkt de grote focus te zijn voor Angular en de hoop is om het beschikbaar te maken voor alle apps. Er is een opt-out-optie in versie 9, helemaal tot en met Angular 10.
02. Reageer
React werd oorspronkelijk in 2013 uitgebracht door Facebook en wordt gebruikt voor het bouwen van interactieve webinterfaces. Het wordt gebruikt door Netflix, Dropbox, PayPal en Uber om er maar een paar te noemen.
Voordelen:
- React maakt gebruik van de virtuele DOM, wat een positieve invloed heeft op de prestaties
- JSX is gemakkelijk te schrijven
- Updates brengen de stabiliteit niet in gevaar
Nadelen:
- Een van de grootste tegenslagen is dat er bibliotheken van derden nodig zijn om complexere apps te maken
- Ontwikkelaars worden in het ongewisse gelaten over de beste manier om zich te ontwikkelen
Wat is het volgende?
Op React Conf 2019 besprak het React-team een aantal dingen waaraan ze hebben gewerkt. De eerste is selectieve hydratatie, waarbij React alles pauzeert waar het aan werkt om prioriteit te geven aan de componenten waarmee de gebruiker interactie heeft. Terwijl de gebruiker interactie heeft met een bepaald gedeelte, wordt dat gebied gehydrateerd. Het team heeft ook gewerkt aan Suspense, het systeem van React voor het orkestreren van het laden van code, gegevens en afbeeldingen. Hierdoor kunnen componenten op iets wachten voordat ze worden weergegeven.
Zowel selectieve hydratatie als spanning worden mogelijk gemaakt door de gelijktijdige modus, waarmee apps sneller reageren door React de mogelijkheid te geven om grote blokken met werk met een lagere prioriteit in te voeren om zich te concentreren op iets dat een hogere prioriteit heeft, zoals reageren op gebruikersinvoer. Het team noemde toegankelijkheid ook als een ander gebied waar ze naar hebben gekeken, door zich te concentreren op twee specifieke onderwerpen: het beheren van focus en invoerinterfaces.
03. Vue
Vue is in 2014 ontwikkeld door Evan You, een ex-Google-medewerker. Het wordt gebruikt door Xiaomi, Alibaba en GitLab. Vue slaagde erin om in korte tijd en zonder de steun van een groot merk aan populariteit en ondersteuning van ontwikkelaars te winnen.
Voordelen:
- Zeer licht van formaat
- Beginnersvriendelijk - gemakkelijk te leren
- Geweldige gemeenschap
Nadelen:
- Niet ondersteund door een enorm bedrijf, zoals Reageren met Facebook en Angular met Google
- Geen echte structuur
Wat is het volgende?
Vue heeft zichzelf ten doel gesteld sneller, kleiner, beter onderhoudbaar te zijn en het voor ontwikkelaars gemakkelijker te maken om native te targeten (als u problemen ondervindt bij het onderhoud, overweeg dan een webhostingservice). De volgende release (3.0) komt uit in Q1 2020, inclusief een virtuele DOM-herschrijving voor betere prestaties, samen met verbeterde TypeScript-ondersteuning. Er is ook de toevoeging van de Composition API, die ontwikkelaars een nieuwe manier biedt om componenten te maken en deze op functie in plaats van bewerking te ordenen.
Degenen die Vue hebben ontwikkeld, zijn ook druk bezig geweest met Suspense, dat het renderen van uw componenten opschort en een fallback-component weergeeft totdat aan een voorwaarde is voldaan.
Een van de geweldige dingen met de updates van Vue is dat ze achterwaartse compatibiliteit behouden. Ze willen niet dat je je oude Vue-projecten kapotmaakt. We zagen dit bij de migratie van 1.0 naar 2.0 waar 90 procent van de API hetzelfde was.
Hoe verhoudt de syntaxis van frameworks zich?
Alle drie de frameworks hebben wijzigingen ondergaan sinds hun releases, maar een ding dat van cruciaal belang is om te begrijpen, is de syntaxis en hoe deze verschilt. Laten we eens kijken hoe de syntaxis zich verhoudt als het gaat om eenvoudige gebeurtenisbinding:
Vue: De v-on richtlijn wordt gebruikt om gebeurtenislisteners te koppelen die methoden aanroepen op Vue-instanties. Richtlijnen worden voorafgegaan door v- om aan te geven dat het speciale attributen zijn die door Vue worden geleverd en om speciaal reactief gedrag toe te passen op de gerenderde DOM. Event-handlers kunnen inline of als de naam van de methode worden geleverd.
sjabloon> knop v-on: click = "clickHandler"> Klik op mij / knop> / sjabloon> script> export standaard {naam: "HelloWorld", methoden: {clickHandler: functie () {console.log ("Ik werd aangeklikt! ”); }}}; / script>
Reageer: React plaatst mark-up en logica in JS en JSX, een syntaxisuitbreiding voor JavaScript. Met JSX wordt de functie doorgegeven als de gebeurtenishandler. Gebeurtenissen afhandelen met React-elementen lijkt sterk op het afhandelen van gebeurtenissen op DOM-elementen. Maar er zijn enkele syntactische verschillen; React-evenementen worden bijvoorbeeld genoemd met camelCase in plaats van kleine letters.
function Button () {function clickHandler (e) {console.log ("Ik werd geklikt"); } return button onClick = {clickHandler}> Klik op mij! / button>; }
Hoekig: Syntaxis voor gebeurtenisbinding bestaat uit een doelgebeurtenisnaam tussen haakjes aan de linkerkant van een gelijkteken en een aanhalingsteken aan de rechterkant. Als alternatief kunt u de Aan- prefix, bekend als de canonieke vorm.
@Component ({selector: "app-click-me", sjabloon: `button (click) =" onClickMe () "> Click me! / Button>`}) klasse ClickMeComponent {onClickMe () {console.log (" Je hebt op me geklikt! ”); }}
Populariteit en markt
Laten we beginnen met het bekijken van een algemeen beeld van de drie frameworks met betrekking tot de rest van het web door de statistieken van W3Techs te onderzoeken. Angular wordt momenteel gebruikt door 0,4 procent van alle websites, met een marktaandeel in JavaScript-bibliotheken van 0,5 procent. React wordt gebruikt door 0,3 procent van alle websites en een marktaandeel van 0,4 procent in JavaScript-bibliotheken, en Vue heeft 0,3 procent voor beide. Dit lijkt vrij gelijkmatig en je zou verwachten dat de cijfers stijgen.
Google trends: React is de afgelopen 12 maanden het populairst in zoektermen, op de voet gevolgd door Angular. Vue.js loopt behoorlijk ver achter; Een ding om te onthouden is dat Vue nog jong is in vergelijking met de andere twee.
Vacatures zoeken: Op het moment van schrijven zijn React en Angular vrij nauw op elkaar afgestemd in termen van vacatures op Indeed, met Vue ver achter. Op LinkedIn lijkt er echter meer vraag te zijn naar Vue-ontwikkelaars.
Stack Overflow: Als je de resultaten van de Stack Overflow Developer Survey voor 2019 bekijkt, zijn React en Vue.js beide de meest geliefde en gewilde webframeworks. Angular gaat op de negende plaats zitten voor meest geliefde maar derde meest gewilde.
GitHub: Vue heeft het meeste aantal sterren met 153k, maar het heeft het minste aantal bijdragers (283). React daarentegen heeft 140.000 sterren en 1.341 bijdragers. Angular heeft slechts 59,6.000 sterren, maar heeft met 1.579 het hoogste aantal bijdragers van de drie.
NPM-trends: De afbeelding hierboven toont statistieken van de afgelopen 12 maanden, waar je kunt zien dat React een hoger aantal downloads per maand heeft in vergelijking met Angular en Vue.
Ontwikkeling van mobiele apps
Een van de belangrijkste aandachtspunten voor de grote drie is mobiele implementatie. React heeft React Native, dat een populaire keuze is geworden voor het bouwen van iOS- en Android-apps, niet alleen voor React-gebruikers, maar ook voor de bredere gemeenschap voor app-ontwikkeling. Angular-ontwikkelaars kunnen NativeScript gebruiken voor native apps of Ionic voor hybride mobiele apps, terwijl Vue-ontwikkelaars de keuze hebben uit NativeScript of Vue Native. Vanwege de populariteit van mobiele applicaties blijft dit een belangrijk investeringsgebied.
Andere kaders om naar uit te kijken in 2020
Als je iets nieuws wilt proberen in 2020, bekijk dan deze JavaScript-frameworks.
Sintel: Een open-source framework voor het bouwen van webapplicaties dat werkt op basis van het MVVM-patroon. Het wordt gebruikt door verschillende grote bedrijven zoals Microsoft, Netflix en LinkedIn.
Meteoor: Een volledig JavaScript-platform voor het ontwikkelen van moderne web- en mobiele applicaties. Het is gemakkelijk te leren en heeft een zeer ondersteunende gemeenschap.
Conclusie
Alle drie de frameworks worden continu verbeterd, wat een bemoedigend teken is. Iedereen heeft zijn eigen perspectief en voorkeursoplossing over welke ze moeten gebruiken, maar het komt echt neer op de grootte van het project en waardoor je je prettiger voelt.
Het belangrijkste aspect is de voortdurende steun van hun gemeenschappen, dus als je van plan bent een nieuw project te starten en nog nooit een van de drie hebt gebruikt, dan denk ik dat je bij hen allemaal in veilige handen bent. Als je nog geen kans hebt gehad om een van de drie raamwerken te leren, dan raad ik je aan om er een nieuwjaarsresolutie van te maken om te beginnen met leren. De toekomst zal rond deze drie draaien.
Deze inhoud is oorspronkelijk verschenen in net magazine.
