Angular — это паттерн проектирования

Со стремительным приближением Angular 2.0, параллельно существующим с большим количеством других frontend-фреймворков, в воздухе витает множество волнений по поводу предстоящих затрат (как временных, так и денежных), связанных с переводом своих проектов на новую версию. Как вы думаете, есть ли у разработчиков желание изучить еще один новый фреймворк?

Давайте разбираться. Прошу под кат.


Несколько команд разработчиков провели достаточное количество времени с Angular 2.0, примерно столько же, сколько и наша (Прим. пер.: Ionic team). Мы вернулись к проектированию Ionic 2, когда Angular 2 был еще в статусе «пре-альфа», в надежде получить еще более быстрый, более совместимый со стандартами, и перспективный мобильный веб-фреймворк, — еще лучше, чем Angular 1.

Самое главное, что мы поняли, работая над Ionic 2 — это то, как похожи Angular 2 и Angular 1 на высоком уровне, и как понимание этого поможет разработчикам гораздо легче перейти с Angular 1 на Angular 2. Во многих отношениях, Angular 2, на самом деле, не является новым фреймворком как таковым. Это лишь новый стандарт Angular, с которым мы знакомы и который так полюбили.

Один фреймворк, множество стандартов

Вместе с Angular 1, Angular 2, и Angular Dart, Angular прошел путь от фрейворка, основанного на одном стандарте ES5, до концептуального фреймворка, или паттерна проектирования с множеством стандартов.

Можно спроектировать пользовательский интерфейс и frontend-приложение в стиле Angular, базируясь, по крайней мере, на трех основных языках: ES5, ES6/TypeScript и Dart, хотя ES6/TypeScript становится де-факто стандартом Angular.

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

Пример

Чтобы вывести свойство из нашего скоупа (scope) или контекста, мы можем сделать вот так:

Angular 1:

<span>Сегодня {{todaysDate | date}}</span>

Angular Dart:

<span>Сегодня {{todaysDate | date}}</span>

Angular 2:

<span>Сегодня {{todaysDate | date}}</span>

Заметили что-нибудь? Они абсолютно одинаковые! Давайте попробуем более сложный пример. Представим, что у нас есть список песен:

В Angular 1 и Angular Dart это будет выглядеть так:

<ion-list>
  <ion-item ng-repeat="song in songs" ng-click="openSong(song)">
    {{song.artist}} - {{song.title}}
    <span ng-if="song.isFavorite"><i class="icon ion-heart"></i></span>
  </ion-item>
</ion-list>

А вот так в Angular 2 (вместе с Ionic 2):

<ion-list>
  <ion-item *ngFor="#song of songs" (click)="openSong(song)">
    {{song.artist}} - {{song.title}}
    <span *ngIf="song.isFavorite"><ion-icon name="heart"></ion-icon></span>
  </ion-item>
</ion-list>

Ну, что ж, здесь мы уже видим больше различий. Но различия эти четко определены: ng-repeat теперь превратился в ngFor, со звездочкой *, которая используется для обозначения данного элемента в качестве шаблона (которй будет повторен N-раз).

В циклах теперь используется "of" вместо "in", чтобы получить значения списка. Еще ближе к стандарту ES6 и TypeScript. Начиная с Angular 2, мы больше не используем kebab-casing (Прим. пер.: это когда синткасис написания у нас «вот-такой-вот») для написания атрибутов (то есть: ng-repeat, ng-if, ng-show и т.д.). Разработчики решили перейти к более четкому наименованию. (более подробно об этом (eng))

Если мы применяем стандарт Angular 1 к синтаксическому преобразованию Angular 2, то мы имеем код, который, концептуально, идентичен Angular 1 и Angular 2. Если предположить, что мы уже знакомы с Angular, то мы можем взглянуть на этот код и сразу понять, что он делает.

Пример компонента

