JS angolare contro React JS
Se non sei sicuro di come scegliere tra Angular e React, consulta una semplice app di esempio per esplorare le differenze.
Angular e React sono due dei migliori framework frontend per applicazioni web. Sebbene i loro ambiti siano leggermente diversi (uno è una piattaforma di sviluppo, l’altro una libreria), sono visti come i principali concorrenti. È lecito ritenere che sia possibile utilizzare entrambi i framework per sviluppare un'applicazione.
La domanda principale diventa quindi: perché dovresti scegliere l’uno rispetto all’altro? Questo articolo mira a rispondere sviluppando un semplice modulo di registrazione. Il modulo si baserà esclusivamente sulle capacità di convalida di ciascun framework.
Prerequisiti
Per continuare, dovresti essere in grado di installare React e avere una conoscenza generale di come funziona un'applicazione React. Dovresti anche sapere come installare e utilizzare Angular.
La struttura dei file di ciascuna applicazione
Il modulo React ha la seguente struttura di file:
Il modulo Angular ha la seguente struttura di file:
L'immagine sopra mostra solo la sezione modificata dell'applicazione Angular.
Dalle strutture dei file sopra puoi vedere che entrambi i framework fanno molto affidamento sull'uso dei componenti.
Creazione della logica per ogni applicazione del modulo
Ogni applicazione avrà lo stesso scopo: il modulo verrà inviato solo se ogni campo di input contiene dati validi. Il campo nome utente è valido se contiene almeno un carattere. I due campi password sono validi se i loro valori sono identici.
Angular fornisce due metodi di creazione dei moduli: basato su modello e reattivo. L'approccio reattivo consente allo sviluppatore di creare criteri di convalida personalizzati. L'approccio basato su modelli è dotato di proprietà che semplificano la convalida dei moduli.
React è in grado di sviluppare solo un modulo con convalida personalizzata. Tuttavia, React è il framework più popolare e ha una comunità più ampia, quindi sono disponibili molte librerie per la gestione dei moduli per React. Dato che l'obiettivo qui è evitare l'uso di librerie esterne, l'applicazione React si baserà sulla convalida personalizzata.
Sviluppo del modello per ciascuna applicazione
Entrambe le applicazioni si basano su modelli per creare l'output HTML finale.
Modello HTML angolare
Il file form-signup.component.html contiene il seguente codice:
<div class="form-content">
<form class="form" #myForm="ngForm">
<h1>Complete the form to join our community!</h1>
<div class="form-inputs">
<label for="username" class="form-label">Username:</label>
<input
id="username"
type="text"
class="form-input"
placeholder="Enter username"
name="username"
ngModel
required
#username="ngModel"
/>
<p *ngIf="username.invalid && username.touched">Username required</p>
</div>
<div class="form-inputs">
<label for="password" class="form-label">Password:</label>
<input
id="password"
type="password"
name="password"
class="form-input"
placeholder="Enter password"
ngModel
required
#password="ngModel"
[(ngModel)]="model.password"
/>
<p *ngIf="password.invalid && password.touched">password required</p>
</div>
<div class="form-inputs">
<label for="passwordvalidate" class="form-label">Password:</label>
<input
id="confirmpassword"
type="password"
name="confirmpassword"
class="form-input"
placeholder="Confirm password"
ngModel
required
#password2="ngModel"
ngValidateEqual="password"
[(ngModel)]="model.confirmpassword"
/>
<div *ngIf="(password2.dirty || password2.touched) && password2.invalid">
<p *ngIf="password2.hasError('notEqual') && password.valid">
Passwords do not match
</p>
</div>
</div>
<button
class="form-input-btn"
type="submit"
[disabled]="myForm.invalid"
routerLink="/success"
>
Sign Up
</button>
</form>
</div>
Modello HTML di reazione
Il file Signup.js contiene il seguente codice:
import React from "react";
import useForm from "../useForm";
import validate from "../validateData";
import "./Signup.css"
const Signup = ({submitForm}) => {
const {handleChange, values, handleSubmit, errors} = useForm( submitForm, validate);
return (
<div className="form-content">
<form className="form" onSubmit={handleSubmit}>
<h1>Complete the form to join our community!</h1>
<div className="form-inputs">
<label htmlFor="username" className="form-label">Username:</label>
<input
id="username"
type="text"
name="username"
className="form-input"
placeholder="Enter username"
value={values.username}
onChange={handleChange}
/>
{errors.username && <p>{errors.username}</p>}
</div>
<div className="form-inputs">
<label htmlFor="password" className="form-label"> Password: </label>
<input
id="password"
type="password"
name="password"
className="form-input"
placeholder="Enter password"
value={values.password}
onChange={handleChange}
/>
{errors.password && <p>{errors.password}</p>}
</div>
<div className="form-inputs">
<label htmlFor="passwordvalidate" className="form-label"> Password: </label>
<input
id="passwordvalidate"
type="password"
name="passwordvalidate"
className="form-input"
placeholder="Confirm password"
value={values.passwordvalidate}
onChange={handleChange}
/>
{errors.passwordvalidate && <p>{errors.passwordvalidate}</p>}
</div>
<button className="form-input-btn" type="submit">Sign Up</button>
</form>
</div>
)
}
export default Signup;
Noterai che entrambe le applicazioni utilizzano codice HTML di base, ad eccezione di alcune piccole differenze. Ad esempio, l'applicazione Angular utilizza l'attributo standard “class” per identificare le classi CSS. React utilizza la propria proprietà personalizzata "className". React lo trasforma nell'attributo standard “class” nell'output finale. L'interfaccia utente gioca un ruolo importante nel successo di qualsiasi applicazione. Poiché entrambe le applicazioni utilizzano la stessa struttura HTML e gli stessi nomi di classe, entrambe le applicazioni possono utilizzare lo stesso foglio di stile.
Tutte le proprietà non standard nei modelli precedenti si riferiscono alla convalida.
Creazione della convalida del modulo per l'applicazione Angular
Per accedere alle proprietà di convalida che fanno parte dell'approccio basato su modelli di Angular, dovrai importare FormsModule nel file app.module.ts.
Il file app.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { ValidateEqualModule } from 'ng-validate-equal'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormSignupComponent } from './form-signup/form-signup.component';
import { FormSuccessComponent } from './form-success/form-success.component';
@NgModule({
declarations: [
AppComponent,
FormSignupComponent,
FormSuccessComponent
],
imports: [
BrowserModule,
FormsModule,
ValidateEqualModule,
AppRoutingModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Importando il FormsModule nel file sopra, ora hai accesso a una serie di diverse proprietà di convalida. Dovrai aggiungere la proprietà ngModel ai campi di input del modello HTML Angular. Se guardi indietro al modello Angular sopra, vedrai che ciascuno degli elementi di input ha questa proprietà.
FormsModule e ngModel forniscono allo sviluppatore l'accesso a proprietà di convalida come valid e invalid. La sezione paragrafo del modello HTML Angular utilizza la proprietà #username="ngModel". Produce un avviso se i dati nel campo di input non sono validi e l'utente li ha modificati.
Nel file app.module.ts vedrai anche ValidateEqualModule, che confronta le due password. Per fare ciò, dovrai creare un oggetto modello nel file form-signup.component.ts.
Il file form-signup.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-form-signup',
templateUrl: './form-signup.component.html',
styleUrls: ['./form-signup.component.css']
})
export class FormSignupComponent implements OnInit {
constructor() { }
ngOnInit(): void {}
model = {
password: null,
confirmpassword: null
};
}
La seconda password nel modello HTML Angular utilizza l'oggetto modello nel file sopra per confrontare il suo valore con la prima password.
La proprietà disabilitato sul pulsante di invio garantisce che rimanga inattivo finché ogni campo di input non contiene dati validi. L'invio del modulo porta l'utente a una pagina di successo con l'aiuto del router di Angular.
Il file app.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormSignupComponent } from './form-signup/form-signup.component';
import { FormSuccessComponent } from './form-success/form-success.component';
const routes: Routes = [{
path: '',
component: FormSignupComponent
},{
path: 'success',
component: FormSuccessComponent
}];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Il modulo di routing sopra contiene due percorsi; il percorso principale per il modulo e un percorso di successo per la componente successo.
Il file app.component.html
<router-outlet></router-outlet>
L'uscita del router nel file del componente dell'app sopra consente a un utente di navigare facilmente tra i componenti form-signup e form-success utilizzando gli URL.
Creazione della convalida del modulo per l'applicazione React
export default function validateData(values) {
let errors = {}
if (!values.username.trim()) {
errors.username = "Username required";
}
if (!values.password) {
errors.password = "Password required";
}
if (!values.passwordvalidate) {
errors.passwordvalidate = "Password required";
} else if (values.passwordvalidate !== values.password) {
errors.passwordvalidate = "Passwords do not match";
}
return errors;
}
Il file validateData.js contiene il codice riportato sopra. Controlla ogni campo di input nel modulo per garantire che ogni campo contenga dati validi.
Il file useForm.js
import {useState, useEffect} from 'react';
const useForm = (callback, validate) => {
const [values, setValues] = useState({
username: '',
password: '',
passwordvalidate: ''
});
const [errors, setErrors] = useState ({});
const [isSubmitting, setIsSubmitting] = useState (false)
const handleChange = e => {
const {name, value} = e.target;
setValues({
...values,
[name]: value
});
}
const handleSubmit = e => {
e.preventDefault();
setErrors(validate(values));
setIsSubmitting(true);
}
useEffect(() => {
if (Object.keys(errors).length === 0 && isSubmitting) {
callback();
}
}, [errors, callback, isSubmitting]);
return { handleChange, values, handleSubmit, errors };
}
export default useForm;
L'hookuseForm personalizzato riportato sopra determina se l'utente invia correttamente il modulo. Questo evento si verifica solo se tutti i dati all'interno del modulo sono validi.
Il file Form.js
import React from "react";
import Signup from "./Signup";
import Success from "./Success"
import { useState } from "react";
const Form = () => {
const [isSubmitted, setIsSubmitted] = useState(false);
function submitForm() {
setIsSubmitted(true);
}
return (
<div>
{!isSubmitted ? (<Signup submitForm={submitForm} />) : (<Success />)}
</div>
)
}
export default Form;
Il componente Modulo sopra cambia la visualizzazione tra il componente Iscrizione e il componente Riuscito se il modulo viene inviato.
Il file App.js
import Form from "./components/Form";
function App() {
return (
<div className="App">
<Form/>
</div>
);
}
export default App;
L'interfaccia utente dell'applicazione Angular
L'interfaccia utente visualizza un modulo con un input per il nome utente e due input per la password.
Quando il modulo contiene dati non validi, le pagine visualizzano messaggi di errore:
Quando il modulo contiene dati validi, l'utente può inviarlo correttamente:
L'interfaccia utente dell'applicazione React
Quando il modulo contiene dati non validi:
Quando il modulo contiene dati validi:
Somiglianze e differenze tra React e Angular
I framework Angular e React sono notevolmente simili e in grado di produrre risultati identici. Tuttavia, gli strumenti che potresti utilizzare per ottenere questi risultati saranno diversi. Angular è una piattaforma di sviluppo che fornisce l'accesso a strumenti come un router e una libreria di moduli. React richiede un po' più di creatività da parte dello sviluppatore per ottenere gli stessi risultati.