Determining best way to create a web app that will also be a native app

Back End Help
#1

So I have a really awesome idea and I will be going through a lot of the free code camps classes and lessons. However, I was hoping to get some more feedback on this application idea that I have. I would like to make it so that it is a web app as well as a native app on Android/iOS/Windows. To give you a generic idea of what I am talking about, take Discord for example. You can log on to their website and chat, react to comments, create new boards, etc. Then you can go to their mobile app and pretty much do the same things (with obvious limitations of course). I would like to do something similar to where I plan on building the web app portion and then I would like to take that and convert it to a native app. The native app will be utilizing functions of the camera and other features like GPS and barcode reader.

I have been told that I shouldn’t try to find an all-in-one solution that I can code in one place and have it easily translated in to code that can be run on each system. So for example, using ReactJS. This you can code a whole website, but as well be able to code the mobile native app and the code will be translated to each operating systems design. However, the appeal to being able to code it all in one language is nice instead of using multiple different languages.

So with that being said, what are you guys and gals opinions on the best way to code a web app that will also have a native app released for it as well? I am honestly torn and am struggling to choose.

Thanks. :slight_smile:

#2

I am no expert by any means and some of this information may not be accurate but I have had some experience with Ionic and React Native.

If you want to develop a native app it costs a lot of time because for the iOS native app you need to learn something like Swift, then for the Android native app you need to learn something like Java, then for the web app you can use something like ReactJS. So you have to code/test/build 3 apps in this scenario.

If you are testing out an idea or prototyping an app I would suggest using an ‘all-in-one’ solution as you put it, unless you are already very proficient in iOS and Android development.

As you know the benefit to all-in-one solutions like Ionic/React Native is that you only have to code one app and that can run on a web browser, iOS, Android, Windows. However these solutions are not native, they are web technologies that are used to build an app with a ‘native-feel’ and as far as I know the performance could never match that of a truly native app built in Swift/Java for iOS/Android. They also have other limitations to how it utilizes the phones functions however I believe you can still use camera, GPS.

I was interviewing for a company that developed mobile and web apps and they said they only build native apps if it was a more complex application that the all-in-one solutions could not handle or if the application was likely to have tens or hundreds of thousands of users. Otherwise they used a framework such as Ionic/React Native/Vue.

I think thats just about all I know mate, hopefully someone else with more experience can chime in

#3

I don’t know about Ionic, but with React Native, it is not just build the site in React (web) and then it just works in React Native. The styling syntax is different and you typically think it terms of a fixed display size instead of a responsive design like for the web, because the amount of screen you have to work with is so much smaller. Also, there are certain event types that just don’t exist on a mobile device (i.e. onClick event).

1 Like
#4

Thank you both for your feedback. I have kind of been coming to the same conclusion. One of the other alternatives is to use an all in one of Xamarin Forms. I know there is the way to code an app for iOS, Android, and Windows all in the Visual Studio interface. However, this involves learning a new language in a way. It is mainly C#, but still have new aspects to it.

Anyways, what are others opinions on this? I am really curious to hear what others have done when at this decision point.

#5

The closest thing to your description is probably Apache Cordova, and by extension Ionic, which utilitize some what of a cheat because really you’re writing web apps, just package and distribute it like a native app. It uses web view and HTML 5 APIs and some native plugins to access native functionality. React Native take it a step further where they do have more component that interface with Native API, so it feels more native and not restricted to web view.

The truth is there really isn’t a solution that allows you to write once and run anywhere, not if you want an optimized experience anyway. Something like React Native or Xamarin help bridge the gap a little bit, and for many, it’s good enough.

This isn’t really solely a technology questions, but more or less a design and use case question. If your app is heavily dependent on the web and not so much native functionality, just a well designed mobile web app or Cordova could do the job for you. If you need the hardware to do a lot of heavy lifting, and you really want to squeeze out the performance, you probably need to implement a native app and implement a “lite” web app separately.

#6

React Native is native. They are native apps written in React. As Randy points out, it’s not a simple cut and paste. There are some differences between React and React Native, but your logic is largely reusable, and you are definitely coding in React and JavaScript, but your JSX looks a little different because you don’t have HTML elements (no browser) and your CSS is a little different (but recognizable), but everything else is pretty much the same (JavaScript, Redux, etc.) If you know React well, then React Native is a pretty easy transition. And it is native, unlike some other solutions which are either run in the mobile device’s browser or are hybrid apps,

#7

Have you thought about PWAs or Progressive Web Applications? Native apps provide the perfect middle ground between mobile-first responsive web apps and native apps, which are designed specifically for mobile device interaction. However, Progressive Web Apps function like native apps through the web. This is also the wave of the future! Native apps will soon give way to progressive web applications.

Read more here: https://www.forbes.com/sites/forbestechcouncil/2018/03/09/why-progressive-web-apps-will-replace-native-mobile-apps/#7a085a1b2112

#8

@blitzkreig , I would definitely be interested in learning about this capability. I have heard of PWA’s, but I haven’t researched much in to them. Any suggestions on where to go to learn development of them?

#9

Google has a lot of stuff on them (because they’re the ones pushing them). They’re basically just web applications with a set of optimisations (often to allow them to work offline) - they aren’t a replacement for native apps, but there often isn’t a need fora native app (mobile users don’t download native apps as much as you might think at all, so a site/webapp is often all that’s needed). As an example, this forum is basically a PWA; I can save the page to my home screen, and thereon in, it works the same as the rest of my apps.

https://developers.google.com/web/progressive-web-apps/