Angular 2: Успеху быть!

  • 2 года назад

Как и в любой революции, было дано обещание порвать с прошлым и построить новое светлое будущее. Но проблема была в том, что за окном только начинался 2014 год, и к такому повороту тогда еще никто не был готов: до стандартизации ES6 оставался год, AtScript считался экзотикой, а двустороннее связывание данных было необходимо для приложений, в которых данные обрабатывались через формы. Но, что самое главное, для такого популярного и широко используемого фреймворка была просто необходима обратная совместимость.

Во второй половине 2014 года стали популярными и другие фреймворки – например, React и Ember – причем отчасти это произошло из-за опасений за будущее Angular 2 (а точнее, за отсутствие такого будущего). Но команда, работавшая над Angular, тем временем не сидела на месте.

Почему Angular 2 ждет успех?

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

Вы когда-нибудь задумывались над тем, почему TypeScript стал популярен даже несмотря на то, что его выпустила Microsoft? Потому что над ним работал Андерс Хейлсберг (Anders Hejlsberg), разработчик языка C#. Но чем объясняет успех C#? Тем, что Андерс также является автором Turbo Pascal. Ну а почему Turbo Pascal оказался так хорош? Ну, думаю хватит, все и так понятно. Да-да, все так предельно просто. Команда Angular 1 работает и над Angular 2, а это значит, что они вложат в проект все свои знания, приобретенные ранее в нелегком бою. И своих прошлых ошибок они не повторят.

Более того, команда разработчиков открыта для диалога с сообществом. Во-первых, они еженедельно публикуют все, над чем работают на данный момент. Во-вторых, они вместе с сообществом работают над интеграцией с двумя очень популярными фреймворками для разработки мобильных приложений – Ionic (для гибридных приложений) и NativeScript (для «родных» приложений).

Почему будущее за Angular 2?

Позвольте мне привести список тех вещей, которые, на мой взгляд, удались в Angular 2.

ПРОСТОЙ, НО НЕ УПРОЩЕННЫЙ

Фреймворк Angular 2 превосходит по простоте своего предшественника Angular 1. Благодаря своей менее нагроможденной теоретической базе, Angular 2 проще для понимания. Но его простота не означает, что он менее эффективен – даже наоборот.

Например, в Angular 2 все содержится в Component, и Controller здесь не нужен, потому что Component функционирует как единое целое. Также не нужен $scope и ViewModels. Даже View можно вставить в Component при помощи декораторов и многострочных цепочек.

Вот описание простого Component в Angular 2 (написано на TypeScript):

@Component({
  selector: 'messenger'
})

@View({
  template: '<div>Hello, {{message}}</div>'
})

class Messenger {
  message: string;

  constructor() {
    this.message = 'World';
  }
}

Декоратор @Component описывает селектор, который подбирает тэг мессенджера, подобный ng-controller в Angular 1. Вид компонента, описанный в @View, будет связан и вставлен в элементы, выбранные селектором. Связующий контекст, используемый при создании вида, это сам Compoment, поэтому его свойства доступны в шаблоне Mustache, описанном в @View.

ПРИОРИТЕТ ДЛЯ МОБИЛЬНЫХ ПРИЛОЖЕНИЙ

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

К слову о производительности. Недавно команда Meteor проводила соревнование по производительности среди фронтенд фреймворков. Победил Angular 2, оставив позади React.

ЛУЧШИЕ КОНСТРУКТИВНЫЕ БЛОКИ

В Angular 2 главные конструктивные блоки просто лучше.

МАРШРУТИЗАТОР

Возьмем, например, Маршрутизатор. Он декларативный и намного более гибкий. Вот пример конфигурации маршрутизатора:

@Component({selector: 'inbox-app'})
@View({templateUrl: "inbox-app.html", directives: [RouterOutlet, RouterLink]})
@RouteConfig([
  new Route({path: '/', component: InboxCmp, as: 'Inbox'}),
  new Route({path: '/drafts', component: DraftsCmp, as: 'Drafts'}),
  new Route({path: '/detail/:id', component: InboxDetailCmp, as: 'DetailPage'})
])
export class InboxApp {
}

В этой конфигурации нет ничего лишнего, и каждый маршрут ведет к Component. Если вы хотите подробнее изучить маршрутизацию Angular 2.0, я бы порекомендовал вам эту сессию с недавней конференции AngularConnect.

