Угловые элементы против угловой библиотеки? - PullRequest
Новая
       22

Угловые элементы против угловой библиотеки?

1 голос
/ 26 марта 2019

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

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

Причина, по которой я начал изучать элементы:

Большинство наших старых проектов работают с Bootstrap 3. Мы хотели бы использовать Bootstrap 4 с новыми разработками. Так что мне было интересно, можно ли создать элемент с помощью Bootstrap 4, и использовать ли его где-нибудь, что было разработано с помощью B-3, без поломок?

Возможно ли это?

1 Ответ

1 голос
/ 02 апреля 2019

Первый твой второй вопрос.
Да, можно создавать новые элементы с помощью Bootstrap 4. Это одно из преимуществ веб-компонентов (угловых элементов), заключающихся в том, что вы получаете инкапсуляцию стилей внутри своего теневого дерева.

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

Просто из любопытства я создал новый проект Angular (ng new), из него создал Angular Element, содержащий Boostrap 4, и проверил размер с помощью Webpack Bundle Analyzer.

Угловой элемент 

All        (206.61 KB)  
main.js    (193.33 KB)  
scripts.js (13.29 KB)

Сюда входит проект Angular, созданный с помощью ng new, импорт Zone.js (так как он необходим для работы автономных элементов, если вы не хотите использовать noop zone ) и сборка с ngx-build-plus .

Угловой элемент + Bootstrap 4 (только min.css) 

All        (418.74 KB)  
main.js    (405.46 KB)  
scripts.js (13.29 KB)

Это создаст много накладных расходов. Конечно, можно обмениваться стилями между вашими элементами, но это увеличит сложность.

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

Pro:

Против

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

  • Общий размер пакета увеличится
    В настоящее время вы должны объединить всю угловую платформу (по крайней мере, части, которые не растрескиваются от дерева) в ваш угловой элемент. Опять же, nx-build-plus приходит к вам на помощь и помогает обмениваться зависимостями между элементами, но этот способ официально не поддерживается (но автор ngx-build-plus работает над реализацией для команды Angular). Таким образом, вы можете ожидать, что эта точка улучшится - но не исчезнет - при появлении релизов Angular (особенно когда приземлится Ivy ). В зависимости от того, как вы решите проблему импорта, другие зависимости, такие как Bootstrap, будут увеличивать эту проблему (как показано выше).

  • Если вам нужна поддержка IE 11
    вы получите еще больше проблем с поддержкой (и размером пакета), поскольку все функции веб-компонента (углового элемента) должны быть заполнены.

  • Сборка усложняется (по крайней мере, пока).
    Как уже упоминалось выше, Angular Elements пока не поддерживаются в библиотеках, и если для этого есть решение, потребуется ручная настройка.
    Кроме того, Angular в настоящее время не поддерживает «внешние» угловые элементы (то есть элементы вне Angular Context). Хотя их можно создать вручную или с помощью таких инструментов, как ngx-build-plus (ИМХО лучший подход на данный момент)

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

...