Denne artikel diskuterer de vigtige funktioner og forskelle mellem React og Angular, de populære værktøjer til udvikling af webapplikationer.
Både Angular og React bruges til udvikling af webapplikationer. De er lige så populære på Google-trends. Mens Angular allerede har etableret sig som et førende web-framework, er React vokset eksponentielt siden 2018. Angular er et fuldgyldigt framework, der følger MVC-arkitekturen. React har nogle spændende funktioner, der gør det nemt at bruge til lette applikationer.
Lad os forstå lidt om begge, før vi kommer ind på de vigtigste forskelle.
Indholdsfortegnelse
Hvad er Angular?
Angular er en webramme, der giver en struktur, som udviklere kan arbejde med. Det bruges til at bygge dynamiske webapplikationer. Angular er open source og skrevet i Typescript. Den seneste version af Angular er 12.1.4, udgivet i juli 2021. Angular eliminerer de vanskeligheder, som udviklere står over for, når de bruger JavaScript som deres primære scriptsprog på klientsiden.
Tænk på Angular som en udvidelse af HTML med seje, nye brugervenlige attributter. Lad os skrive en simpel kode for at forstå mere:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<style>
form.ng-dirty {
color:orange;
}
form.ng-pristine {
color:blue;
}
</style>
<form ng-app="">
<p><b>What's your name?</b> <input type="text" ng-model="user_name"></p>
<h1>Hi {{user_name}}! You look great today!</h1>
</form>
</body>
I ovenstående kode skriver brugeren et navn i tekstboksen. Så snart de begynder at skrive, ændres tekstfarven. Navnet vises med en hilsen.
- Vi bruger en vinkelform her og kræver ikke andre CSS-elementer.
- Formelementerne som ng-dirty og ng-pristine sørger for farveændringerne.
- ng-app er navnet på den kantede applikation.
- ng-model-attributten ligner HTML-attributtens navn.
- Vi viser tekstværdien ved hjælp af de dobbelte blomsterbinder.
For at bruge de fulde funktioner i Angular, såsom controller, komponenter, moduler osv., bør vi installere npm-pakken (med node.js), hvilket er uden for denne artikels omfang.
Tjek dette kursus ud lære Angular.
Hvad er React?
React er et gratis og open source-bibliotek, der vedligeholdes af Facebook. Det er hurtigere sammenlignet med UI-frameworks og giver også fleksibiliteten til at integrere med andre frameworks.
Vi kan skabe genbrugelige UI-komponenter ved hjælp af Reacts deklarative kodningstilgang. Denne tilgang reducerer UI-udviklingsindsatsen markant. En simpel reaktionsapplikation kan opdeles i flere genanvendelige komponenter som følger:
For at bruge alle funktionerne i React, såsom komponenter og moduler til en applikation i den virkelige verden, skal du installere node.js. For at forstå funktionerne i React, lad os omskrive ovenstående eksempel:
<html>
<body>
<div id="root"></div>
<!—- add all the libraries -->
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
// Add new React component to get and print user’s name
class WelcomeMessage extends React.Component {
constructor(props){
super(props);
this.state = { name: '' };
}
handleChange = event => {
this.setState({ name: event.target.value });
};
// render the UI and display result when the state changes
render() {
return (
<React.Fragment>
<form>
<label htmlFor="name">Enter your name: </label>
<input
type="text"
name="name"
value={this.state.name}
onChange={this.handleChange}
/>
</form>
<h1>Hey {this.state.name}! You look great today!</h1>
</React.Fragment>
);
}
}
ReactDOM.render(
<WelcomeMessage />,
document.getElementById('root')
);
</script>
</body>
</html>
Vi bruger Babel compiler her, så koden er nem at kompilere i enhver browser. Ellers kan vi muligvis ikke bruge noget af React-koden.
Ovenstående kode kan virke for lang til kun at vise dette ene felt. En virkelig verden vil have mange sådanne komponenter, som vi kan genbruge, og dermed gøre det umagen værd.
Har du bemærket, at vi bruger HTML-kode inde i script-komponenten? Hvordan? Hold øje med svaret i afsnittet: Funktioner af React.
Funktioner af Angular
Lad os forstå funktionerne i Angular:
- Udviklere kan hurtigt bygge progressive apps uden en tung installationsproces.
- Velegnet til oprettelse af desktop- og mobilapps.
- Support på tværs af platforme.
- Giver en struktur til applikationen (MVC-arkitektur).
- Fremskynder udviklingen, da der kræves meget lidt kodning.
- God præstation.
- Kraftig skabelonsyntaks til nemt at oprette UI-visninger.
- Kode kan udvikles i en simpel teksteditor eller IDE.
Funktioner af React
Nogle typiske træk ved React er:
- ReactJS bruger HTML-lignende syntaks kendt som JSX (JavaScript XML), så JavaScript og HTML-kode kan skrives i én fil.
- ReactJS-applikationer har individuelle genanvendelige komponenter med deres egen kontrol og logik.
- Komponenter er uforanderlige, hvilket giver en ensrettet binding og rimelig kontrol gennem hele applikationen.
- Den ensrettede binding gør applikationer mere fleksible og effektive.
- Understøtter virtuel DOM-repræsentation. Den faktiske DOM ændres kun, hvis der er ændringer i DOM-repræsentationerne. Dette sparer hukommelse.
- Høj ydeevne og support på tværs af platforme.
Anvendelser af Angular
Vi kan bruge Angular til store virksomhedsapplikationer, enkeltsideapplikationer og progressive webapplikationer (PWA’er).
Mange berømte virksomheder bruger vinkel. Gmail og YouTube TV er begge bygget på Angular. Disse apps er tilgængelige på tværs af forskellige platforme som Android, Apple osv.
YouTube TV kan tilgås på FireTV, Chromecast og mange andre platforme.
Nogle andre applikationer af Angular inkluderer e-læringsplatformen Udacity, bankapplikationer som Santander og PayPal, webapplikationsportalen Wix og Microsoft Office Web.
Anvendelser af React
React bruges i vid udstrækning til at opbygge UI af Single Page Applications (SPA). Det fungerer problemfrit til både mobile og desktop-applikationer. Facebook, Bloomberg, Airbnb, Instagram og Skype er eksempler på webapplikationer, der bruger React Native, rammen baseret på React JS.
React er fællesskabsdrevet, hvilket gør det til et populært valg til hurtigt at bygge UI-applikationer.
Fordele ved Angular
Lad os gentage nogle vigtige fordele ved Angular:
- Effektiv UI-løsning på tværs af platforme, der bruger TypeScript-funktionaliteter som afhængighedsinjektion, routing
- Hurtig applikationsindlæsning og forbedret applikationsydelse
- Hurtigere udvikling på grund af funktioner som Angular CLI, fremragende fællesskabssupport, to-vejs databinding og differentiel belastning
- Moduler og komponenter gør kode læsbar og nem at fejlfinde og teste
- Kraftige designmønstre som afhængighedsinjektion og Angular-tjenester
Fordele ved React
React har nogle overbevisende funktioner, der adskiller den fra Angular:
- Følger en deklarativ tilgang – det betyder, at med enhver ændring af applikationens tilstand opdaterer React de nødvendige komponenter og gengiver dem, når dataene ændres
- React kan bruges som et klientsidebibliotek eller på serveren ved hjælp af React Native og Node.
- En nem læringskurve, god dokumentation, god fællesskabsstøtte og læringsressourcer. Alle med kendskab til JavaScript kan skrive React-kode.
- Gør brug af JSX til nemt at gengive specifikke komponenter.
- I stedet for at udviklere skriver DOM-koden, konverterer React de virtuelle komponenter til DOM, hvilket giver hurtigere ydeevne.
Ulemper ved Angular
Angular giver mange avancerede funktioner som komponenter, afhængighedsinjektion osv. Dette gør det dog ikke så let at lære for begyndere. Det tager tid at lære og implementere begreberne i et projekt.
Ulemper ved React
JSX hjælper udviklere med at gengive HTML i JS. Men hvis komponenten er for stor, som formvalidering, kan koden blive kompleks og svær at fejlfinde, især for begyndere. React dækker også kun UI og giver ikke end-to-end workflow.
Skal du vælge Angular eller React?
Før vi besvarer dette spørgsmål, lad os rekapitulere de vigtigste forskelle mellem Angular og React:
Kantet
Reagere
Tilbyder en komplet ramme til at designe store virksomheder, progressive og enkeltsidede applikationer
Bruges som et JavaScript-bibliotek til at gengive individuelle UI-komponenter
Giver avancerede funktioner som afhængighedsinjektion, differentialbelastning, doven belastning
Understøtter kun doven læsning
Angular er baseret på TypeScript
React er baseret på JavaScript
Følger MVC-arkitektur
Baseret på Virtual DOM
Det kan opfattes som en udvidelse af HTML-attributter
Udviklere kan skrive HTML-kode inde i et script, som React gengiver som en komponent
Giver fejlfindings- og testfunktionalitet som et værktøj
React leverer ikke noget indbygget værktøj, så vi er nødt til at bruge forskellige værktøjer til forskellige typer test
Større indlæringskurve, men forholdsvis let at konfigurere
En nemmere indlæringskurve tager dog tid at konfigurere
Tovejsbinding, hvor modeltilstanden ændres, efterhånden som dataene ændres
Envejsdatabinding, hvor UI-elementerne kun kan ændres, når modeltilstanden ændres
Vi kan ikke tilføje et JavaScript-bibliotek til kildekoden
Giver mulighed for at tilføje JavaScript-bibliotek til kildekoden
Angular CLI tilbyder et væld af værktøjer til udvikling og problemfri opdateringer
Da React kun er til UI, har den ikke en CLI
Med ovenstående forskelle i tankerne er vi enige om, at både Angular og React er gode valg til Single Page Applications. Men hvis din applikation er stor og har brug for mange valideringer, routing og afhængigheder, er Angular god til at arbejde, da du også nemt kan teste koden.
Angular kan være overkill med alle dens funktioner, hvis dine applikationskrav er enkle og baseret på små komponenter. Desuden har React en lettere indlæringskurve.
Træf dit valg baseret på projektets krav, omkostninger og anvendelighed.
Konklusion 👨🏫
Denne artikel viste små kodestykker til at sammenligne, hvordan Angular og React fungerer, og forstod derefter de store forskelle mellem begge.
Mens Angular er en fuldgyldig ramme til udvikling og test, tillader React kun udviklere at bygge UI-komponenter til deres applikationer. På den anden side er React hurtig, effektiv og vokser i popularitet, fordi den er let og velegnet til mobile native og Single Page Applications. Angular er allerede en etableret ramme, der er velegnet til SPA’er og store applikationer.