React og Vue er blandt de mest berømte JavaScript-biblioteker/-rammer til udvikling af webapplikationer. Hvis du er udvikler, kan det være svært at vide, hvilket framework/bibliotek du skal vælge, da begge dele har fordele og ulemper.
I denne artikel vil jeg forklare i detaljer, hvordan disse rammer/biblioteker fungerer, deres ligheder, deres forskelle og anvendelsesmulighederne for hvert bibliotek/framework.
Indholdsfortegnelse
Hvad er React?
React er et JavaScript-bibliotek udviklet af Meta, tidligere Facebook, til at skabe brugergrænseflader. Dette bibliotek giver dig mulighed for at bygge brugergrænseflader fra komponenter eller individuelle stykker.
React bruger en komponentbaseret arkitektur, der giver brugerne mulighed for at nedbryde deres kode i små genanvendelige komponenter. Dette bibliotek bruger virtuel DOM (Document Object Model) og opretter enkeltside-applikationer.
Mærker, der bruger React
Hvad er Vue?
Vue/Vue.js er en progressiv JavaScript-ramme til oprettelse af webbrugergrænseflader. Denne ramme er bygget på standard HTML, CSS og JavaScript.
Vue blev skabt af Evan You og udgivet officielt i februar 2014. Vue vedtager en komponentbaseret arkitektur, der giver udviklere mulighed for at opdele deres UI-kode i små, genbrugelige, selvstændige komponenter.
Mærker, der bruger Vue
- Tencent
- Alibaba
- Xiaomi
- Baidu
- Carrefour
React vs. Vue: Ligheder
Før vi graver ind i, hvordan React og Vue adskiller sig i funktionalitet, kan vi også tjekke deres ligheder.
Disse er nogle af de bemærkelsesværdige;
- Begge bruges til at skabe brugergrænseflader (front-end udvikling)
- Begge er JavaScript-rammer/biblioteker
- Begge bruger komponentbaseret arkitektur
- Begge bruger en virtuel DOM
React vs. Vue: Hurtig sammenligning
FeatureReactVueSyntaksJSXHTML-skabelonerFællesskabStor og aktivVoksende og aktivDokumentationOmfattendeGod LæringskurveModeratNemMobiludviklingReact NativeVue NativeState-administrationBruger ReduxBruger VeuxPopularitetMeget populærPopulæreBiblioteker og værktøjerEt stort bibliotek med biblioteker og biblioteker til vækst og biblioteker og biblioteker
React vs. Vue: Deep Comparison
Selvom du kan bruge React eller Vue til at bygge brugergrænseflader, adskiller disse to rammer/biblioteker sig på følgende måder;
#1. Syntaks
Reagere
React bruger JSX, en udvidelse, der giver udviklere mulighed for at skrive JavaScript og HTML i den samme fil. For at bruge JSX kaldes klasser i CSS klassenavne. Du kan gemme reaktionsfiler enten ved at bruge jsx- eller js-udvidelsen. For eksempel, hvis du har en komponent, du vil navngive “Hjem”, kan du gemme den som Home.jsx eller Home.js.
Vue
Vue er baseret på HTML, JavaScript og CSS. Det har en intuitiv syntaks, der kombinerer JavaScript, HTML-baserede skabeloner og yderligere direktiver. HTML-skabeloner ligner ren HTML, men indeholder særlige direktiver, der giver dig mulighed for at binde data til Document Object Model (DOM).
#2. Udvikling og fleksibilitet
Reagere
React er uden mening og tilbyder udviklere fleksibilitet, når de bygger applikationer. Som React-udvikler styrer du, hvordan du strukturerer kode.
Der er flere tilgange, du kan bruge til at oprette en React-app. Uanset din tilgang, skal du have installeret Node.js på din lokale maskine.
Til demonstrationsformål kan vi bruge create-react-app cli-tilgangen. Du kan vælge dit skabelonsprog som enten TypeScript eller JavaScript. Create-react-app-værktøjet vælger JavaScript som standard, hvis du ikke vælger skabelonsproget.
Indtast disse kommandoer i din terminal, hvis du vil følge med;
npx create-react-app my-app
cd my-app
npm start
Du kan nu åbne appen i din foretrukne kodeeditor.
Dette er strukturen af en React-app.
Du vil skrive det meste af din kode i mappen med navnet src.
Vue
Vue anses for at være en meningsfuld ramme, da den giver et perspektiv og en mere struktureret måde at bygge applikationer på. Dens konsekvente og klare arkitektur guider, hvordan du skal bygge dine applikationer. Vue opfordrer brugerne til at følge den bedste praksis og håndhæver også visse konventioner.
Du skal bruge vue-cli for at oprette en Vue-applikation. Sørg for, at du har Node.js, før du begynder at bygge din første Vue-app.
Kør disse kommandoer;
npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve
Du kan nu åbne appen i din foretrukne kodeeditor.
Dette er strukturen af en Vue-app;
Koden til din Vue-app vil ligge i src-mappen. Du finder også en komponentmappe, hvor du tilføjer alle dine komponenter og skriver kode.
#3. Ydeevne
React og Vue er hurtige; de fleste mennesker bemærker måske ikke deres præstationsforskelle. Begge bruger en virtuel DOM. Gengivelse i både React og Vue er meget optimeret.
En React-app er lille, omkring 1-2 MB stor, når den er kompileret. Dog kan bundtstørrelsen stige, når du tilføjer afhængigheder fra tredjepartsbiblioteker såsom Redux og React-Router.
En Vue base-app er omkring 16 kb. Vue leverer interne værktøjer til statsforvaltning. Du kan dog også bruge eksterne værktøjer, hvilket øger appstørrelsen.
#4. Statens ledelse
State management sporer og opdaterer alle de data, der bruges til at gengive en webapplikation. For eksempel kan et tilstandsstyringsværktøj kontrollere brugerinputdata og opdatere tilstanden. Et godt eksempel er en tæller, der øger tallet på skærmen for hvert klik.
I React kan du bruge Local State Management, hvis du er lille. Men efterhånden som appstørrelsen øges, har du brug for et eksternt bibliotek såsom Redux eller MobX til tilstandsstyring.
Vue har et indbygget reaktivitetssystem til styring af tilstand i små applikationer. Men efterhånden som kompleksiteten af din Vue-applikation øges, har du brug for et eksternt bibliotek såsom Vuex til at administrere tilstanden.
#5. Afprøvning
React og Vue tilbyder testrammer for at sikre, at udviklere producerer webapplikationer med få fejl. De to rammer understøtter enhedstest, integrationstest og end-to-end test. Nogle testrammer, såsom Jest, kan bruges på React- og Vue-applikationer.
React har ingen officiel testramme, men fungerer perfekt med Enzyme, Jest og React Testing Library.
For Vue-applikationer er Vue Test Utils det officielle testbibliotek. Du kan dog stadig bruge andre biblioteker afhængigt af dine behov.
React har et meget stort fællesskab baseret på aktiviteten på sin GitHub-profil. Projektet har over 43,5k gafler og over 208k stjerner. Uden for GitHub har platformen en stor tilhængerskare på sociale platforme som Discord, Facebook og LinkedIn.
Vue har en voksende tilhængerskare. Fællesskabet er dog lille end Reacts. En hurtig visning af denne platform på GitHub viser, at den har over 37.9k stjerner og over 6.9k gafler. Platformen tilbyder hjælp gennem sin Discord-kanal og DEV Community-håndtag.
#7. Værktøjer
React har et større økosystem af værktøjer og biblioteker. Disse værktøjer er i forskellige kategorier. Hvis du for eksempel vil have værktøjer til statsadministration, kan du bruge værktøjer som Redux, MobX eller Zustand. React har flere værktøjer til debugging, såsom React DevTools og Redux DevTools.
Vue har et mindre økosystem, men næsten alt hvad du behøver for at bygge en funktionel brugergrænseflade. Du kan bruge Vite-, Vue CLI- eller endda Nuxt.js-værktøjer til at generere en Vue-app. Du kan også fejlsøge din Vue-applikation ved hjælp af Vue DevTools.
#8. Indlæringskurve
Både React og Vue har unikke læringsmønstre/koncepter, som udviklere skal forstå.
React har en stejlere indlæringskurve, da den introducerer JSX, en ny syntaks. JSX giver udviklere mulighed for at skrive HTML og JavaScript i den samme fil. React har mange ressourcer og kan blive overvældende for elever, der lige er begyndt. For at få det bedste ud af React skal du sikre dig, at du lærer én ting ad gangen.
Vue anses for let at lære og bygget på standard HTML, CSS og JavaScript. Vues HTML-skabelon ligner HTML, hvilket gør den begyndervenlig. Platformen har også kortfattet og klar dokumentation.
Hvorfor bruge React?
- Komponentbaseret arkitektur: React giver dig mulighed for at opdele din kode i små, genbrugelige elementer.
- Fleksibel: React er uden mening, hvilket giver dig fleksibilitet med hensyn til, hvordan du strukturerer din kode.
- Stort fællesskab: React har et stort fællesskab, værktøjer og biblioteker for at lette applikationsopbygningen.
- Virtuel DOM: Den virtuelle DOM sikrer, at React kun opdaterer og gengiver de ændrede komponenter. Dette gør en React-app hurtig.
Begrænsninger af React
- Den stejle indlæringskurve for begyndere.
- Fællesskabets fragmentering skyldes, at mange biblioteker og rammer opnår de samme mål.
Hvorfor bruge Vue?
- Let at lære: Vue bruger standard HTML, hvilket gør det nemt at lære for begyndere.
- Komponentbaseret arkitektur: Vue giver dig mulighed for at opdele din kode i små, genbrugelige elementer.
- Progressiv: Du kan nemt tilføje Vue-komponenter til et eksisterende projekt eller endda ældre kodebaser.
Begrænsninger af Vue
- Lille samfund
- Få værktøjsmuligheder
Fra ovenstående sammenligning har du muligvis bemærket nogle tilfælde, hvor React vinder. Til gengæld er der flere områder, hvor Vue er vinderen. Vi kan opsummere dem som;
Hvornår skal du bruge React
- Du leder efter et bibliotek med et fantastisk fællesskab: Det faktum, at React blev oprettet og vedligeholdt af Meta, tidligere Facebook, har givet det popularitet frem for andre rammer/biblioteker. React har en stor følgeskare; du vil sandsynligvis finde hjælp i forskellige fora, når du går i stå.
- Du leder efter et bibliotek med flere jobs: Reacts popularitet har gjort det til at blive adopteret af mange virksomheder. Hvis du er studerende og ønsker et bibliotek med mange jobs, er React måske en bedre mulighed end Vue.
- Du vil have en platform med en stor bibliotekssamling: Reacts store følgerskare har også tiltrukket udviklere, der har bygget biblioteker og værktøjer til at udvide dets anvendelighed. Reacts økosystem er større end Vues, og du vil sandsynligvis endda blive forkælet, da du kan finde flere biblioteker, der udfører den samme funktion.
Hvornår skal du bruge Vue
- Du vil have en progressiv ramme: Den progressive tilgang gør det nemt at tilføje Vue eller dets komponenter til et eksisterende projekt. Derfor er Vue en god mulighed for at tilføje en ny ramme til dit gamle projekt.
- Du leder efter en ramme, der er nem at lære: Vue er lettere at lære sammenlignet med React. Rammen bruger HTML-skabeloner og er dermed nem at lære, hvis du kommer fra CSS og HTML.
- Du vil have en ramme med en lille bundtstørrelse: En applikations bundtstørrelse påvirker dens ydeevne. Vue er praktisk, hvis du bygger en applikation, hvor hastighed og ydeevne er afgørende på grund af dens lille bundtstørrelse.
Afslutter
Vi tror på, at du kan se forskellene mellem React og Vue. Valget mellem disse to rammer/biblioteker vil afhænge af din smag, arten af den app, du vil oprette, og dine mestringsniveauer.
Du kan tjekke vores artikel om React vs. Next.js.
