Angular बनाम React: 7 Key फीचर्स का मुकाबला

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

Angular बनाम रिएक्ट फ्रंट एंड जावास्क्रिप्ट डेवलपर्स के बीच एक मशहूर बहस का मुद्दा है और, अक्सर, इस बहस का अंत एक टेक्नोलॉजी या दूसरी के प्रति पक्षपातपूर्ण समाप्त होती है. यह दोनों क्रमशः गूगल और फेसबुक के द्वारा डिवेलप की गई, Angular और रिएक्टिव दो मशहूर टेक्नोलॉजीज है जिनका प्रयोग इंटरएक्टिव सिंगल पेज एप्लीकेशन को बनाने के लिए किया जाता है.

Angular और React के बीच एक व्यापक तुलना करना बहुत आसान है क्योंकि कुछ ऐसी जगह हैं जहां वे एक दूसरे के ऊपर बढ़त प्राप्त करते हैं इस मामले में कि वह क्या ऑफर कर रही हैं, यानी कि एप्लीकेशन के फ्रंट एंड व्यू को बनाना और दूसरी जगह है जहां उनकी फंक्शनैलिटी अधूरी रहती हैं जब तक की कोई third-पार्टी लाइब्रेरी उनकी मदद ना करें. किसी एक टेक्नोलॉजी को दूसरे के ऊपर प्रयोग करना एक प्रश्न है चाहे Angular या React कौन आपकी समस्या का बेहतर समाधान करती है और थोड़ा सा सहज बोध. इस ट्यूटोरियल में, हम Angular और React के बीच हाथ अलग अलग मुख्य अंतर को कंपेयर और कंट्रास्ट करेंगे.

मैं पहले कोड करने वाले दृष्टिकोण का एक उत्साही समर्थक हूं ( वे कहते हैं, कोड शब्दों से अधिक जोर से बोलते हैं). इस को ध्यान में रखकर, मैंने एंगुलर और रिएक्ट के कोड सैंपल को जोड़ा है ताकि आप अपने सहज ज्ञान और निर्णय के हिसाब से डेवलप कर सके आपके लिए जो कार्य करता हो और जो नहीं. चलिए शुरू करते हैं.

Framework बनाम Library

Angular फ्रेमवर्क है जबकि React एक लाइब्रेरी है.

तो इसका क्या मतलब हुआ? React अपने खुद के दम पर आपको एक वेब एप्लीकेशन नहीं बनवा पाती क्योंकि यह व्यू बनाने के लिए डिजाइन की गई है (अतः MVC में ‘V’). React जो कर सकती है वह है एक कॉम्पोनेंट पर आधारित व्यू को बनाना जिसमें डेटा अपने चाइल्ड व्यू को पास किया जा सके. इस void को भरने के लिए, Facebook ने Flux को डेवलप किया, जो कि एक आर्किटेक्चरल पैटर्न है जो रिएक्ट को पूरा करता है. Flux का आर्किटेक्चर, जब रियट के साथ जोड़ा जाता है, निम्नलिखित परिदृश्य प्रदान करता है:

यूजर React के एलिमेंट पर क्लिक करता है.
एक एक्शन फायर होता है. यह एक्शन Dispatcher लाइब्रेरी के द्वारा Store में भेजा जाता है.
Store एप्लीकेशन की स्टेट पर और डाटा प्राप्त करने वाले मेथड पर नजर रखता है. state में कोई भी अपडेट व्यू में रिफ्लेक्ट होता है, और यह व्यू को एप्लीकेशन के स्टेट के साथ कंसिस्टेंट बने रहने में मदद करता है.

मतलब समझ नहीं आया? यह फिगर को इसमें आपकी मदद करनी चाहिए.

An image that depicts how the Flux architecture complements React — Flux कंपलीमेंट्स यूनिडायरेक्शनल डेटा प्रवाह के कंसेप्ट को React और इंप्लीमेंट करता है.

