为桌面+移动应用程序选择技术堆栈 [英] Choosing a technology stack for Desktop + Mobile application

问题描述

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

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

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

我还要补充一点，我确实打算有一天将应用程序投入生产.

我有多个问题:

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

我正在尝试从使用上述任何技术的任何人那里收集尽可能多的信息，因此，请随意回答本文的一部分内容，以便我可以编译所有内容.

非常感谢您的时间和帮助

解决方案

反应原生

学习一次，在任何地方写.

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

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

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

当前尚未发布适用于Android的React Native，但它可能会在2015年8月发布.它是常规本机应用程序的不错替代品，并提供了诸如热重载等一些优势，但它仍然不是一项非常成熟的技术，并且有点冒险，但从长远来看非常有前途，并且已经过Facebook和社区的实战测试.

您也可以看看同样来自Facebook的 ComponentKit ，这也是对ObjectiveC的一种反应，但我认为大多数新的Facebook项目将倾向于在ComponentKit上使用React Native.

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应用程序.选择您想要的那个，我一点也不知道.移动/网络视图应用程序不需要使用框架，但是您可能需要一些实用程序来处理触摸事件，因为onclick事件通常不足以提供良好的移动体验.

我不会争论AngularJs和ReactJs，但是我既有经验，也喜欢很多ReactJS(而且我并不孤单).如果使用正确的方法，ReactJS会更加实用，优雅并且易于推理.我认为AngularJs不允许优雅的热装和时光旅行ala 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也报告 Ace 项目旨在在Cordova应用程序内添加一些本机布局.

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

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

I am currently browsing the web for information with the goal of building a Web and Mobile version of a classic board game.

The idea is to have the full features and game on the Desktop version, and a stripped down, native mobile app to go with it, that will allow users to play the game and change some settings.

Now I am used to building web application for desktop but I've never touched anything like Cordova / Ionic yet.

I also would like to add that I do have the intention of putting the application in production someday.

I have multiple questions:

• What would you use has a server side technology ? (I'm looking towards Node.js, in advice for or against it ?
• How do Cordova / Ionic / React native and / or the others will relate to my desktop app ? Are they separated projects ? Any way to reuse chunks of code ? (CSS, JS) ?
• Which of those platforms above would you personally use and why ?

I'm trying to gather as much information as possible from anyone that has worked with any of the above mentioned technologies,so feel free to only answer parts of this post so that I can compile everything.

Thanks a lot for your time and help

解决方案

React Native

learn once, write anywhere.

This is really native apps, so they generally have better performance than non-native apps. To build React Native apps, you still need knowledge of the target platform (Android/iOS) and still need to write one app per platform, but you can use the same app architecture (React/Flux) on both platforms.

As it is written in JS (like React), you can still share code between the platforms, but some code will always have to be different, because the ReactElement you use in your render function are actually platform- specific. So basically you can share all your state management logic, but you will have to provide a custom render function for each platform you target.

This is a good option if you need good/native performances, you have time to learn iOS and Android platforms and maintain 2 different apps in parallel.

Currently React Native for Android is not released but it will probably be in August 2015. It is a good alternative to regular native apps, and offers some advantages like hot reloading, but it's still not a very mature technology and is a bit risky but is very promising in the long term and is battle-tested by Facebook and the community.

You can also take a look at ComponentKit, also from Facebook, that is somehow React for ObjectiveC, but I think the majority of new Facebook projects will tend to use React Native over ComponentKit.

Cordova / WebView apps

write once, run anywhere

Cordova/Phonegap apps are not native apps. They are native shells around WebView apps. A webview is a browser that runs inside a native app. These apps are packaged in a native shell to be made available to Google/Apple app stores like the other native apps.

The advantage is that it is just HTML, JS and CSS. It means that if you already have a mobile website (or a responsive desktop website that handle both desktop and mobile screens), you can easily package it as a Cordova app and make it available through app stores.

So you write once a mobile website, and you get for free an iOS and Android app too!

This is a good option if you just want still very acceptable performances, you want your app to be available on most platforms as soon as possible and you don't have time/ressources to develop multiple applications in parallel.

It also helps if you already know web development :) And you can still easily use native app features (like camera) with Cordova plugins.

AngularJS (Ionic, Famo.us) vs ReactJS (Reapp, TouchstoneJS)

Ionic and Famo.us are mobile frameworks mostly used on top of AngularJS

Reapp and TouchstoneJS are mobile frameworks on top of ReactJS

These are not made for native (or React Native) apps, but for mobile websites or webview apps. Choose the one you want, I don't know any particularly. Using a framework is not a requirement for mobile/webview apps but you will probably need some utilies to handle touch events because the onclick event is often not enough for good mobile experience.

I won't go into arguing about AngularJs vs ReactJs, but have experienced both and prefer a lot ReactJS (and I'm not alone). ReactJS, when used the right way, is more functional, elegant, and easy to reason about. I don't think AngularJs permits elegant hot reloading and time travelling ala Bret Victor because it requires a different architecture that ReactJS enables.

However AngularJS still permit to build stuff, and Famo.us/Ionic are probably more mature than existing ReactJS mobile frameworks.

Backend

I would advice you to use NodeJS because it permits you to build Isomorphic/Universal applications, which means you can share code on both the client/server, including the React components, so that you can render both on the client and the server. This means instead of an empty html page, you can directly serve the content so that it is available faster, it is easier to index for search engines and it also works for js-disabled browsers.

This is weird because I don't even like Javascript (I like languages like Scala, Haskell or Clojure). If this is your case, you can still explore other options for isomorphic apps, like:

• Having most of your backend in language X (or microservices?), and just a little NodeJS service for the server-side rendering.
• Using something like Nashorn to run JS inside the JVM
• Using a backend language that compiles to Javascript (like ScalaJS) and can run on both client/server.

However the last 2 options are still a bit immature.

My experience

We are a small startup (3 devs) with no one having any iOS/Android native experience, and wanted a result fast.

We had initially a complex desktop ReactJS website (SPA). We made it responsive with CSS mediaqueries. We added custom touch event handlers for better mobile experience. So at the end we had a website that support well mobile/tablets/desktop.

We took this exact same app and packaged it in Cordova, so that now it's also available in app stores. It works great and the performances are very acceptable. You can expect the same performances with your mobile website/cordova app (for Android check the Crosswalk project)

We end up with a single HTML/JS/CSS ReactJS responsive SPA to maintain (still hard work those SPA's!).

I will definitively make the same choices again, even if in the future we might use React Native if our team grows.

---

Edit 2016: as for now if I were to choose what to use, I'll use Redux, and use ReactJS for desktop and mobile websites, and ReactNative for mobile native. Redux is very nice, and even if not all code can be shared between mobile apps, Facebook reports that most of it can be easily. Note it's very important to have a clear separation between presentational and container components, so that you can reuse your container components in all your apps and just provide custom presentational components.

Also note that it's possible to add webviews inside a react native app, so it's possible to migrate a mobile webapp to a native app progressively (for example one could first try to migrate the navigation menus and general layout). Edit: also interesting, the Ace project aims to add some native layout inside a Cordova app.

edit 2017: for all mobile app devs is will definitively recommend trying Expo (React Native). You get the developer velocity of Cordova without having to know anything about native apps. If you already know a bit of React you can get started in 1min.

Also recommend using GraphQL with Apollo, it will take a but more time to learn but it's very good choice for long term project maintenance.

这篇关于为桌面+移动应用程序选择技术堆栈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！