Angular vs React глазами новичка

image-loader.svg

В 2021 году на рынке фронтенд-технологий лидируют React, Angular и, с некоторым отставанием, Vue. В нашей компании для унификации подбора разработчиков сделан упор на React, но ряд крупных систем разрабатываются с помощью современных версий Angular. В связи с конкуренцией этих технологий возникло желание изучить каждую из них и составить собственное мнение о применимости этих инструментов.

Как будем сравнивать?

Для начала попробуем написать на Angular простое приложение. Перед этим предлагаю прочитать базовые моменты из документации и пройти «Тур Героев». Получив основные навыки и взяв «Тур героев» за основу разработаем своё первое приложение на Angular и React, сравнив субьективные преимущества и недостатки.

Описание проекта

В качестве первого приложения отлично подходят проекты вроде «список задач», «блог» или «учёт расходов». Чтобы не повторяться, попробуем создать приложение для выявления автобусного фактора в команде. Bus-фактор — то количество людей в проекте, внезапное исчезновение которых (например, из-за ДТП с автобусом) приведёт к остановке или значительному замедлению различных процессов.

Приложение по аналогии с «Туром героев» будет состоять из главной dashboard-страницы, страницы с управлением навыками и сотрудниками, и с детализированными страницами по каждому навыку и сотруднику. Текущий дизайн приложения далёк от совершенства, основная цель — изучить логику работы с Angular и React при создании приложения.

На главной странице в MVP приложения выводим самых критичных сотрудников, чьи навыки надо забирать всей остальной команде

image-loader.svg

На странице с управлением навыками и сотрудниками мы увидим две колонки, в каждую из которых можно добавить новый навык или указать имя нового сотрудника. Навыком может быть как знание какой-то критически важной технологии, так и глубокое понимание работы того или иного микросервиса или фронт-проекта, эксплуатируемого командой. Для каждого навыка отображается, сколько сотрудников его знают, а для каждого сотрудника — количество освоенных им навыков.

image-loader.svg

Страницы с детализацией навыков и сотрудников похожи: на них можно отредактировать название навыка или имя сотрудника, а также нажатием на элемент из списка пометить, что сотрудник изучил навык (тогда красный восклицательный знак сменится на зелёную галочку).

image-loader.svg

Попробовать проект вживую можно вот тут: https://bus-factor.web.app, ссылка на кодовую базу — https://github.com/domclick/bus_factor

Описание кодовой базы и принятых решений

Чтобы при проектировании приложения не отвлекаться на написание любимого бекенда, был выбран Google Firebase как представитель Backend-as-a-service. Структура данных для проекта выглядит так:

image-loader.svg

Всего две сущности — «Сотрудники» и их «Навыки», и таблица для прикрепления навыка к сотруднику. Для взаимодействия с этими сущностями были написаны мы написали Angular-сервисы, которые реализуют необходимый CRUD для общения с Firebase-бекендом:

Код

import { Injectable } from '@angular/core';
import { FbCreateResponse, Employee } from '../interfaces';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';
import { environment } from '../../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class EmployeesService {
  constructor(private http: HttpClient) { }

  private employeesUrl = 'api/employees';
  private entityName = 'employees';

  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  getEmployees(): Observable {
    return this.http.get(`${environment.fbDbUrl}/${this.entityName}.json`)
      .pipe(
        tap(_ => this.log('fetched employees')),
        map((response: {[key: string]: any}) => {
          return Object.
          keys(response)
            .map(key => ({
              ...response[key],
              id: key,
            }));
        }),
        catchError(this.handleError('getEmployees', []))
      );
  }

  getEmployee(id: string): Observable {
    const url = `${environment.fbDbUrl}/${this.entityName}/${id}.json`;
    return this.http.get(url).pipe(
      tap(_ => this.log(`fetched employee id=${id}`)),
      map((employee: Employee) => {
        return {
          ...employee,
          id
        };
      }),
      catchError(this.handleError(`getEmployee id=${id}`))
    );
  }

  updateEmployee(employee: Employee): Observable {
    return this.http.patch(`${environment.fbDbUrl}/employees/${employee.id}.json`, employee, this.httpOptions).pipe(
      tap(_ => this.log(`updated employee id=${employee.id}`)),
      catchError(this.handleError('updateEmployee'))
    );
  }

  addEmployee(employee: Employee): Observable {
    return this.http.post(`${environment.fbDbUrl}/employees.json`, employee, this.httpOptions).pipe(
      tap((newEmployee: Employee) => this.log(`added employee w/ id=${newEmployee.id}`)),
      map((response: FbCreateResponse) => {
        return {
          ...employee,
          id: response.name,
        };
      }),
      catchError(this.handleError('addEmployee'))
    );
  }

  deleteEmployee(employee: Employee | string): Observable {
    const id = typeof employee === 'string' ? employee : employee.id;
    const url = `${environment.fbDbUrl}/${this.entityName}/${id}.json`;

    return this.http.delete(url, this.httpOptions).pipe(
      tap(_ => this.log(`deleted employee id=${id}`)),
      catchError(this.handleError('deleteEmployee'))
    );
  }

  searchEmployees(term: string): Observable {
    if (!term.trim()) {
      // if not search term, return empty employee array.
      return of([]);
    }
    return this.http.get(`${this.employeesUrl}/?name=${term}`).pipe(
      tap(x => x.length ?
        this.log(`found employees matching "${term}"`) :
        this.log(`no employees matching "${term}"`)),
      catchError(this.handleError('searchEmployees', []))
    );
  }


