Hvilket rammeverk bør du bruke?

React og Vue er blant de mest kjente JavaScript-bibliotekene/rammeverkene for utvikling av webapplikasjoner. Hvis du er en utvikler, kan det være vanskelig å vite hvilket rammeverk/bibliotek du skal velge, siden begge har fordeler og ulemper.

I denne artikkelen vil jeg forklare i detalj hvordan disse rammene/bibliotekene fungerer, deres likheter, forskjeller og brukstilfellene til hvert bibliotek/rammeverk.

Hva er React?

React er et JavaScript-bibliotek utviklet av Meta, tidligere Facebook, for å lage brukergrensesnitt. Dette biblioteket lar deg bygge brukergrensesnitt fra komponenter eller individuelle deler.

React bruker en komponentbasert arkitektur som lar brukere bryte ned koden sin i små gjenbrukbare komponenter. Dette biblioteket bruker virtuell DOM (Document Object Model) og lager enkeltsideapplikasjoner.

Merker som bruker React

Hva er Vue?

Vue/Vue.js er et progressivt JavaScript-rammeverk for å lage nettbrukergrensesnitt. Dette rammeverket er bygget på standard HTML, CSS og JavaScript.

Vue ble skapt av Evan You og utgitt offisielt i februar 2014. Vue tar i bruk en komponentbasert arkitektur som lar utviklere bryte opp UI-koden i små, gjenbrukbare, selvstendige komponenter.

Merker som bruker Vue

• Tencent
• Alibaba
• Xiaomi
• Baidu
• Carrefour

React vs. Vue: Likheter

Før vi graver inn i hvordan React og Vue er forskjellige i funksjonalitet, kan vi også sjekke likhetene deres.

Dette er noen av de bemerkelsesverdige;

• Begge brukes til å lage brukergrensesnitt (front-end utvikling)
• Begge er JavaScript-rammeverk/biblioteker
• Begge bruker komponentbasert arkitektur
• Begge bruker en virtuell DOM

React vs. Vue: Rask sammenligning

FunksjonReactVueSyntaksJSXHTML-maler FellesskapStor og aktivVoksende og aktivDokumentasjonOmfattendeGodLæringskurveModeratEnkelMobilutviklingReact NativeVue NativeState-administrasjonBruker ReduxBruker VeuxPopularityVeldig populærPopulæreBiblioteker og verktøyEn stor katalog med verktøy og biblioteker for vekst fra tredjeparter og biblioteker og biblioteker

React vs. Vue: Deep Comparison

Selv om du kan bruke React eller Vue til å bygge brukergrensesnitt, er disse to rammeverkene/bibliotekene forskjellige på følgende måter;

#1. Syntaks

Reagere

React bruker JSX, en utvidelse som lar utviklere skrive JavaScript og HTML i samme fil. For å bruke JSX, er klasser i CSS kalt klassenavn. Du kan lagre react-filer enten ved å bruke jsx- eller js-utvidelsen. Hvis du for eksempel har en komponent du vil gi navnet «Hjem», kan du lagre den som Home.jsx eller Home.js.

Vue

Vue er basert på HTML, JavaScript og CSS. Den har en intuitiv syntaks som kombinerer JavaScript, HTML-baserte maler og tilleggsdirektiver. HTML-maler ligner på ren HTML, men inneholder spesielle direktiver som lar deg binde data til Document Object Model (DOM).

#2. Utvikling og fleksibilitet

Reagere

React er uten mening, og tilbyr utviklere fleksibilitet når de bygger applikasjoner. Som React-utvikler kontrollerer du hvordan du strukturerer kode.

Det er flere tilnærminger du kan bruke for å lage en React-app. Uavhengig av tilnærmingen din, må du ha installert Node.js på din lokale maskin.

For demonstrasjonsformål kan vi bruke create-react-app cli-tilnærmingen. Du kan velge malspråk som enten TypeScript eller JavaScript. Create-react-app-verktøyet velger JavaScript som standard hvis du ikke velger malspråket.

Skriv inn disse kommandoene i terminalen din hvis du vil følge med;

npx create-react-app my-app

cd my-app

