共享混合移动应用程序和桌面 Web 应用程序的代码

Question

我想构建一个全新的应用程序，该应用程序应同时部署为混合移动应用程序和桌面网络应用程序。

这两个应用程序的逻辑和用户界面大多非常相似。 除了一些差异：

1. 移动设备的屏幕尺寸优化（例如移动设备中的隐藏侧边菜单与桌面设备中的扩展侧边菜单）
2. 移动设备中的触摸手势 (3DTouch) 与桌面设备中的悬停功能
3. 移动设备中某些元素的触摸反馈
4. 移动设备中的页面导航与桌面设备中的路由导航

我想在桌面上使用angular-material 组件，在移动设备上使用Ionic 组件和导航，因为两者都是基于 Angular 构建的。

当然，我的目标是尽可能多地共享代码，用于逻辑以及 UI 容器组件。

所以我试图想出一种很好的方式来构建我的项目，同时为桌面 UI、移动 UI、共享 UI 和逻辑创建单独的 Angular 模块：

一种选择是为两个应用程序拥有一个核心模块，导入逻辑和共享 UI 模块。然后在为每个平台构建时在特定平台 UI 模块之间切换。在此选项中，特定于平台的 UI 组件将具有相同的 selectors 和 @Inputs，但它们呈现的 UI 会有所不同。

第二个选项是为每个平台应用程序设置单独的核心模块，以导入逻辑模块和共享 UI 组件模块。

也许有人有做这种事情的经验，并且可以分享他对涵盖所有这些的最佳项目结构的想法？

或者我建议的哪个项目结构更好？

Answer 1

根据我的经验，以下是有效的

1. 使用单独的文件结构创建 2 个单独的“前端”项目 在单独的目录中，使用特定的“命令行工具” 框架（Angular CLI、Ionic CLI、NativeScript CLI）。
2. 创建一个公共项目，其中包含要共享的公共模块 通过“前端”项目
3. 从您的代码库中将共享模块导入到'front 结束”项目（例如，在名为“共享”的目录下） - 确保 您将前端项目与相同的通用版本保持一致 的“共享”项目

真正的诀窍是设置“共享”模块的边界，以便在不增加代码复杂性的情况下最大限度地重用（例如，通过在“共享”代码中检查环境 - 我避免使用环境变量定义代码是在 Ionic 还是 Angular 中运行，并根据该变量做出决定）。

我的经验法则是“前端”项目定义所有组件（即组件不共享）。

组件的逻辑很浅，通常是这样的

• 他们在constructor 中定义了他们使用的服务
• 在ngOnInit() 方法中他们订阅了Observables services 方法返回的兴趣 - 订阅逻辑 填充包含视图中显示的数据的变量
• 在ngOnDestroy() 他们取消订阅
• 组件定义管理前端事件的方法 - 例如 方法通常调用共享服务上的方法

编码时会出现正确的设计。我的意思是，一旦你建立了基本结构（即“前端”项目和“共享”项目），你就开始为一个前端编码（例如浏览器的 Angular）。有些决定很容易做出（例如，查询后端的所有逻辑通常都是共享的）。其他一些决定更棘手，逻辑越接近前端表面，这一点就越真实。一旦你看到组件中的逻辑变得越来越厚，你就会开始怀疑是否有一些值得分享的东西，因为也许其他“前端”（比如 Ionic）也很常见。如果是这种情况，那么您重构，将代码移动到“共享”服务。

还要记住通过测试充分保护“共享”服务。

希望对你有帮助

Answer 2

这是关于这个主题的中型博客https://medium.com/@benorama/hybrid-mobile-apps-sharing-logic-between-angular2-and-ionic2-apps-7c32145b90d5

示例项目的 Github 链接https://github.com/benorama/ngrx-demo-apps

希望这会有所帮助..

Answer 3

我也想知道如何做到这一点，我想出了一个非常聪明的解决方案（我使用的是 NativeScript 而不是 Ionic）。

您想要做的是拥有两个开发环境，同时共享应用程序的业务逻辑（在导入等方面略有不同）。虽然模板和某些样式不同。

实现此目的的一种方法是使用 NativeScript CLI 环境，然后在用于开发 Web 应用程序的同一项目中实现您自己的 webpack 解决方案。将 Angular CLI 与 NativeScript 一起使用并不能很好地工作，因为它们没有相同的项目结构。

然后我会设置两个环境变量，native 和 web。然后我在我的打字稿文件中使用这两个来决定要导入什么以及使用什么代码。如果您只需要对文件进行小幅调整，您可以使用简单的 if 语句，但如果您需要更改整个组件，您可以通过检查这些环境变量来切换整个文件。

关于模板和样式，您可以执行name.component.native.html 和name.component.web.html 之类的操作，并使用与您的环境变量匹配的那个。样式文件也是如此。

根据您的项目有多大，我认为这是一种非常易于管理的轻松共享代码的方式，无需分别管理 2 个项目。

我并不是说这是正确的方法，但这是一种方法，我认为如果做得正确，它可以很好地工作。

希望这对您有所帮助。