Web-Developer
0,0
рейтинг
21 октября 2015 в 00:24

Разработка → Angular2 близко

Ну, на самом деле не очень…

Angular, наверно, самый популярный js-фрэймворк. По крайней мере, ни один холивар без его упоминания не обходится. И как мы все уже знаем, готовится к выходу вторая версия данного фрэймворка. Которая, по сути, будет являться другим инструментом, предназначенным для решения других целей. Думаю, к месту будет следующая картинка, гуляющая в сети.

image


Но пока это только абстракция. Текущее состояние нового Angular это 40-я итерация альфа версии, которая доступна уже с 9 октября. Конечно, использовать второй Angular на продукции никак нельзя, но посмотреть, что он готовит, можно. Собственно, что я и хочу показать.

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

Но к радости новичков существует песочница для Angular 2.0, включающая в себя более-менее стабильную итерацию со всеми зависимостями, которые необходимы для оптимальной работы. Это 20-я итерация, которая вышла еще далекой весной и как неудивительно не содержит некоторых фишек, о которых можно прочитать в каком-нибудь мануале. Но для демонстрации, думаю, этого хватит.
Что же изменится в новом Angular по сравнению с текущей версией. Если в двух словах то это:

  1. Поддержка теневого DOM;
  2. Использование изолированных контекстов вместо scope (нечто похожее на синтаксис controllerAs, но доступное «из коробки»);
  3. Отказ от концепции описания директив в пользу создания компонентов для приложения с использованием классов и аннотаций (фишки теневого DOM).


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

Для того чтобы сравнить два практически разных фрэймворка, я решил написать одно и тоже шаблонное приложение. Это PhoneCat с официального сайта Angular версии 1.х. Переосмысление для первой версии и создание на второй.
Чтобы облегчить себе задачу, приложение, которое будет написано на первой версии, будет написано в стандарте языка 2015 года или es6, так как это один из стандартов, которые Angular 2.0 будет поддерживать «из коробки». Это говорит о том, что разработчики заменяют собственные модули Angular версии 1.х на модули языка современного стандарта.

И, собственно, вот что получилось…

Bootstrapping


Или инициализация приложения.

image


В Angular 2.0 пропадает всем известная директива ng-app, которая необходима для установления точки входа в приложение. Вместо этого необходимо объявить главный компонент (class App), который в свою очередь будет подтягивать остальные компоненты приложения.

После импорта всех зависимостей в главный «модуль» при помощи аннотаций Component и View мы описываем наш компонент: по какому селектору он будет доступен, и какой шаблон будет подставлен на его место. Тут же указываются зависимости всех остальных компонентов, которые будут применяться на шаблоне основного. Например, директива For или свой компонент, такой как phoneItem. В итоге, мы должны получить некоторую древовидную иерархию компонентов, которые косвенно или прямо зависят от главного. И кстати, вопрос организации данной иерархии в виде файловой структуры остается открытым, так как непонятно, как организовывать приложение. Или хранить компоненты разного уровня в иерархии приложения на одном уровне файловой системы или плодить бесконечные ветви каталогов?

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

image


После всех объявлений производим инициализацию приложения данной инструкцией bootstrap(App);
Стоит заметить, что инициализация приложения на Angular версии 1.х не многим отличается от второй версии, за исключением манипуляций с DOM.

image


Dependency Injection (DI)


Или внедрение зависимостей.

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

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

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

image


Помимо этого, Angular 2.0 обладает своей уникальной особенностью в области DI. Это так называемый child injector.
Как уже говорилось, приложения на новом Angular будут выглядеть как некоторые иерархичные структуры компонентов. И что бы облегчить связь родительских компонентов с дочерними, дочерние компоненты смогут наследовать их зависимости. Причем уже сейчас есть механизм, при помощи которого происходит настройка данного наследования. Можно выбирать, какие зависимости пойдут дальше, а какие лучше оставить только на этом уровне.
Кроме всего этого, зависимости в новой версии фрэймворка также могут подгружаться асинхронно.

Впрочем, концепция внедрения зависимостей для нового Angular обширна, и о ней также можно найти много информации в сети. Стоит только сказать, что продуманность нового подхода все ближе и ближе по качеству к серверному способу организации. Как, например, в .NET или Java.

Templating


Или шаблонизация в приложениях.

Если в первой версии фрэймворка с шаблонами все ясно (мы пишем шаблон для каждого нашего условного «компонента», и они по очереди подставляются в «розетку», создавая иллюзию множества страниц), то во второй версии — это уже полноценное одностраничное приложение. Один вход – множество компонентов с независимой логикой работы. Поэтому случаи, где без директивы не обойдешься в первой версии, приходится решать по-другому во второй. Тем более в условиях отсутствия двусторонней привязки данных иногда приходится использовать костыли нестандартные и креативные решения.

image


На особенностях синтаксиса объявления переменных или использования циклов для повторяющихся конструкций, думаю, нет смысла останавливается. Это все легко ищется в сети.

И стоит еще сказать, как уже упоминалось, что новый Angular поддерживает теневой DOM. Это открывает новые возможности в области увеличения производительности, так как можно собирать готовые страницы на серверной части, освобождая клиентскую от размышлений.

Routing


Или маршрутизация.

Сейчас данных о том, как будет выглядеть в конечном итоге механизм маршрутизации, в новой версии Angular еще маловато. Но концепция использования компонентов оставляет свой отпечаток. Известно, что маршрутизация будет сильно похожа на серверный способ организации, который сейчас, например, использует Express для node.js, a именно Router.

