När du tänker på JavaScript-ramverk kommer du förmodligen att hamna fast mellan Vue.js och React, eftersom de råkar vara de mest populära inom JavaScript ekosystem. Så hur kan du bestämma vilken som är bäst lämpad för det projekt du ska koda eller hantera? Ska du först titta på själva ramverket och överväga dess inlärningskurva Eller analysera istället projektets storlek och komplexitet för att fatta ett korrekt beslut?
Om någon av dessa frågor kom dig i åtanke nyligen, oavsett om du är en front-end-utvecklare eller hanterar ett team, fortsätt läsa: Jag lägger ner händerna på jobbet och byggt en app på båda ramarna. Dess huvudsakliga mål var att tillåta oss, på Imaginärt moln, att rösta internt om vilka spel vi föredrar att köpa till PlayStation 4 vi har på vårt kontor - ex libris från våra lunchpauser!
I det här blogginlägget kommer jag att dela med mig av mina insikter, baserat på den erfarenhet jag hade med Vue.js och React. Från dess popularitet över tid, kamp, samhällsstöd och andra relaterade ämnen, kommer jag att rensa upp allt så att du kan få en bättre uppfattning om varje ramverk och vilka problem de löser.
React backas upp av teknikjätten Facebook, ger stabilitet och långsiktigt stöd som en teknisk jätte kan ge. React blev öppen källkod i maj 2013, vilket gjorde det möjligt för dess community att skapa otaliga tredjepartsbibliotek för att hjälpa dig att uppnå önskat mål.
Alternativt skapades Vue.js av Evan You, en tidigare Google anställd som arbetade i deras Angular team. Evan hade visionen att skapa ett ramverk som kombinerade det bästa av React, Ember och Angular, för att tillhandahålla ytterligare funktioner och förbättra kodningsprestanda. Men eftersom Vue.js inte säkerhetskopieras av en teknisk jätte, är det förlitar sig på sitt aktiva samhälle för att driva den framåt.
Ökningen i popularitet för båda dessa ramverk tar kredit för de innovativa verktygen som både Vue.js och React erbjuder till Front-end-utvecklaren. Till exempel:
Enligt StackOverflow, Vue.js popularitet såväl som Reacts, har ökat genom åren, medan front-end-utvecklingsbranschen får mer och mer relevans över hela världen.
För att få en tydligare bild kontrollerade jag båda ramverkens aktivitet med tanke på antalet frågor som för närvarande är aktiva i StackOverflow. Här är vad jag hittade: medan Vue.js har cirka 50.000 frågor, Reactjs-taggen har nästan 180 000 frågor. Stor skillnad, eller hur?
En annan nyckelindikator som jag vågar dig titta på är npm (Node Package Manager) nedladdningar.
Om detta ämne, jämför React vs Vue.js, du kan se att React fortfarande leder med en betydande marginal över Vue.js. Trots sina nedladdningar har Vue.js långsamt stigit genom åren.
Emellertid den största fördelen Vue.js har över React ses på Github-stjärnor. Ta en titt på grafiken nedan:
Vue.js överträffade React i mitten av 2018 och fortsätter fortfarande i ledningen.
Detta är helt klart ett tecken på en stödjande gemenskap byggd kring aktiva Vue.js utvecklare, som ägnar sig åt att ständigt driva det framåt.
Utmaningen? Vi har en ny PlayStation 4 på kontoret och alla argumenterade om vilka spel de skulle köpa och spela. Som praktikant kom jag för att rädda och byggde en app som gjorde det möjligt för människor att rösta på de mest populära spelen och bestämma vad de skulle köpa härnäst. Och eftersom Två är bättre än en, Jag byggde applikationen två gånger - först i Vue.js och sedan i React.
Backend-tjänsterna gjordes tillgängliga av ett API som kunde hantera JSON förfrågningar. Jag hade bara en grundläggande kunskap om hur man skriver grundläggande HTML och JavaScript (jag är praktikant), så ja, experimentet var att dyka djupt in i React och Vue.js, lära från grunden.
När det gäller kraven att uppfylla hade jag följande:
Du känner känslan: till en början kan det verka överväldigande och du börjar undra om det alls är en bra idé att gå igenom det. Samma sak hände mig, men när jag började förstå komponentens basstruktur blev det enklare och lättare att förstå. Jag gick igenom handledningarna, fiklade med egenskaper och gissade vilket resultat vi skulle ha baserat på dokumentationen vi läste.
När jag gick igenom denna process märkte jag att supportdokumentationen för Vue.js är mycket mer ”utvecklarvänlig” än Reacts. Jag bestämde mig också för att gå först med Vue.js på grund av min bakgrundskunskap i HTML. Detta visade sig förbättra min kompetens och påverkade projektets totala varaktighet.
React-dokumentationen är lite svårare att läsa, vilket resulterade i en långsam upptrappning jämfört med Vue.js, mestadels baserat på den extra ansträngningen att lära sig JSX.
Sammanfattningsvis är båda ganska lika i sin struktur, men Vue.js är lite lättare att lära sig eftersom det tillåter HTML och JSX.
Precis som erfarna utvecklare gör var jag tvungen att analysera och välja vilka externa bibliotek som skulle användas. Bibliotek kan vara särskilt relevanta när man hanterar kärnuppgifter eftersom de förbättrar produktens kvalitet och minskar utvecklingsinsatsen.
För Vue.js ville jag skapa komplexa användargränssnittselement men inbyggd implementering skulle ta mycket tid, därför använde jag Vuetify som har en rik dokumentation och en enkel installation. Att installera och importera biblioteket var allt som behövdes och det var klart att användas.
Att hantera applikationstillstånd och se till att applikationen anpassar sig till dess tillstånd i Vue.js är komplex och tidskrävande. Jag bestämde mig för att använda Vuex för att hantera applikationstillstånd. Detta var också enkelt att installera och lätt att använda.
Jag behövde också ansluta till servern och autentisera REST-förfrågningar. För att lösa detta problem följde jag Vue.js handledning och som rekommenderat använde jag axios, ett bibliotek som hanterar REST-förfrågningar och gör auktorisering lättare att hantera.
Slutligen använde jag View Router för att uppdatera och uppdatera användargränssnittet när webbadressen ändras, något som är mycket svårt att uppnå utan ett bibliotek.
Sammanfattningsvis använde vi följande bibliotek med Vue.js:
För React ville jag också skapa komplexa UI-element, men detta är inte enkelt att uppnå direkt. Därför använde jag Material UI, eftersom det gör det enkelt att bygga komplexa UI-element.
Jag använde också Stylade komponenter att konfigurera utseendet och känslan av användargränssnittet, eftersom det är ganska komplicerat att göra det med vanilla React. Det här är något som jag kämpade med i Vue.js, eftersom jag inte kunde hitta ett bra bibliotek för detta ändamål.
Redux kom till undsättning när jag behövde hantera applikationstillståndet. Detta är det mest populära biblioteket för detta ändamål i React-området. Det är lite mer komplext än Vue.Js alternativet, men eftersom det är väl dokumenterat spenderade jag inte för mycket tid på att leta efter ett bättre alternativ.
För att ta itu med REST-förfrågningarna fortsatte vi med axios eftersom jag redan var bekant med biblioteket. Det gav en bra lösning, liknande vad jag har i programmet Vue.js.
Slutligen löste jag routingproblemet med React Routing. Liksom Vue.js motsvarigheten gör det här biblioteket hela operationen enklare att hantera.
Sammanfattningsvis använde jag följande bibliotek med React:
Efter inlärningsprocessen, kodning och testning är det dags att dela med mig av mina insikter (släpp trumrullen!) :
Baserat på ovanstående data kan jag säga att programmering i React tog oss cirka 30% längre tid än med Vue.js.
Så varför föredrog jag Vue.js istället för React?
Väl, Jag kunde påpeka några skäl:
Baserat på min personliga erfarenhet kan jag nu säga att det skulle ta mycket mindre tid att utveckla projekt av samma eller liknande storlek eftersom jag redan har:
Under det första utvecklingsstadiet hittade jag båda samhällena medan jag letade efter några förtydliganden. Till min förvåning kunde jag få alla svar på alla frågor jag hade online. Detta var verkligen en game-changer. Båda samhällena är mycket aktiva, med tusentals medlemmar som ofta publicerar sina kamper på plattformar som StackOverflow och hjälper andra användare med liknande frågor.
Om du delar samma passion för kodning som jag, så håller du förmodligen med mig när jag säger att valet av ramverk påverkar din motivation och projektresultatet. Så ja, det är viktigt att förstå om du bestämmer dig för en teknik som kommer att slåss med dig eller utmana dig på ett bra sätt.
Från min erfarenhet av vart och ett av dessa ramverk, Vue.js har en utmärkt programmeringsstil och mönster, bra dokumentation och en smidigare inlärningskurva för att få saker att rulla snabbare. Den har också en mycket komplett starthandledning som innehåller routing och butikshantering. Detta är definitivt en stor initial boost för nya utvecklare.
Förutom dess ** välbyggda system av paket från tredje parter** (som ReduxandReact Routing), dess stort samhälle är ett stort plus eftersom det har nästan 50 tusen npm-paket som hjälper dig att uppnå ditt projekts mål. Detta är möjligt på grund av friheten som ges till utvecklare att skapa och anpassa sina behov enligt deras mål.
Ur ett karriärperspektiv och på grund av teknikbranschens ständigt föränderliga natur är det viktigt att veta om dina föredragna ramverk har en Karriär- och marknadspotential att växa. Medan Vue.js har en enklare inlärningskurva, vilket gör det snabbare för dig att behärska det, det finns många fler React-utvecklare på marknaden. Om du letar efter Vue.js vs React-jobb kommer du säkert att ha mer konkurrens i React än i Vue.js.
När det gäller lön, enligt 2019 års statistik jämföra den årliga lönen för arbete, React-utvecklare kan tjäna lite mer i ett långsiktigt perspektiv än Vue.js utvecklare.
Baserat på det utvecklade projektet lärde jag mig att:
Med tanke på mina resultat drar jag slutsatsen att Vue.js Passar bättre än Reagera För mindre komplexa projekt som detta. Detta beror främst på att:
Att välja ett ramverk att arbeta med kan vara en ganska utmaning eftersom varje projekt har sina egna behov och funktioner. Detta får mig att tro att istället för att dyka först i den mängd information som finns tillgänglig på webben för att snabbt svara på frågan: Vilket ramverk är bättre?, man bör fokusera istället på att räkna ut vilket ramverk som anpassar och passar projektets behov bättre.
Även variabler som din projektstorlek, komplexitet och mål, ha en betydande vikt i ditt slutliga beslut. Båda ramarna har sina egna specifikationer och din bakgrund som utvecklare spelar en viktig roll i detta, eftersom det kan påverka hur du hanterar dessa särdrag för att gynna ditt projekt.
I den här artikeln pratade jag om Vue.js vs React baserat på ett projekt som jag utvecklade från grunden med båda ramarna.
Om du söker hjälp i bygga en mobilapplikation i Vue.js eller React har vi mycket skickliga utvecklare redo att få det att hända! Hör av dig!
Tyckte den här artikeln intressant? Du kanske gillar dessa också!
Jag är en webbutvecklare som brinner för ramverk som gör livet enklare. Ofta glömmer man att man förmodligen inte behöver semikolon längre.
Människor som läste det här inlägget tyckte också att dessa var intressanta:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
