So sánh Angular JS và React JS

Angular và React là hai trong số các frontend framework hàng đầu cho các ứng dụng web. Mặc dù phạm vi của chúng hơi khác nhau (một là nền tảng phát triển, một là thư viện), chúng được coi là những đối thủ cạnh tranh lớn. Thật an toàn khi cho rằng bạn có thể sử dụng một trong hai khuôn khổ để phát triển một ứng dụng.

Câu hỏi chính sau đó trở thành: tại sao bạn lại chọn cái này hơn cái kia? Bài viết này nhằm mục đích trả lời nó bằng cách phát triển một biểu mẫu đăng ký đơn giản. Biểu mẫu sẽ chỉ dựa vào khả năng xác nhận của từng khuôn khổ.

Điều kiện tiên quyết

Để tiếp tục, bạn phải có thể cài đặt React và có hiểu biết chung về cách hoạt động của ứng dụng React. Bạn cũng nên biết cách cài đặt và sử dụng Angular.

Cấu trúc tệp của mỗi ứng dụng

Biểu mẫu React có cấu trúc tệp sau:

Biểu mẫu Angular có cấu trúc tệp sau:

Hình trên chỉ hiển thị phần đã chỉnh sửa của ứng dụng Angular.

Từ các cấu trúc tệp ở trên, bạn có thể thấy rằng cả hai khung công tác đều phụ thuộc rất nhiều vào việc sử dụng các thành phần.

Tạo logic cho mỗi ứng dụng biểu mẫu

Mỗi ứng dụng sẽ có cùng mục đích: biểu mẫu chỉ được gửi nếu mọi trường đầu vào chứa dữ liệu hợp lệ. Trường tên người dùng hợp lệ nếu nó chứa ít nhất một ký tự. Hai trường mật khẩu hợp lệ nếu giá trị của chúng giống nhau.

Angular cung cấp hai phương pháp tạo biểu mẫu: theo hướng mẫu và phản ứng. Phương pháp phản ứng cho phép nhà phát triển tạo các tiêu chí xác thực tùy chỉnh. Cách tiếp cận theo hướng mẫu đi kèm với các thuộc tính giúp đơn giản hóa việc xác thực biểu mẫu.

React chỉ có khả năng phát triển một biểu mẫu với xác thực tùy chỉnh. Tuy nhiên, React là framework phổ biến hơn và nó có một cộng đồng lớn hơn, vì vậy nhiều thư viện xử lý biểu mẫu có sẵn cho React. Vì mục tiêu ở đây là tránh sử dụng các thư viện bên ngoài, ứng dụng React sẽ dựa vào xác thực tùy chỉnh.

Phát triển mẫu cho từng ứng dụng

Cả hai ứng dụng đều dựa vào các mẫu để tạo ra đầu ra HTML cuối cùng.

Mẫu HTML góc cạnh

Tệp form-signup.component.html chứa mã sau:

<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>

Mẫu HTML phản ứng

Tệp Signup.js chứa mã sau:

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;

Bạn sẽ nhận thấy rằng cả hai ứng dụng đều sử dụng mã HTML cơ bản, ngoại trừ một số khác biệt nhỏ. Ví dụ: ứng dụng Angular sử dụng thuộc tính “class” tiêu chuẩn để xác định các lớp CSS. React sử dụng thuộc tính “className” tùy chỉnh của riêng nó. React biến điều này thành thuộc tính “class” tiêu chuẩn trong đầu ra cuối cùng. Giao diện người dùng đóng một vai trò quan trọng trong sự thành công của bất kỳ ứng dụng nào. Vì cả hai ứng dụng đều sử dụng cùng một cấu trúc HTML và tên lớp nên cả hai ứng dụng đều có thể sử dụng cùng một biểu định kiểu.

Tất cả các thuộc tính không chuẩn trong các mẫu ở trên đều liên quan đến xác nhận.

Tạo xác thực biểu mẫu cho ứng dụng Angular

Để truy cập các thuộc tính xác thực là một phần của phương pháp tiếp cận theo hướng mẫu của Angular, bạn sẽ cần nhập FormsModule trong tệp app.module.ts .

