Indhold
- 01. Vinkel
- 02. Reager
- 03. Vue
- Hvordan sammenlignes syntaxen med rammer?
- Popularitet og marked
- Udvikling af mobilapps
- Andre rammer at passe på i 2020
- Konklusion
I 2020 er vi velsignet med en række rammer og biblioteker, der kan hjælpe os med webudvikling. Men der var ikke altid så meget variation. Tilbage i 2005 blev et nyt script-sprog kaldet Mocha oprettet af en fyr ved navn Brendan Eich. Måneder efter at være omdøbt til LiveScript blev navnet ændret igen til JavaScript. Siden da er JavaScript kommet langt.
I 2010 så vi introduktionen af Backbone og Angular som de første JavaScript-rammer, og i 2016 brugte 92 procent af alle websteder JavaScript. I denne artikel skal vi se på tre af de vigtigste JavaScript-rammer (Angular, React og Vue) og deres status på vej ind i det næste årti. Vil du lave dit eget sted? Prøv denne liste over hjemmesidebygere.
For nogle strålende ressourcer, se vores liste over topværktøjer til webdesign, vores opsamling af webhostingtjenester og denne liste over fremragende brugertestesoftware også.
01. Vinkel
AngularJS blev udgivet i 2010, men i 2016 blev den fuldstændigt omskrevet og udgivet som Angular 2. Angular er en fuldt udviklet webramme udviklet af Google, som bruges af Wix, Upwork, The Guardian, HBO og mere.
Fordele:
- Ekstraordinær support til TypeScript
- MVVM gør det muligt for udviklere at adskille arbejde på den samme app-sektion ved hjælp af det samme datasæt
- Fremragende dokumentation
Ulemper:
- Har lidt af en indlæringskurve
- Det kan være svært at migrere fra en gammel version.
- Opdateringer introduceres ganske regelmæssigt, hvilket betyder, at udviklere skal tilpasse sig dem
Hvad er det næste?
I Angular 9 er Ivy standard compileren. Det er blevet indført for at løse mange af problemerne omkring ydeevne og filstørrelse. Det skal gøre applikationer mindre, hurtigere og enklere.
Når du sammenligner tidligere versioner af Angular med React og Vue, bliver
endelige bundtstørrelser var meget større, når du bruger Angular. Ivy muliggør også progressiv hydrering, hvilket Angular-teamet viste frem ved I / O 2019. Progressiv hydrering bruger Ivy til gradvis at indlæse på serveren og klienten. Når en bruger f.eks. Begynder at interagere med en side, hentes komponenternes kode sammen med enhver runtime stykke for stykke.
Ivy virker som det store fokus fremad for Angular, og håbet er at gøre det tilgængeligt for alle apps. Der vil være en fravalgsmulighed i version 9, helt igennem til Angular 10.
02. Reager
React blev oprindeligt frigivet i 2013 af Facebook og bruges til at opbygge interaktive webgrænseflader. Det bruges af Netflix, Dropbox, PayPal og Uber for at nævne nogle få.
Fordele:
- React bruger den virtuelle DOM, som har en positiv indvirkning på ydeevnen
- JSX er let at skrive
- Opdateringer kompromitterer ikke stabiliteten
Ulemper:
- Et af de største tilbageslag er behov for tredjepartsbiblioteker for at oprette mere komplekse apps
- Udviklere efterlades i mørket på den bedste måde at udvikle sig på
Hvad er det næste?
På React Conf 2019 berørte React-teamet en række ting, de har arbejdet med. Den første er Selektiv hydrering, hvor React stopper, uanset hvad den arbejder på for at prioritere de komponenter, som brugeren interagerer med. Når brugeren interagerer med et bestemt afsnit, hydreres det område. Holdet har også arbejdet på Suspense, som er React's system til orkestrering af indlæsning af kode, data og billeder. Dette gør det muligt for komponenterne at vente på noget, før de gengives.
Både selektiv hydrering og spænding er muliggjort af Concurrent Mode, som gør det muligt for apps at være mere lydhøre ved at give React muligheden for at gå ind i store blokke med arbejde med lavere prioritet for at fokusere på noget, der er højere prioritet, som at reagere på brugerinput. Holdet nævnte også tilgængelighed som et andet område, de har set på, ved at fokusere på to bestemte emner - styring af fokus og inputgrænseflader.
03. Vue
Vue blev udviklet i 2014 af Evan You, en tidligere Google-medarbejder. Det bruges af Xiaomi, Alibaba og GitLab. Vue formåede at vinde popularitet og støtte fra udviklere på kort tid og uden opbakning fra et større brand.
Fordele:
- Meget let i størrelse
- Begyndervenlig - let at lære
- Fantastisk samfund
Ulemper:
- Ikke bakket op af et stort firma, som React med Facebook og Angular med Google
- Ingen reel struktur
Hvad er det næste?
Vue har sat sig som mål at være hurtigere, mindre, mere vedligeholdelig og gøre det lettere for udviklere at målrette mod native (hvis du har problemer med at vedligeholde, overvej en webhostingtjeneste). Den næste udgivelse (3.0) forventes i 1. kvartal 2020, som inkluderer en virtuel DOM-omskrivning for bedre ydeevne sammen med forbedret TypeScript Support. Der er også tilføjelse af Composition API, som giver udviklere en ny måde at oprette komponenter på og organisere dem efter funktion i stedet for drift.
De, der udvikler Vue, har også haft travlt med at arbejde på Suspense, som suspenderer din komponentgengivelse og gengiver en reservekomponent, indtil en betingelse er opfyldt.
En af de store ting med Vue's opdateringer er, at de opretholder bagudkompatibilitet. De vil ikke have dig til at bryde dine gamle Vue-projekter. Vi så dette i overgangen fra 1.0 til 2.0, hvor 90 procent af API'en var den samme.
Hvordan sammenlignes syntaxen med rammer?
Alle tre rammer har gennemgået ændringer siden deres udgivelser, men en ting, der er kritisk at forstå, er syntaksen, og hvordan den adskiller sig. Lad os se på, hvordan syntaksen sammenlignes, når det kommer til simpel begivenhedsbinding:
Vue: Det v-on direktivet bruges til at vedhæfte begivenhedslyttere, der påberåber metoder på Vue-forekomster. Direktiver er forud for v- for at indikere, at de er specielle attributter leveret af Vue og anvende særlig reaktiv opførsel til den gengivne DOM. Begivenhedshåndterere kan leveres enten indbygget eller som navnet på metoden.
skabelon> knap v-on: klik = ”clickHandler”> Klik på mig / knap> / skabelon> script> eksportstandard {navn: “HelloWorld”, metoder: {clickHandler: funktion () {console.log (“Jeg blev klikket! ”); }}} / script>
Reagere: React sætter markering og logik i JS og JSX, en syntaksudvidelse til JavaScript. Med JSX overføres funktionen som begivenhedshåndterer. Håndtering af hændelser med React-elementer svarer meget til håndtering af hændelser på DOM-elementer. Men der er nogle syntaktiske forskelle; for eksempel navngives reaktionshændelser ved hjælp af camelCase snarere end små bogstaver.
funktionsknap () {funktion clickHandler (e) {console.log (“Jeg blev klikket”); } returknap onClick = {clickHandler}> Klik på mig! / knap>; }
Vinkel: Begivenhedens bindingssyntaks består af et målhændelsesnavn inden for parentes til venstre for et ligetegn og en citeret skabelonerklæring til højre. Alternativt kan du bruge på- præfiks, kendt som den kanoniske form.
@Component ({selector: “app-click-me”, skabelon: `button (click) =” onClickMe () ”> Click me! / Button>`}) eksportklasse ClickMeComponent {onClickMe () {console.log (“ Du klikkede på mig! ”); }}
Popularitet og marked
Lad os begynde med at se på et samlet billede af de tre rammer med hensyn til resten af internettet ved at undersøge statistik fra W3Techs. Angular bruges i øjeblikket af 0,4 procent af alle websteder med en markedsandel på JavaScript-biblioteket på 0,5 procent. React bruges af 0,3 procent af alle websteder og en markedsandel på 0,4 procent JavaScript-bibliotek, og Vue har 0,3 procent for begge. Dette virker ret jævnt, og du forventer at se antallet stige.
Google-tendenser: I løbet af de sidste 12 måneder er React den mest populære inden for søgeudtryk, tæt fulgt af Angular. Vue.js er ganske langt bagefter; en ting at huske er dog, at Vue stadig er ung sammenlignet med de to andre.
Jobsøgninger: I skrivende stund matches React og Angular ret tæt med hensyn til jobfortegnelser på Indeed med Vue langt bagefter. På LinkedIn synes der imidlertid at være mere efterspørgsel efter Vue-udviklere.
Stakoverløb: Hvis du ser på Stack Overflow Developer Survey-resultaterne for 2019, er React og Vue.js begge de mest elskede og ønskede webrammer. Vinkel sætter sig i niende position for mest elskede, men tredje mest eftersøgte.
GitHub: Vue har flest stjerner med 153k, men det har mindst antal bidragydere (283). Reager på den anden side har 140.000 stjerner og 1.341 bidragydere. Angular har kun 59,6k stjerner, men har det højeste antal bidragydere ud af de tre med 1.579.
NPM-tendenser: Billedet ovenfor viser statistik for de sidste 12 måneder, hvor du kan se React har et højere antal downloads pr. Måned sammenlignet med Angular og Vue.
Udvikling af mobilapps
Et hovedfokus for de tre store er mobil implementering. React har React Native, som er blevet et populært valg til opbygning af iOS- og Android-apps, ikke kun for React-brugere, men også for det bredere app-udviklingssamfund. Vinkeludviklere kan bruge NativeScript til native apps eller Ionic til hybrid mobile apps, mens Vue-udviklere har et valg mellem NativeScript eller Vue Native. På grund af mobilapplikationernes popularitet er dette fortsat et vigtigt investeringsområde.
Andre rammer at passe på i 2020
Hvis du vil prøve noget nyt i 2020, skal du tjekke disse JavaScript-rammer.
Glød: En open source-ramme til opbygning af webapplikationer, der fungerer ud fra MVVM-mønsteret. Det bruges af flere store virksomheder som Microsoft, Netflix og LinkedIn.
Meteor: En JavaScript-platform med fuld stak til udvikling af moderne web- og mobilapplikationer. Det er let at lære og har et meget støttende samfund.
Konklusion
Alle tre rammer forbedres løbende, hvilket er et opmuntrende tegn. Alle har deres eget perspektiv og foretrukne løsning til, hvilken de skal bruge, men det kommer virkelig ned på projektets størrelse, og som får dig til at føle dig mere komfortabel.
Det vigtigste aspekt er den fortsatte støtte fra deres samfund, så hvis du planlægger at starte et nyt projekt og aldrig har brugt nogen af de tre før, så tror jeg, du er i sikre hænder med dem alle. Hvis du endnu ikke har haft en chance for at lære nogen af de tre rammer, så foreslår jeg at gøre det til dit nytårsforsæt at begynde at lære. Fremtiden vil dreje sig om disse tre.
Dette indhold blev oprindeligt vist i netmagasinet.
