How do build a single app that works on Web and Mobile?

I'm not sure about moving react into reactive native, but you always have the option to use something like Cordova.

https://cordova.apache.org/

This lets you take your Javascript code and wrap it in a mobile view that can be deployed to native devices. You could easily write your code in React, then wrap it for mobile.

Pardon me if my answer is too simplistic, but maybe all you need is to use Responsive Web Design techniques.

Google has a great intro to the topic:

https://developers.google.com/web/fundamentals/design-and-ux/responsive/

I have experience with this and I believe most people should be doing this nowadays.

These are the two best options for this:

• react-native-web (https://github.com/necolas/react-native-web)

• reactxp (https://github.com/Microsoft/reactxp)

Both options allow you to write React Native mobile apps and use the same code for the Web version. For example, you write <View /> and it will render <div /> on the browser.

You obviously can only share JavaScript/TypeScript code between mobile/web/server, not Java/Kotlin/Swift/Objective-C. You may still need to do a couple tweaks per platform, but that's totally ok.

Twitter is a great example of big company doing this. If you check https://mobile.twitter.com, this was made using react-native-web. It will soon be the default twitter for desktop (!), which is huge and show the potential of this approach. (https://twitter.com/brunolemos/status/1037813126530576384?s=21)

React Native + react-native-web + TypeScript + Node.js (+ Electron?) is the perfect stack for me nowadays.

I recommend running away from Cordova for performance reasons on mobile. React Native provides a better experience, it feels like a common native app.

To build a cross-platform React project, React Native Web seems to currently be the best choice, but it's not perfect. You may need to combine it with Cordova to distribute in the app stores, and perhaps used a cross-platform UI framework, for example Material https://github.com/mui-org/material-ui

An alternative to React Native Web is Turbolinks https://github.com/turbolinks/turbolinks, which is more lightweight than React and you may still need to combine it with Cordova.

try reactxp from ms.

You can also do Rails + Turbolinks and the Turbolinks native wrappers. This can be relatively quick but it has its pain points for sure.

Ask yourself what you actually want to get out of this side project? Go with the answer that maximises for that outcome. Whether that be something that works even if it's nasty, or something that's ultra modern and beautifully coded because the aim was to learn the latest and greatest.

Point blank it's actually probably just better to have two code bases and develop the thing twice.

Also perhaps a case of premature optimization. You think you want this product. You think you want there features. You think you want these interfaces. The reality may actually be quite different. Build one the one feature you really want on one interface then start using it. Iterate from there. If you actually like using it, you'll keep developing it. If you keep developing it, eventually you will wind up with the whole thing. If you don't, then tech stack choices will never have mattered in the first place.

I dunno. Implement it in all the different suggestions then open source it as a comparison case study of cross platform development.

Why not build an offline-first mobile-first PWA?

What you're asking is how can you leverage one code base to reach both app stores and the web.

There are a number of hybrid platforms that allow this. Some of these will claim to be native, but don't believe the hype : native is only swift/ios or java/koitlin. All hybrid approaches will never be as fast native code compiled to machine code in the native platform.

Some good answers have been given. A systematic answer is:

Your options are:

1.) Ionic.

You build your app in Angular for the web. Ionic provides a number of UI components that make porting the web app over to mobile trivial. Ionic is basically a thin layer that sits on top of Angular. You also get ionic plugins which enables you to interact with the device, such as grabbing geolocation or camera. Ionic has usually relied on the cordova library for access to native sdks through Js, though the team have started their own project called capacitor in the quest for better performance.

Your app is just javascript (technically typescript) with components in html/css. The app is rendered inside in a native webview. It sound crappy, but with the latest versions and beautiful ionic components - it's amazing what can be achieved.

Ionic isn't sexy, especially with the hype surrounding some of its competitors. Yet there are lots of people quietly being very productive with this, and the latest version 4 is incredibly powerful.

Ionic is the most painless way to get your app live on both app stores. The platform is very mature and stable, literally an experienced front end developer can spend a day or a few weeks and have their app live on both app stores - I can give you examples.

Examples of apps built with ionic include the workout app sworkit, which has tens of thousands of paying users, the company was acquires for several million and still uses ionic.

2.) React Native

