Innehåll
- 01. Vinkel
- 02. Reagera
- 03. Vue
- Hur jämförs syntaxen med ramverk?
- Popularitet och marknad
- Utveckling av mobilappar
- Andra ramar att se upp för 2020
- Slutsats
2020 är vi välsignade med ett antal ramar och bibliotek som hjälper oss med webbutveckling. Men det var inte alltid så mycket variation. Tillbaka 2005 skapades ett nytt skriptspråk som heter Mocha av en kille som heter Brendan Eich. Månader efter att ha bytt namn till LiveScript ändrades namnet igen till JavaScript. Sedan dess har JavaScript kommit långt.
Under 2010 såg vi introduktionen av Backbone och Angular som de första JavaScript-ramarna och till 2016 använde 92 procent av alla webbplatser JavaScript. I den här artikeln kommer vi att titta på tre av de viktigaste JavaScript-ramarna (Angular, React och Vue) och deras status på väg in i nästa decennium. Vill du skapa din egen webbplats? Prova den här listan över webbplatsbyggare.
För några lysande resurser, kolla in vår lista över de bästa webbdesignverktygen, vår sammanställning av webbhotellstjänster och den här listan över utmärkta användartestprogram.
01. Vinkel
AngularJS släpptes 2010 men 2016 omskrevs det och släpptes som Angular 2. Angular är ett fullständigt webbramverk som utvecklats av Google, som används av Wix, Upwork, The Guardian, HBO med mera.
Fördelar:
- Exceptionellt stöd för TypeScript
- MVVM gör det möjligt för utvecklare att separera arbete på samma appavsnitt med samma uppsättning data
- Utmärkt dokumentation
Nackdelar:
- Har lite inlärningskurva
- Det kan vara svårt att migrera från en gammal version.
- Uppdateringar introduceras ganska regelbundet, vilket innebär att utvecklare måste anpassa sig till dem
Vad kommer härnäst?
I Angular 9 är Ivy standardkompilatorn. Det har införts för att lösa många problem kring prestanda och filstorlek. Det bör göra applikationer mindre, snabbare och enklare.
När du jämför tidigare versioner av Angular med React och Vue, kommer
slutliga buntstorlekar var mycket större vid användning av Angular. Ivy möjliggör också Progressive Hydration, vilket Angular-teamet visade upp vid I / O 2019. Progressive Hydration använder Ivy för att ladda progressivt på servern och klienten. Till exempel, när en användare börjar interagera med en sida, hämtas komponentkoden tillsammans med vilken runtime som helst.
Ivy verkar som det stora fokus framåt för Angular och hoppet är att göra det tillgängligt för alla appar. Det kommer att finnas ett alternativ för borttagning i version 9, hela vägen till Angular 10.
02. Reagera
React släpptes ursprungligen 2013 av Facebook och används för att bygga interaktiva webbgränssnitt. Den används av Netflix, Dropbox, PayPal och Uber för att nämna några.
Fördelar:
- React använder den virtuella DOM, vilket har en positiv inverkan på prestanda
- JSX är lätt att skriva
- Uppdateringar äventyrar inte stabiliteten
Nackdelar:
- En av de största motgångarna är att man behöver tredjepartsbibliotek för att skapa mer komplexa appar
- Utvecklare lämnas i mörkret på det bästa sättet att utvecklas
Vad kommer härnäst?
På React Conf 2019 berörde React-teamet ett antal saker de har arbetat med. Den första är Selective Hydration, där React pausar vad som helst för att prioritera de komponenter som användaren interagerar med. När användaren interagerar med ett visst avsnitt kommer det området att hydratiseras. Teamet har också arbetat med Suspense, som är Reacts system för att ordna laddning av kod, data och bilder. Detta gör att komponenterna kan vänta på något innan de renderas.
Både selektiv hydrering och spänning möjliggörs av Concurrent Mode, vilket gör det möjligt för appar att vara mer lyhörda genom att ge React möjligheten att gå in i stora block med lägre prioritetsarbete för att fokusera på något som är högre prioriterat, som att svara på användarens inmatning. Teamet nämnde också tillgänglighet som ett annat område de har tittat på genom att fokusera på två särskilda ämnen - hantera fokus och inmatningsgränssnitt.
03. Vue
Vue utvecklades 2014 av Evan You, tidigare Google-anställd. Den används av Xiaomi, Alibaba och GitLab. Vue lyckades vinna popularitet och stöd från utvecklare på kort tid och utan stöd från ett stort varumärke.
Fördelar:
- Mycket lätt i storlek
- Nybörjarvänligt - lätt att lära sig
- Stor gemenskap
Nackdelar:
- Stöds inte av ett stort företag, som React med Facebook och Angular med Google
- Ingen riktig struktur
Vad kommer härnäst?
Vue har satt sig som mål att vara snabbare, mindre, mer underhållbar och göra det lättare för utvecklare att rikta inbyggda (om du har problem med att underhålla, överväga en webbhotell). Nästa version (3.0) beräknas ske under Q1 2020, som inkluderar en virtuell DOM-omskrivning för bättre prestanda tillsammans med förbättrat TypeScript-stöd. Det finns också tillägg av Composition API, som ger utvecklare ett nytt sätt att skapa komponenter och organisera dem efter funktion istället för drift.
De som utvecklar Vue har också varit upptagen med att arbeta med Suspense, vilket stänger av din komponentåtergivning och gör en reservkomponent tills ett villkor är uppfyllt.
En av de bästa sakerna med Vue's uppdateringar är att de upprätthåller bakåtkompatibilitet. De vill inte att du ska bryta dina gamla Vue-projekt. Vi såg detta i migrationen från 1.0 till 2.0 där 90 procent av API: et var detsamma.
Hur jämförs syntaxen med ramverk?
Alla tre ramarna har genomgått förändringar sedan de släpptes, men en sak som är viktig att förstå är syntaxen och hur den skiljer sig. Låt oss titta på hur syntaxen jämförs när det gäller enkel händelsebindning:
Vue: De v-on direktivet används för att bifoga händelselyssnare som åberopar metoder på Vue-instanser. Direktiven är prefix med v- för att indikera att de är speciella attribut som tillhandahålls av Vue och tillämpa speciellt reaktivt beteende på den renderade DOM. Eventhanterare kan tillhandahållas antingen inbyggt eller som metodens namn.
mall> knapp v-on: klicka = ”clickHandler”> Klicka på mig / knapp> / mall> skript> exportera standard {namn: “HelloWorld”, metoder: {clickHandler: funktion () {console.log (“Jag klickade! ”); }}} / skript>
Reagera: React sätter markering och logik i JS och JSX, en syntaxförlängning till JavaScript. Med JSX skickas funktionen som händelsehanteraren. Hantering av händelser med React-element liknar mycket på att hantera händelser på DOM-element. Men det finns några syntaktiska skillnader; till exempel namnges React-händelser med camelCase snarare än små bokstäver.
funktionsknapp () {funktion clickHandler (e) {console.log (“Jag klickades”); } returknapp onClick = {clickHandler}> Klicka på mig! / knapp>; }
Vinkel: Händelsebindande syntax består av ett målhändelsens namn inom parentes till vänster om ett likhetstecken och ett citerat malluttal till höger. Alternativt kan du använda på- prefix, känd som den kanoniska formen.
@Component ({selector: “app-click-me”, mall: `button (click) =” onClickMe () ”> Click me! / Button>`}) exportklass ClickMeComponent {onClickMe () {console.log (“ Du klickade på mig! ”); }}
Popularitet och marknad
Låt oss börja med att titta på en helhetsbild av de tre ramarna med avseende på resten av webben genom att undersöka statistik från W3Techs. Angular används för närvarande av 0,4 procent av alla webbplatser, med en marknadsandel på JavaScript-biblioteket på 0,5 procent. React används av 0,3 procent av alla webbplatser och en marknadsandel på 0,4 procent JavaScript-bibliotek och Vue har 0,3 procent för båda. Detta verkar ganska jämnt och du kan förvänta dig att siffrorna stiger.
Google Trender: Under de senaste 12 månaderna är React det mest populära i söktermer, följt tätt av Angular. Vue.js ligger ganska långt efter; en sak att komma ihåg är dock att Vue fortfarande är ung jämfört med de andra två.
Jobbsökningar: I skrivande stund matchas React och Angular ganska nära när det gäller jobbannonser på Indeed med Vue långt efter. På LinkedIn verkar det dock finnas mer efterfrågan på Vue-utvecklare.
Stacköverflöde: Om du tittar på Stack Overflow Developer Survey-resultaten för 2019 är React och Vue.js båda de mest älskade och önskade webbramarna. Angular sätter sig i nionde position för mest älskade men tredje mest eftersökta.
GitHub: Vue har flest stjärnor med 153k men har minst antal deltagare (283). Reagerar å andra sidan har 140 000 stjärnor och 1 341 bidragsgivare. Angular har bara 59,6 000 stjärnor men har flest deltagare av de tre med 1 579.
NPM-trender: Bilden ovan visar statistik för de senaste 12 månaderna, där du kan se React har ett högre antal nedladdningar per månad jämfört med Angular och Vue.
Utveckling av mobilappar
Ett huvudfokus för de tre stora är mobil distribution. React har React Native, vilket har blivit ett populärt val för att bygga iOS- och Android-appar, inte bara för React-användare utan också för den bredare apputvecklingsgemenskapen. Vinkelutvecklare kan använda NativeScript för inbyggda appar eller Ionic för hybrid-mobilappar, medan Vue-utvecklare kan välja NativeScript eller Vue Native. På grund av populariteten hos mobilapplikationer är detta fortfarande ett viktigt investeringsområde.
Andra ramar att se upp för 2020
Om du vill prova något nytt 2020, kolla in dessa JavaScript-ramar.
Glödande kol: Ett ramverk med öppen källkod för att bygga webbapplikationer som fungerar baserat på MVVM-mönstret. Den används av flera stora företag som Microsoft, Netflix och LinkedIn.
Meteor: En full-stack JavaScript-plattform för utveckling av moderna webb- och mobilapplikationer. Det är lätt att lära sig och har en mycket stödjande gemenskap.
Slutsats
Alla tre ramar förbättras kontinuerligt, vilket är ett uppmuntrande tecken. Alla har sitt eget perspektiv och föredragna lösning om vilken de ska använda men det beror verkligen på projektets storlek och som gör att du känner dig mer bekväm.
Den viktigaste aspekten är fortsatt stöd från deras samhällen, så om du planerar att starta ett nytt projekt och aldrig har använt någon av de tre förut, tror jag att du är i säkra händer med dem alla. Om du inte har haft en chans att lära dig någon av de tre ramarna ännu, föreslår jag att du gör det till ditt nyårsresolution att börja lära dig. Framtiden kommer att kretsa kring dessa tre.
Detta innehåll uppträdde ursprungligen i nätmagasinet.
