Работа с Angular 2

Ответ 1

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

TypeScript посвящен статическому анализу для лучшей безопасности типов. Он также имеет довольно хороший набор инструментов редактора (например, WebStorm). Вам это не нужно для производительности. Это больше инструмент, помогающий вам автору. Лично я люблю это.

Я начал переносить некоторые из моих существующих библиотек с открытым исходным кодом на typescript, потому что с ним гораздо проще работать. Например, перед и после просмотрите Task Runner .

Функции ES6. Поскольку angular 2 будет использовать множество функций es6, это означало, что нам придется ждать, пока все браузеры будут поддерживать, по крайней мере, те функции, которые нужны angular 2, прежде чем мы начнем с него в наших производственных приложениях.

Многие функции ES6 могут быть заполнены. Проверьте https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills.

Веб-компоненты. Поскольку angular 2 предоставляет возможность создавать веб-компоненты, и я наткнулся на несколько блогов на создание собственного (с использованием полимера), как тяжело будет для нашей команды создавать их? Или лучше, если мы просто придерживаемся старинной директивы создания?

Веб-компоненты также полиполняемы (см. здесь). В этом случае я предлагаю вам следовать рекомендациям, рекомендованным командой angular для создания ваших компонентов. Также, возможно, следите за тем, что выходит из команды Polymer в этом отношении.

Производительность. Я видел это видео из angular + React, которое обеспечивает хорошее сравнение angular vs angular + response vs angular 2. Но я не уверен, что тот случай, когда angular 2 действительно быстро или полностью, или если мы можем продолжить создание приложения angular +, чтобы избежать ожидания angular 2 для стабилизации или для поддержки браузеров для функций es6, которые использует angular.

Это звучит для меня как преждевременная оптимизация. Сначала создайте (plain) angular и оптимизируйте, только если вы заметили проблемы с производительностью в определенных частях вашего приложения.

Ответ 2

• TypeScript! Действительно ли нужно использовать typescript, чтобы получить лучшую производительность вместо того, чтобы писать простой простой JS-код, который мы делали все это время. Мы столкнулись с несколькими комментариями, в которых говорится, что typescript помогает в лучшей производительности.

TypeScript требуется не для использования Angular2.

В большинстве примеров вы будете использовать JavaScript:

• classes (ES6)
• decorators (ES7/ Typescript)
• types - (Typescript)

Кроме того, браузеры не поддерживают эти функции, поэтому весь источник Angular2 должен быть передан на ES5.

Итак, в ES5:

• classes можно подделать, расширив прототипы
• decorators можно подделать с использованием функций-оберток
• types на самом деле не обязательно начинать, они добавляют синтетический сахар для безопасности

Было бы нереалистично ожидать, что существующие пользователи наследуют риск использования экспериментальных/передовых стандартов. Таким образом, документация охватывает создание приложений Angular2 в ES5, ES6/7 и Typescript.

Кроме того: я лично предпочитаю не использовать Typescript. Traceur может быть настроен на поддержку экспериментальных расширений для @decorators, а system.js предоставляет polyfill для предлагаемого es6-moduler-loader.

Здесь смотрите Angular2 Документация.

2. Функции ES6. Поскольку angular 2 будет использовать множество функций es6, это означало, что нам придется ждать, пока все браузеры будут поддерживать, по крайней мере, те функции, которые нужны angular 2, прежде чем мы начнем с него в наших производственных приложениях.

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

Одной из интересных особенностей es6-module-loader является способность динамически загружать зависимости на лету. К тому времени, когда Angular2 выходит из бета-версии, его следует легко включить в ваше приложение в качестве стратегии обнаружения функций.

3. Веб-компоненты. Поскольку angular 2 предоставляет возможность создавать веб-компоненты, и я наткнулся на несколько блогов на создание собственного (с использованием полимера), как тяжело будет для нашей команды создавать их? Или лучше, если мы просто придерживаемся идеи создания старых директив?

Не сложно, хотя вам может понадобиться использовать Angular2 -специальные веб-компоненты. Причина в том, что Angular2 больше, чем интерфейсная веб-инфраструктура. Его также можно использовать для изоморфного (т.е. Preerender на back-end), родного и мобильного приложений. Это означает, что прикосновение к DOM напрямую не рекомендуется.