npm start

Du kan nå åpne appen i ditt favorittkoderedigeringsprogram.

Dette er strukturen til en React-app.

Du vil skrive det meste av koden din i mappen som heter src.

Vue

Vue anses for å være et meningsfylt rammeverk da det gir et perspektiv og en mer strukturert måte å bygge applikasjoner på. Dens konsekvente og klare arkitektur veileder hvordan du bør bygge applikasjonene dine. Vue oppfordrer brukere til å følge beste praksis og håndhever også visse konvensjoner.

Du trenger vue-cli for å lage en Vue-applikasjon. Sørg for at du har Node.js før du begynner å bygge din første Vue-app.

Kjør disse kommandoene;

npm install -g @vue/cli

vue create my-vue-app

cd my-vue-app

npm run serve

Du kan nå åpne appen i ditt favorittkoderedigeringsprogram.

Dette er strukturen til en Vue-app;

Koden for Vue-appen din vil ligge inne i src-mappen. Du finner også en komponentmappe hvor du legger til alle komponentene dine og skriver kode.

#3. Opptreden

React og Vue er raske; de fleste merker kanskje ikke ytelsesforskjellene deres. Begge bruker en virtuell DOM. Gjengivelse i både React og Vue er svært optimalisert.

En React-app er liten, omtrent 1-2 MB stor når den er kompilert. Imidlertid kan buntstørrelsen øke når du legger til avhengigheter fra tredjepartsbiblioteker som Redux og React-Router.

En Vue base-app er rundt 16kb. Vue gir interne verktøy for statlig ledelse. Du kan imidlertid også bruke eksterne verktøy, noe som øker appstørrelsen.

#4. Statlig ledelse

Statens ledelse sporer og oppdaterer alle dataene som brukes til å gjengi en nettapplikasjon. Et tilstandsadministrasjonsverktøy kan for eksempel sjekke brukerinndata og oppdatere tilstanden. Et godt eksempel er en teller som øker tallet på skjermen for hvert klikk.

I React kan du bruke Local State Management hvis du er liten. Etter hvert som appstørrelsen øker, trenger du imidlertid et eksternt bibliotek som Redux eller MobX for statsadministrasjon.

Vue har et innebygd reaktivitetssystem for å administrere tilstand i små applikasjoner. Men ettersom kompleksiteten til Vue-applikasjonen øker, trenger du et eksternt bibliotek som Vuex for å administrere tilstanden.

#5. Testing

React og Vue tilbyr testrammer for å sikre at utviklere produserer nettapplikasjoner med få feil. De to rammeverkene støtter enhetstesting, integrasjonstesting og ende-til-ende-testing. Noen testrammeverk, for eksempel Jest, kan brukes på React- og Vue-applikasjoner.

React har ingen offisiell testramme, men fungerer perfekt med Enzyme, Jest og React Testing Library.

For Vue-applikasjoner er Vue Test Utils det offisielle testbiblioteket. Du kan imidlertid fortsatt bruke andre biblioteker avhengig av dine behov.

React har et veldig stort fellesskap basert på aktiviteten på GitHub-profilen. Prosjektet har over 43,5k gafler og over 208k stjerner. Utenfor GitHub har plattformen en stor tilhengerskare på sosiale plattformer som Discord, Facebook og LinkedIn.

Vue har en voksende tilhengerskare. Samfunnet er imidlertid lite enn Reacts. En rask visning av denne plattformen på GitHub viser at den har over 37.9k stjerner og over 6.9k gafler. Plattformen tilbyr hjelp gjennom Discord-kanalen og DEV Community-håndtaket.

#7. Verktøy

React har et større økosystem av verktøy og biblioteker. Disse verktøyene er i forskjellige kategorier. Hvis du for eksempel vil ha statlige administrasjonsverktøy, kan du bruke verktøy som Redux, MobX eller Zustand. React har flere verktøy for feilsøking, som React DevTools og Redux DevTools.

Vue har et mindre økosystem, men nesten alt du trenger for å bygge et funksjonelt brukergrensesnitt. Du kan bruke Vite-, Vue CLI- eller til og med Nuxt.js-verktøy for å generere en Vue-app. Du kan også feilsøke Vue-applikasjonen din ved å bruke Vue DevTools.