Описанный выше дизайн было решено реализовать на следующем наборе компонентов:

dashboard

Главная страница довольно простая, уместилась в один компонент. Чтобы одновременно загрузить данные и по сотрудникам, и по их связанным навыкам, используем forkJoin из rxjs. Полученные данные подготавливаем с помощью набора циклов и сортировки (которые наверняка можно было написать оптимальней), и получаем следующий файл:

Код

import { Component, OnInit } from '@angular/core';
import { Employee, EmployeeSkill } from '../shared/interfaces';
import { SkillsService } from '../shared/services/skills.service';
import { forkJoin } from 'rxjs';
import { EmployeeSkillsService } from '../shared/services/employee-skills.service';
import { EmployeesService } from '../shared/services/employee.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.scss' ]
})
export class DashboardComponent implements OnInit {
  employees: Employee[] = [];
  employeeSkills: EmployeeSkill[];
  employeesHasSkills = {};
  employeesDictionary = {};
  bestEmployees = [];
  employeesHasSkill: Employee[] = [];

  constructor(
    private skillsService: SkillsService,
    private employeesService: EmployeesService,
    private employeeSkillsService: EmployeeSkillsService,
  ) { }

  ngOnInit(): void {
    forkJoin([
      this.employeesService.getEmployees(),
      this.employeeSkillsService.getEmployeeSkills()])
      .subscribe(([employees, employeeSkills]) => {
        this.employeeSkills = employeeSkills;
        this.employees = employees;
        if (this.employeeSkills) {
          for (const es of this.employeeSkills) {
            if (this.employeesHasSkills.hasOwnProperty(es.employeeId)) {
              this.employeesHasSkills[es.employeeId] += 1;
            } else {
              this.employeesHasSkills[es.employeeId] = 1;
            }
          }
          this.bestEmployees = Object.entries(this.employeesHasSkills).sort((a, b) => {
            const aCount = a[1];
            const bCount = b[1];
            if (aCount < bCount) {
              return 1;
            } else if (aCount > bCount) {
              return -1;
            } else {
              return 0;
            }
          });
          for (const e of employees) {
            this.employeesDictionary[e.id] = e;
          }
          this.bestEmployees = this.bestEmployees.slice(0, 4);
        }
      });
  }
}

bus-factor-list

Страница для управления навыками и сотрудниками использует компоненты skill-item иemployee-item. Для получения событий из дочерних компонентов и реакции на них используем директивуOutput, обработав полученные данные в handleDeleteSkill и handleDeleteEmployee.

Код

В целом код для сущностей «Сотрудник» и «Навык» в MVP очень похож, но я не стал убирать дублирование кода, потому что в дальнейшем каждый компонент будет кастомизироваться. Typescript-логика для bus-factor-list выглядит так:

import { SkillsService } from '../shared/services/skills.service';
import { Component, OnInit } from '@angular/core';
import { Employee, EmployeeSkill, Skill } from '../shared/interfaces';
import { EmployeesService } from '../shared/services/employee.service';
import { EmployeeSkillsService } from '../shared/services/employee-skills.service';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'app-bus-factor-list',
  templateUrl: './bus-factor-list.component.html',
  styleUrls: ['./bus-factor-list.component.scss']
})
export class BusFactorListComponent implements OnInit {
  skills: Skill[];
  employees: Employee[];
  employeeSkills: EmployeeSkill[];
  employeesHasSkills = {};
  skillTeachedByEmployee = {};

  constructor(
    private skillsService: SkillsService,
    private employeesService: EmployeesService,
    private employeeSkillsService: EmployeeSkillsService,
  ) { }

  ngOnInit() {
    forkJoin([
      this.skillsService.getSkills(),
      this.employeesService.getEmployees(),
      this.employeeSkillsService.getEmployeeSkills()])
      .subscribe(([skills, empoyees, employeeSkills]) => {
        this.skills = skills;
        this.employees = empoyees;
        this.employeeSkills = employeeSkills;
        this.calculateSkillsData();
      });
  }

