\n Et sp\u00f8rsm\u00e5l jeg f\u00e5r nesten daglig er om jeg skal begynne med ReactJS eller Angular? Men f\u00f8r jeg g\u00e5r videre, la meg gi deg en ansvarsfraskrivelse.\n<\/p>\n
\n Det er ikke en blogg der jeg skal sl\u00e5 det ene eller det andre eller si at du alltid skal bruke det ene fremfor det andre. Hver utvikler og hvert prosjekt er helt forskjellige og de har forskjellige krav, s\u00e5 det er ganske dumt \u00e5 si at du alltid skal bruke ReactJS eller alltid bruke Angular.\n<\/p>\n
\n Du kan hevde at Angular er et rammeverk og at React teknisk sett er et bibliotek i seg selv. Jeg benekter ikke dette faktum, men dette er argumentet jeg ikke \u00f8nsker \u00e5 g\u00e5 inn p\u00e5 akkurat n\u00e5. Det er pakker du kan legge til i React som vil gj\u00f8re det om til et rammeverk som direkte konkurrerer med Angular. Vi sammenligner de to \u00f8kosystemene, ikke det eksakte rammeverket versus det eksakte biblioteket.\n<\/p>\n
\n La oss starte med Angular. Nok en ansvarsfraskrivelse: n\u00e5r jeg sier Angular, snakker jeg om Angular 4, ikke AngularJS.\n<\/p>\n
\n Angular er et stort rammeverk som betyr at det er kraftig og det inkluderer mye. Det er mye \u00e5 l\u00e6re. Du kommer til \u00e5 h\u00f8re mye nytt skremmende ordforr\u00e5d som avhengighetsinjeksjon, direktivdekorat\u00f8rer, piper osv. S\u00e5 m\u00e5 du forholde deg til Typescript, som er JavaScript pluss en haug med andre funksjoner, inkludert statisk skriving.\n<\/p>\n
\n Angular er mer selvstendig enn React, noe som er en av fordelene etter min mening fordi med React kan du gj\u00f8re det samme p\u00e5 en million forskjellige m\u00e5ter. Med Angular er det generelt en eller to m\u00e5ter \u00e5 gj\u00f8re visse ting p\u00e5, noe som gj\u00f8r det lettere \u00e5 f\u00f8lge, gir deg mye mer tydelige instruksjoner om hva du skal gj\u00f8re.\n<\/p>\n
\n Men igjen, det kommer ned til preferanse. Du liker kanskje fleksibiliteten til \u00e5 gj\u00f8re ting p\u00e5 forskjellige m\u00e5ter. Som jeg nevnte, er ReactJS et bibliotek hvis vi bare snakker om kjernebiblioteket, det er mye mindre og mye enklere \u00e5 l\u00e6re enn Angular-rammeverket. Du kan si at du vil l\u00e6re React p\u00e5 kortere tid. React er et flott visningsbibliotek i seg selv, men det er ikke engang like kraftig for store applikasjoner. Hvis du vil ha ruting, validering, HTTP-foresp\u00f8rsler i React, m\u00e5 du installere andre pakker, og det legger til l\u00e6ringskurven.\n<\/p>\n
\n Hvis du ser p\u00e5 React-kode fra to forskjellige utviklere, vil de sannsynligvis se helt annerledes ut enten de lager HTTP-foresp\u00f8rsler eller h\u00e5ndterer tilstand og egenskaper. Alle de tingene kan h\u00e5ndteres veldig forskjellig, og mange ganger kan det v\u00e6re p\u00e5 feil m\u00e5te.\n<\/p>\n
\n Du finner de beste praksisene og alle problemene forsvinner, men det \u00f8ker l\u00e6ringskurven.\n<\/p>\n
\n I motsetning til Angular React bruker ikke maler. Den bruker noe som kalles JSX eller JavaScript-utvidelse eller JavaScript-syntaksutvidelse, som lar oss bygge inn HTML i JavaScript. Til \u00e5 begynne med kan dette virke litt rart. Spesielt n\u00e5r du sannsynligvis ble l\u00e6rt \u00e5 skille markeringen og JavaScript.\n<\/p>\n
\n Tenk p\u00e5 det som \u00e5 legge HTML i JavaScript med et par forskjellige endringer: du kan ikke bruke klasseattributtet, og du m\u00e5 bruke klassenavn.\n<\/p>\n
\n Til slutt har vi Redux. React brukes ofte med Redux eller Flux, som er applikasjonsniv\u00e5er som ledere. Etter min mening er Redux kjempevanskelig bare \u00e5 sette den opp og l\u00e6re konseptene til det er vanskelig.\n<\/p>\n
\n Jeg tror det er overbrukt. Jeg tror at mange utviklere bruker redux der det ikke er n\u00f8dvendig. Du trenger det ikke for mindre applikasjoner, men mange utviklere insisterer p\u00e5 \u00e5 bruke det. Det kommer igjen ned til preferanse. Redux er veldig kraftig, jeg vil ikke ta det bort. N\u00e5r man snakker om l\u00e6ringskurven er det forbanna vanskelig \u00e5 forst\u00e5.\n<\/p>\n
| \n Funksjoner<\/span><\/span>\n <\/td>\n | \n Reagere<\/span><\/span>\n <\/td>\n | \n Kantete<\/span><\/span>\n <\/td>\n<\/tr>\n| \n Programmeringsspr\u00e5k<\/span><\/span>\n <\/td>\n | \n JavaScript<\/span><\/span>\n <\/td>\n | \n TypeScript<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Kodestruktur<\/span><\/span>\n <\/td>\n | \n Meningsfull<\/span><\/span>\n <\/td>\n | \n Fleksibel<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Kjernebibliotek<\/span><\/span>\n <\/td>\n | \n Liten<\/span><\/span>\n <\/td>\n | \n Veldig stor<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Mal<\/span><\/span>\n <\/td>\n | \n JSX<\/span><\/span>\n <\/td>\n | \n HTML<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Kompetanse<\/span><\/span>\n <\/td>\n | \n Sm\u00e5 applikasjoner<\/span><\/span>\n <\/td>\n | \n Applikasjoner i stor skala<\/span><\/span>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n | \n Vinner: Det er uavgjort<\/strong>\n<\/p>\n \n Det er ikke rettferdig \u00e5 direkte sammenligne ytelsen til Angular to React. Angular er et komplett front-to-back-rammeverk, det inkluderer ruting, skjemaverkt\u00f8y, HTTP-bibliotek, reaktive utvidelser, etc. Alle disse funksjonene bl\u00e5ser opp rammeverket og gj\u00f8r det tregere. Reager i seg selv er imidlertid bare et visningsbibliotek, som er mye mindre og raskere.\n<\/p>\n \n N\u00e5r du begynner \u00e5 legge til pakker som ruteren, HTTP-klienten eller hva du skal legge til i React-applikasjonen din, begynner det \u00e5 komme opp litt mer til hvor Angular er, og s\u00e5 kan du begynne \u00e5 sammenligne dem rettferdig, men selv etter det React fortsatt vinner ytelsesavdelingen. Det er en veldig rask teknologi generelt.\n<\/p>\n \n Endringen fra Angular 2 til Angular 4 under panseret de gjorde ganske mye for \u00e5 \u00f8ke ytelsen. Angular 4 presterer bedre enn Angular 2. Likevel vinner React i ytelsesavdelingen.\n<\/p>\n \n \n Vinner: Reager<\/strong>\n<\/p>\n \n Begge rammeverkene har mange av de samme generelle funksjonene og fordelene: de organiserer koden din, de er komponentbaserte, de tilbyr dynamisk markering osv. De er vant til \u00e5 gj\u00f8re mye av de samme tingene, og de deler en mange av de samme funksjonene.\n<\/p>\n \n Vi skal se p\u00e5 noen av de enkelte funksjonene. Angular har \u00e5penbart mye flere funksjoner enn React i kjernen. La meg minne deg p\u00e5 at vi snakker om to \u00f8kosystemer og vanlige pakker som brukes med React.\n<\/p>\n \n Angular er et rammeverk som er inkludert. Den kommer med komponentruter, reaktive utvidelser for observerbare, en HTTP-klient, en skjemamodul for validering, og listen fortsetter. Dessuten tilbyr den toveis databinding p\u00e5 en m\u00e5te som ingen andre rammeverk egentlig gj\u00f8r. Det er ekstremt enkelt \u00e5 binde data fra visningen til modellen ved \u00e5 bruke ng modelldirektivet.\n<\/p>\n \n Angular st\u00f8tter ogs\u00e5 MVC (Model View-kontroller) eller i det minste andre aspekter fra det designm\u00f8nsteret. den kommer ogs\u00e5 med funksjoner som lar deg enkelt implementere testing: b\u00e5de enhetstesting og ende-til-ende-testing. Angular er fullpakket med funksjoner for \u00e5 bygge front-end-applikasjoner p\u00e5 bedriftsniv\u00e5. React p\u00e5 den annen side inkluderer ikke mye i kjernen. Imidlertid kan ting legges til for \u00e5 gi den funksjonene som Angular inkluderer ut-av-boksen pluss noen ekstra.\n<\/p>\n \n React bruker en virtuell DOM som er veldig kraftig. Den lager sin egen lettvektsversjon av selve Dom og inkluderer og oppdaterer bare det som trengs i stedet for \u00e5 oppdatere hele greia. Virtual DOM er en hoved\u00e5rsak til at React er lynraskt.\n<\/p>\n \n React bruker JSX som er kraftigere enn standardmaler fordi du kan legge absolutt hvilken som helst type JavaScript du vil ha i den. JSX er ikke n\u00f8dvendig for \u00e5 bruke React, men det gj\u00f8r ting mye enklere. Jeg kan ikke komme p\u00e5 noen grunn til at du ikke vil bruke JSX med Angular ogs\u00e5. React gj\u00f8r ogs\u00e5 en veldig god jobb med \u00e5 administrere komponenttilstand og egenskaper. Det gj\u00f8r data veldig enkelt \u00e5 jobbe med og overf\u00f8re mellom komponentene. \u00c5 sende data mellom komponenter, Angular er mye vanskeligere enn \u00e5 gj\u00f8re det i React.\n<\/p>\n \n Core React er vanskelig \u00e5 opprettholde appniv\u00e5status. Component State er enkelt, men hvis du vil ha ekte appniv\u00e5styring, trenger du Redux eller Flux, som jeg sa f\u00f8r er ganske forvirrende \u00e5 l\u00e6re. Eksterne pakker som ofte brukes som den nye React-ruteren versjon 4 er litt vanskelig \u00e5 forst\u00e5, men den er ogs\u00e5 veldig kraftig n\u00e5r du f\u00f8rst har l\u00e6rt \u00e5 kj\u00f8re og sette den opp. Det er mange forskjellige m\u00e5ter \u00e5 bruke den p\u00e5. React har ikke en kjerne-HTTP-komponent slik Angular har, men du kan bruke Fetch eller Axios, som er en ekstern HTTP-klient, og da er Enzyme popul\u00e6rt for \u00e5 attestere React. Det er noen av de forskjellige pakkene som ofte brukes med React selv om de ikke er en del av det faktiske biblioteket.\n<\/p>\n \n Mens begge teknologiene deler en god del funksjoner, hvis du bare sammenligner kjerneteknologiene, er Angular vinneren.\n<\/p>\n \n Vinner: Angular<\/strong>\n<\/p>\n \n Angular og React har noen ganske fine kommandolinjegrensesnitt. Angular CLI og Create React-appen er begge ganske gode, og de lar oss virkelig str\u00f8mlinjeforme utviklingen. Angular CLI er litt kraftigere fordi vi raskt kan generere ting som komponenter og tjenester. Create React kan ikke gj\u00f8re det. Du m\u00e5 lage alt selv s\u00e5 langt som filene og den grunnleggende strukturen. Begge systemene bruker webpakke, har sine egne utviklerservere for automatisk lasting og har kompilerings- og byggeverkt\u00f8y. \u00c5penbart har Angular tilleggsoppgaven med \u00e5 transpilere Typescript. CLI har et skript for det n\u00e5r vi kj\u00f8rer ng serve. Alt som skjedde bak kulissene. Den bruker noe som heter TSC eller Typescript Compiler for det, og begge har ogs\u00e5 testverkt\u00f8y.\n<\/p>\n \n Hvis det er en full stack-applikasjon, s\u00e5 er disse veldig viktige. Du trenger ikke bruke dem. Du kan bygge en React-applikasjon helt fra bunnen av med webpakke. Disse gj\u00f8r det mye enklere \u00e5 ikke bare bygge applikasjonen, men ogs\u00e5 kompilere og bygge den ut for produksjon.\n<\/p>\n \n De er begge ganske jevne i den avdelingen.\n<\/p>\n \n Vinner: Angular<\/strong>\n<\/p>\n \n Som jeg sa har begge disse teknologiene sine egne \u00f8kosystemer som n\u00e5 sprer seg langt utover nettleseren.\n<\/p>\n \n Ionic er et popul\u00e6rt hybridrammeverk som er en Angular-applikasjon som kj\u00f8rer inne i en innebygd innpakning for mobilapper. Du kan lage mobilapper ved \u00e5 bruke Angular. Hybridapper kan v\u00e6re litt kl\u00f8nete sammenlignet med native applikasjoner. Brukeropplevelsen kan til tider ikke v\u00e6re s\u00e5 god \u2013 ikke s\u00e5 rask og responsiv. Blant de forskjellige hybridrammene er Ionic 3 den beste. Det er ogs\u00e5 NativeScript, som lar oss bygge ekte native apper for iOS og Android med Angular s\u00e5 vel som JavaScript.\n<\/p>\n \n Ikke desto mindre ser ikke NativeScript ut til \u00e5 v\u00e6re like bra som Facebooks React Native i det minste p\u00e5 dette tidspunktet. Angular har ogs\u00e5 et materialdesign-komponentbibliotek hvis du er en fan av materialdesign. Angular Universal er et fr\u00f8prosjekt som kan brukes til \u00e5 gjengi Angular p\u00e5 serversiden. Det er ogs\u00e5 NgRx-butikken som er et statlig administrasjonsbibliotek inspirert av Reax redux. Den er basert p\u00e5 tilstand mutert av peer-redusere. Den har ogs\u00e5 integrasjon med reaktive utvidelser.\n<\/p>\n \n Du ville ha lagt merke til. En gang gj\u00f8r en av dem noe den andre kopierer p\u00e5 en annen m\u00e5te. React og Angular har blitt Microsoft og Apple av JavaScript-rammeverk.\n<\/p>\n \n React har ganske \u00f8kosystemet. Den har React native som er popul\u00e6r. Det er den beste m\u00e5ten \u00e5 bygge mobilapper med nettteknologi. React Native er rask og mange av applikasjonene hvis de er bygget riktig, er de rett der oppe med native apper som er bygget p\u00e5 Swift eller Java. React har et materialdesignbibliotek kalt Material-UI som ligner p\u00e5 Angulars materialdesignkomponent, men mer modent. JS er et rammeverk for \u00e5 gjengi React-applikasjoner p\u00e5 serversiden. Den har som m\u00e5l \u00e5 gj\u00f8re dette p\u00e5 enklest mulig m\u00e5te, slik at dette kan sammenlignes med Angular Universal. MobX er en annen m\u00e5te \u00e5 administrere staten p\u00e5. Det fungerer litt annerledes enn redux gj\u00f8r. Den gir et sett med dekorat\u00f8rer for \u00e5 definere observerbare og observat\u00f8rer, og den introduserer reaktiv logikk i staten din.\n<\/p>\n \n Storybook er et utviklingsmilj\u00f8 for React. Den lar deg bla gjennom et komponentbibliotek, se forskjellige tilstander for hver komponent og interaktivt utvikle og teste komponenter. Reactive VR f\u00e5r React inn i virtuell virkelighet. React desktop er et JavaScript-bibliotek bygget p\u00e5 toppen av Reacts-biblioteket som visstnok bringer en naturlig skrivebordsopplevelse til nettet, med mange macOS- og Windows 10-komponenter. React-\u00f8kosystemet er ekstremt stort og kraftig. React er p\u00e5 vei inn i alle aspekter av teknologi, og det er en klar vinner.\n<\/p>\n \n Vinner: Reager<\/strong>\n<\/p>\n \n Hvis du velger mellom disse rammene, se p\u00e5 de forskjellige kategoriene og se hva som interesserer deg. Pr\u00f8v dem begge og se hvilken du plukker opp raskere. Gj\u00f8r litt mer research enn denne bloggen. Du kommer aldri til \u00e5 f\u00e5 all informasjonen du trenger fra \u00e9n blogg, s\u00e5 les litt mer.\n<\/p>\n \n Hvis du ser p\u00e5 et st\u00f8rre \u00f8kosystem som inkluderer utvikling av innebygd mobilapp, velg React uten \u00e5 tenke to ganger. Hvis du er ute etter funksjoner, er Angular enorm. Det er flere funksjoner enn du trenger.\n<\/p>\n<\/p>\n |