React is different to ionic, you use react components though these are rendered to native widgets. Your business logic is in javascript and is passed to the device through a js/native bridge.

The success of React for the web platform has generated substantial hype for react native. In practice, React Native is pre-version 1. Each new version sees many breaking changes.

It is currently a nightmare to build and maintain a mobile app in react native. Basic things like navigation and android widgets/views are incomplete and require workarounds. If you use react, you will be able to use your existing business logic and much of your component code.

Most teams that have success with React are advanced developers, with knowledge of the native SDKs. For all but the most basic of apps, you will need to debug in the native environment.

The react community is very big, so there are lots of resources for learning react native. Though due to rapid development, many tutorials are rapidly out of date. Again, updates and debugging are a huge hassle for react-native developers.

Apps fully written in react native include the Discovery VR app and the Facebook add manager.

3.) Nativescript

This is a platform similar to react, in that your component code, written in XML is converted to native widgets. This conversion process is smoother than react native, because the platform is maturer.

Your business logic can be written in vanilla JS, angular or Vue. As with ionic, there is first class support for Angular - which is what most people will use.

There are some serious apps built with nativescript. This is the however the least popular hybrid framework, so resources are very sparse. It is the framework with the smallest community, and the smallest amount of example code/projects.

App built using Nativescript, include Puma's store app, which stores use for backend ordering of puma branded sneakers.

Which to choose?

This depends on your skill-set, experience of native platforms, and objectives. A master programmer, will get good results with any of these.

Ionic is the best for beginners, no doubt - it's just web technologies.

React-native and Nativescript will both require native debugging at some stage. React-native is quite an immature platform with constantly breaking changes: time gained from code sharing is often lost debugging and fixing changing/breaking dependencies.

It's useful to remember Joel Spolsky's famous dictum about leaky abstraction layers. No technology will every be able to completely obliterate the middle layer it seeks to abstract - in this case the android and ios SDK. For example, you can get quite far in SQLalchemy or objectiverecord: without understanding SQL. Yet there will come a stage, when you need to know the ins and out of SQL optimization to get your app running smoothly. The biggest savings come for teams that already know ios/objective c - so they can save a lot of time, yet still go low level when this is needed - indeed, these are the teams that tend to rave about react-native.

As with any technology, differentiate between the sales pitch and the actual on the ground reality. There was a good course on Lynda, introducing you to these different approaches - though this is a little out of date.

People will mention flutter, this involves a new language called Dart. Flutter is a very immature, pre-beta framework. It is promising, because your app is rendered through OpenGL avoiding issues with native widgets. The flutter team is also building an ecoystem around the platform, as opposed to the light approach of react-native where sole community developers maintain many essential dependencies. The flutter team will also learn from the mistakes of the react-native project, so this is something to watch out for in a year or two - but not quite there yet - though fanboys will have you thinking this is a realistic business proposition. I know of no businesses that have deployed apps in flutter.

I have never used it, but I am pretty sure that https://flutter.io can be used for web apps and mobile apps.

That's exactly what Basecamp is doing and they have many articles about it on their blog "Signal vs Noise". They use Turbolinks and Turbolinks wrappers for Android/iOS so they can deliver some features natively to feel good, but most of the actual app is the "shared" web app.

Hey, dont know about the specific idea, but check out frontapp.com, they are developing an email platform for teams.

You might get some ideas from that!

I haven't personally used it, but you can use react-native-web to run React Native components on the web. I'd also like to mention that Ionic is not mobile only, and can be deployed very easily as a progressive web app.

If you wan't an "native" experience, the Ionic framework is pretty flexible. https://ionicframework.com/