С помощью начальной загрузки с Ember 3.8

Question

Мы начнем с нового приложения, используя Ember 3.8 и bootstrap/SASS. Кажется, есть две надстройки, которые поддерживают начальную загрузку в Ember, https://www.ember-bootstrap.com/ и https://github.com/lifegadget/ember-cli-bootstrap-sassy.

Хотя первый реализует компоненты ember для большинства функций начальной загрузки, а также "заменяет" исходный файл bootstrap.js своей собственной реализацией, со вторым кажется, что я все еще могу использовать все оригинальные компоненты и реализации js.

С первого взгляда мне было бы гораздо удобнее с https://github.com/lifegadget/ember-cli-bootstrap-sassy, так как я все еще мог использовать все примеры начальной загрузки из Интернета, и наличие "настроенной" версии bootstrap.js также кажется мне несколько нелогичным, Кроме того, что насчет всех возможностей начальной загрузки, которые не реализует ember-bootstrap, но я все еще требую? Кажется, что я мог бы закончить приложением, которое использовало бы ember-bootstrap, но дополнительно использовало все виды "обходных путей" для вещей, которые не были реализованы.

Поскольку у меня нет большого опыта в этой области, я был бы рад получить рекомендации и советы экспертов.

Answer 1

Итак, прежде всего отказ от ответственности: как автор ember-bootstrapЯ, конечно, немного предвзятый здесь!;)

Но я думаю, что у меня есть веские аргументы в пользу ember-bootstrapиначе я бы не вложил эту тонну работы. Таким образом, основной является то, что он следует модели программирования Ember, при использовании bootstrap.js напрямую и не часто чувствуют себя неловко в приложении Ember:

• Вы используете компоненты для визуализации вещей, которые, в свою очередь, визуализируют тривиальную разметку, ожидаемую Bootstrap, вместо того, чтобы распространять статическую разметку Bootstrap по всему приложению.
• Компоненты в ember-bootstrap Строго следуйте так называемой модели программирования DDAU (Data down Actions up) в Ember.
• это означает, что посредством декларативного присваивания свойств, которые создают привязки данных, состояние вашего приложения "течет" через ваш пользовательский интерфейс, поэтому отображаемый DOM является прямой функцией вашего состояния. Это часть "Data down", которая отличается от необходимости "вызывать" вещи для достижения того же эффекта (например, $('#myModal').modal('show'))
• Когда пользователь взаимодействует с вашим пользовательским интерфейсом, вызываются действия, которые обрабатываются где-то в дереве компонентов (например, в контроллере). Они преобразуют ваше состояние, которое используется для повторного обновления пользовательского интерфейса (однонаправленный поток данных)

Если это звучит слишком абстрактно, возьмите этот простой пример модального компонента. В ember-bootstrap вы бы сделали что-то вроде этого:

{{#bs-modal-simple
  open=this.showConfirmation
  title="Please confirm"
  onSubmit=(action "submit")
  onHidden=(action "close")
}}
  Some {{dynamic}} content.
{{/bs-modal-simple}}

• Необходимая разметка Bootstrap отображается автоматически. Вы просто используете компонент и взаимодействуете с его публичным API (свойства и действия)
• Отображение модального режима произойдет, если установить showConfirmation состояние для true (или даже вычисление этого автоматически с вычисляемым свойством). В bootstrap.js вам как-то придется обязательно позвонить $('#myModal').modal('show')
• назначенные действия автоматически вызываются для вашего родителя (компонента или контроллера), когда происходят инициированные пользователем события. С bootstrap.js Вы должны будете сначала присоединить слушатели событий в своем JavaScript (а затем удалить их!):$('#myModal').on('hidden.bs.modal', function (e) { // do something }),
• Это также требует ручного учета, в то время как компоненты имеют свои крючки жизненного цикла, так что вы можете просто утилизировать их в любое время (например, иметь их в {{#if ...}} блокировать или менять маршруты).

Это основные моменты с моей точки зрения, но есть еще несколько:

• ember-bootstrap хорошо играет с тестовым слоем Ember. С bootstrap.js в какой-то момент вы столкнетесь с проблемами, например, код использует setTimeout() требует обработки переходов, о которых не знают помощники тестирования Эмбер, и поэтому не ждут. Но часто в тестах приходится полагаться на то, что ваше приложение находится в "установленном состоянии". ember-bootstrap вместо этого интегрируется в так называемый Run Loop Ember, так что такие вещи, как await click('#show-modal-button') просто работай (т.е. модал будет полностью виден после разрешения Обещания).
• bootstrap.js нужен JQuery, в то время как ember-bootstrap не.

И добавим еще одну вещь: все вышеперечисленное относится к компонентам Bootstrap, которым требуется JavaScript. Для статических компонентов, таких как значки, вы можете просто написать соответствующую разметку Bootstrap. по факту ember-bootstrap намеренно не предоставляет компоненты для этих тривиальных компонентов Bootstrap, чтобы не добавлять ненужных накладных расходов.

Answer 2

Чтобы прояснить одно из соображений Саймона, Ember Bootstrap на самом деле не использует ни один из базовых javascript bootstrap.js для работы, поэтому вы можете потерять эту зависимость. А поскольку для начальной загрузки (как минимум 4.0) требуется jQuery, вы привязаны к обоим.

С Ember-Bootstrap для работы требуется 0 дополнительных jquery (и работает в моем бесплатном приложении jQuery).