Anguar एक प्रेम वर्क है जिससे हम क्लाइंट एप्लीकेशन बनाते हैं.

AngularJS मजबूती से MVC पैटर्न के ऊपर बनाया गया है, जो एप्लीकेशन को तीन अलग-अलग लेयर में बैठता है. Model, view और controller का कंबीनेशन साथ ही साथ जोड़ी गई कंपलेक्सिटी मास्टरिंग में शामिल directives, factories, services और दूसरे कॉम्पोनेंट्स एक सिंगल पेज एप्लीकेशन बनाने के लिए Google में डेवलपर्स को मजबूर करती है की वह कॉम्पोनेंट पर आधारित आर्किटेक्चर पर शिफ्ट हो जाए.

लेकिन जब आप की एप्लीकेशन बढ़ना शुरू होती है, तो यह महत्वपूर्ण है कि इसके पास एक ठोस स्ट्रक्चर हो जो आपकी एप्लीकेशन के बिजनेस लॉजिक को कॉम्पोनेंट्स से दूर रख सके. एक फ्रेमवर्क होने के नाते, Angular आपको बिजनेस लॉजिक को डोमेन मॉडल (मॉडल क्लासेज और सर्विसेस की कंबीनेशन का उपयोग करके) में स्थानांतरित करके structural ऑर्गेनाइजेशन को लागू करने और डिपेंडेंसी इंजेक्शन के साथ मॉडल को इंजेक्शन देने की अनुमति देता है.

यह कोर्ट का 1 सैंपल है जो दिखाता है कि कैसे User मॉडल और User सर्विस के अंदर बिजनेस लॉजिक को इनकैप्सूलेट किया जाता है, और हमारे कॉम्पोनेंट से दूर किया जाता है.

/* Path: /app/models/User.ts */

export class User {
    id: number;
    username: string;
    password: string;
    firstName: string;
    lastName: string;
}

/* /app/services/user.service.ts */

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
 
import { User } from '../models/User';
 
@Injectable()
export class UserService {
    constructor(private http: Http) { }
 
    getAll() {
        // API to return all users
    }
 
    create(user: User) {
        //API call to create user
    }
 
    update(user: User) {
        //API call to update user
    }
 
    delete(id: number) {
        //API call to delete user
    }
 
}

/* Path: /app/page/page.component.ts */

import { Component } from '@angular/core';
 
import { User } from '../models/User';
import { UserService } from '../services/user.service';
 
@Component({
    templateUrl: 'page.component.html'
})
 
export class PageComponent {
    currentUser: User;
    users: User[] = [];
 
