Innhold
- 01. Vinkel
- 02. Reager
- 03. Vue
- Hvordan sammenlignes syntaksen til rammeverk?
- Popularitet og marked
- Utvikling av mobilapper
- Andre rammer å se etter i 2020
- Konklusjon
I 2020 er vi velsignet med en rekke rammer og biblioteker for å hjelpe oss med nettutvikling. Men det var ikke alltid så mye variasjon. Tilbake i 2005 ble et nytt skriptspråk kalt Mocha opprettet av en fyr som heter Brendan Eich. Måneder etter at navnet ble omdøpt til LiveScript, ble navnet endret igjen til JavaScript. Siden den gang har JavaScript kommet langt.
I 2010 så vi introduksjonen av Backbone and Angular som de første JavaScript-rammene, og innen 2016 brukte 92 prosent av alle nettsteder JavaScript. I denne artikkelen skal vi se på tre av de viktigste JavaScript-rammene (Angular, React og Vue) og status over det neste tiåret. Vil du lage ditt eget nettsted? Prøv denne listen over nettstedbyggere.
For noen strålende ressurser, sjekk ut listen vår over de beste verktøyene for webdesign, vår oversikt over webhotelltjenester og denne listen over utmerket programvare for brukertesting også.
01. Vinkel
AngularJS ble utgitt i 2010, men i 2016 ble den fullstendig omskrevet og utgitt som Angular 2. Angular er et fullverdig web-rammeverk utviklet av Google, som brukes av Wix, Upwork, The Guardian, HBO og mer.
Fordeler:
- Eksepsjonell støtte for TypeScript
- MVVM gjør det mulig for utviklere å skille arbeid på den samme appdelen ved å bruke samme datasett
- Utmerket dokumentasjon
Ulemper:
- Har litt læringskurve
- Migrering fra en gammel versjon kan være vanskelig.
- Oppdateringer blir introdusert ganske regelmessig, noe som betyr at utviklere trenger å tilpasse seg dem
Hva blir det neste?
I Angular 9 er Ivy standard kompilator. Den er på plass for å løse mange av problemene rundt ytelse og filstørrelse. Det skal gjøre applikasjoner mindre, raskere og enklere.
Når du sammenligner tidligere versjoner av Angular med React og Vue, blir
endelige pakke størrelser var mye større når du bruker Angular. Ivy gjør også Progressive Hydration mulig, noe Angular-teamet viste frem i I / O 2019. Progressive Hydration bruker Ivy til å laste progressivt på serveren og klienten. Når en bruker for eksempel begynner å samhandle med en side, hentes komponentkoden sammen med hvilken som helst kjøretid stykke for stykke.
Ivy virker som det store fokuset fremover for Angular, og håpet er å gjøre det tilgjengelig for alle apper. Det vil være et alternativ for fravalg i versjon 9, helt til Angular 10.
02. Reager
React ble opprinnelig utgitt i 2013 av Facebook og brukes til å bygge interaktive webgrensesnitt. Den brukes av Netflix, Dropbox, PayPal og Uber for å nevne noen.
Fordeler:
- React bruker den virtuelle DOM, som har en positiv innvirkning på ytelsen
- JSX er lett å skrive
- Oppdateringer kompromitterer ikke stabiliteten
Ulemper:
- Et av de viktigste tilbakeslagene er å trenge tredjepartsbiblioteker for å lage mer komplekse apper
- Utviklere blir liggende i mørket på den beste måten å utvikle seg på
Hva blir det neste?
På React Conf 2019 berørte React-teamet en rekke ting de har jobbet med. Den første er Selective Hydration, der React vil stoppe uansett hva den jobber med for å prioritere komponentene som brukeren kommuniserer med. Når brukeren samhandler med en bestemt seksjon, vil området bli hydrert. Teamet har også jobbet med Suspense, som er React sitt system for å organisere innlasting av kode, data og bilder. Dette gjør at komponentene kan vente på noe før de gjengis.
Både selektiv hydrering og spenning er mulig gjennom Concurrent Mode, som gjør det mulig for apper å være mer responsive ved å gi React muligheten til å gå inn i store blokker med lavere prioritetsarbeid for å fokusere på noe som er høyere prioritet, som å svare på brukerinngang. Teamet nevnte også tilgjengelighet som et annet område de har sett på, ved å fokusere på to bestemte emner - å administrere fokus og inngangsgrensesnitt.
03. Vue
Vue ble utviklet i 2014 av Evan You, en tidligere Google-ansatt. Den brukes av Xiaomi, Alibaba og GitLab. Vue klarte å få popularitet og støtte fra utviklere på kort tid og uten støtte fra et stort merke.
Fordeler:
- Veldig lett i størrelse
- Nybegynnervennlig - lett å lære
- Flott samfunn
Ulemper:
- Ikke støttet av et stort selskap, som Reager med Facebook og Angular med Google
- Ingen reell struktur
Hva blir det neste?
Vue har satt seg som mål å være raskere, mindre, mer vedlikeholdbare og gjøre det lettere for utviklere å målrette mot innfødte (hvis du har problemer med å vedlikeholde, bør du vurdere en webhotelltjeneste). Neste utgivelse (3.0) er på vei i Q1 2020, som inkluderer en virtuell DOM-omskriving for bedre ytelse sammen med forbedret TypeScript-støtte. Det er også tillegg av Composition API, som gir utviklere en ny måte å lage komponenter og organisere dem etter funksjon i stedet for drift.
De som utvikler Vue har også vært opptatt med å jobbe med Suspense, som suspenderer komponentgjengivelsen og gjengir en reservekomponent til en betingelse er oppfylt.
En av de store tingene med Vue-oppdateringene er at de opprettholder bakoverkompatibilitet. De vil ikke at du skal bryte de gamle Vue-prosjektene dine. Vi så dette i overgangen fra 1.0 til 2.0 der 90 prosent av API var den samme.
Hvordan sammenlignes syntaksen til rammeverk?
Alle de tre rammene har gjennomgått endringer siden utgivelsene, men en ting som er viktig å forstå er syntaksen og hvordan den skiller seg ut. La oss ta en titt på hvordan syntaksen kan sammenlignes når det gjelder enkel hendelsesbinding:
Vue: De v-on direktivet brukes til å feste hendelseslyttere som påkaller metoder på Vue-forekomster. Direktiver er prefikset med v- for å indikere at de er spesielle attributter levert av Vue og anvende spesiell reaktiv oppførsel på den gjengitte DOM. Eventbehandlere kan leveres enten innebygd eller som navnet på metoden.
mal> knapp v-on: klikk = ”clickHandler”> Klikk meg / knapp> / mal> skript> eksport standard {navn: “HelloWorld”, metoder: {clickHandler: funksjon () {console.log (“Jeg ble klikket! ”); }}}; / skript>
Reagere: React setter markering og logikk i JS og JSX, en syntaksutvidelse til JavaScript. Med JSX overføres funksjonen som hendelsesbehandler. Håndtering av hendelser med React-elementer er veldig lik håndtering av hendelser på DOM-elementer. Men det er noen syntaktiske forskjeller; for eksempel blir React-hendelser navngitt ved hjelp av camelCase i stedet for små bokstaver.
funksjonsknapp () {funksjon clickHandler (e) {console.log (“Jeg ble klikket”); } retur-knapp onClick = {clickHandler}> Klikk meg! / knapp>; }
Vinklet: Hendelsesbindende syntaks består av et målhendelsesnavn innenfor parentes til venstre for et likhetstegn og et sitert maluttalelse til høyre. Alternativt kan du bruke på- prefiks, kjent som den kanoniske formen.
@Component ({selector: “app-click-me”, mal: `button (click) =” onClickMe () ”> Click me! / Button>`}) eksportklasse ClickMeComponent {onClickMe () {console.log (“ Du klikket meg! ”); }}
Popularitet og marked
La oss begynne med å se på et samlet bilde av de tre rammene i forhold til resten av nettet ved å undersøke statistikk fra W3Techs. Angular brukes for øyeblikket av 0,4 prosent av alle nettsteder, med en markedsandel på JavaScript-biblioteket på 0,5 prosent. React brukes av 0,3 prosent av alle nettsteder og en markedsandel på 0,4 prosent JavaScript-bibliotek, og Vue har 0,3 prosent for begge. Dette virker ganske jevnt, og du forventer å se tallene stige.
Google-trender: I løpet av de siste 12 månedene er React den mest populære i søkeord, tett fulgt av Angular. Vue.js er ganske langt bak; Imidlertid er en ting å huske at Vue fortsatt er ung sammenlignet med de to andre.
Jobbsøk: I skrivende stund samsvarer React og Angular ganske tett når det gjelder stillingsannonser på Indeed med Vue langt bak. På LinkedIn ser det imidlertid ut til å være større etterspørsel etter Vue-utviklere.
Stack Overflow: Hvis du ser på Stack Overflow Developer Survey-resultatene for 2019, er React og Vue.js begge de mest elskede og ønsket nettrammene. Angular setter seg i niende posisjon for mest elskede, men tredje mest etterspurte.
GitHub: Vue har flest stjerner med 153k, men det har minst antall bidragsytere (283). Reager derimot har 140 000 stjerner og 1 341 bidragsytere. Angular har bare 59,6 000 stjerner, men har det høyeste antallet bidragsytere av de tre med 1579.
NPM-trender: Bildet over viser statistikk for de siste 12 månedene, hvor du kan se React har et høyere antall nedlastinger per måned sammenlignet med Angular og Vue.
Utvikling av mobilapper
Et hovedfokus for de tre store er mobil distribusjon. React har React Native, som har blitt et populært valg for å bygge iOS- og Android-apper, ikke bare for React-brukere, men også for det bredere apputviklingssamfunnet. Kantede utviklere kan bruke NativeScript for native apps eller Ionic for hybrid mobile apps, mens Vue-utviklere kan velge NativeScript eller Vue Native. På grunn av populariteten til mobilapplikasjoner, er dette fortsatt et sentralt investeringsområde.
Andre rammer å se etter i 2020
Hvis du vil prøve noe nytt i 2020, kan du sjekke ut disse JavaScript-rammene.
Glød: Et open source-rammeverk for å bygge webapplikasjoner som fungerer basert på MVVM-mønsteret. Den brukes av flere store selskaper som Microsoft, Netflix og LinkedIn.
Meteor: En full-stack JavaScript-plattform for utvikling av moderne web- og mobilapplikasjoner. Det er lett å lære og har et veldig støttende fellesskap.
Konklusjon
Alle de tre rammene forbedres kontinuerlig, noe som er et oppmuntrende tegn. Alle har sitt eget perspektiv og foretrukne løsning om hvilken de skal bruke, men det kommer virkelig ned på størrelsen på prosjektet og som gjør at du føler deg mer komfortabel.
Det viktigste aspektet er fortsatt støtte fra samfunnene deres, så hvis du planlegger å starte et nytt prosjekt og aldri har brukt noen av de tre før, så tror jeg du er i trygge hender med dem alle. Hvis du ikke har hatt sjansen til å lære noen av de tre rammene ennå, foreslår jeg at du gjør det til ditt nyttårsforsett å begynne å lære. Fremtiden vil dreie seg om disse tre.
Dette innholdet dukket opprinnelig opp i nettmagasinet.
