DEV Community

Pacharapol Withayasakpunt
Pacharapol Withayasakpunt

Posted on

Mobile-enabled development with webdev

Website should be enabled for access beyond mobile's screen size, but may be patched with web server / serverless for capabilities beyond web browser.

I know well, though, that some capabilities will still be disabled in web browser, and some will be disabled in mobile.

What are options? Capacitor / Ionic is obvious, but what about Flutter or Xamarin?

Also, if I use standard webdev + PWA with serverless first, can I add Capacitor later on?

Top comments (4)

Collapse
 
stereoplegic profile image
Mike Bybee • Edited

I gave up on Ionic and the underlying Cordova (replaced by Capacitor) years ago, because doing an entire mobile app in a webview is terrible for performance.

With that said, not long after I adopted React Native on mobile, I stated looking into React Native Web (at that point I already had a React web frontend). I've been building not only Android, iOS, and web with those two, but also Windows, MacOS, and Linux (by adding Electron to the mix, though I'm always looking at lighter alternatives; though they usually don't stick around long enough) from a 90+% shared codebase for a few years now.

As of Expo SDK 37, it's even easier to accomplish (Expo launched web support in SDK 33, but I've only found it or Expo in general to really work with my use cases in the last two releases).

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

doing an entire mobile app in a webview is terrible for performance.

How complex was your app, that performance loss was visible?

UI maybe WebView, but underlying functions can still be native (Swift / Kotlin / NDK)?

That being said, I am actually looking at Quasar.

by adding Electron to the mix

React Native doesn't have Electron support? It seems that there is Proton Native, though.

React Native Web

Nice.

As of Expo SDK 37, it's even easier to accomplish (Expo launched web support in SDK 33, but I've only found it or Expo in general to really work with my use cases in the last two releases).

Now, I find it, but I do want a web desktop friendly theme, like Sidebar in Ionic defaults.

Collapse
 
stereoplegic profile image
Mike Bybee • Edited

How complex was your app, that performance loss was visible?

WebView performance has improved over the years, but the difference between even remotely complex UIs (loaded completely via HTML in a WebView, vs. mapped to native primitives as in React Native and NativeScript) is still noticable.

UI maybe WebView, but underlying functions can still be native (Swift / Kotlin / NDK)?

If you get too heavy into this, you're deviating from the ability to build a web app from the same codebase (and while Swift can build MacOS apps, you probably don't want to lean on anything JVM-related for desktop apps on Linux and Windows).

That being said, I am actually looking at Quasar.

I see you crossed it out. I'm not a Vue guy anymore, but Quasar looks like a decent framework with one key drawback: It still seems to be using Cordova for mobile, meaning you're still just putting a web app in a WebView. I'd probably lean Ionic Vue if you really want to go that route, because Ionic is actually maintaining Capacitor.

React Native doesn't have Electron support? It seems that there is Proton Native, though.

You can build React Native apps on Electron, through React Native Web. I'm keeping my eye on Proton Native, NodeGui, and other alternatives to Electron (though primarily those two because they use native desktop UI primitives, much like React Native uses native mobile primitives), but they usually don't stick around long enough to match Electron in stability, let alone features.

Collapse
 
karandpr profile image
Karan Gandhi

Any Mobile specific development is separate from the web development. You have Ionic - Capacitor , Flutter , Xamarin & React Native as options. Each platform requires skillset for specific platform. Theoretically you can develop web + mobile on Ionic. Practically each Ionic upgrade is a mess.