Этот блог посвящен проекту Angular Labs. Все может измениться до его выпуска.

Angular довольно хорош. Но ему нравится владеть страницей, если не всем сайтом. Трудно,

а) сосуществовать Angular с другими стеками

б) Inject angular для одной небольшой быстрой работы

c) Упакуйте угловой «виджет» для использования в wordpress, sharepoint и т. д.

Интересно, что это то, что раньше мог делать AngularJS, но Angular как бы потерял это на своем пути. Технически все вышеперечисленное возможно с Angular, но это сложно. Очень сложный.

И это именно тот пробел, который заполняет Angular Elements.

Веб-компоненты

Помните веб-компоненты? Веб-компоненты - это набор функций, которые в настоящее время W3C добавляет в спецификации HTML и DOM, которые позволяют создавать повторно используемые виджеты или компоненты в веб-документах и ​​веб-приложениях.

Есть 4 важных момента, которые нужно знать о веб-компоненте.

1. Шаблон HTML: общий шаблон веб-компонента. В Angular есть шаблон ng, вроде как.

2. Теневой DOM. Сохраняйте DOM в памяти, но не в основном DOM. Отлично подходит для производительности.

3. Импорт HTML: импорт / экспорт многоразовых фрагментов HTML. Вряд ли кто-нибудь им пользуется.

4. Пользовательские элементы: возможность добавлять в разговорный язык HTML, в основном позволяет вам определять веб-компонент.

Пользовательские элементы

Судя по всему, есть свойство под названием window.customElement, оно доступно в последних сборках Chrome, попробуйте ... вы увидите!

Это общепринятый стандарт, встроенный в Chrome, часть технического превью Safari, допускающий полифилирование до IE10. Это волшебный билет, позволяющий нам создавать любой настраиваемый элемент и, что ж, добавлять в разговорный язык HTML.

Чтобы добавить настраиваемый элемент, вы можете:

class myElement extends HTMLElement {}
customElements.define(‘my-element’, myElement);

Чертовски круто, не правда ли?

Атрибуты

Вы также можете следить за атрибутами, например,

class MyElement extends HTMLElement {
static get observedAttributes():string[]{ return [‘some-attribute’] }
attributeChangedCallback(oldvalue, newvalue, key) {}}

И это позволяет писать такой код, как,

<my-element some-attribute=”somevalue”></my-element>

Обратите внимание, что это обычный атрибут HTML, например element.setAttribute будет вести себя точно так же, как указано выше.

Характеристики

Вы также можете определить такие свойства, как это,

class MyElement extends HTMLElement {
 private _theValue: any;
 set someValue(value) {
  this._theValue = value;
}
get someValue() { return this._theValue; }}

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

События

Эти настраиваемые элементы также могут отправлять обратно такие события.

class MyElement extends HTMLElement {
emitEvent() {
let someEvent = new CustomEvent(‘some-change’, {});
this.dispatchEvent(someEvent);
}}

Это позволяет вам писать такой код,

elem.addEventListener(‘some-change’, function() {});

Пока что они похожи на элементы HTML, потому что это то, что они собой представляют. Это просто элементы HTML.

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

Введите угловые элементы

Элементы Angular - это просто компонент Angular, упакованный как веб-компонент. Они есть,

а) Самозагрузочная обвязка: перетащите страницу, и она работает. В отличие от полного Angular, они не нуждаются в сложной логике привязки к загрузке.

б) размещает компонент Angular внутри веб-компонента

c) Обеспечивает мост от концепций angular к веб-компонентам. @Inputs () становятся свойствами. @ Выходы становятся событиями. @ HostBinding / Listener становятся атрибутами CE / наблюдаемыми атрибутами.

г) Зоны не нужны

д) Угловой внутри, стандарты снаружи ... ТАК ... они могут хорошо работать и работать с базовым HTML и другими стеками !!!!

Введите SPFx

Использование Angular с SPFx возможно, но очень громоздко. Конечно, не подходит для массового распространения. До настоящего времени.

Основная проблема заключалась в том, что Angular - это большой и очень гибкий фреймворк, который позволяет создавать очень сложные и хорошо работающие приложения, но - ему нравится владеть страницей. Например, если вы поместите ‹app-root /› на страницу, у вас не может быть второго app-root. Это просто не сработает!

1. Microsoft выпустила образец на раннем этапе, в котором очень короткие компоненты создавались динамически, и позволил вам обойти эту идею с несколькими корневыми приложениями. Https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/angular2-prototype. Однако им было совершенно ясно, что это не лучший подход и его следует рассматривать как эксперимент.

2. В сообществе люди тоже очень старались, но в основном это было ответвлением той же идеи создания динамических компонентов. Вы можете увидеть мои комментарии здесь http://disq.us/p/1lnwssl. Этот подход не будет работать с AOT, и если вы не пишете готовый код AOT сегодня на Angular, вы делаете ошибку, IMO.

3. Наконец, angular-cli, самый простой и чертовски хороший способ создания приложений angular - это совершенно другой шаблон проекта, который откровенно несовместим с генератором йоменов SharePoint. Черт возьми, даже правила tslint противоречат друг другу, среди прочего. Нет, ни генератор SPFx yeoman, ни angular-cli не «ошибаются» в своем способе делать это, они просто очень разные продукты и подходят на своих местах.

4. Angular.io использует подход, который чем-то похож на angular-elements, но он был очень сложным. Это подход, который я использовал в своих проектах, и я никогда не чувствовал, что этот подход получит массовое признание, потому что он настолько сложен и подвержен ошибкам. Однако я вижу, что этот подход легко перейдет на SPFx.

В этом смысле angular-elements идеально подходят для SPFx.

А совпадение, совпадение, похоже, что команда Angular проводит сессию под названием SharePoint и элементы Angular на Европейской конференции по SharePoint. https://www.sharepointeurope.com/events/amazing-developer-session-check-online-guide-details/

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

Но я очень рад видеть решение, разработанное командой Angular, решение, которое будет масштабироваться, будет простым в использовании, документировании и поддержке. И SPFx, безусловно, выиграет от этого, но так будет почти каждый, кто хочет использовать Angular вместе с другими стеками разработки JavaScript, такими как react, vue или другие!

Подход Pizza Box

Если вы работали со мной, вы, должно быть, слышали, как я повторяю это снова и снова - ИСПОЛЬЗУЙТЕ ПОДХОД С ЯЩИКАМИ ДЛЯ ПИЦЦЫ!

Ваше приложение - пицца, она вкусная, вкусная, сосредоточьтесь на том, чтобы сделать пиццу лучше. Я предпочитаю печь пиццу с помощью Angular и складываю пиццу во всевозможные коробки. Я упаковываю их как веб-приложения, веб-части SharePoint, решения Office 365, веб-сайты, приложения Cordova, приложения Electron, приложения Xamarin. Это то, чем я занимаюсь каждый день! Я упаковываю одну и ту же пиццу в множество коробок без перезаписи кода.

Для меня SPFx - это просто еще одна коробка для пиццы, в которой будут жить мои приложения. Это механизм упаковки / доставки ДЛЯ МЕНЯ.

Не позволяйте коробке определять, какую начинку вы кладете в пиццу. Сформируйте пиццу в соответствии с коробками, в которые она поместится. Однако основное внимание уделяется пицце, а не коробке (если вы не домино, где вы тоже можете съесть коробку, пицца и коробка имеют одинаковый вкус!).

Я считаю такой подход разумным. Черт возьми, мы пишем JavaScript по одной причине - мобильность платформы. На самом деле никто не любит язык. Зачем терять это преимущество?

Это какие-то интересные вещи, люди!