Tệp 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 { }

Bằng cách nhập FormsModule trong tệp ở trên, bây giờ bạn có quyền truy cập vào một loạt các thuộc tính xác thực khác nhau. Bạn sẽ cần thêm thuộc tính ngModel vào các trường đầu vào của mẫu Angular HTML. Nếu bạn nhìn lại mẫu Angular ở trên, bạn sẽ thấy rằng mỗi phần tử đầu vào đều có thuộc tính này.

FormsModule và ngModel cung cấp cho nhà phát triển quyền truy cập vào các thuộc tính xác thực như hợp lệ và không hợp lệ . Phần đoạn văn của mẫu Angular HTML sử dụng thuộc tính # username = ”ngModel” . Nó tạo ra một cảnh báo nếu dữ liệu trong trường đầu vào không hợp lệ và người dùng đã thay đổi nó.

Trong tệp app.module.ts , bạn cũng sẽ thấy ValidateEqualModule , so sánh hai mật khẩu. Để thực hiện việc này, bạn cần tạo một đối tượng mô hình trong tệp form-signup.component.ts .

Tệp 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
    };
}

Mật khẩu thứ hai trong mẫu Angular HTML sử dụng đối tượng mô hình trong tệp ở trên, để so sánh giá trị của nó với mật khẩu đầu tiên.

Thuộc tính bị vô hiệu hóa trên nút gửi đảm bảo rằng nó vẫn không hoạt động cho đến khi mọi trường đầu vào chứa dữ liệu hợp lệ. Việc gửi biểu mẫu sẽ đưa người dùng đến một trang thành công với sự hỗ trợ của bộ định tuyến Angular.

Tệp 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 { }

Mô-đun định tuyến ở trên chứa hai đường dẫn; đường dẫn chính cho biểu mẫu và đường dẫn thành công cho thành phần thành công.

Tệp app.component.html

<router-outlet></router-outlet>

Cửa hàng bộ định tuyến trong tệp thành phần ứng dụng ở trên cho phép người dùng dễ dàng điều hướng giữa các thành phần đăng ký biểu mẫu và thành công biểu mẫu bằng cách sử dụng URL.

Tạo xác thực biểu mẫu cho ứng dụng 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;
}

Tệp validateData.js chứa đoạn mã trên. Nó giám sát từng trường đầu vào trong biểu mẫu để đảm bảo rằng mỗi trường chứa dữ liệu hợp lệ.

Tệp 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;

Móc useForm tùy chỉnh ở trên xác định xem người dùng có gửi biểu mẫu thành công hay không. Sự kiện này chỉ xảy ra nếu tất cả dữ liệu trong biểu mẫu là hợp lệ.

Tệp 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;

Thành phần Biểu mẫu ở trên chuyển chế độ xem giữa thành phần Đăng ký và thành phần Thành công nếu biểu mẫu được gửi.

Tệp App.js

import Form from "./components/Form";
 
function App() {
    return (
        <div className="App">
            <Form/>
        </div>
    );
}
 
export default App;

Giao diện người dùng ứng dụng Angular

Giao diện người dùng hiển thị một biểu mẫu với một đầu vào cho tên người dùng và hai đầu vào mật khẩu.

Khi biểu mẫu chứa dữ liệu không hợp lệ, các trang sẽ hiển thị thông báo lỗi:

Khi biểu mẫu chứa dữ liệu hợp lệ, người dùng có thể gửi thành công:

Giao diện người dùng ứng dụng React

Khi biểu mẫu chứa dữ liệu không hợp lệ:

Khi biểu mẫu chứa dữ liệu hợp lệ:

Điểm giống và khác nhau giữa Angular và React

Các framework Angular và React rất giống nhau và có khả năng tạo ra các kết quả giống hệt nhau. Tuy nhiên, các công cụ mà bạn có thể sử dụng để đạt được những kết quả này sẽ khác nhau. Angular là một nền tảng phát triển cung cấp quyền truy cập vào các công cụ như bộ định tuyến và thư viện biểu mẫu. React đòi hỏi nhà phát triển phải sáng tạo hơn một chút để đạt được kết quả tương tự.

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/angular-vs-react/