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

Question

我想构建一个全新的应用程序，应该作为混合移动应用程序和桌面Web应用程序进行部署。

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

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

我想过将angular-material组件用于桌面，Ionic组件和移动导航，因为它们都建立在角度之上。

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

因此，我尝试在为桌面UI，移动UI，共享UI和逻辑创建单独的Angular模块时考虑构建项目的好方法：

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

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

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

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

Answer 1

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

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

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

对我而言，经验法则是“前端”项目定义了所有组件（即组件未共享）。

组件的逻辑非常浅，通常类似于以下

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

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

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

我希望它有所帮助

Answer 2

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

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

您可以通过使用NativeScript CLI环境，然后在将与之开发Web应用程序的同一项目中实现您自己的webpack解决方案。使用带有NativeScript的Angular CLI实际上并不是那么好用，因为它们没有相同的项目结构。

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

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

根据项目的大小，我认为这是一种非常易于管理的代码共享方式，无需单独管理2个项目。

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

希望这在某些方面有所帮助。

Answer 3

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

示例项目https://github.com/benorama/ngrx-demo-apps

的Github链接

希望这会有所帮助..