AngularJS frente a reaccionar JS

Angular y React son dos de los mejores marcos frontend para aplicaciones web. Aunque sus alcances son ligeramente diferentes (uno es una plataforma de desarrollo y el otro una biblioteca), son vistos como los principales competidores. Es seguro asumir que puede usar cualquiera de los marcos para desarrollar una aplicación.

La pregunta principal entonces es: ¿por qué elegirías uno sobre el otro? Este artículo tiene como objetivo responderla mediante el desarrollo de un formulario de registro simple. El formulario se basará únicamente en las capacidades de validación de cada marco.

requisitos previos

Para continuar, debería poder instalar reaccionar y tener una comprensión general de cómo funciona una aplicación React. También debe saber cómo instalar y uso angular.

La estructura de archivos de cada aplicación

El formulario React tiene la siguiente estructura de archivos:

El formulario Angular tiene la siguiente estructura de archivos:

La imagen de arriba solo muestra la sección editada de la aplicación Angular.

De las estructuras de archivos anteriores, puede ver que ambos marcos dependen en gran medida del uso de componentes.

Creación de la lógica para cada aplicación de formulario

Cada aplicación tendrá el mismo propósito: el formulario solo se envía si cada campo de entrada contiene datos válidos. El campo de nombre de usuario es válido si contiene al menos un carácter. Los dos campos de contraseña son válidos si sus valores son idénticos.

Angular proporciona dos métodos de creación de formularios: basado en plantillas y reactivo. El enfoque reactivo permite al desarrollador crear criterios de validación personalizados. El enfoque basado en plantillas viene con propiedades que simplifican la validación de formularios.

React solo es capaz de desarrollar un formulario con validación personalizada. Sin embargo, React es el marco más popular y tiene una comunidad más grande, por lo que hay muchas bibliotecas de manejo de formularios disponibles para React. Dado que el objetivo aquí es evitar el uso de bibliotecas externas, la aplicación React se basará en la validación personalizada.

Desarrollo de la plantilla para cada aplicación

Ambas aplicaciones se basan en plantillas para crear la salida HTML final.

Plantilla HTML angular

Él formulario-inscripción.componente.html archivo contiene el siguiente código:

<clase div="forma-contenido">
<clase de formulario ="forma" #miFormulario="ngForm">
<h1>¡Completa el formulario para unirte a nuestra comunidad!</h1>
<clase div="entradas de formulario">
<etiqueta para ="nombre de usuario" clase="etiqueta de formulario">Nombre de usuario:</label>
<aporte
 identificación ="nombre de usuario"
 tipo ="texto"
clase="formulario-entrada"
 marcador de posición ="Introduzca su nombre de usuario"
 nombre="nombre de usuario"
 modelo ng
 requerido
 #nombredeusuario="modelo ng"
 />
