Я стараюсь не подыгрывать повествованию о «войне фреймворков», которое используется в некоторых статьях по программированию. Однако я признаю, что довольно критично отношусь к AngularJS (также известному как Angular 1). Синтаксис и структура часто казались мне неуклюжими, а сообщения об ошибках не доставляли удовольствия! С появлением React я также предпочел архитектуру на основе компонентов, которая стала более популярной. Скалистая миграция без обратной совместимости на Angular 2 меня сбила с толку, и я перестал обращать внимание на Angular.

Недавно я услышал больше разговоров об Angular 5, и мне захотелось попробовать его и сравнить свой опыт с моим опытом работы с Vue и React, поскольку я использую их на очень регулярной основе.

Начиная

Я начал с учебника на веб-сайте Angular, он показался мне очень простым и концептуально похожим на другие фреймворки. TypeScript, пожалуй, самое большое отличие от Angular, и мне это очень понравилось! Я чувствовал себя комфортно при создании проекта после того, как ознакомился с их образцом, тем более что он такой большой! Мне потребовалось несколько часов, чтобы пройти весь этот путь!

Тема супергероя была довольно милой, и мне понравилось, как она включала маршрутизацию, запросы API, интерфейс командной строки и сервисы. Введение в фреймворк было очень тщательным!

Финальный проект

На прошлой неделе я создал API в Go, который отображает ресурсы кодирования, поэтому на этой неделе я хотел создать интерфейс для этого приложения! На данный момент я работаю в значительной степени исключительно в стиле микросервисных приложений: я бы предпочел создать внешний и внутренний интерфейс отдельно. Это приложение не стало исключением — проект этой недели был полностью статичным и размещен на страницах GitHub.

Я начал с компонента для моих ресурсов кодирования, схемы TypeScript для ресурсов, а затем службы для подключения к API. Я сохранил эту архитектуру повсюду. Поскольку это было очень простое приложение, я не чувствовал необходимости иметь подкомпоненты или что-то в этом роде на данный момент.

Служба выглядела так:

@Injectable()
export class ResourcesService {
  private resourcesUrl = 'https://helpful-coding-resources.herokuapp.com/resources';
  constructor (
    private http: HttpClient,
  ) {}
  getResources (): Observable<Resource[]>{
    return this.http.get<Resource[]>(this.resourcesUrl)
               .pipe(
                  tap(resources => console.log('done! 😀'));
               )
  }

Мне показалось интересным, что у Angular есть собственный сервис AJAX, а не вы используете свой любимый. Обычно я использую Axios, и было бы неплохо использовать его, но было бы неплохо включить его в библиотеку.

Примечание: я не привык использовать точки с запятой в JavaScript, но я использовал их для этого проекта, в основном потому, что VSCode автоматически вставлял их в файлы TypeScript, и мне было лень менять настройку!

Затем я работал над самим компонентом, который в итоге получился таким:

export class ResourcesComponent implements OnInit {
  resources: Resource[];
  initialResources: Resource[];
  showSearch: boolean;
  constructor(private resourceService: ResourcesService) { }
  ngOnInit() {
    this.getResources();
  }
  getResources(): void {
    this.resourceService.getResources()
        .subscribe(resources => {
          this.resources = resources;
          this.initialResources = resources;
        });
  }
  toggleSearch(): void {
    this.showSearch = !this.showSearch;
  }
  search(val): void {
    this.resources = this.initialResources.filter(resource => {
      return resource.Tags.some(tag => {
        return tag.toLowerCase().startsWith(val.toLowerCase());
      });
    });
  }
}

Мне также понравился язык шаблонов, очень похожий на Vue. Я также нахожу интересным, как в Angular все еще существует разделение задач для кода HTML и JS, особенно по сравнению с архитектурой React.

<div *ngIf="resources">
  <div class="search-div">
    <i
      class="material-icons"
      (click)="toggleSearch()"
    >
      search
    </i>
    <input
      #searchInput
      [ngClass]="{'shown': showSearch}"
      class="search-box"
      (keyup)="search(searchInput.value)"
      type="text"
      placeholder="Filter Resources"
    />
  </div>
  <div class="list">
    <div class="resource" *ngFor="let resource of resources">
        <a href="{{ resource.Link }}"><h3>{{ resource.Name }} <span class="author">{{ resource.Author }}</span></h3></a>
        <p>{{ resource.Description }}</p>
    </div>
  </div>
</div>
<div *ngIf="!resources">
  <div class="loader"></div>
</div>

У меня было два массива: один с текущими отображаемыми ресурсами, а другой с теми, которые были получены из API. Это позволило мне легко реализовать фильтрацию, которую я реализовал на основе тегов. У меня также есть переключатель, который скрывает панель поиска, когда она не используется. Наконец, у меня есть метод поиска, который фильтрует теги, прикрепленные к ресурсам.

Показать все статьи

Искомые статьи

Я также довольно легко добавил анимацию. Была документация по их реализации непосредственно в Angular, но вместо этого я решил сделать их в CSS. Я больше привык к этому, и он также оптимизирован.

Развертывание

Я нашел пакет npm, который развертывает приложения Angular 5 на страницах GitHub, которые я использую для всех своих статических хостингов. Это было относительно просто, и я легко развернул страницу.

Следующие шаги

Мне понравилось видеть, как далеко продвинулась экосистема Angular со времен AngularJS! Мне нравится архитектура компонентов, и синтаксис, кажется, улучшился. Я думал, что все было хорошо интегрировано, и интерфейс командной строки был великолепен.

При этом я не вижу личной необходимости или использования для Angular 5. Пакет огромен, и мне было намного сложнее найти поддержку по проблемам, чем для React или Vue (вероятно, из-за быстрого управления версиями) . Если бы мне нужна была статическая типизация, я бы, вероятно, использовал поток в React или интегрировал TypeScript в Vue. Я думаю, что Angular пытается стать основой для корпоративных приложений, которые ценят стабильность. Для этого очень важно иметь имя Google, и большой домен, который он охватывает, вероятно, также помогает. Я по-прежнему предпочитаю структурирование кода React и Vue — я предпочитаю повышенную гибкость, которую они предлагают.

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

Полный код
Приложение

Часть моей серии Изучение нового