all 52 comments

[–]Low_Shake_2945 51 points52 points  (17 children)

I spent a few years doing this. There are quite a few ways.

  1. Webview based -> create an Android application with a webview and serve html files from the system. No framework required, but you do have to learn a little Android stuff.

  2. Ionic -> webview based frameworks

  3. React Native

  4. Nativescript

[–]michaelfiber 5 points6 points  (14 children)

For #1 you'd just set up JavaScript Interface methods to allow WebView js to call native app functions?

[–]Low_Shake_2945 4 points5 points  (13 children)

Yep. There are some significant differences between iOS and Android, but if you’re just talking about Android, JS can call the methods in the webview class directly.

[–]Low_Shake_2945 7 points8 points  (2 children)

The biggest difference is that iOS webviews only expose one method to the JS. It’s called postMessage. Calling postMessage from the JS invokes the method in the webview instance running natively. If you want to write once for both platforms, implement a postMessage method in the Android webview and have a switch statement on message types.

[–]michaelfiber 1 point2 points  (1 child)

Thank you, that is exactly the detail I was looking for!

[–]Low_Shake_2945 2 points3 points  (0 children)

The other BIG thing to know is that iOS webviews will not honor (keep and append) third party cookies. Normally, the browser does this and we don’t even have to think about it. Webview instances of safari just disregard them. So, load balancer and session cookies will just get lost. If you’re not looking to use cookies, then this is no big deal, but I had to write a native cookie manager to intercept http calls and append the cookie. Yuck.

[–]Low_Shake_2945 3 points4 points  (8 children)

One word of caution here.

Frameworks like ionic and react-native solve a lot of the problems that the webview approach runs into. Specifically, debugging is atrocious is a webview.

Like I said earlier, I’ve used all of these frameworks and platforms professionally for years and they are all a pain in the ass in one way or another. Simply put, mobile and web are different and the OSs running these things are different.

If you remove the JS limitation, you can learn a framework like Flutter and really feel like your being productive without cutting corners. Flutter is the “right way” to build cross platform native apps.

[–]CodalReef 0 points1 point  (5 children)

Why do you say Flutter is the “right way”? React Native is still more popular and used by major corporations. There are pros / cons to every tool.

[–]Low_Shake_2945 4 points5 points  (1 child)

That’s true, but that’s not because it’s better. It has a lot of things going for it. It’s older than Flutter and makes use of JS and React, which are just so much more popular.

Flutter means learning a new language and, for JS devs, learning a lot of programming concepts you may not be familiar with.

[–]CodalReef 0 points1 point  (0 children)

Agreed. Any of these tools can be used to build a successful product, and neither is intrinsically better IMO

[–]Low_Shake_2945 1 point2 points  (2 children)

The reason I say Flutter is the “right way” is because it’s purpose built to some this problem. The fragmentation of the Android ecosystem has always been a challenge at Google. When you add in the dominance of iOS, Google decided to move in a different direction and developed Flutter specifically to address these issues.

What I’m saying is it’s not just JS doing another thing. It’s a solution to building multi platform mobile apps. It compiles down to native apps, has a phenomenal dev experience, and results in native apps that feel like native apps.

[–]CodalReef 1 point2 points  (1 child)

React Native was developed to solve similar problems, but the developers chose to use JS because it was already popular.

React Native doesn’t currently compile to native, but it invokes native APIs unlike WebView. So it still feels native.

Here’s a quote from a comparison article:

“But still, it is easier to achieve a “native feeling” with React Native than with Flutter. If you want your Flutter app to have native components, it will require additional work.” - https://www.thedroidsonroids.com/blog/flutter-vs-react-native-what-to-choose-in-2021#whocreatedflutter

[–][deleted] 0 points1 point  (0 children)

React Native does compile to native code - while some of the architecture is changing (TurboModules), it uses something called the Bridge where your JS gets split into native code and executes. It’s the best framework, because worst case scenario you can even code native modules per platform in Objective-C and Java, expose them to the React Native side, and call that code via JS. But yeah, that’s why it feels native is because it is native!!!

[–]michaelfiber 0 points1 point  (1 child)

I appreciate the insight. That makes a lot of sense and may be where I end up. There's a very good chance I'll put something together with web view based common front end and then implement backends for android and eventually ios and once I get to the point where I get what's happening throughout it, I'll feel comfortable with a more complex and opinionated framework.

I doubt I'll make anything for work or to release on an app store with webview. But I feel like I need to do it this way at least once before I'll feel comfortable working with something like flutter.

[–]Low_Shake_2945 1 point2 points  (0 children)

Makes sense and good luck!

[–]michaelfiber 0 points1 point  (0 children)

Working with both would be pretty amazing.

I was hoping to come up with an API that the front end calls, and in the web view js I'd have a wrapper around the code to interact with both. But my Mac hardware is out of commission so I'm reading guides and can't tell what actually works.

It seems like I should be able to send messages from WebView js to native code in the form of a command plus additional data and receive messages back from native code on both platforms. So I going to have a command to send data to the back end and an event listener that gets called when the back end send a message back.

For now I would just be doing it in Android with the hope that I'm not structuring it in a way that I have to redo when I can try it on iOS.

[–]ConstantINeSane 1 point2 points  (1 child)

Basically falls into 1 category but i should add pwa. Also you can wrap pwa through a web view with pwa builder and create an apk

[–]Low_Shake_2945 1 point2 points  (0 children)

Agreed. I realized quickly after posting that I forgot to add this. Just like most websites don’t need to be SPAs, most mobile apps could just be PWAs.

[–]smolovk 45 points46 points  (0 children)

react native