Возможным будет создание нескольких конечных точек, они же компоненты или отдельные дочерние приложения, имеющие разные конфигурации маршрутизации. Сейчас нечто подобное можно сделать при помощи ui-router, который в своем арсенале имеет именованные ui-view, способные сымитировать «компоненты» в терминах новой версии Angular.

Directives, Services, Filters…


Как уже много раз упоминалось для второй версии, компоненты – это все. Только лишь сервисы, перекочевав, стали тем, чем, по сути, они должны были быть в первой версии. В новом Angular компоненты берут на себя практически все.
В итоге получается, что новый Angular – это тот Angular, которым должен был быть существующий. Но почему же первая версия получилась другой?

Дело в том, что, когда Angular версии 1.х был создан, почти пять лет назад, он не был предназначен для разработчиков. Это был инструмент, предназначенный больше для проектировщиков, которые должны были просто и быстро строить статический HTML. В течение долгого времени это претерпевало изменения. Разработчики прикладывали много усилий, чтобы адаптировать этот продукт к современным реалиям, постоянно обновляя его и улучшая. Делали все, чтобы постоянно оставаться «на плаву», поскольку потребности современных веб-приложений постоянно изменялись. Однако всему есть ограничения, которые существуют из-за начального непонимания назначения продукта. Много этих пределов касаются проблем исполнения и производительности. Чтобы решить эти проблемы, необходимы новые подходы и стратегии.

P.S. Исходники проектов можно найти тут и тут.

P.P.S. Ну и конечно, хотелось бы конструктивной критики за этот неловкий экскурс во второй Angular. Возможно Уверен, уже используется более современная версия фрэймворка, в приложениях, которые я еще не нашел. Был бы рад помощи в этом.
@Werawoolf
карма
13,0
рейтинг 0,0
Web-Developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (10)

  • +2
    Офигеть… полгода назад вроде прогнозировались гораздо меньшие изменения %)
  • +31
    К сожалению, Вы не очень удачно выбрали время для публикации статьи. В том смысле, что Вы рассматриваете немного устаревшую версию, а именно в эти дни (вчера и сегодня) на AngularConnect представляют гораздо более актуальное состояние.

    Самую актуальную информацию в данный момент проще всего получить в твиттере twitter.com/AngularConnect — там выкладывают ссылки на презентации, выступления и т.п.

    Вот в частности keynote: g.co/ng/ac-keynote

    По самому содержанию:
    • для двухстороннего связывания уже есть синтаксический сахар [()]
    • новый Angular не просто поддерживает TypeScript — он на нем написан, соответственно и свое приложение на Typescript писать очень удобно
    • не очень понял, как теневой дом помогает собирать готовые страницы на серверной части. Кому интересны изоморфные приложения на Angular, тому сюда github.com/angular/universal
    • про роутинг: docs.google.com/presentation/d/1bGyuMqYWYXPScnldAZuxqgnCdtgvXE54HhKds8IIPyI
    • директивы есть, куда же без них
    • фильтры тоже, просто называются теперь Pipe


    Лучший способ получать последнюю информацию: gitter.im/angular/angular. Там же постоянно выкладывают ссылки на репозитории, с которых лучше начать, посмотреть, например:
    github.com/pkozlowski-opensource/ng2-play
    github.com/mgechev/angular2-seed
    У John Papa тоже чего-то есть: github.com/johnpapa (в принципе вроде его Tour of Heroes и выкладывается на angular.io)
    • 0
      Спасибо за комментарий.
    • 0
      фильтры тоже, просто называются теперь Pipe
      Фильтры в Angular 2 теперь асинхронные или так же как и в 1 версии?
      • +1
        Вы про stateful/stateless (pure: boolean в терминологии Angular2)? Если да, то и в первой то версии они могли быть stateful, просто не рекомендовалось.

        Или что-то типа одноразоваго stateful?
        • 0
          Нет, я про нормальную асинхронность (пример {{userId | loadUserNameById}} ), глянул в исходники, видимо фильтры в Angular 2 остались такими же синхронными как и в 1 версии (stateful), т.е. на каждую digest-итерацию будет вызываться фильтр, а на каждое входящее событие в фильтре нужно, опять же, вызывать digest.
          «Костыль» конечно же, но свою функцию выполняет.
  • +2
    Читаю про все эти фишки нового Angular 2, и диву даюсь:
    • у нас асинхронная подгрузка компонентов!
    • а ещё ES6!
    • ну и конечно же всё это пойдёт без готовых библиотек, разбирайтесь сами, как хотите!

    Всё это, кроме ES6, уже давным давно было в Dojo Framework, только с dijit и dojox. Правда, широкого распространения он так и не получил, видимо, не было такого мощного пиара.
    Не следует ждать от Angular 2 решения всех наших проблем. Пожалуй, их только прибавится, и главной будет отсутствие готовых библиотек и модулей под него.
  • 0
    А есть адекватный пример вместе с RxNext и AsyncPipe?
    • 0
      В каком смысле «вместе»? AsyncPipe — вроде и есть пример non-pure Pipe. Т.е. он сам по себе пример.
    • 0
      А что касается Rx, то сейчас они и решают, в каком объеме его надо включить в ядро: github.com/angular/angular/issues/4390
      Т.е. в данный момент может придется подключить отдельно, хотя зависит от того, что надо, можно попробовать просто импортировать из
      "@reactivex/rxjs/dist/cjs/Observable"

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.