#8. Læringskurve

Både React og Vue har unike læringsmønstre/konsepter utviklere må forstå.

React har en brattere læringskurve når den introduserer JSX, en ny syntaks. JSX lar utviklere skrive HTML og JavaScript i samme fil. React har mange ressurser og kan bli overveldende for elever som akkurat har begynt. For å få det beste ut av React, sørg for at du lærer én ting om gangen.

Vue anses som lett å lære og bygget på standard HTML, CSS og JavaScript. Vues HTML-mal ligner HTML, noe som gjør den nybegynnervennlig. Plattformen har også kortfattet og tydelig dokumentasjon.

Hvorfor bruke React?

• Komponentbasert arkitektur: React lar deg dele koden din i små gjenbrukbare elementer.
• Fleksibel: React er meningsløs, noe som gir deg fleksibilitet med hensyn til hvordan du strukturerer koden din.
• Stort fellesskap: React har et stort fellesskap, verktøy og biblioteker for å lette applikasjonsbyggingen.
• Virtual DOM: Den virtuelle DOM sikrer at React kun oppdaterer og gjengir de endrede komponentene. Dette gjør en React-app rask.

Begrensninger for React

• Den bratte læringskurven for nybegynnere.
• Samfunnsfragmentering skyldes at mange biblioteker og rammeverk oppnår de samme målene.

Hvorfor bruke Vue?

• Lett å lære: Vue bruker standard HTML, noe som gjør det enkelt å lære for nybegynnere.
• Komponentbasert arkitektur: Vue lar deg dele koden din i små gjenbrukbare elementer.
• Progressiv: Du kan enkelt legge til Vue-komponenter til et eksisterende prosjekt eller til og med eldre kodebaser.

Begrensninger for Vue

• Lite samfunn
• Få verktøymuligheter

Fra sammenligningen ovenfor kan du ha notert noen tilfeller når React vinner. På den annen side er det flere områder der Vue er vinneren. Vi kan oppsummere dem som;

Når skal du bruke React

• Du leter etter et bibliotek med et flott fellesskap: Det faktum at React ble opprettet og vedlikeholdt av Meta, tidligere Facebook, har gitt det popularitet over andre rammeverk/biblioteker. React har en stor tilhengerskare; du vil sannsynligvis finne hjelp i forskjellige fora når du står fast.
• Du ser etter et bibliotek med flere jobber: Reacts popularitet har gjort at det har blitt tatt i bruk av mange selskaper. Hvis du er student og ønsker et bibliotek med mange jobber, kan React være et bedre alternativ enn Vue.
• Du vil ha en plattform med en stor biblioteksamling: Reacts store tilhengerskare har også tiltrukket seg utviklere som har bygget biblioteker og verktøy for å utvide brukervennligheten. Reacts økosystem er større enn Vues, ​​og du vil sannsynligvis til og med bli bortskjemt ettersom du kan finne flere biblioteker som utfører samme funksjon.

Når du skal bruke Vue

• Du vil ha et progressivt rammeverk: Den progressive tilnærmingen gjør det enkelt å legge til Vue eller dets komponenter til et eksisterende prosjekt. Dermed er Vue et godt alternativ for å legge til et nytt rammeverk til ditt gamle prosjekt.
• Du ser etter et rammeverk som er enkelt å lære: Vue er lettere å lære sammenlignet med React. Rammeverket bruker HTML-maler og er dermed enkelt å lære om du kommer fra CSS og HTML.
• Du vil ha et rammeverk med en liten buntstørrelse: Buntstørrelsen til en applikasjon påvirker ytelsen. Vue kommer godt med hvis du bygger en applikasjon der hastighet og ytelse er avgjørende på grunn av den lille buntstørrelsen.

Innpakning

Vi tror du kan se forskjellene mellom React og Vue. Valget mellom disse to rammeverkene/bibliotekene vil avhenge av smaken din, arten av appen du vil lage, og mestringsnivåene dine.

Du kan sjekke artikkelen vår om React vs. Next.js.