Большинство пользователей Angular найдут шаблоны прямо в самом Angular 2. Гораздо большие изменения приходят с новой моделью компонента, которая заменяет установку директивы/контроллера из Angular 1.

В Angular 1:

.controller('HomeCtrl', function($scope) {
  // контроллер конкретной страницы
})

.directive('profileImage', [function() {
  // ... а здесь директива
}])

В Angular 2, учитывая, что все — это компонент, мы можем применить простое преобразование: включить контроллеры в компоненты, а также включить в них и директивы.

Так как Angular 2 живет и дышит стандартами TypeScript и ES6, мы определяем «компоненты» как классы, которые могут содержать внутри себя шаблоны. Аналогом примера выше (Angular 1), код в Angular 2 может выглядеть следующим образом:

import {Component} from 'angular2/core';

@Component({
    selector: 'home',
    template: '<div>главная страница</div>'
})
export class HomeComponent { }

И директива из Angular 1 как компонент Angular 2:

@Component({
    selector: 'profile-image',
    template: '<div>profile image</div>'
})
export class ProfileImageComponent { }

А как же скоуп(scope)?

В Angular 1 скоуп был на самом деле только «контекстом», доступным в конкретной области пользовательского интерфейса. К примеру, наша директива profileImage ссылается на текущего пользователя как часть своего скоупа, или контекста, и рендерит картинку профиля пользователя.

Данная концепция в точности такая же, как в Angular 2, за исключением того, что мы используем естественную концепцию данных экземпляра класса из ES6! Angular прошел путь от обычной контекстной системы до основанного на стандартах подхода. Это благодаря тому, что JavaScript эволюционировал, сделав подобное возможным (с небольшой декоративной магией TypeScript, что делает код еще чище):

export class ProfileImageComponent {
  @Input() user;

  clickFace() {
    // теперь мы можем использовать запись this.user, так же, как и $scope.user мы использовали в Angular 1
  }
}

В Angular 2 нам больше нет необходимости пользоваться привычной $scope системой, чтобы обрабатывать данные для компонента. Теперь мы получаем их свободно*, благодаря ES6 и TypeScript!

*сильно упрощенное понятие, конечно, но для конечного пользователя это действительно свобода действий!

Снижение порога вхождения

Наши ветераны Angular 1 имеют тенденцию забывать, как сложно было разобраться с Angular 1. Мне пришлось взять месячный перерыв от большого количества своей остальной работы, чтобы только понять, что это за непонятные термины, как: транклюзии, директивы, связывания, скоупы, и что они на самом деле означают.

Разработчику, который является новичком в Angular и который начинает уже с Angular 2, не понадобится много специальных знаний для его изучения. Он может пропустить все эти эзотерические термины из Angular 1, и сразу с места в карьер прыгнуть в код спецификации ES6/TypeScript.

Плюс, с отсутствием привычной модульной системы, код Angular 2 легко уживается с остальной частью экосистемы ES6, делая его смертельно простым в установке и импорте третьей стороной (Прим. пер: тут, я полагаю, имеется в виду поддержка кода кем-либо на стороне, сторонними разработчиками).

Есть ли жизнь после Angular 1?

После того, как разработчики совершат психологический переход от синтаксиса Angular 1 к синтаксису Angular 2, мы думаем, они обнаружат, что, оказывается, они уже знают Angular 2. Обе концепции практически идентичны, и сходства не ограничиваются лишь шаблонами и компонентами; как только пользователи копнут глубже в пайпы, депенденси инджекшен, сервисы, они обнаружат тонну подобных сходств.

Поскольку существует так много совпадений, мы попытались сделать Ionic 2 похожим на Ionic 1, так как в его основе лежит Angular. Но теперь только новая, еще лучшая реализация! До сих пор переход протекает очень хорошо, и я оптимистичен в плане того, что Angular 2 становится хитом, именно сейчас, в тот момент, когда пыль оседает и API Angular 2 становится действительно стабильным.

Angular 2 — это определенно лучший Angular!