【问题标题】:Choosing a technology stack for Desktop + Mobile application为桌面 + 移动应用程序选择技术堆栈
【发布时间】:2015-10-12 20:35:33
【问题描述】:

我目前正在浏览网络以获取信息,目标是构建经典棋盘游戏的网络和移动版本。

我们的想法是在桌面版上拥有完整的功能和游戏,以及与之配套的精简原生移动应用,允许用户玩游戏并更改一些设置。

现在我习惯于为桌面构建 Web 应用程序,但我从未接触过 Cordova / Ionic 之类的东西。

我还想补充一点,我确实打算有一天将应用程序投入生产。

我有多个问题:

  • 你会使用什么有服务器端技术? (我正在寻找 Node.js,支持还是反对它?
  • Cordova/Ionic/React native 和/或其他如何与我的桌面应用程序相关联?他们是分开的项目吗?任何方式 重用代码块? (CSS、JS)?
  • 您个人会使用上述哪些平台?为什么?

我正在尝试从使用过上述任何技术的任何人那里收集尽可能多的信息,所以请随意只回答这篇文章的部分内容,以便我可以编译所有内容。

非常感谢您的宝贵时间和帮助

【问题讨论】:

  • 我的意思是堆栈 100%、Mongo DB、Express、Angular/Ionic、NodeJS。(但是你可以将 mongo 换成 sql 或其他)有大量的插件和模块用于 angular 到几乎任何你能想到的东西,如果不存在的话,你可以自己写。加上 cord-ova,您几乎可以构建任何您梦寐以求的东西,或者您可以在 Web 中构建的任何东西,并且只需将其部署到任何平台并使用本机设备功能。作为一个每周工作 4 天的人,我为一家全国性公司在多个平台上构建了多个应用程序,如何?离子和角度。

标签: cordova reactjs ionic-framework


【解决方案1】:

反应原生

一次学习,随处写作。

这是真正的原生应用,因此它们通常比非原生应用具有更好的性能。 要构建 React Native 应用程序,您仍然需要了解目标平台(Android/iOS),并且仍然需要为每个平台编写一个应用程序,但您可以在两个平台上使用相同的应用程序架构(React/Flux)。

由于它是用 JS 编写的(如 React),您仍然可以在平台之间共享代码,但有些代码总是必须不同,因为您在 render 函数中使用的 ReactElement 实际上是特定于平台的。所以基本上你可以共享你所有的状态管理逻辑,但是你必须为你所针对的每个平台提供一个自定义的渲染函数。

如果您需要良好/原生的性能,这是一个不错的选择,您有时间学习 iOS 和 Android 平台并同时维护 2 个不同的应用程序。

目前 React Native for Android 尚未发布,但可能会在 2015 年 8 月发布。它是常规原生应用程序的一个很好的替代品,并提供了一些优势,如热重载,但它仍然不是一个非常成熟的技术,有点有风险,但从长远来看非常有前途,并且经过 Facebook 和社区的实战考验。

你也可以看看ComponentKit,同样来自 Facebook,它在某种程度上是 React for ObjectiveC,但我认为大多数新的 Facebook 项目将倾向于使用 React Native 而不是 ComponentKit。

Cordova / WebView 应用程序

一次编写,随处运行

Cordova/Phonegap 应用不是本机应用。它们是围绕 WebView 应用程序的原生 shell。 webview 是在本机应用程序中运行的浏览器。这些应用程序被打包在一个原生 shell 中,以便像其他原生应用程序一样提供给 Google/Apple 应用程序商店。

优点是它只是 HTML、JS 和 CSS。 这意味着,如果您已经拥有一个移动网站(或同时处理桌面和移动屏幕的响应式桌面网站),您可以轻松地将其打包为 Cordova 应用程序并通过应用商店提供。

因此,您只需编写一次移动网站,即可免费获得 iOS 和 Android 应用程序!

如果您只想要仍然可以接受的性能,您希望您的应用尽快在大多数平台上可用,并且您没有时间/资源来并行开发多个应用程序,那么这是一个不错的选择。

如果您已经了解 Web 开发,这也会有所帮助 :) 您仍然可以通过 Cordova 插件轻松使用本机应用程序功能(如相机)。

AngularJS(Ionic、Famo.us)与 ReactJS(Reapp、TouchstoneJS)

Ionic 和 Famo.us 是主要在 AngularJS 之上使用的移动框架

Reapp 和 TouchstoneJS 是 ReactJS 之上的移动框架

这些不是为原生(或 React Native)应用程序制作的,而是为移动网站或 webview 应用程序制作的。选择你想要的,我不知道具体的。移动/webview 应用不需要使用框架,但您可能需要一些实用程序来处理触摸事件,因为 onclick 事件通常不足以提供良好的移动体验。

我不会就 AngularJs 和 ReactJs 争论不休,但我都经历过并且更喜欢 ReactJS(而且我并不孤单)。 ReactJS,如果使用得当,更实用、更优雅、更容易推理。我不认为 AngularJs 允许 elegant hot reloading and time travelling ala Bret Victor,因为它需要 ReactJS 启用的 different architecture

然而 AngularJS 仍然允许构建东西,而且 Famo.us/Ionic 可能比现有的 ReactJS 移动框架更成熟。

后端

我建议您使用 NodeJS,因为它允许您构建同构/通用应用程序,这意味着您可以在客户端/服务器上共享代码,包括 React 组件,这样您就可以在客户端和服务器。这意味着您可以直接提供内容,而不是一个空的 html 页面,以便更快地获得它,更容易为搜索引擎编制索引,并且它也适用于禁用 js 的浏览器。

