Ну, на самом деле не очень.
Angular, пожалуй, самый популярный js-фреймворк.
По крайней мере, ни один холивар не обходится без упоминания о нем.
И как мы все уже знаем, готовится к выпуску вторая версия этого фреймворка.
Что, по сути, будет еще одним инструментом, предназначенным для решения других целей.
Думаю, следующая картинка, циркулирующая в Интернете, будет уместной.
Но пока это лишь абстракция.
Текущее состояние нового Angular — это 40-я итерация альфа-версии, которая доступна с 9 октября.
Конечно, второй Angular нельзя использовать на продуктах, но посмотреть, что он готовит, можно.
Собственно, это то, что я хочу показать.
Перерыв несколько гайдов и туториалов по Angular 2.0, могу с уверенностью сказать, что ни одно из них не работает — настолько серьёзны изменения между итерациями.
Даже «пятиминутный старт» на официальном сайте не работает, если код скопирован точно и требует дополнительного внимания.
Но на радость новичкам есть песочница для Angular 2.0, который включает в себя более-менее стабильную итерацию со всеми зависимостями, необходимыми для оптимальной работы.
Это 20-я итерация, которая вышла еще весной и, что неудивительно, не содержит некоторых функций, о которых можно прочитать в каком-нибудь мануале.
Но для демонстрации, я думаю, этого достаточно.
Что изменится в новом Angular по сравнению с текущей версией.
В двух словах это:
- Поддержка теневого DOM;
- Использование изолированных контекстов вместо области видимости (что-то похожее на синтаксис контроллера, но доступное «из коробки»);
- Отказ от концепции описания директив в пользу создания компонентов приложения с помощью классов и аннотаций (теневые возможности DOM).
Все это должно привести к увеличению производительности приложений на этом фреймворке.
Все остальные материалы можно найти в Интернете, которых там огромное количество.
Чтобы сравнить два практически разных фреймворка, я решил написать одно и то же шаблонное приложение.
Это PhoneCat с официального сайта Angular версии 1.x. Переосмыслено для первой версии и создано для второй.
Чтобы упростить задачу, приложение, которое будет написано в первой версии, будет написано в языковом стандарте 2015 года, или es6, поскольку это один из стандартов, который Angular 2.0 будет поддерживать «из коробки».
Это говорит о том, что разработчики заменяют собственные модули Angular 1.x современными стандартными языковыми модулями.
И действительно, вот что произошло.
Начальная загрузка
Или инициализация приложения.
В Angular 2.0 исчезает известная директива ng-app, необходимая для установки точки входа в приложение.
Вместо этого вам необходимо объявить основной компонент (класс App), который, в свою очередь, подтянет остальные компоненты приложения.
После импорта всех зависимостей в основной «модуль» с помощью аннотаций Component и View описываем наш компонент: по какому селектору он будет доступен, и какой шаблон будет подставлен на его место.
Также указываются зависимости всех остальных компонентов, которые будут использоваться в основном шаблоне.
Например, директива For или ваш собственный компонент, например phoneItem. В результате у нас должна получиться некая древовидная иерархия компонентов, косвенно или напрямую зависящих от основного.
И кстати, вопрос организации этой иерархии в виде файловой структуры остаётся открытым, так как не ясно, как организовать приложение.
Или хранить компоненты разных уровней в иерархии приложения на одном уровне файловой системы или создавать бесконечные ветки каталогов? Для своих шаблонных приложений, исходя из их сложности и лучших практик организации проектов, я выбрал следующие структуры.
После всех объявлений мы инициализируем приложение с помощью этой инструкции начальной загрузки (App);
Стоит отметить, что инициализация приложения в Angular версии 1.x мало чем отличается от второй версии, за исключением манипуляций с DOM. 
Внедрение зависимостей (DI)
Или внедрение зависимостей.Одной из главных особенностей Angular версии 1.x является доступный «из коробки» DI, который легко позволяет следовать принципу «разделяй и властвуй» при разработке приложений.
Сложные сущности реального мира при переводе в программный код могут быть определены и разделены на различные модули, представленные объектами, которые служат на благо всей системы.
Такой подход значительно упрощает разработку и понимание концепции самого приложения.
Более того, такие системы очень легко тестировать, поскольку нет необходимости тянуть огромную цепочку зависимостей, а достаточно довольствоваться одним модулем.
Но такая реализация, конечно, имеет свои недостатки.
В первую очередь это связано с минификацией и другими методами оптимизации.
Поскольку этот DI полагается на анализ имен зависимостей, представленных в виде строк, это нарушает приведенную выше минификацию.
Конечно, существует множество обходных путей, но это не чистая концепция данной платформы.
В Angular 2.0 этой проблемы нет. Ни для кого не секрет, что новый Angular поддерживает TypeScript, что практически полностью устраняет проблемы, связанные со слабой типизацией.
Помимо этого, Angular 2.0 имеет свою уникальную особенность в области DI. Это так называемый детский инжектор.
Как уже говорилось, приложения, использующие новый Angular, будут выглядеть как некие иерархические структуры компонентов.
А чтобы облегчить соединение родительских компонентов с дочерними, дочерние компоненты смогут наследовать их зависимости.
Более того, уже существует механизм, с помощью которого настраивается это наследование.
Вы можете выбрать, какие зависимости пойдут дальше, а какие лучше оставить только на этом уровне.
Помимо всего этого, зависимости в новой версии фреймворка также могут загружаться асинхронно.
Однако концепция внедрения зависимостей в новом Angular обширна, и вы также можете найти много информации о ней в Интернете.
Стоит только сказать, что продуманность нового подхода все ближе по качеству приближается к серверному методу организации.
Как, например, в .
NET или Java.
Шаблонизация
Или шаблонизация в приложениях.Если в первом варианте шаблонного фреймворка все понятно (мы пишем шаблон для каждого нашего условного «компонента», и они по очереди подключаются в «розетку», создавая иллюзию множества страниц), то во втором версия это уже полноценное одностраничное приложение.
Один вход – множество компонентов с независимой логикой работы.
Поэтому случаи, когда без директивы в первой версии не обойтись, во второй приходится решать иначе.
Более того, при отсутствии двусторонней привязки данных иногда приходится использовать в качестве костылей нестандартные и креативные решения.
Думаю, нет смысла останавливаться на особенностях синтаксиса объявления переменных или использования циклов для повторения структур.
Все это можно легко найти в Интернете.
И стоит отметить, как уже говорилось, что новый Angular поддерживает теневой DOM. Это открывает новые возможности в области повышения производительности, поскольку на серверной стороне можно собирать готовые страницы, освобождая клиентскую часть от размышлений.
Маршрутизация
Или маршрутизация.На данный момент еще недостаточно данных о том, как в конечном итоге будет выглядеть механизм маршрутизации в новой версии Angular. Но концепция использования компонентов оставляет свой след. Известно, что маршрутизация будет очень похожа на серверный метод организации, который сейчас, например, использует Express для node.js, а именно Router. Можно будет создать несколько конечных точек, они также являются компонентами или отдельными дочерними приложениями, имеющими разные конфигурации маршрутизации.
Теперь нечто подобное можно сделать с помощью ui-router, который имеет в своем арсенале имена ui-view, способные моделировать «компоненты» в терминах новой версии Angular.
Директивы, сервисы, фильтры…
Как уже неоднократно упоминалось в отношении второй версии, компоненты решают все.Только сервисы, мигрировав, стали такими, какими, собственно, и должны были быть в первой версии.
В новом Angular компоненты заботятся практически обо всем.
В результате получается, что новый Angular — это тот же Angular, каким должен был быть существующий.
Но почему первая версия получилась другой? Дело в том, что когда почти пять лет назад была создана версия Angular 1.x, она не предназначалась для разработчиков.
Это был инструмент, ориентированный больше на дизайнеров, которым нужно было быстро и легко создавать статический HTML. Со временем это претерпело изменения.
Разработчики приложили немало усилий для адаптации данного продукта к современным реалиям, постоянно обновляя и совершенствуя его.
Мы делали все, чтобы постоянно оставаться на плаву, поскольку потребности современных веб-приложений постоянно менялись.
Однако всему существуют ограничения, возникающие из-за первоначального непонимания назначения продукта.
Многие из этих ограничений связаны с проблемами исполнения и производительности.
Для решения этих проблем необходимы новые подходы и стратегии.
P.S. Исходники проекта можно найти здесь И здесь .
П.
П.
С.
И конечно хотелось бы конструктивной критики за этот неловкий экскурс во второй Angular. Возможно, я уверен, что в приложениях, которые я еще не нашел, уже используется более современная версия фреймворка.
Я был бы рад помочь с этим.
Теги: #angularjs #JavaScript #angular2 #ES6 #ES6 #JavaScript #angular
-
Самнер, Джеймс Бетчеллер
19 Oct, 24 -
Портативные Нетбуки
19 Oct, 24 -
Перевод Звонка На Внутренний Номер
19 Oct, 24 -
«Прогревающие» Наушники – Мифология
19 Oct, 24 -
Профессиональное Управление Изменениями
19 Oct, 24
