使用Ionic2的渐进式Web应用程序 - 提供有关在所有设备上最大化客户端代码重用的最佳实践的建议

Question

我正在寻找 Ionic2 来构建渐进式网络应用，其目标如下：

1. 最大限度地重用所有设备的客户端代码
2. 同时在所有设备上提供良好的用户体验

我目前面临一个简单（但我认为具有代表性）的问题。 我有一个列表，表示某个用户的预订（MyBookingsPage）;用户可以“修改”或“取消”每个预订选择“修改”或“取消”按钮。

我希望列表出现：

• 在桌面上：作为项目列表，每个项目都显示2个按钮（for '修改'和'取消'动作）
• 在手机和平​​板电脑上：作为显示的滑动项列表 当用户滑动项目时，“修改”和“取消”按钮（移动设备上非常标准的行为）

这意味着，根据设备，MyBookingsPage的模板需要使用不同的Ionic2组件。

为了达到理想的效果，我使用 ng2-responsive 库（https://github.com/ManuCutillas/ng2-responsive）。

以下是模板的代码

<ion-content padding class="outer-content">
  <ion-list>
    <ion-list-header>
      <h3>{{getListHeader()}}</h3>
    </ion-list-header>
    <div *showItDevice="['desktop','smartTv']">
      <ion-item *ngFor="let booking of bookings">
        <ion-badge item-left color={{getStatusColor(booking)}} style="width: 77px">{{booking.status.text}}</ion-badge>
        <ion-label>{{getBookingDesc(booking)}}</ion-label>
        <button ion-button clear item-right color="danger">
          <ion-icon name="trash">Cancel</ion-icon>
        </button>
        <button ion-button clear item-right color="primary">
          <ion-icon name="brush">Change</ion-icon>
        </button>
      </ion-item>
    </div>

    <div *showItDevice="['mobile','tablet']">
      <ion-item-sliding *ngFor="let booking of bookings">
        <ion-item>
          <ion-badge item-left color={{getStatusColor(booking)}} style="width: 77px">{{booking.status.text}}</ion-badge>
          <p>{{getBookingDescShort(booking)}}</p>
        </ion-item>
        <ion-item-options>
          <button ion-button clear item-left color="danger">
            <ion-icon name="trash"></ion-icon>
            Cancel
          </button>
          <button ion-button clear item-left color="primary">
            <ion-icon name="brush"></ion-icon>
            Change
          </button>
        </ion-item-options>
      </ion-item-sliding>
    </div>
  </ion-list>
</ion-content>

现在我的问题：

1. 用 Ionic2 构建渐进式网页应用是否合理？ 目标是为所有设备保留一行代码 同时，保证所有人都能获得良好的用户体验 设备？
2. 是否使用 ng2-responsive （以上述方式表示 例如，实现上述目标的良好策略？

欢迎就这些主题的最佳实践提出任何建议