React vs Angular - miwanek/Omami GitHub Wiki

Wybór odpowiedniego narzędzia jest pierwszym krokiem w tworzeniu frontendu aplikacji webowej. Każdy programista wie jak ważny jest wybór odpowiedniego frameworku czy biblioteki. Ze względu na to, że frameworki narzucają określony szkielet do budowy aplikacji, istotnym jest jasne rozumienie całej struktury projektu jeszcze przed początkiem budowania aplikacji.

Framework jest szkieletem do budowy aplikacji. Definiuje on strukturę aplikacji oraz ogólny mechanizm jej działania, a także dostarcza zestaw komponentów i bibliotek ogólnego przeznaczenia do wykonywania określonych zadań. Programista tworzy aplikację, rozbudowując i dostosowując poszczególne komponenty do wymagań realizowanego projektu, tworząc w ten sposób gotową aplikację.

W naszej aplikacji dla tworzenia frontendu korzystaliśmy z ReactJS - biblioteki, która służy do tworzenia interfejsów użytkownika z obsługą JavaScript. React to lekka, niewielka biblioteka, często porównywana do warstwy V (Widok) w modelu MVC. Komponenty React umożliwiają prezentowanie danych – renderowanie danego stanu.

React przede wszystkim pomaga budować szybkie interfejsy użytkownika, które mogą obsługiwać złożone interakcje. Główną cechą, wyróżniającą React od innych frameworków jest to, że on posiada wirtualny DOM, a to oznacza, że po zmianie pojedynczego komponentu potrafi zaktualizować tylko zmiany bez potrzeby aktualizacji całej strony. Takie podejście pozwala na szybsze renderowanie strony.

Zaletą Reacta jest niski próg wejścia dla użytkowników, on jest dosyć łatwy do zrozumienia, i jeżeli ktoś wcześniej nie miał czynności z programowaniem, to nauczanie się Reactu nie powinno stwarzać wielkich problemów. React nie zakłada korzystania z wzorców projektowych, takich jak MVC, co dla niedoświadczonych programistów też jest dużym plusem. Z drugiej strony brak jasnego podziału na warstwy może przeszkadzać użytkownikom, którzy mieli doświadczenie w programowaniu w innych językach, ponieważ podejście Reacta może wyglądać na chaotyczne i mało przejrzyste.

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (!this.state.text.length) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(
  <TodoApp />,
  document.getElementById('todos-example')
);

Angular jest uważany za łatwiejszy do wejścia dla programistów, mającym doświadczenie z językami obiektowymi, ponieważ głównym wykorzystywanym językiem jest TypeScript. TypeScript – wolny i otwartoźródłowy język programowania stworzony przez firmę Microsoft jako nadzbiór języka JavaScript. Umożliwia on opcjonalne statyczne typowanie oraz programowanie zorientowane obiektowo oparte na klasach. TypeScript jest nadzbiorem JavaScript, a więc potencjalnie każdy program napisany w języku JavaScript jest poprawnym programem TypeScript. Aplikacje napisane w TypeScript kompilują się bezpośrednio do języka JavaScript. W odróżnieniu od Reacta Angular zakłada jasny podział na MVC, plik html jest oddzielony od plików z wykonywanym kodem.

W porównaniu do Reacta Angular ma jedną dużą wadę - wydajność. Podczas uruchomienia aplikacji koniecznym jest ładowanie wszystkich skryptów, co może być dość uciążliwym faktem.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="todoCtrl">

<h2>My Todo List</h2>

<form ng-submit="todoAdd()">
    <input type="text" ng-model="todoInput" size="50" placeholder="Add New">
    <input type="submit" value="Add New">
</form>

<br>

<div ng-repeat="x in todoList">
    <input type="checkbox" ng-model="x.done"> <span ng-bind="x.todoText"></span>
</div>

<p><button ng-click="remove()">Remove marked</button></p>

<script>
var app = angular.module('myApp', []); 
app.controller('todoCtrl', function($scope) {
    $scope.todoList = [{todoText:'Clean House', done:false}];

    $scope.todoAdd = function() {
        $scope.todoList.push({todoText:$scope.todoInput, done:false});
        $scope.todoInput = "";
    };

    $scope.remove = function() {
        var oldList = $scope.todoList;
        $scope.todoList = [];
        angular.forEach(oldList, function(x) {
            if (!x.done) $scope.todoList.push(x);
        });
    };
});
</script>

</body>

To zależy :) Wybór odpowiedniego narzędzia zależy od specyfiki projektu i osobistych preferencji programisty. Jak widzimy, każdy framework ma swoje wady i zalety, ale odpowiednie wykorzystanie technologii pomoże zbudować aplikacje, spełniającą wszystkie wymagania projektowe.