共享混合移动应用程序和桌面 Web 应用程序的代码
Share code for hybrid mobile app and desktop web app
我想构建一个全新的应用程序，该应用程序既可以部署为混合移动应用程序，也可以部署为桌面 Web 应用程序。
这两个应用程序的逻辑和用户界面大多非常相似。
除了一些差异：
- 针对移动设备的屏幕尺寸优化（例如，移动设备中的隐藏侧边菜单与桌面设备中的展开菜单）
- 移动设备中的触摸手势 (3DTouch) 与桌面设备中的悬停功能
- 移动设备中某些元素的触摸反馈
- 移动设备中的页面导航与桌面设备中的路由导航
我考虑过使用 angular-material components for desktop, and Ionic 组件和移动导航，因为两者都构建在 angular 之上。
当然，我的目标是尽可能多地分享代码，包括逻辑代码和 UI 容器组件。
因此，我在为桌面 UI、移动 UI、共享 UI 和逻辑：
一个选项是为两个应用程序使用一个核心模块，在为每个平台构建时导入逻辑和共享 UI modules.Then 在特定平台 UI 模块之间切换.在此选项中，特定于平台的 UI 组件将具有相同的 selector 和 @Input，但它们呈现的 UI.
会有所不同
第二个选项是为每个将导入逻辑模块和共享 UI 组件模块的平台应用程序设置单独的核心模块。
也许有人有做过这样的事情的经验，可以分享他对涵盖所有这些的最佳项目结构的想法？
或者我建议的哪个项目结构更好？
我也想知道如何做到这一点，我想出了一个非常聪明的解决方案（我使用 NativeScript 而不是 Ionic）。
您想要做的是拥有两个开发环境，同时共享应用程序的业务逻辑（在导入等方面略有不同）。虽然模板和某些样式有所不同。
实现此目的的一种方法是使用 NativeScript CLI 环境，然后在将用于开发 Web 应用程序的同一项目中实施您自己的 Webpack 解决方案。将 Angular CLI 与 NativeScript 一起使用并不能很好地工作，因为它们没有相同的项目结构。
然后我会设置两个环境变量，native和web。然后我在我的打字稿文件中使用这两个来决定导入什么和使用什么代码。如果您只需要对文件进行小的调整，您可以使用简单的 if 语句来使用它，但是如果您需要更改整个组件，您可以通过检查这些环境变量来切换整个文件。
关于模板和样式，您可以执行 name.component.native.html 和 name.component.web.html 之类的操作，并使用与您的环境变量相匹配的模板和样式。样式文件也是如此。
根据您的项目有多大，我认为这是一种非常易于管理的共享代码的方式，无需单独管理 2 个项目。
我并不是说这是正确的做法，但这是一种方式，我认为如果做得正确，它会非常出色。
希望这对您有所帮助。
根据我的经验，以下是有效的方法
- 使用单独的文件结构创建 2 个单独的 'Front End' 项目
在单独的目录中，使用特定的 "command line tools"
框架（Angular CLI、Ionic CLI、NativeScript CLI）。
- 创建一个包含要共享的公共模块的公共项目
由 'front end' 个项目
- 从您的代码存储库中将共享模块导入“前端”
结束'项目（例如，在名为 'shared' 的目录下）- 确保
您使前端项目与相同的通用版本保持一致
'shared' 项目
真正的诀窍是设置 'shared' 模块的边界，以便在不增加代码复杂性的情况下最大限度地重用（例如，通过在 'shared' 代码中检查环境- 我避免使用环境变量来定义代码是在 Ionic 还是 Angular 中运行，并根据该变量做出决定）。
我的经验法则是 'Front End' 项目定义所有组件（即组件不共享）。
组件的逻辑很浅，通常是这样的
- 他们在
constructor 中定义了他们使用的服务
- 在
ngOnInit() 方法中他们订阅了 Observables
services 方法返回的利息 - 订阅逻辑
填充包含视图中显示的数据的变量
- 在
ngOnDestroy() 他们退订了订阅
- 组件定义了管理前端事件的方法——例如
方法通常调用共享服务上的方法
正确的设计在编码时出现。我的意思是，一旦你建立了基本结构（即 'Front End' 项目和 'shared' 项目），你就开始为一个前端编码（例如 Angular 用于浏览器）。有些决定很容易做出（例如，查询后端的所有逻辑通常是共享的）。其他一些决定更棘手，逻辑越接近前端表面就越真实。一旦您看到组件中的逻辑变得越来越复杂，您就会开始怀疑是否有值得分享的东西，因为也许对其他 'Front End'（比方说 Ionic）也很常见。如果是这种情况，那么你重构，将代码移动到 'shared' 服务。
还请记住通过测试充分保护 'shared' 服务。
希望对你有帮助
这是关于此主题的中型博客https://medium.com/@benorama/hybrid-mobile-apps-sharing-logic-between-angular2-and-ionic2-apps-7c32145b90d5
Github link 示例项目 https://github.com/benorama/ngrx-demo-apps
希望这对您有所帮助..
我想构建一个全新的应用程序，该应用程序既可以部署为混合移动应用程序，也可以部署为桌面 Web 应用程序。
这两个应用程序的逻辑和用户界面大多非常相似。 除了一些差异：
- 针对移动设备的屏幕尺寸优化（例如，移动设备中的隐藏侧边菜单与桌面设备中的展开菜单）
- 移动设备中的触摸手势 (3DTouch) 与桌面设备中的悬停功能
- 移动设备中某些元素的触摸反馈
- 移动设备中的页面导航与桌面设备中的路由导航
我考虑过使用 angular-material components for desktop, and Ionic 组件和移动导航，因为两者都构建在 angular 之上。
当然，我的目标是尽可能多地分享代码，包括逻辑代码和 UI 容器组件。
因此，我在为桌面 UI、移动 UI、共享 UI 和逻辑：
一个选项是为两个应用程序使用一个核心模块，在为每个平台构建时导入逻辑和共享 UI modules.Then 在特定平台 UI 模块之间切换.在此选项中，特定于平台的 UI 组件将具有相同的 selector 和 @Input，但它们呈现的 UI.
第二个选项是为每个将导入逻辑模块和共享 UI 组件模块的平台应用程序设置单独的核心模块。
也许有人有做过这样的事情的经验，可以分享他对涵盖所有这些的最佳项目结构的想法？
或者我建议的哪个项目结构更好？
我也想知道如何做到这一点，我想出了一个非常聪明的解决方案（我使用 NativeScript 而不是 Ionic）。
您想要做的是拥有两个开发环境，同时共享应用程序的业务逻辑（在导入等方面略有不同）。虽然模板和某些样式有所不同。
实现此目的的一种方法是使用 NativeScript CLI 环境，然后在将用于开发 Web 应用程序的同一项目中实施您自己的 Webpack 解决方案。将 Angular CLI 与 NativeScript 一起使用并不能很好地工作，因为它们没有相同的项目结构。
然后我会设置两个环境变量，native和web。然后我在我的打字稿文件中使用这两个来决定导入什么和使用什么代码。如果您只需要对文件进行小的调整，您可以使用简单的 if 语句来使用它，但是如果您需要更改整个组件，您可以通过检查这些环境变量来切换整个文件。
关于模板和样式，您可以执行 name.component.native.html 和 name.component.web.html 之类的操作，并使用与您的环境变量相匹配的模板和样式。样式文件也是如此。
根据您的项目有多大，我认为这是一种非常易于管理的共享代码的方式，无需单独管理 2 个项目。
我并不是说这是正确的做法，但这是一种方式，我认为如果做得正确，它会非常出色。
希望这对您有所帮助。
根据我的经验，以下是有效的方法
- 使用单独的文件结构创建 2 个单独的 'Front End' 项目 在单独的目录中，使用特定的 "command line tools" 框架（Angular CLI、Ionic CLI、NativeScript CLI）。
- 创建一个包含要共享的公共模块的公共项目 由 'front end' 个项目
- 从您的代码存储库中将共享模块导入“前端” 结束'项目（例如，在名为 'shared' 的目录下）- 确保 您使前端项目与相同的通用版本保持一致 'shared' 项目
真正的诀窍是设置 'shared' 模块的边界，以便在不增加代码复杂性的情况下最大限度地重用（例如，通过在 'shared' 代码中检查环境- 我避免使用环境变量来定义代码是在 Ionic 还是 Angular 中运行，并根据该变量做出决定）。
我的经验法则是 'Front End' 项目定义所有组件（即组件不共享）。
组件的逻辑很浅，通常是这样的
- 他们在
constructor中定义了他们使用的服务 - 在
ngOnInit()方法中他们订阅了 Observables services 方法返回的利息 - 订阅逻辑 填充包含视图中显示的数据的变量 - 在
ngOnDestroy()他们退订了订阅 - 组件定义了管理前端事件的方法——例如 方法通常调用共享服务上的方法
正确的设计在编码时出现。我的意思是，一旦你建立了基本结构（即 'Front End' 项目和 'shared' 项目），你就开始为一个前端编码（例如 Angular 用于浏览器）。有些决定很容易做出（例如，查询后端的所有逻辑通常是共享的）。其他一些决定更棘手，逻辑越接近前端表面就越真实。一旦您看到组件中的逻辑变得越来越复杂，您就会开始怀疑是否有值得分享的东西，因为也许对其他 'Front End'（比方说 Ionic）也很常见。如果是这种情况，那么你重构，将代码移动到 'shared' 服务。
还请记住通过测试充分保护 'shared' 服务。
希望对你有帮助
这是关于此主题的中型博客https://medium.com/@benorama/hybrid-mobile-apps-sharing-logic-between-angular2-and-ionic2-apps-7c32145b90d5
Github link 示例项目 https://github.com/benorama/ngrx-demo-apps
希望这对您有所帮助..