  calculateSkillsData(): void {
    this.employeesHasSkills = {};
    this.skillTeachedByEmployee = {};

    if (this.employeeSkills) {
      for (const es of this.employeeSkills) {
        if (this.employeesHasSkills.hasOwnProperty(es.employeeId)) {
          this.employeesHasSkills[es.employeeId] += 1;
        } else {
          this.employeesHasSkills[es.employeeId] = 1;
        }

        if (this.skillTeachedByEmployee.hasOwnProperty(es.skillId)) {
          this.skillTeachedByEmployee[es.skillId] += 1;
        } else {
          this.skillTeachedByEmployee[es.skillId] = 1;
        }
      }
    }
  }

  getSkills(): void {
    this.skillsService.getSkills()
      .subscribe(skills => this.skills = skills);
  }

  addSkill(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.skillsService.addSkill({ name } as Skill)
      .subscribe(skill => {
        this.skills.push(skill);
      });
  }

  deleteSkill(skill: Skill): void {
    const skillId = typeof skill === 'string' ? skill : skill.id;

    this.skills = this.skills.filter(h => h !== skill);
    this.skillsService.deleteSkill(skill).subscribe();

    for (const es of this.employeeSkills) {
      if (es.skillId === skillId) {
        this.employeeSkillsService.deleteEmployeeSkill(es.id).subscribe();
      }
    }
    this.skills = this.skills.filter(s => s !== skill);
    this.skillsService.deleteSkill(skill).subscribe();
    this.employeeSkills = this.employeeSkills.filter(es => es.skillId !== skillId);
    this.calculateSkillsData();
  }

  handleDeleteSkill(skill: Skill): void {
    const skillId = typeof skill === 'string' ? skill : skill.id;
    for (const es of this.employeeSkills) {
      if (es.skillId === skillId) {
        this.employeeSkillsService.deleteEmployeeSkill(es.id).subscribe();
      }
    }
    this.skills = this.skills.filter(h => h !== skill);
    this.employeeSkills = this.employeeSkills.filter(es => es.skillId !== skillId);
    this.calculateSkillsData();
  }
  // код для Сотрудников аналогичен, в листинге не приведён
}

skill-item

Для того, чтобы просклонять в зависимости от численности слово «сотрудник», был использован pipe pluralize:

Код

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'pluralize'
})
export class PluralizePipe implements PipeTransform {

 decline(num: number, titles: string[]) {
    const cases = [2, 0, 1, 1, 1, 2];
    return titles[(num % 100 > 4 && num % 100 < 20) ? 2 : cases[(num % 10 < 5) ? num % 10 : 5]];
  }

  transform(value: any, titles: string[]): any {
        return this.decline(+value, titles);
    }
}
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'pluralize'
})
export class PluralizePipe implements PipeTransform {

 decline(num: number, titles: string[]) {
    const cases = [2, 0, 1, 1, 1, 2];
    return titles[(num % 100 > 4 && num % 100 < 20) ? 2 : cases[(num % 10 < 5) ? num % 10 : 5]];
  }

  transform(value: any, titles: string[]): any {
        return this.decline(+value, titles);
    }
}

В компонент skill-item он подключается следующим образом:

{{ skill.name }}
{{ skillCount }} {{ skillCount | pluralize: ['сотрудник', 'сотрудника', 'сотрудников'] }}

Внутри Typescript-логики можно увидеть использование события Output:

Код

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Skill } from '../shared/interfaces';
import { SkillsService } from '../shared/services/skills.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-skill-item',
  templateUrl: './skill-item.component.html',
  styleUrls: ['./skill-item.component.scss']
})
export class SkillItemComponent implements OnInit {
  @Input() skill: Skill;
  @Input() skillCount: number;
  @Output() deleteButtonClick = new EventEmitter();

  constructor(
    private skillsService: SkillsService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) { }

  ngOnInit(): void {
  }

  deleteSkill(skill: Skill): void {
    this.skillsService.deleteSkill(skill).subscribe();
    this.deleteButtonClick.emit(skill);
  }

  onSkillClick(): void {
    this.router.navigate(['skills', this.skill.id],
      {relativeTo: this.activatedRoute.parent});
  }

}

skill-detail и employee-detail

На страницах с управлением навыками каждого сотрудника (employee-detail), а также на странице с редактированием навыка и списком сотрудников, обладающим этим навыком (skill-detail) можно увидеть использование директивы ng-template в else-блоке отображения наличия/отсутствия навыка:

Управление навыком
Сотрудники с этим навыком
{{employee.name}}

header и sidebar

Довольно типовые для большинства проектов блоки, код можно посмотреть в исходниках проекта.

Что дальше?

image-loader.svg

Прототип приложения на Angular написан, базовые навыки получены. Теперь можно приступить к React-проекту либо углубить текущий Angular-прототип, добавив в него авторизацию, админку, профили пользователей, красивые графики и прочую функциональность. Либо поработать с бекендом, заменив Firebase на полноценный микросервис на чём-нибудь современном, например, на fastAPI. Как лучше поступить — пишите в комментариях :)

© Habrahabr.ru