这很奇怪,因为我什至不喜欢 Javascript(我喜欢 Scala、Haskell 或 Clojure 等语言)。如果是这种情况,您仍然可以探索同构应用的其他选项,例如:

  • 您的大部分后端都使用 X 语言(或微服务?),只有一点 NodeJS 服务用于服务器端渲染。
  • 使用 Nashorn 之类的东西在 JVM 中运行 JS
  • 使用可编译为 Javascript 的后端语言(如 ScalaJS)并且可以在客户端/服务器上运行。

但是最后两个选项仍然有点不成熟。

我的经历

我们是一家小型初创公司(3 名开发人员),没有任何人拥有任何 iOS/Android 原生体验,并且希望快速获得结果。

我们最初有一个复杂的桌面 ReactJS 网站 (SPA)。我们使用 CSS 媒体查询使其具有响应性。我们添加了自定义触摸事件处理程序以获得更好的移动体验。所以最后我们有了一个支持移动/平板/桌面的网站。

我们将这个完全相同的应用程序打包到 Cordova 中,因此现在它也可以在应用程序商店中使用。它工作得很好,表演也很可接受。 您可以期待与您的移动网站/cordova 应用程序相同的性能(对于 Android,请查看Crosswalk project

我们最终得到了一个 HTML/JS/CSS ReactJS 响应式 SPA 来维护(这些 SPA 仍然很辛苦!)。

我肯定会再次做出同样的选择,即使将来如果我们的团队发展壮大,我们可能会使用 React Native。


Edit 2016:至于现在,如果我要选择使用什么,我会使用 Redux,并在桌面和移动网站上使用 ReactJS,在移动原生上使用 ReactNative。 Redux 非常好,即使不是所有代码都可以在移动应用程序之间共享,Facebook 报告说most of it 可以轻松实现。请注意,明确区分展示组件和容器组件非常重要,这样您就可以在所有应用程序中重用容器组件,并且只提供自定义展示组件。

还要注意,可以在 react 原生应用中添加 webview,因此可以逐步将移动 web 应用迁移到原生应用(例如,可以先尝试迁移导航菜单和总体布局)。编辑:也很有趣,Ace 项目旨在在 Cordova 应用程序中添加一些原生布局。

edit 2017:对于所有移动应用程序开发人员,我们将明确推荐尝试 Expo(React Native)。您无需了解任何原生应用程序即可获得 Cordova 的开发人员速度。如果你已经了解一点 React,你可以在 1 分钟内开始。

另外推荐使用 GraphQL 和 Apollo,虽然需要更多的时间来学习,但是对于长期的项目维护来说是非常好的选择。

【讨论】:

  • 您没有真正指出的一件事是“到处测试”(对于这两个选项)。 CSS 在不同的移动平台上的解释略有不同。
  • @EdBallot 如果您查看 Crosswalk 项目(目前它仅适用于 Android),这允许在 Android APK 中嵌入 Chromium 浏览器,因此无论目标 Android SDK:对于给定版本的应用,您可以期望所有 Android 设备上的浏览器行为相同。
  • 非常完整的答案,我的头脑开始变得更清晰了!不知道试金石,但它看起来很有前途,我一定会参与其中。我认为 React / Node 和 Touchstone 是我最终会得到的堆栈,它建立在 Cordova 之上的事实令人放心。非常感谢!
  • 加一:对于同构的前后...您的帖子可能会让我重新考虑服务器端架构。 !
  • expo.io 与 phonegap 有何不同?
【解决方案2】:

2019 年现在有几种方法!

1) 混合应用方法
输出:iOS/Android 应用、PWA(移动、桌面网站)、使用电子的桌面应用
框架:Ionic 4 Framework(与Angular/React/Vuecapacitor(Cordova的继任者)、stencil(UI工具包)一起使用)
代码库:98% 的代码共享,因此更易于维护。开发时间更短。
技术:HTML、CSS、JS..(可扩展为 react、angular、vue)
缺点:由于 webview 包装器方法,移动应用程序的用户体验不佳。较大的应用程序大小。


2) 跨平台原生应用(通用应用)
已经做出了一些努力来构建可以为原生 android/ios 应用程序和 Web 应用程序使用单一代码库的库!
输出:原生 Android 应用、原生 iOS 应用、PWA(移动、桌面网站)
框架:
1) react-native-web(最受欢迎)
2) ReactXP 微软
3)Nativescript+Angular,官方教程herehere
代码库:80% 代码共享。维护起来有点复杂,因为平台的某些部分代码会有所不同。 优点:代码被编译为本机二进制文件,因此应用程序的性能更好。较小的应用程序大小。 缺点:开发需要更多时间。应用和 PWA 需要许多检查和条件。


3) 应用程序和 PWA 的独立代码库
使用
构建 iOS、Android 应用程序 1) React Native 来自 fb
2) 谷歌Flutter

使用
React/Vue/Angular 构建 PWA(移动、桌面站点)。

代码库:单独的代码库,但如果通过 REST API 使用,服务器端代码可能相同。
优点:这些移动应用比离子混合移动应用具有更好的性能。
缺点:单独的代码库很难维护。

猜你喜欢
  • 1970-01-01
  • 2012-03-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-03-13
  • 2020-06-01
  • 2011-11-11
  • 1970-01-01
相关资源
最近更新 更多