Что касается создания самих компонентов... Это ничем не отличается от создания любого другого компонента в Angular2. В отличие от старой модели MVC группировки кода по типу (например, модели, представления, контроллеры), модель компонента поощряет группирование кода по контексту.

При импорте повторно используемого компонента он должен содержать любые директивы, службы и т.д., необходимые для его использования.

В качестве примера см. , который я создал. В дополнение к клонированию репо непосредственно из GH, код может быть установлен и импортирован непосредственно через JSPM.

Просто import, добавьте класс компонента к вашему виду directives, и любой элемент <ng2-markdowm> в вашем шаблоне будет работать. Это не намного легче, чем это.

4. Производительность. Я видел это видео из angular + React, которое обеспечивает хорошее сравнение angular vs angular + response vs angular 2. Но я не уверен, что тот случай, когда angular 2 действительно быстро или полностью, или если мы можем продолжить создание angular + реагировать на приложение, чтобы избежать ожидания angular 2 для стабилизации или для поддержки браузеров для функций es6, которые использует angular.

В Angular2 есть 3 основных улучшения производительности.

1. 2-сторонняя привязка данных больше не является значением по умолчанию

Элементы, требующие привязки данных, должны быть явно помечены в шаблоне (т.е. не волнуйтесь, новый синтаксис делает это очень простым). В результате накладные расходы, необходимые для проведения грязной проверки на DOM, значительно сокращаются.

Это означает, что в HTML-разметке не больше $scope, $scope.apply() и странных правил определения области видимости. Вместо этого иерархия пользовательского <elements> определяется в компонентах Angular2.

2. Angular2 использует виртуальный DOM

jQuery очень упростил непосредственное управление DOM. В результате, это также помогло неопытным разработчикам разгромить DOM и активировать раскладку макета через частые инкрементные обновления.

VDOM - это в основном упрощенное представление DOM в памяти. Инкрементные обновления применяются непосредственно к VDOM, которые впоследствии будут применяться к фактической DOM пакетами.

Помимо сетевых запросов, манипулирование DOM - это слабая производительность JavaScript. С другой стороны, VDOM на порядок выше. Вместо того, чтобы ожидать, что разработчики следуют "лучшим практикам", вручную обновляя обновления DOM, angular обрабатывает пакетную обработку прозрачно.

Меньше манипуляций с DOM = меньше рендеринга/пересчета UI = гораздо более отзывчивый пользовательский интерфейс.

3. Angular2 работает на рабочем столе

Это не совсем новая концепция. Графические интерфейсы рабочего стола работали так много лет, просто технически невозможно внедрить фоновых работников HTML5.

В большинстве настольных приложений основной контекст выполняется синхронно +, и пользовательский интерфейс выполняется асинхронно в своем отдельном потоке. Это позволяет пользователю реагировать независимо от того, что приложение делает в основном контексте.

+ Примечание. Это не обязательно верно, но для большей ясности.

В браузере все выполнение происходит в основном контексте+. Это означает, что каждый раз, когда Javascript должен блокироваться при работе с процессором, пользовательский интерфейс становится невосприимчивым к пользователю. Это не идеальное решение, которое может привести к отвратительному/непоследовательному опыту пользователя.

+ Примечание: на практике реализация браузера сильно различается, но позволяет держать вещи простыми.

С веб-рабочими можно нажать все, кроме DOM +, в контексте рабочего рабочего. В идеале, Javascript должен иметь мало или вообще не влияет на отзывчивость пользовательского интерфейса.

+ Примечание. Состояние DOM должно быть доступно для рендерера.

Один побочный эффект этого перехода, архитектура Angular2 теперь полностью отделена от UI/DOM. Понятно, что теперь можно писать адаптеры пользовательского интерфейса для других платформ (например, для IOS, Android, SmartTV и т.д.), Которые запускаются на одном и том же Angular2 языке изначально.

Реагировать

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

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

Angular2 vs React

Я призываю вас снова смотреть видео до конца. Презентатор прищурился, когда написал код, поэтому живая демонстрация не была честным сравнением.

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

Update:

Переписал раздел о веб-компонентах, чтобы лучше ответить на вопрос.

Ответ 3

Обратите внимание, что Angular 2.0 обещает хорошо работать с веб-компонентами и полимером, но на текущем этапе, т.е. Angular 2.0 альфа, он не работает (см. это). Поэтому вам придется подождать некоторое время, я думаю.