ВНЕДРЕНИЕ ЗАВИСИМОСТИ

Еще один усовершенствованный конструктивный блок это Внедрение зависимости. Давайте посмотрим на этот пример:

@Injectable()
export class TodoService {
}

@Component({selector: 'todo-app'})
@View({templateUrl: 'todo.html'})
class TodoApp {
  constructor(public todoService: TodoService) {}
}

Использование аннотации типа из TypeScript устраняет необходимость в «волшебных» цепочках. Добавьте к этому еще декларативный характер декораторов – мы получаем отличный результат.

Еще одна отличная характеристика системы Внедрения зависимости это то, что она иерархична. Это особенно важно в тех ситуациях, когда у нас имеются сложные Component-деревья и мы хотим четко разделить компоненты.

СВЯЗЫВАНИЕ ДАННЫХ

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

Наиболее заметное улучшение в области связывания данных заключается в том, что граф детекторов изменений в Angular 1 преобразована в дерево. Это упрощает определение того, когда следует внести какое-либо изменение. А это, в свою очередь, улучшает эффективность. В комбинации с объектами Observable или Immutable вы можете продолжить оптимизацию стратегии обнаружения изменений.

Более того, прислушавшись к мнению сообщества, команда Angular реализовала двустороннее связывание данных при помощи хорошо известной директивы ng-model, которую можно использовать в формах Angular 2.

ШАБЛОНЫ

Также были усовершенствованы и шаблоны. Конечно, для непрофессионального взгляда это улучшение может показаться, скорее, «поверхностной шлифовкой» (при помощи [], (), [()], # и *), но на самом деле вся система шаблонов была полностью переделана, и теперь она поддерживает веб-компоненты и даже родные элементы. Это значит, что такие популярные фреймворки, как, например, NativeScript, могут использовать свой собственный визуализатор. И более того, Angular теперь может визуализировать межплатформенного родного пользовательского интерфейса для iOS и Android. Отделение потоковой визуализации (rendering pipeline) от других частей фреймворков позволяет реализовать другие интересные сценарии, например, рендеринг на стороне сервера.

TYPESCRIPT

Я большой поклонник TypeScript, и на мой взгляд, с его помощью можно сконструировать любое сложное и большое приложение на JavaScript с командой разработчиков. TypeScript это объект первого класса в системе Angular 2. Но как он там оказался?

В этом году прошла встреча команд TypeScript и Angular, на которой они обсуждали возможные варианты использования TypeScript в качестве замены AtScript, в результате чего приоритеты команды TypeScript изменились в лучшую сторону. Были реализованы декораторы, а также целый ряд других характеристик ES6.

Команда Angular не осталась в стороне и осуществила реорганизацию большой части кодовой базы в TypeScript. В результате мы получили улучшенный TypeScript и улучшенный Angular.

Статус объекта первого класса означает не только то, что исходник фреймворка написан на TypeScript, но и то, что документация и руководства содержат примеры на TypeScript. Более того, пакет npm в Angular имеет декларационные файлы на TypeScript (.d.ts). Так что если ваш редактор поддерживает TypeScript, это облегчит процесс подготовки фреймворка к запуску.

JavaScript (ES5) также является объектом первого класса в Angular 2, что проявляется в форме удобного и быстрого API для описаний компонентов.

По-прежнему стараетесь избегать TypeScript? Очень зря. Если даже Бёрку Холланду нравится TypeScript, то вам он точно придется по душе.

МИГРАЦИЯ ИЗ ANGULAR 1

Когда был объявлен релиз Angular 2, четкого маршрута миграции из Angular 1 еще не было. Это сразу же стало объектом критики со стороны сообщества, и команда Angular прислушалась к их мнению. Так был создан ngUpgrade.

ngUpgrade представляет собой совокупность лучших методов, руководств и стратегий, которые помогут вам сделать свои приложения в Angular 1.x совместимыми с версией 2.0. Тем временем сообщество тоже не сидело сложа руки и представило ng-forward – конкретную реализацию стратегии по «прокачиванию» приложений.

Если вас заинтересовали эти инструменты и руководства, послушайте эту беседу.

Что дальше?

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

Комментарии

2