Будущее веб-разработки

(мое скромное мнение)

Представьте себе приложение, полностью построенное с веб-компонентами, возможности безграничны и есть еще больше преимуществ (бесконечность * 2).

некоторые из основных преимуществ:

  1. Возможность многократного использования. Один и тот же веб-компонент может использоваться во всех приложениях.
  2. Совместимость. , поскольку веб-компоненты представляют собой просто теги HTML с инкапсулированными функциями js, их можно использовать везде (Angular, React, Vue и т. д.)
  3. Тестируемость. веб-компоненты - это отдельный фрагмент кода, который можно легко тестировать с помощью Jest, Karma и любой другой среды модульного тестирования для Интернета.

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

Один из моих любимых - https://github.com/beeman/angular-elements-chat-widget

Наш элемент

В этой статье я назову элемент <my-avatar-element id="avatarEl"></my-avatar-element>.

Отображение свойства элемента

@Input('avatar-url')
public avatarUrl: string;

таким образом мы можем передать атрибут avatar-url (обратите внимание на используемый дефис, вы не можете передавать атрибуты в элементы html заглавными буквами) следующим образом: <my-avatar-element avatar-url="some url for your avatar"></my-avatar-element>, а также выбирая наш настраиваемый элемент с помощью

const avatarEl = document.getElementById('avatarEl');
avatarEl.avatarUrl = "some url for the avatar";

Отображение события из элемента

@Output() public avatarChange: EventEmitter<any> = new EventEmitter();

таким образом мы можем прослушивать события из настраиваемого элемента следующим образом

const avatarEl = document.getElementById('avatarEl');
avatarEl.addEventListener('avatarChange', (evt) => { do you thing here });

Отображение метода для элемента (это то, что мне было трудно решить почти самостоятельно)

@HostBinding('toggle') public toggle = function() {
  // do you thing here
}

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

const avatarEl = document.getElementById('avatarEl');
avatarEl.toggle(); // will run the function

имейте в виду, что при использовании этого для предоставления атрибутов / методов вы должны объявить в пользовательском элементе .module.ts, что вы используете CUSTOM_ELEMENTS_SCHEMA.

Будущее Angular Elements

После участия в #AngularUP в Израиле и того, что Роб Вормолд рассказывает о том, что нас ждет в ближайшем будущем, я очень взволнован этой удивительной функцией Angular, и это будущее уже не за горами.

так как есть еще несколько проблем и ошибок, которые решает команда angular, таких как дублирование ZoneJS и дублирование настраиваемого элемента при использовании элемента Angular внутри проекта angular, над которым я работал с помощью следующего скрипта

// check if zoneJS already exist (inside an angular project), if not load it from a CDN
if (!window['Zone']) {
const zone = document.createElement('script');
zone.src = 'https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.20/zone.min.js';document.body.appendChild(zone);
zone.onload = () => bootstrapApp();
zone.onerror = (err) => console.error(err);
} else {
bootstrapApp();
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ElementModule } from './app/element.module';
function bootstrapApp() {
// check if already bootstraping the element to avoid duplications
if (window['isBootstrapingBot']) {
return;
} else {
window['isBootstrapingBot'] = true;
}
platformBrowserDynamic().bootstrapModule(ElementModule).catch(err => console.log(err));}

Надеюсь, вам всем понравится читать, буду признателен за отзывы. спасибо и удачного взлома;)