    constructor(private userService: UserService) {
       //Dependency is Injected inside the constructor's arguments
 
  
    deleteUser(id: number) {
        this.userService.delete(id).subscribe(() => { #Do Something});
    }
 
    private loadAllUsers() {
        this.userService.getAll().subscribe(users => { #Do something else });
    }
}

<!---Path: /app/home/page.component.html -->

<div class="title">
   
    <h2>All users:</h2>
    <ul>
        <li *ngFor="let user of users">
            {{user.username}} ({{user.firstName}} {{user.lastName}})
            - <a (click)="deleteUser(user.id)">Delete</a>
        </li>
    </ul>
   
</div>

कॉम्पोनेंट पर आधारित अप्रोच

एक एंगुलर एप्लीकेशन में कॉम्पोनेंट UI का सबसे बुनियादी बिल्डिंग ब्लॉक है. एक Angular एप्लीकेशन Angular कॉम्पोनेंट्स का एक पेड़ है.

कॉम्पोनेंट क्या है? Angular में, कॉम्पोनेंट्स TypeScript क्लासेज है जिनमें @Component डेकोरेटर उनके ऊपर मार्क है. इसके अलावा, इन डेकोरेटर्स के अंदर, हम डिफाइन कर सकते हैं की Angular मेटा डाटा को क्या कॉल करता है, जिन में शामिल है टेंप्लेट, styles, सिलेक्टर्स और आगे भी.

Angular मे कॉम्पोनेंट hierarchy इस तरह से डिजाइन की गई है कि आप एक सिंगल एंटिटी के तहत स्ट्रक्चर और फंक्शनैलिटी को जोड़ सकते हैं. यहां कॉम्पोनेंट्स का हाई लेवल आर्किटेक्चरल ओवरव्यू है और यह Angular में अन्य सभी चीजों के साथ कैसे जुड़ा हुआ है.

The architecture of Angular — Angular का आर्किटेक्चर. सेंटर में कॉम्पोनेंट, और बाकी सब कुछ इसके चारों ओर घूमता है.

कॉम्पोनेंट्स के बीच डाटा शेयर करना कॉम्पोनेंट्स को नेस्टिंग करने से संभव है, जैसा कि नीचे उदाहरण दिया गया है.

/* UserParentComponent.ts */

import { Component } from '@angular/core';
 
 
// The <user-child> selector is nested inside <user-parent>. Each user is passed down as a property. 

@Component({
  selector: 'user-parent',
  template: `
    <h2>There are {{users.length}} registered users {{status}} now</h2>
    <user-child *ngFor="let user of users"
      [user]="user"
      [status]="status">
    </user-child>
  `
})
export class UserParentComponent {
  users: { id: number, name: string }[] = [
    { "id": 0, "name": "Chris" },
    { "id": 1, "name": "Dwayne" },
    { "id": 2, "name": "Eve" }
  ];
  status: string =  "online";
  
}

/* UserChildComponent.ts */

import { Component, Input } from '@angular/core';
 
// Input properties are adorned with @decorators
// user & status are input properties
 
@Component({
  selector: 'user-child',
  template: `
    <h2>{{user.name}}</h3>
    <p> id : {{user.id}} </p>
    <p> Status: {{status}} </p>
  `
})
export class UserChildComponent {
  @Input() user: { id: number, name: string };
  @Input() status: string;
}

कॉम्पोनेंट्स का कंसेप्ट React के रूट में है, जैसा कि यह Angular में है. Facebook कॉल ए कॉम्पोनेंट पर आधारित लाइब्रेरी पर React करती है जो आपको इंटरएक्टिव यूजर इंटरफेस बनाने देता है. हालांकि Angular के विपरीत, Angular कॉम्पोनेंट केबल जावास्क्रिप्ट फंक्शन है जो मनमानी संख्या में इनपुट और आउटपुट के साथ है. नीचे दिया गया कोड जावास्क्रिप्ट फंक्शन का उपयोग करके और ES6 क्लास का उपयोग करके कॉम्पोनेंट को परिभाषित करना दिखाता है.

// Writing components using JavaScript functions

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Writing components using ES6 Class

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

हम अब कॉम्पोनेंट्स को लिखने के लिए ES6 स्टैंडर्ड्स का पालन करेंगे क्योंकि Facebook यही सिफारिश करता है. हर एक React कॉम्पोनेंट इनपुट की मनमानी संख्या को स्वीकार करता है, जिसे props नामक ऑब्जेक्ट के अंदर स्टोर किया जाता है.

इसमें एक render मेथड भी है, और जैसा की नाम से पता चलता है यह मेथड निर्धारित करता है कि कॉम्पोनेंट कोकब इन्वोक किया जाएगा. प्रत्येक कॉम्पोनेंट एक इंटरनल स्टेट (this.state के माध्यम से) को बनाए रखता है, और हर बार जब स्टेट बदलता है, तो उस कॉम्पोनेंट का रेंडम फंक्शन दोबारा शुरू किया जाता है.

लेंगुएज के फीचर्स: TypeScript बनाम ES6

Angular एप्लीकेशन TypeScript में लिखी गई है, जो ECMA2015 का सुपर सेट है और एक प्लेन .js फाइल में अपनी मजबूती से टाइप की गई .ts फाइल को कंपाइल करने के लिए एक ट्रांसलेटर का उपयोग करता है. TypeScript लैंग्वेज एक्सटेंशन प्रदान करता है जो जावास्क्रिप्ट में लेखन को आसान बनाने के लिए डिज़ाइन किया गया है, और यह वर्कफ्लो को टाइप करने और बढ़ाने के लिए जावास्क्रिप्ट एंटिटीज के साथ टाइप की जानकारी को एसोसिएट करता है.

TypeScript के कुछ फीचर्स में ऑप्शनल डाटा टाइपिंग और इंटरफ़ेस, क्लास और डेकोरेटर्स का सपोर्ट शामिल है. (डेकोरेटेड ऐसे फंक्शंस होते हैं जो ‘@’ के साथ प्रीफिक्स किए जाते हैं और तुरंत क्लास, पैरामीटर या किसी प्रॉपर्टी के बाद होते हैं.)

आइए React में गोता लगाएं, क्या हम करें? इस कोड सैंपल में React में महत्वपूर्ण लैंग्वेज फीचर्स में से एक स्पष्ट है.

function Tweet(props) {
  return(
  <div className="tweet">
        <img src="http://twitter.com/some-avatar.png" className="tweet__avatar" />
        <div className="tweet__body">
            <p>This is a tweet.</p>  
        </div>
      </div>
    );
}

यह ग्रेट नहीं है? React आपको अपनी JavaScript की फाइल में XML/HTML टैग एंबेड करने देती है, और यह JSX के माध्यम से किया जाता है, जो JavaScript को सिंटेक्स एक्सटेंशन की क्षमता प्रदान करता है. हमें Babel जैसे कंपाइलर का उपयोग करना है, जो हमारे JSX कोर्ट को जावास्क्रिप्ट में कंपाइल करता है जो ब्राउज़र समझ सकते हैं. ऊपर दिए गए कोर्ट कुछ इस तरह से कंपाइल किए जाते हैं:

"use strict";

function Tweet(props) {
  return React.createElement(
    "div",
    { className: "tweet" },
    React.createElement("img", { src: "http://twitter.com/some-avatar.png", className: "tweet__avatar" }),
    React.createElement(
      "div",
      { className: "tweet__body" },
      React.createElement(
        "p",
        null,
        "This is a tweet."
      )
    )
  );
}

हालांकि JSX का उपयोग करने को रिकमेंड किया जाता है, यदि आप जावास्क्रिप्ट में HTML टैग अंबेडकर ने के विचार के विरुद्ध है तो आप React.createElement() से जुड़े रह सकते हैं.

इसके अलावा, आप Reactive के साथ काम करते समय या तो ES6 स्टैंडर्ड्स या JavaScript के ट्रेडिशनल रूप का उपयोग कर सकते हैं. हालांकि ES6 अपेक्षाकृत नया है, लेकिन इसमें classes, arrow functions, template literals, destructing, और let और const के उपयोग जैसे कई फीचर्स शामिल हैं. एकमात्र नकारात्मक पक्ष जो मैं सोच सकता हूं वह है कि यह ब्वॉयलरप्लेट कोड को थोड़ा सा जोड़ता है जैसे हर बार जब आप constructor() को कॉल करते हैं तो super() को कॉल करने की आवश्यकता होती है, और यह ऑटोमेटिक रूप से this के साथ इवेंट हैंडलिंग मेथड को इसके साथ bind नहीं करता है.

class User extends React.Component {
  constructor(props) {
 
   //bloat code alert
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    
  }

  handleSubmit(user) {
    //Method to handle submit
  }

  handleInputChange(user) {
   //Method to handle input
  }

  render() {
    

    return (
      <div>
        <UserRegistration
              onSubmitSuccess={this.handleSubmit} onInputChange={this.handleInputChange}  />
        
      </div>
    );
  }
}

Angular में टाइप चेकिंग बनाम React में PropTypes

स्टैटिक टाइप की जांच कंपाइल टाइम पर की जाती है. कंपाइलर आपको संभावित टाइप केमिस मैच के बारे में चेतावनी देता है और कुछ error का पता लगाता है जो अन्यथा ध्यान ना दें. इसके अतिरिक्त, एक वेरिएबल, एक प्रॉपर्टी, या किसी फंक्शन के पैरामीटर पर कॉन्ट्रैक्ट को डिफाइन करने के परिणाम स्वरूप अधिक पढ़ने योग्य और मेंटेन करने योग्य कौन हो सकते हैं.

वेरिएबल और फंक्शन डिक्लेरेशन उनके डाटा टाइप्स को घोषित करके अधिक एक्सप्रेसिव बनाते हैं. आप TypeScript डॉक्यूमेंटेशन में विभिन्न प्रिमिटिव डाटा टाइप्स के बारे में अधिक पढ़ सकते हैं.

let isLoggedIn: boolean = false;
let id: number = 10;
let name: string = "Davis";
let list: number[] = [1, 2, 3];

enum Color {Red, Green, Blue};
let c: Color = Color.Red;
let bucket: any = 4;
bucket = "I can be a string";
bucket = false; // or a boolean

एक इंटरफ़ेस का उपयोग करके API के सिग्नेचर को परिभाषित करने में कोड कम अस्पष्ट (ambiguous) और समझने में आसान बनाता है. इंटरफ़ेस एक क्विक स्टार्ट गाइड के रूप में कार्य करता है जो आपको कोड के साथ तुरंत शुरू करने में मदद करता है और डॉक्यूमेंटेशन या लाइब्रेरी के वास्तविक इंप्लीमेंटेशन को पड़ने पर खर्च किए गए समय को बचाता है.

interface ButtonSettings {
    text: string;
    size?: { width: number; height: number; };
    color?: string;
}

function createButton(settings: ButtonSettings) { ... }

createButton({ text: 'Submit' }); // OK
createButton({ text: 'Submit', size: { width: 70, height: 30 }}); // OK
createButton({ text: 'Submit', color: 43); // Not OK: 43 isn't a string
createButton({ text: 'Submit', size: { width: 70 }); // Not OK: size needs a height as well
createButton({ color: 'Blue'}); // Not OK: 'text' member is required

TypeScript में type की वर्ड का उपयोग किसी टाइप के लिए इलियास (alias) बनाने के लिए किया जा सकता है. फिर आप नए टाइप बना सकते हैं जो इन प्रिमिटिव टाइप का एक यूनियन या इंटरसेक्शन हो.

//Union Types

type Age = number | string;
function getAge (age: Age): string {
  return `You are ${age}!`;
}

let ofSusan: Age =21;
let ofTyler: Age = 'thirty one';
getAge(ofSusan); // You are 21!
getAge(ofTyler); // You are thirty one!

//Intersection Types

 interface Name{
  name(firstName: string, lastName: string): string;
}

interface Age {
  age(current: number): number;
}
// assign intersection definition to alias User
type User = Name & Age;

function createUser (testUser: User) {
  testUser.name("David","John");
  testUser.age(99);
  testUser.address(); //error

Reactके टाइप की जांच के लिए सीमित सपोर्ट है क्योंकि अंतर्निहित (underlying) ES6 इसका सपोर्ट नहीं करता है. फिर भी, आप React टीम द्वारा डिवेलप prop-types लाइब्रेरी का उपयोग करके टाइप चेकिंग को इंप्लीमेंट कर सकते हैं. एक कॉम्पोनेंट के props को टाइप चेकिंग करें कि यह एक स्ट्रिंग है जैसा कि नीचे दिखाया गया है.

import PropTypes from 'prop-types';
//importing prop-types library

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
      <P> My age is, {this.props.age} </h2>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string;
  age: PropTypes.number;
};

लेकिन prop-types strings, numbers, और boolean तक ही सीमित नहीं है. prop-types लाइब्रेरी डॉक्यूमेंटेशन में डिस्क्राइब किए अनुसार आप बहुत कुछ कर सकते हैं. हालांकि, यदि आप static टाइप की जांच गंभीरता से लेते हैं, तो आप को Flow जैसे कुछ का उपयोग करना चाहिए, जो JavaScript के लिए एक्सटेटिक टाइप-चेकर (type-checker) लाइब्रेरी है.

Scaffolding: Angular CLI बनाम create-react-app

जमीन से एक प्रोजेक्ट शुरू करना शुरू में मजेदार लग सकता है. हालांकि, ड ट्रक सेट अप करने की प्रक्रिया, कॉम्पोनेंट्स के लिए ब्वॉयलरप्लेट कोड लिखना, और बूटस्ट्रैप किए गए एप्लीकेशन को प्राप्त करना एक व्यर्थ और अनुत्पादक (unproductive) एक्सरसाइज है. आपकी स्ट्रेटजी को यथासंभव इसके साथ शीघ्रता से चलना चाहिए और एप्लीकेशन के वास्तविक डेवलपमेंट पर ध्यान केंद्रित करना चाहिए. Google और Facebook का धन्यवाद, आप अपनी और scaffold करने के लिए टूल उपलब्ध है.

Angular के लिए AngularCLI सेट करना और React के लिए create-react-app को npm का उपयोग करके करना सीधा है.

// Angular CLI

$ npm install -g @angular/cli

// create-react-app

$ npm install -g create-react-app

एक नई Angular एप्लीकेशन बनाने के लिए, आपको निम्न कमांड का उपयोग करना चाहिए:

$ ng new PROJECT-NAME
$ ng serve

लेकिन बस इतना ही नहीं है. ng generate कमांड आपको कंपोनेंट, routes, pipes, directives, और services जनरेट करने देता है.

$ ng generate component Page

installing component
  create src\app\page\page.component.css
  create src\app\page\page.component.html
  create src\app\page\page.component.spec.ts
  create src\app\page\page.component.ts
  update src\app\app.module.ts

Angular CLI बहुत कुछ कर सकता है, जैसे कि आप के Angular app का निर्माण करना, यूनिट टेस्टिंग चलाने के लिए कमांड, और end-to-end टेस्टिंग. आप GitHub पर इसके बारे में अधिक पढ़ सकते हैं.

दूसरी ओर, create-react-app किसी भी कंफीग्रेशन फाइल ओं के बिना एक React app बनाने का ऑफिशियल रूप से सपोर्टेड तरीका है.

$ npm install -g create-react-app

यह सभी Babel और webpack डिपेंडेंसीज के साथ एक फंक्शनल React app बनाती है. आप npm start का उपयोग करके अपने ब्राउज़र पर app चलाने के साथ शुरू कर सकते हैं.

आप package.json फाइल में React app के लिए उपलब्ध स्क्रिप्ट को फाइंड कर सकते हैं.

  
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

डाटा बाइंडिंग: Two-Way बाइंडिंग बनाम यूनिडायरेक्शनल बाइंडिंग

डाटा बाइंडिंग एक ऐसा फीचर है जो एप्लीकेशन स्टेट (मॉडल) और व्यू के बीच डाटा के सिंक्रोनाइजेशन को इनेबल करता है. एक तरफा डाटा बाइंडिंग रूटीन में, एप्लीकेशन के स्टेट में कोई भी परिवर्तन ऑटोमेटिक रूप से व्यू को अपडेट करता है. इसके उलट, दो तरफा डाटा बाइंडिंग सिंगल एंटिटी के अंडर प्रॉपर्टीज और इवेंट्स को एक साथ माइंड करता है, यानी मॉडल के साथ कोई भी मॉडिफिकेशन में व्यू को भी अपडेट करता है और ऐसा उल्टा होने पर भी होता है.

React में, प्रॉपर्टीज पैरंट्स से चाइल्ड कॉम्पोनेंट तक नीचे की ओर पास की जाती है, जिन्हें यूनिडायरेक्शनल या टॉप- डाउन डाटा फ्लो के रूप में जाना जाता है. एक कॉम्पोनेंट का स्टेट एनकैप्सूलेटेड होता है और अन्य कॉम्पोनेंट्स के लिए एक्सेसिबल नहीं है जब तक की एक चाइल्ड के कॉम्पोनेंट को एक prop के रूप में पास नहीं किया जाता, यानी एक कॉम्पोनेंट का स्टेट चाइल्ड कॉम्पोनेंट का prop बन जाता है.

class UserChild extends React.Component {
  render() {
 
    let userData = this.props.users.map( (user) => {
      return (<p> <strong>{user.id} </strong> : {user.name} </p>);
      });
   
    return (
        <div>
          <h2> Hello. The server is {this.props.status} </h2>
          {userData}
        </div>
    );
  }
}

class UserParent extends React.Component {
  constructor() {
    super();
    //State gets defined here
    this.state = {
      status: "Online"
    }
  }
  render() {
    return (
      <div>
       
        <UserChild users={this.props.users} status={this.state.status} />
      </div>
    );
  }
}

var USERS = [
    { "id": 0, "name": "Chris" },
    { "id": 1, "name": "Dwayne" },
    { "id": 2, "name": "Eve" }
];


ReactDOM.render(
  <UserParent users={USERS} />,
  document.getElementById('container')
);

लेकिन क्या होगा यदि आपको कॉम्पोनेंट ट्री के जरिए डाटा प्रॉपगेट करने की जरूरत हो? यह चाइल्ड इवेंट्स और पैरंट कॉलबैक के जरिए किया जाता है. React डॉक्यूमेंटेशन में एक अच्छा उदाहरण शामिल है जो इस तरह के scenario से संबंधित है.

Angular मैं उपलब्ध डाटा बाइंडिंग तकनीक कुछ फीचर्स में से है जो इसे दिलचस्प बनाती है. Angular में इंटरपोलेशन एक तरफ से (one-way) बाइंडिंग, दो तरफ से (two-way) बाइंडिंग, और इवेंट बाइंडिंग के लिए out-of-the-box सपोर्ट है.

इंटरपोलेशन आप के HTML टैग और अटरीब्यूट असाइनमेंट के बीच टेक्स्ट के अंदर अपनी कॉम्पोनेंट प्रॉपर्टी को बाइंड करने का सबसे आसान तरीका है.

<p>Welcome back {{currentUser.name}}!</p>

प्रॉपर्टी बाइंडिंग इस अर्थ में इंटरपोलेशन के जैसा ही है कि आप अपने व्यू एलिमेंट्स की प्रॉपर्टीज को कॉम्पोनेंट प्रॉपर्टीज में जोड़ सकते हैं. प्रॉपर्टी बाइंडिंग कॉम्पोनेंट कम्युनिकेशन का पक्ष लेती है और यह आईडेंटिकल है की React में props को कैसे पास किया जाता है.

<img [src]="userImgUrl">

<user-child [user]="currentUser"></user-child>

इवेंट बाइंडिंग विपरीत दिशा में डाटा फ्लो की अनुमति देता है, यानी किसी एलिमेंट से कॉम्पोनेंट तक. यहां, click एक टारगेट इवेंट है, और दाईं ओर, हमारे पास onSave() मेथड है जो इवेंट होने पर चलता है.

<button (click)="onSave()">Save</button>

लेकिन सबसे महत्वपूर्ण फीचर है [(ngModel)] का उपयोग करके दो तरफा (two-way) बाइंडिंग. यह एक डायरेक्टिव के अंदर में प्रॉपर्टी बाइंडिंग और इवेंट बाइंडिंग मर्ज करता है और विशेष रूप से फॉर्म्स और इनपुट फील्ड्स के साथ उपयोगी है.

<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

सर्वर-साइड रेंडरिंग

सर्वर-साइड रेंडरिंग पारंपरिक रेंडरिंग तकनीक है. यहां, सर्वर रिक्वेस्ट पर पूरी HTML फाइल रिटर्न करता है, और ब्राउजर को यूजर को प्रदर्शित करने के आसान काम के साथ छोड़ दिया जाता है. दूसरी ओर, क्लाइंट-साइड रेंडरिंग, एक नंगे ढांचे (bare-bones) वाले HTML डॉक्यूमेंट, स्टाइल शीट, और एक जावास्क्रिप्ट फाइल रिटर्न करता है.

JavaScript ब्राउज़र के उपयोग से बाकी वेबसाइट को रेंडर करने के बाद कि रिक्वेस्ट करता है. React, Angular और अन्य सभी आधुनिक जावास्क्रिप्ट फ्रंट एंड लाइब्रेरी क्लाइंट साइड रेंडरिंग के अच्छे उदाहरण है. यह स्पष्ट है यदि आप अपने Angular/React एप्लीकेशन के सोर्स को देखते हैं.

लेकिन क्लाइंट साइड रेंडरिंग में कमियां है कि यह SEO के लिए बहुत अच्छा काम नहीं करती है और जब आप सोशल मीडिया साइटों पर अपना लिंक शेयर करते हैं तो यह अधूरा HTML कंटेंट रिटर्न करता है. Angular में Angular Universal नामक एक सलूशन होता है जो आपके ऐप को सर्च इंजन के अनुकूल और सोशल मीडिया के अनुकूल बनाने को हैंडल करता है. यह Angular टीम द्वारा बनाई गई एक लाइब्रेरी है, और इसका उपयोग निश्चित रूप से अनुकूल है.

यूनिवर्सल एक प्री-रेंडरिंग तकनीक का उपयोग करता है जहां पूरी वेबसाइट पैलेस अलवर से रेंडर की जाती है, और कुछ सेकंड के बाद, यूजर को क्लाइंट साइड रेंडरिंग में स्विच किया जाता है. क्योंकि यह सब अंडर द हुड होता है, यूजर को कुछ भी अलग नहीं दिखता है.

यदि आप Redux के साथ React का उपयोग कर रहे हैं, तो Redux डॉक्यूमेंटेशन सर्वर रेंडरिंग सेट अप करने के लिए एक अच्छा ट्यूटोरियल है. आप react-router लाइब्रेरी में उपलब्ध BrowserRouter और StaticRouter कॉम्पोनेंट्स का उपयोग कर सरवर से रेंडर करने के लिए React को सेट भी कर सकते हैं. आप इस मीडियम आर्टिकल में इसके बारे में अधिक पढ़ सकते हैं. लेकिन यदि आप परफॉर्मेंस और ऑप्टिमाइजेशन में है, तो आप next.js को आजमा सकते हैं, जो React में SSR के लिए एक लाइब्रेरी है.

सबको रैप अप करना

एक मजबूत UI लाइब्रेरी में एक फुल-blown, फीचर से समृद्ध फ्रेमवर्क की तुलना करना उचित प्रतीत नहीं हो सकता है. हालांकि व एडवांस्ड जावास्क्रिप्ट तकनीके हैं जो इंटरएक्टिव सिंगल पेज एप्लीकेशन बनाने के लिए उपयोग की जाती है. और इस संबंध में, इस आर्टिकल में आपको उनमें से किसी एक को चुनने का निर्णय लेने में मदद मिलनी चाहिए.

Angular बनाम React पर आपके क्या विचार हैं? उन्हें नीचे दिए गए कमैंट्स में शेयर करें.