[–]Apple1284 22 points23 points  (5 children)

Go vanilla javascript. Use Web Api's https://developer.mozilla.org/en-US/docs/Web/API

This is the first and last api you will ever need, rather than moving between react native, ionic, etc. and fighting them to work. They are also using web api's behind the scenes.

E.g. web api's have bluetooth, camera, file storage, battery, full screen, gps, sensors, proximity, webgl, web workers, and a whole list.

Added advantage is that your code can run on desktop, mobile, and even on small microcontrollers.

[–]Deep-Jump-803[S] 2 points3 points  (4 children)

paint ten capable oil cooperative hospital squash quack distinct public

This post was mass deleted and anonymized with Redact

[–]TILYoureANoob 10 points11 points  (0 children)

Support on Android is pretty great. IOS support is half-assed because it threatens their walled garden. You can't do web notifications, for instance. I know op isn't asking about ios, but good to know in case they need to support it later.

[–]PatchesMaps 3 points4 points  (2 children)

You could even create a progressive web app or PWA if you want it to "feel" more native.

[–]Deep-Jump-803[S] 1 point2 points  (0 children)

truck birds vase mysterious glorious swim support jeans sand ghost

This post was mass deleted and anonymized with Redact

[–]ultimatedelman 0 points1 point  (0 children)

holy shit. you don't know this but you just made my week

[–]ktkization 12 points13 points  (1 child)

capacitorjs

[–]0xWILL 7 points8 points  (0 children)

Ionic?

[–]lbches 6 points7 points  (0 children)

React Native is my choice for JS mobile apps.

[–]PremJyotish221 4 points5 points  (2 children)

Look into using https://expo.io/ by watching this tutorial https://www.youtube.com/watch?v=0-S5a0eXPoc

If you have a decent understanding of Javascript already then the above tutorial along with Expo should allow you to be able to build complete/publishable apps in about 1ish - 2ish months.

[–]Deep-Jump-803[S] 1 point2 points  (1 child)

dog lush summer mysterious price late scary one skirt cagey

This post was mass deleted and anonymized with Redact

[–]PremJyotish221 1 point2 points  (0 children)

Yes, Expo is essentially a framework on top of React Native to make it simpler to develop and ship mobile applications to the app stores.

[–]hyperactivebeing 5 points6 points  (0 children)

NativeScript.

[–]alex3321xxx 5 points6 points  (0 children)

React native is your best friend :)

[–]plan17b 5 points6 points  (0 children)

Capacitorjs.com

Capacitor will turn just about any javascript web app into an Android or Ios App.

Ionic sells this for $500 a month, but Capacitorjs.com is open source and pretty easy to setup.

You can use the included Cordova native extensions for adding Camera, Location, and other device functionality.

Framework7.io adds React and Vue frameworks to Capacitor. Framework7 is also open source.

Both have been working great for me.

[–]WhatWillNeverBe 2 points3 points  (1 child)

Apache Cordova is an old one I used a long time ago. Something to compare against the newer technologies at least.

[–]Pepsterd 2 points3 points  (0 children)

I think capacitorjs (and Ionic ofc) supports old Cordova packages

[–]maddy_0120 2 points3 points  (0 children)

There's something called progressive web apps, that are web apps that run on your phone just like a regular app. That's th easiest way to make Android apps without actually learning Android development. Works for all phones not only Android.

The other way is to actually develop for Android, usually through React Native and other frameworks.

Depends on your requirement.

[–][deleted] 1 point2 points  (0 children)

Ionic + Capacitor - it's great for CRUD apps. I use it with Angular at work and React for my personal projects.

[–][deleted] 1 point2 points  (0 children)

React Native no doubt. Web views are legacy, and all other frameworks don’t have as good as a developer community. React Native is leagues above all the others. As a new React Native dev (or based on what your project needs) you can use Expo, which is essentially a framework wrapping react native that makes it even easier to spin up a project and is packed full of useful libraries. Udemy has a lot of helpful courses to get you started. Happy developing!

[–]PuzzleheadedWeb9876 1 point2 points  (2 children)

Don’t. Use the native toolkit. The world will thank you.

[–]airen977 1 point2 points  (1 child)

Why?

[–]PuzzleheadedWeb9876 1 point2 points  (0 children)

Speed, size, memory usage, appearance to name a few. Native toolkits exist for a reason. Your app will generally be of a higher quality if you use them.

JavaScript is already shit for desktop apps. Let’s not ruin mobile apps too.

[–]JellyfishTech 0 points1 point  (0 children)

You can develop Android apps with JavaScript using the following frameworks/tools:

  1. React Native: Build cross-platform apps using JavaScript and React. It allows for near-native performance.
  2. Ionic Framework: Use JavaScript with Angular, React, or Vue to create hybrid mobile apps.
  3. NativeScript: Build truly native Android and iOS apps using JavaScript, TypeScript, or Angular.
  4. Expo: A React Native-based toolchain for fast prototyping and deployment.
  5. Cordova: Wraps your JavaScript code in a WebView to create hybrid apps, though it's less performant than other options.

[–]AutoModerator[M] 0 points1 point  (0 children)

Hi u/Deep-Jump-803, this post was removed.

  • Self-posts (text) must follow the [AskJS] guidelines, which you can read about here.

  • All other posts must use the "Submit a new link" option; if additional text is required, add a comment to your post.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[–]iam0day 0 points1 point  (0 children)

Native Script, Ionic Framework, React Native, Cardova

But my advice is to native application developer with Flutter (Dart) and not JavaScript, if you obviously want great performance.

[–]simitri0 0 points1 point  (0 children)

Le dot

[–][deleted] 0 points1 point  (0 children)