<p *ngIf="Nombre de usuario inválido && nombre de usuario.tocado">Nombre de usuario (requerido</pag>
</div>
<clase div="entradas de formulario">
<etiqueta para ="clave" clase="etiqueta de formulario">Clave:</label>
<aporte
 identificación ="clave"
 tipo ="clave"
 nombre="clave"
clase="formulario-entrada"
 marcador de posición ="Introducir la contraseña"
 modelo ng
 requerido
 #contraseña="modelo ng"
 [(ngModel)]="modelo.contraseña"
 />
<p *ngIf="contraseña incorrecta && contraseña.tocado">Se requiere contraseña</pag>
</div>
<clase div="entradas de formulario">
<etiqueta para ="validar contraseña" clase="etiqueta de formulario">Clave:</label>
<aporte
 identificación ="confirmar Contraseña"
 tipo ="clave"
 nombre="confirmar Contraseña"
clase="formulario-entrada"
 marcador de posición ="Confirmar Contraseña"
 modelo ng
 requerido
 #contraseña2="modelo ng"
 ngValidateEqual="clave"
 [(ngModel)]="modelo.confirmarcontraseña"
 />
<div *ngIf="(contraseña2.sucia || contraseña2.tocada) && contraseña2.no válida">
<p *ngIf="contraseña2.hasError('no es igual') && contraseña.válida">
 contraseñas hacernopartido
</pag>
</div>
</div>
<botón
clase="formulario-entrada-btn"
 tipo ="entregar"
 [deshabilitado]="myForm.invalid"
 enrutadorEnlace="/success"
>
 Inscribirse
</button>
</form>
</div>

Reaccionar plantilla HTML

Él Registro.js archivo contiene el siguiente código:

importar Reaccionar desde "reaccionar";
importar usarformulario desde "../usarFormulario";
importar validar desde "../validarDatos";
importar "./Registrarse.css"
constante Registrarse = ({submitForm}) => {
constante {manejarCambio, valores, manejarEnviar, errores} = useForm(enviarForma, validar);
devolver (
<div className="forma-contenido">
<forma className="forma" onSubmit={manejarEnviar}>
<h1>¡Completa el formulario para unirte a nuestra comunidad!</h1>
<div className="entradas de formulario">
<etiqueta htmlPara="nombre de usuario" nombreclase="etiqueta de formulario">Nombre de usuario:</label>
<aporte
 identificación ="nombre de usuario"
 tipo ="texto"
 nombre="nombre de usuario"
 nombreclase="formulario de entrada"
 marcador de posición ="Introduzca su nombre de usuario"
 value={valores.nombre de usuario}
 onChange={manejarCambio}
 />
{errores.nombre de usuario &&<pag>{errores.nombre de usuario}</pag>}
</div>
<div className="entradas de formulario">
<etiqueta htmlPara="clave" nombreclase="etiqueta de formulario"> Clave: </label>
<aporte
 identificación ="clave"
 tipo ="clave"
 nombre="clave"
 nombreclase="formulario de entrada"
 marcador de posición ="Introducir la contraseña"
 value={valores.contraseña}
 onChange={manejarCambio}
 />
{errores.contraseña &&<pag>{errores.contraseña}</pag>}
</div>
<div className="entradas de formulario">
<etiqueta htmlPara="validar contraseña" nombreclase="etiqueta de formulario"> Clave: </label>
<aporte
 identificación ="validar contraseña"
 tipo ="clave"
 nombre="validar contraseña"
 nombreclase="formulario de entrada"
 marcador de posición ="Confirmar Contraseña"
 value={valores.contraseñavalidar}
 onChange={manejarCambio}
 />
{errores.contraseñavalidar &&<pag>{errores.validación de contraseña}</pag>}
</div>
<botón className="formulario-entrada-btn" tipo ="entregar">Inscribirse</button>
</form>
</div>
 )
}
exportardefecto Regístrate;

Notarás que ambas aplicaciones usan código HTML básico, excepto por algunas diferencias menores. Por ejemplo, la aplicación Angular usa el atributo de "clase" estándar para identificar las clases de CSS. React usa su propia propiedad "className" personalizada. React transforma esto en el atributo de "clase" estándar en el resultado final. La interfaz de usuario juega un papel importante en el éxito de cualquier aplicación. Dado que ambas aplicaciones usan la misma estructura HTML y nombres de clase, ambas aplicaciones pueden usar la misma hoja de estilo.

Todas las propiedades no estándar de las plantillas anteriores se relacionan con la validación.

Creación de la validación de formulario para la aplicación Angular

Para acceder a las propiedades de validación que forman parte del enfoque basado en plantillas de Angular, deberá importar el Módulo de formularios en el aplicación.módulo.ts expediente.

El archivo app.module.ts

importar { Módulo Ng } desde '@angular/núcleo';
importar { Módulo de formularios } desde '@angular/formularios';
importar { Módulo de navegador } desde '@angular/plataforma-navegador';
importar { Validar Módulo Igual } desde 'ng-validar-igual'
importar { Módulo de enrutamiento de aplicaciones } desde './app-routing.módulo';
importar { Componente de la aplicación } desde './aplicación.componente';
importar { Componente de registro de formulario } desde './formulario-inscripción/formulario-inscripción.componente';
importar { Componente de éxito del formulario } desde './formulario-éxito/formulario-éxito.componente';
@NgModule({
 declaraciones: [
 Componente de aplicación,
 Componente de registro de formulario,
 FormSuccessComponent
 ],
 importaciones: [
 módulo de navegador,
 Módulo de formularios,
 ValidateEqualModule,
 Módulo de enrutamiento de aplicaciones
 ],
proveedores: [],
oreja: [Componente de aplicación]
})
exportarclasemódulo de aplicación{ }

Al importar el Módulo de formularios en el archivo anterior, ahora tiene acceso a una gama de diferentes propiedades de validación. Deberá agregar el modelo ng propiedad a los campos de entrada de la plantilla HTML angular. Si vuelve a mirar la plantilla Angular anterior, verá que cada uno de los elementos de entrada tiene esta propiedad.

Él Módulo de formularios y modelo ng dar al desarrollador acceso a las propiedades de validación como válido y inválido. La sección de párrafo de la plantilla Angular HTML utiliza el #nombredeusuario=”ngModel” propiedad. Produce una advertencia si los datos en el campo de entrada no son válidos y el usuario los ha cambiado.

En el aplicación.módulo.ts archivo, también verá el ValidateEqualModule, que compara las dos contraseñas. Para hacer esto, deberá crear un objeto modelo en el formulario-registro.componente.ts expediente.

El archivo form-signup.component.ts

importar { Componente, OnInit } desde '@angular/núcleo';
@Componente({
 selector: 'aplicación-formulario-registro',
 URL de la plantilla: './formulario-inscripción.componente.html',
 URL de estilo: ['./formulario-inscripción.componente.css']
})
exportar claseComponente de registro de formularioimplementosOnInit{
constructor() { }
 ngOnInit(): vacío {}
 modelo = {
 clave: nulo,
 confirmar Contraseña: nulo
 };
}

La segunda contraseña en la plantilla Angular HTML usa el modelo objeto en el archivo de arriba, para comparar su valor con la primera contraseña.

Él desactivado La propiedad en el botón Enviar garantiza que permanezca inactivo hasta que cada campo de entrada contenga datos válidos. Enviar el formulario lleva al usuario a una página de éxito con la ayuda del enrutador de Angular.

El archivo app.routing.module.ts

importar { Módulo Ng } desde '@angular/núcleo';
importar { RouterModule, Rutas } desde '@angular/enrutador';
importar { Componente de registro de formulario } desde './formulario-inscripción/formulario-inscripción.componente';
importar { Componente de éxito del formulario } desde './formulario-éxito/formulario-éxito.componente';
constante rutas: Rutas = [{
 sendero: '',
 componente: FormSignupComponent
},{
 sendero: 'éxito',
 componente: FormSuccessComponent
}];
@NgModule({
importaciones: [RouterModule.forRoot (rutas)],
exportaciones: [Módulo de enrutador]
})
exportarclaseMódulo de enrutamiento de aplicaciones{ }

El módulo de enrutamiento anterior contiene dos rutas; la ruta principal para el formulario y una ruta de éxito para el componente de éxito.

El archivo app.component.html

<salida del enrutador></router-outlet>

La salida del enrutador en el archivo del componente de la aplicación anterior permite al usuario navegar fácilmente entre el registro de formulario y forma-éxito componentes usando URLs.

Creación de la validación de formulario para la aplicación React

exportardefectofunciónvalidar datos(valores) {
dejar errores = {}
Si (!valores.nombre de usuario.recortar()) {
 errores.nombre de usuario = "Nombre de usuario (requerido";
 }
Si (!valores.clave) {
 errores.contraseña = "Se requiere contraseña";
 }
Si (!valores.contraseñavalidar) {
 errores.passwordvalidate = "Se requiere contraseña";
 } demásSi (valores.contraseñavalidar !== valores.contraseña) {
 errores.passwordvalidate = "Contraseñas hacernopartido";
 }
devolver errores;
}

Él validarDatos.js El archivo contiene el código anterior. Supervisa cada campo de entrada en el formulario para garantizar que cada campo contenga datos válidos.

El archivo useForm.js

importar {usarEstado, usarEfecto} desde 'reaccionar';
constante useForm = (devolución de llamada, validar) => {
constante [valores, establecerValores] = usarEstado({
 nombre de usuario: '',
 clave: '',
 validación de contraseña: ''
 });
constante [errores, setErrors] = useState ({});
constante [isSubmitting, setIsSubmitting] = useState (falso)
constante handleChange = e => {
constante {nombre, valor} = e.objetivo;
establecerValores({
 ...valores,
[nombre]: valor
 });
 }
constante handleSubmit = e => {
mi.preventDefault();
 setErrors (validar (valores));
 setIsSubmitting(verdadero);
 }
 usarEfecto(() => {
 if (Objeto.claves (errores).longitud 0 && está enviando) {
 llamar de vuelta();
 }
 }, [errores, devolución de llamada, isSubmitting]);
devolver { handleChange, valores, handleSubmit, errores };
}
exportardefecto usarForma;

La costumbre usarformulario hook arriba determina si el usuario envía correctamente el formulario. Este evento solo ocurre si todos los datos dentro del formulario son válidos.

El archivo Form.js

importar Reaccionar desde "reaccionar";
importar Regístrate desde "./Regístrate";
importar Éxito desde "./Éxito"
importar { estado de uso } desde "reaccionar";
constante Forma = () => {
constante [isSubmitted, setIsSubmitted] = useState(falso);
funciónenviarFormulario() {
 setIsSubmitted(verdadero);
 }
devolver (
<división>
 {! ¿Está enviado? (<Registrarse enviarFormulario={enviarFormulario} />): (<Éxito />)}
</div>
 )
}
exportardefecto Forma;

Él Forma componente de arriba cambia la vista entre el Regístrate componente y el Éxito componente si se envía el formulario.

El archivo App.js

importar Forma desde "./componentes/Formulario";
funciónaplicación() {
devolver (
<div className="aplicación">
<Forma/>
</div>
 );
}
exportardefecto aplicación;

La interfaz de usuario de la aplicación angular

La interfaz de usuario muestra un formulario con una entrada para el nombre de usuario y dos entradas para la contraseña.

Cuando el formulario contiene datos no válidos, las páginas muestran mensajes de error:

Cuando el formulario contiene datos válidos, el usuario puede enviarlo correctamente:

La interfaz de usuario de la aplicación React

Cuando el formulario contiene datos no válidos:

Cuando el formulario contiene datos válidos:

Similitudes y diferencias entre React y Angular

Los frameworks Angular y React son notablemente similares y capaces de producir resultados idénticos. Sin embargo, las herramientas que podría usar para lograr estos resultados serán diferentes. Angular es una plataforma de desarrollo que brinda acceso a herramientas como un enrutador y una biblioteca de formularios. React requiere un poco más de creatividad por parte del desarrollador para lograr los mismos resultados.

reaccionar contra Angular: ¿Por qué React es mucho más popular?

Leer siguiente

Sobre el Autor