小编典典

为桌面+移动应用程序选择技术堆栈

reactjs

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

想法是在台式机版本上具有完整的功能和游戏,并附带一个精简的本机移动应用程序,以便用户玩游戏并更改某些设置。

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

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

我有多个问题:

  • 您将使用具有服务器端技术的什么?(我正在寻找Node.js,以寻求支持还是反对?
  • Cordova / Ionic / React native和/或其他与我的桌面应用程序有何关系?他们是分开的项目吗?有什么办法可以重用代码块吗?(CSS,JS)?
  • 您将亲自使用上述哪个平台?为什么?

我正在尝试从与上述任何技术合作过的任何人那里收集尽可能多的信息,因此可以随意回答本文的部分内容,以便我可以编译所有内容。

非常感谢您的时间和帮助


阅读 257

收藏
2020-07-22

共1个答案

小编典典

反应本机

学习一次,随处写。

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

由于它是用JS(如React)编写的,因此您仍可以在平台之间共享代码,但是某些代码始终必须不同,因为在render函数中使用的ReactElement
实际上是特定于平台的。因此,基本上,您可以共享所有状态管理逻辑,但必须为目标平台提供自定义渲染功能。

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

目前尚未发布适用于Android的React
Native,但它可能会在2015年8月发布。它是常规本机应用程序的不错替代品,具有一些优点,例如热重载,但它仍然不是一种非常成熟的技术,虽然有点冒险,但是从长远来看非常有前途,并且已经过Facebook和社区的考验。

您也可以看看Facebook的ComponentKit,这就是React
for ObjectiveC的某种方式,但是我认为大多数新的Facebook项目将倾向于使用React Native而不是ComponentKit。

Cordova / WebView应用

写一次,在任何地方运行

Cordova /
Phonegap应用程序不是本机应用程序。它们是WebView应用程序周围的本机外壳。Webview是在本机应用程序中运行的浏览器。这些应用程序打包在本机外壳中,以便像其他本机应用程序一样可供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不允许优雅的热重装和时间旅行,因为Bret
Victor
要求使用ReactJS支持的不同体系结构

但是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项目

我们最终得到了一个HTML / JS / CSS ReactJS响应式SPA来进行维护(仍然要努力工作那些SPA!)。

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


编辑2016年
:到目前为止,如果我要选择使用什么,我将使用Redux,并将ReactJS用于桌面和移动网站,将ReactNative用于移动本机。Redux非常好,即使不是所有代码都可以在移动应用程序之间共享,Facebook也报告说大部分代码都可以轻松实现。请注意,在表示性组件和容器组件之间有一个清晰的分隔是非常重要的,这样您就可以在所有应用程序中重用容器组件,并只提供自定义的表示性组件。

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

edit 2017 :对于所有移动应用程序开发人员,绝对将建议尝试Expo(React
Native)。您无需了解任何本机应用程序即可获得Cordova的开发速度。如果您已经知道一些React,那么您可以在1分钟内开始使用。

还建议将GraphQL与Apollo一起使用,这将花费更多时间,但是对于长期项目维护而言,这是一个很好的选择。

2020-07-22