Når du tænker på JavaScript-rammer, vil du sandsynligvis ende med at sidde fast mellem Vue.js og React, da de tilfældigvis er de mest populære inden for JavaScript økosystem. Så hvordan kan du beslutte, hvilken der er bedst egnet til det projekt, du er ved at kode eller administrere? Skal du først se på selve rammen og overvej dens indlæringskurve Eller i stedet analysere Projektets størrelse og kompleksitet at træffe en præcis beslutning?
Hvis nogen af disse spørgsmål kom i tankerne for nylig, hvad enten du er en front-end-udvikler eller leder et team, fortsæt med at læse: Jeg lægger mine hænder ned på arbejde og bygget en app på begge rammer. Dets hovedmål var at tillade os, at Imaginær sky, at stemme internt om, hvilke spil vi foretrækker at købe til PlayStation 4, vi har på vores kontor - ex libris i vores frokostpauser!
I dette blogindlæg deler jeg min indsigt, baseret på den erfaring, jeg havde med Vue.js og React. Ud fra dens popularitet over tid, kampe, samfundsstøtte og andre relaterede emner, vil jeg rydde det hele op, så du kan få en bedre idé om hver ramme, og hvilke problemer de løser.
React er bakket op af tech-giganten Facebook, giver den stabilitet og langsigtede støtte, som en tech-gigant kan yde. React blev open source i maj 2013, hvilket gjorde det muligt for dets samfund at oprette utallige tredjepartsbiblioteker for at hjælpe dig med at nå dit ønskede mål.
Alternativt blev Vue.js oprettet af Evan You, en tidligere Google medarbejder, der arbejdede i deres Angular team. Evan havde visionen om at skabe en ramme, der kombinerede det bedste fra React, Ember og Angular, for at give yderligere funktioner og forbedre kodningsydelsen. Men da Vue.js ikke er sikkerhedskopieret af en teknisk gigant, er det stoler på sit aktive fællesskab at skubbe det fremad.
Stigningen i popularitet af begge disse rammer tager æren for de innovative værktøjer, som både Vue.js og React tilbyder til Front-end-udvikleren. For eksempel:
Ifølge StackOverflow, Vue.js popularitet såvel som React's, er steget gennem årene, mens front-end-udviklingsindustrien får mere og mere relevans over hele verden.
For at få et klarere billede kontrollerede jeg begge rammers aktivitet i betragtning af antallet af spørgsmål, der i øjeblikket er aktive i StackOverflow. Her er hvad jeg fandt: mens Vue.js har omkring 50.000 spørgsmål, Reactjs tag har næsten 180 000 spørgsmål. Kæmpe forskel, ikke?
En anden nøgleindikator, jeg tør dig se på, er npm (Node Package Manager) downloads.
Om dette emne, sammenligning af React vs Vue.js, kan du se, at React stadig fører med en betydelig margin i forhold til Vue.js. På trods af sine downloads er Vue.js langsomt steget gennem årene.
Imidlertid, den største fordel Vue.js har i forhold til React ses på Github-stjerner. Se på grafikken nedenfor:
Vue.js overgik React i midten af 2018 og fortsætter stadig i spidsen.
Dette er helt klart et tegn på et støttende samfund bygget op omkring aktive Vue.js udviklere, dedikeret til løbende at skubbe det fremad.
Udfordringen? Vi har en ny PlayStation 4 på kontoret, og alle skændtes om, hvilke spil de skulle købe og spille. Som praktikant kom jeg for at redde og byggede en app, der gjorde det muligt for folk at stemme på de mest populære spil og beslutte, hvad de skulle købe næste gang. Og fordi To er bedre end en, Jeg byggede applikationen to gange - først i Vue.js og derefter i React.
Back-end-tjenesterne blev stillet til rådighed af en API, der var i stand til at håndtere JSON anmodninger. Jeg havde kun en grundlæggende viden om, hvordan man skriver grundlæggende HTML og JavaScript (jeg er praktikant), så ja, eksperimentet var at dykke dybt ned i React og Vue.js og lære fra bunden.
Med hensyn til kravene, der skulle opfyldes, havde jeg følgende:
Du kender følelsen: i starten kan det virke overvældende, og du begynder at undre dig over, om det overhovedet er en god ide at gennemgå det. Det samme skete med mig, men da jeg begyndte at forstå komponentens basisstruktur, blev det enklere og lettere at forstå. Jeg gennemgik vejledningerne, fiklede rundt med egenskaber og gættede hvilket resultat vi ville have baseret på den dokumentation, vi læste.
Mens jeg gennemgik denne proces, bemærkede jeg, at supportdokumentationen af Vue.js er langt mere „udviklervenlig“ end React's. Jeg besluttede også at gå først med Vue.js på grund af min baggrundskendskab i HTML. Dette viste sig at forbedre stigningen i mine færdigheder og påvirkede projektets samlede varighed.
React-dokumentation er lidt sværere at læse, hvilket resulterede i en langsom stigning i sammenligning med Vue.js, hovedsagelig baseret på den ekstra indsats for at lære JSX.
Sammenfattende er begge ret ens i deres struktur, men Vue.js er lidt lettere at lære da det tillader HTML og JSX.
Ligesom erfarne udviklere gør, var jeg nødt til at analysere og vælge, hvilke eksterne biblioteker der skulle bruges. Biblioteker kan være særligt relevante, når de håndterer kerneopgaver, fordi de forbedrer produktkvaliteten og reducerer udviklingsindsatsen.
For Vue.js ville jeg gerne oprette komplekse UI elementer men indbygget implementering ville forbruge meget tid, derfor brugte jeg Vuetify som har en rig dokumentation og en enkel opsætning. Installation og import af biblioteket var alt, hvad det var nødvendigt, og det var klar til brug.
Håndtering af applikationstilstand og sikring af, at applikationen tilpasser sig sin tilstand i Vue.js kompleks og tidskrævende. Jeg besluttede at bruge Vuex for at administrere applikationstilstand. Dette var også nemt at installere og let at bruge.
Jeg havde også brug for at oprette forbindelse til serveren og autentificere REST-anmodninger. For at løse dette problem fulgte jeg Vue.js vejledning og som anbefalet brugte jeg axios, et bibliotek, der håndterer REST-anmodninger og gør autorisation lettere at håndtere.
Til sidst brugte jeg View Router at opdatere og opdatere brugergrænsefladen, når URL'en ændres, noget der er meget svært at opnå uden et bibliotek.
Sammenfattende brugte vi følgende biblioteker med Vue.js:
Til React ønskede jeg også at oprette komplekse UI-elementer, men dette er ikke nemt at opnå ud af boksen. Derfor brugte jeg Materiale-brugergrænseflade, da det gør det nemt at bygge komplekse UI-elementer.
Jeg brugte også Stylede komponenter at konfigurere udseendet og følelsen af brugergrænsefladen, da det er ret kompliceret at gøre det med vanilla React. Dette er noget, som jeg kæmpede med i Vue.js, da jeg ikke var i stand til at finde et godt bibliotek til dette formål.
Redux kom til undsætning, da jeg havde brug for at styre ansøgningstilstanden. Dette er det mest populære bibliotek til dette formål i React-området. Det er lidt mere komplekst end Vue.Js alternativet, men da det er veldokumenteret, brugte jeg ikke for meget tid på at lede efter et bedre alternativ.
For at imødekomme REST-anmodningerne fortsatte vi med axios, fordi jeg allerede var bekendt med biblioteket. Det gav en god løsning, svarende til hvad jeg har i Vue.js applikationen.
Endelig løste jeg routingsproblemet med React Routing. Ligesom Vue.js modstykket gør dette bibliotek hele operationen lettere at administrere.
Sammenfattende brugte jeg følgende biblioteker med React:
Efter læringsprocessen, kodning og test er det tid til at dele med min indsigt (slip trommelrullen!) :
Baseret på ovenstående data kan jeg fortælle det programmering i React tog os omkring 30% længere tid end med Vue.js.
Så hvorfor foretrak jeg Vue.js i stedet for React?
Nå, jeg var i stand til at påpege et par grunde:
Baseret på min personlige erfaring kan jeg nu sige, at det ville tage langt mindre tid at udvikle projektet af samme eller lignende størrelse, da jeg allerede har:
I den første udviklingsfase fandt jeg begge samfund, mens jeg søgte efter et par præciseringer. Til min overraskelse var jeg i stand til at få alle svarene på alle de spørgsmål, jeg havde online. Dette var virkelig en game-changer. Begge samfund er meget aktive, med tusinder af medlemmer, der ofte poster deres kampe på platforme som StackOverflow og hjælper andre brugere med lignende spørgsmål.
Hvis du deler den samme passion for kodning som jeg gør, så er du sandsynligvis enig med mig, når jeg siger, at valget af en ramme påvirker din motivation og projektresultaterne. Så ja, det er vigtigt at forstå, om du beslutter dig for en teknologi, der vil kæmpe med dig eller udfordre dig på en god måde.
Fra min erfaring med hver af disse rammer, Vue.js har en fremragende programmeringsstil og mønster, god dokumentation og en glattere indlæringskurve for at få tingene til at rulle hurtigere. Det har også en meget komplet introduktionsvejledning, der indeholder routing og butiksstyring. Dette er bestemt et stort indledende løft for nye udviklere.
Udover det** velbyggede system af pakker fra tredjepart** (som ReduxandReact Routing), er dens Stort fællesskab er et stort plus da det har næsten 50 tusinde npm pakker, der hjælper dig med at nå dit projekts mål. Dette er opnåeligt på grund af den frihed, der gives udviklere til at skabe og justere deres behov i henhold til deres mål.
Fra et karriereperspektiv og på grund af den stadigt skiftende karakter af teknologibranchen, er det vigtigt at vide, om dine foretrukne rammer har en karriere- og markedspotentiale til at vokse. Mens Vue.js har en lettere indlæringskurve, hvilket gør det hurtigere for dig at mestre det, der er mange flere React-udviklere på markedet. Hvis du leder efter Vue.js vs React-job, vil du helt sikkert have mere konkurrence i React end i Vue.js.
Med hensyn til løn, Ifølge statistikker fra 2019 sammenligning af den årlige jobbetaling, React-udviklere kan tjene lidt mere i et langsigtet perspektiv end Vue.js udviklere.
Baseret på det udviklede projekt lærte jeg, at:
I betragtning af mine resultater konkluderer jeg, at Vue.js var en bedre pasform end Reagere til mindre komplekse projekter som denne. Dette skyldes hovedsageligt:
Det kan være en udfordring at vælge en ramme at arbejde med, da hvert projekt har sine egne behov og funktioner. Dette får mig til at tro, at i stedet for først at dykke i overfloden af information tilgængelig på nettet for hurtigt at besvare spørgsmålet: Hvilken ramme er bedre?, man skal fokusere i stedet på at finde ud af hvilke rammer der tilpasser sig og passer bedre til projektets behov.
Også variabler som din projektstørrelse, kompleksitet og mål, har en betydelig vægt i din endelige beslutning. Begge rammer har deres egne specifikationer, og din baggrund som udvikler spiller en vigtig rolle i dette, da det kan påvirke den måde, du håndterer disse særlige forhold på, til gavn for dit projekt.
I denne artikel talte jeg om Vue.js vs React baseret på et projekt, jeg udviklede fra bunden ved hjælp af begge rammer.
Hvis du søger hjælp i opbygning af en mobil applikation i Vue.js eller React har vi højt kvalificerede udviklere klar til at få det til at ske! Kom i kontakt!
Fandt du denne artikel interessant? Du kan måske også lide disse!
Jeg er en webudvikler, der brænder for rammer, der gør livet lettere. Almindeligvis glemmer du, at du sandsynligvis ikke har brug for semikolon længere.
People who read this post, also found these interesting:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
