为Desktop + Mobile应用程序选择技术堆栈

时间:2015-07-22 19:16:48

标签: cordova reactjs ionic-framework

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

我们的想法是在桌面版本上拥有完整的功能和游戏,以及一个精简的本机移动应用程序,它将允许用户玩游戏并更改一些设置。

现在我习惯于为桌面构建Web应用程序,但我从来没有碰过像Cordova / Ionic这样的东西。

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

我有多个问题:

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

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

非常感谢你的时间和帮助

2 个答案:

答案 0 :(得分:36)

反应原生

  

学习一次,随时随地写作。

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

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

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

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

你也可以看一下同样来自Facebook的ComponentKit,它反正是针对ObjectiveC的反应,但我认为大多数新的Facebook项目都倾向于使用React Native而不是ComponentKit。

Cordova / WebView应用

  

写一次,随处运行

Cordova / Phonegap应用不是原生应用。它们是WebView应用程序的本机shell。 webview是在本机应用程序内运行的浏览器。这些应用程序打包在本机shell中,可供Google / Apple应用商店(如其他原生应用)使用。

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

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

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

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

AngularJS(Ionic,Famo.us)vs 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,因为它需要different architecture ReactJS启用。

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

<强>后端

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

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

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

然而,最后两个选项仍然有点不成熟。

我的经历

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

我们最初有一个复杂的桌面ReactJS网站(SPA)。我们使用CSS mediaqueries响应它。我们添加了自定义触摸事件处理程序,以获得更好的移所以最后我们有一个支持移动/平板电脑/台式机的网站。

我们使用了这个完全相同的应用程序并将其打包在Cordova中,现在它也可以在应用程序商店中使用。它效果很好,性能非常好。 您可以通过移动网站/ cordova应用程序获得相同的表现(对于Android,请查看Crosswalk project

我们最终得到了一个HTML / JS / CSS ReactJS响应SPA来维护(仍然很努力的那些SPA!)。

我将再次明确地做出相同的选择,即使将来我们可能会使用React Native,如果我们的团队成长。

编辑2016 :至于现在,如果我选择使用什么,我将使用Redux,并将ReactJS用于桌面和移动网站,将ReactNative用于移动原生。 Redux非常好,即使并非所有代码都可以在移动应用程序之间共享,Facebook也可以轻松报告most of it。请注意,在演示文稿和容器组件之间进行明确分离非常重要,这样您就可以在所有应用程序中重用容器组件,并提供自定义的演示组件。

另请注意,可以在react本机应用中添加webview,因此可以逐步将移动Web应用程序迁移到本机应用程序(例如,可以先尝试迁移导航菜单)和总体布局)。编辑:同样有趣的是,Ace项目旨在在Cordova应用程序中添加一些原生布局。

编辑2017 :对于所有移动应用开发者来说,最终会推荐尝试使用Expo(React Native)。您可以获得Cordova的开发人员速度,而无需了解有关本机应用程序的任何信息。如果你已经知道一点React,你可以在1分钟内开始。

同时建议将GraphQL与Apollo一起使用,需要更多时间学习,但这对于长期项目维护来说是非常好的选择。

答案 1 :(得分:1)

2019年现在有几种方法!

1)混合应用方法
输出:iOS / Android应用程序,PWA(移动,桌面站点),使用电子的桌面应用程序
框架:Ionic 4 Framework(与Angular / React / Vuecapacitor(Cordova的前身),stencil(UI工具包)一起使用) br /> 代码库:98%的代码共享,因此更易于维护。减少开发时间。
技术:HTML,CSS,JS ..(可以扩展为反应,角度,Vue)
缺点:由于使用Webview包装器方法,因此无法提供移动应用程序的用户体验。大型应用。


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


3)应用程序和PWA的单独代码库
使用
构建iOS,Android应用 1)fb
React Native 2)Flutter由Google

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

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