Gui*_*e M 20 cordova reactjs ionic-framework
我目前正在浏览网页以获取信息,目的是构建经典棋盘游戏的Web和移动版本.
我们的想法是在桌面版本上拥有完整的功能和游戏,以及一个简单的原生移动应用程序,它将允许用户玩游戏并更改一些设置.
现在,我习惯于为桌面构建Web应用程序,但我从未接触过像Cordova/Ionic这样的东西.
我还想补充一点,我确实打算有一天将应用程序投入生产.
我有几个问题:
我正在尝试从任何使用过上述任何技术的人那里收集尽可能多的信息,所以请随意回答这篇文章的部分内容,以便我可以编译所有内容.
非常感谢您的时间和帮助
Seb*_*ber 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应用程序!
如果您只想要仍然非常接受的性能,这是一个很好的选择,您希望您的应用程序尽快在大多数平台上可用,并且您没有时间/资源来并行开发多个应用程序.
如果您已经了解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允许优雅的热重新加载和时间旅行ala Bret Victor,因为它需要一个与 ReactJS 不同的架构.
然而,AngularJS仍然允许构建东西,并且Famo.us/Ionic可能比现有的ReactJS移动框架更成熟.
后端
我建议您使用NodeJS,因为它允许您构建Isomorphic/Universal应用程序,这意味着您可以在客户端/服务器上共享代码,包括React组件,以便您可以在客户端和服务器上呈现这两者.这意味着您可以直接提供内容,而不是空的html页面,以便更快地获得内容,更容易为搜索引擎编制索引,它也适用于禁用js的浏览器.
这很奇怪,因为我甚至不喜欢Javascript(我喜欢像Scala,Haskell或Clojure这样的语言).如果是这种情况,您仍然可以探索同构应用的其他选项,例如:
然而,最后两个选项仍然有点不成熟.
我的经验
我们是一个小型创业公司(3个开发者),没有任何人拥有任何iOS/Android原生经验,并且想要快速获得结果.
我们最初有一个复杂的桌面ReactJS网站(SPA).我们使用CSS mediaqueries响应它.我们添加了自定义触摸事件处理程序,以获得更好的移 所以最后我们有一个支持移动/平板电脑/台式机的网站.
我们采用了这个完全相同的应用程序并将其打包在Cordova中,现在它也可以在应用程序商店中使用.它效果很好,性能非常好.你可以期待与你的移动网站/ cordova应用程序相同的表现(对于Android检查Crosswalk项目)
我们最终得到了一个HTML/JS/CSS ReactJS响应SPA来维护(仍然很努力的那些SPA!).
我将最终再次做出相同的选择,即使将来如果我们的团队成长,我们也可以使用React Native.
编辑2016:至于现在,如果我选择使用什么,我将使用Redux,并将ReactJS用于桌面和移动网站,将ReactNative用于移动本机.Redux非常好,即使并非所有代码都可以在移动应用程序之间共享,Facebook 也会报告大部分代码都很容易.请注意,在演示文稿和容器组件之间进行明确分离非常重要,这样您就可以在所有应用程序中重用容器组件,并提供自定义的演示组件.
另请注意,可以在react本机应用程序中添加webview,因此可以逐步将移动Web应用程序迁移到本机应用程序(例如,可以首先尝试迁移导航菜单和常规布局).编辑:也很有趣,Ace项目旨在在Cordova应用程序中添加一些原生布局.
编辑2017:对于所有移动应用程序开发人员将明确推荐尝试Expo(React Native).您可以获得Cordova的开发人员速度,而无需了解有关本机应用程序的任何信息.如果你已经知道一点React,你可以在1分钟内开始.
还建议使用GraphQL和Apollo,它需要更多的时间来学习,但它是长期项目维护的非常好的选择.
2019 年现在有几种方法！
1) 混合应用程序方法
输出：iOS/Android 应用程序、PWA（移动、桌面站点）、使用 Electron 的桌面应用程序
框架：Ionic 4 Framework（与Angular / React / Vue和电容器（Cordova 的后继者）、stencil（UI 工具包）一起使用)
代码库：98% 代码共享，因此更易于维护。开发时间更少。
技术：HTML、CSS、JS ..（可以扩展为 React、Angular、Vue）
缺点：由于 WebView 包装方法，移动应用程序的用户体验不佳。应用程序尺寸大。
2）跨平台本机应用程序 （通用应用程序）
已经做出了一些努力来构建可以使用本机 android/ios 应用程序和 Web 应用程序的单一代码库的库！
输出：本机 Android 应用程序、本机 iOS 应用程序、PWA（移动、桌面站点）
框架：
1）react-native-web（最流行）
2）ReactXP by Microsoft
3）Nativescript + Angular，官方教程此处和此处
代码库：80%代码共享。维护起来有点复杂，因为代码的某些部分对于平台来说会有所不同。优点：代码被编译为本机二进制文件，因此应用程序的性能更好。较小的应用程序大小。缺点：需要更多的开发时间。应用程序和 PWA 所需的许多检查和条件。
3) 应用程序和 PWA 的独立代码库使用
1) React Native by fb
2) Flutter by Google
构建 iOS、Android 应用程序
使用React / Vue / Angular构建 PWA（移动、桌面站点）。
代码库：单独的代码库，但如果通过 REST API 使用，服务器端代码可能是相同的。
优点：这些移动应用程序比离子混合移动应用程序具有更好的性能。
缺点：独立的代码库更难维护。
| 归档时间： |
|
| 查看次数： |
3976 次 |
| 最近记录： |