Howto handle a react desktop and a react mobile browser app

help
1

Hello together,
I’ve been working with Meteor for a while now and have a specific question regarding app structure.

I’m currently building a project that should support both desktop and mobile browsers using React. I’d like to detect whether the user is accessing the app from a desktop or a mobile browser and, based on that detection, load the appropriate React app version (desktop or mobile).

Is there any experience or best practice in the community on how to handle this type of client-specific rendering and routing in a Meteor environment?

Any advice or guidance would be greatly appreciated!

2

Hi there,

I use mobile-first design at the moment so I have the same client bundle for both mobile and web. You are right though, a mobile-specific web app would fix some problems, code bloat being one of them.

I think you could do it in 3 ways:

  • one client bundle; mobile-first UI design library
  • one client bundle; and split apps at client level with routing or HTML detection.
    In your index.js you would do something like this:
  const container = document.getElementById('app')
  const root = createRoot(container)
 root.render(
   // your app JSX here
)

Use dynamic imports and load in the root one app or the other based on your device or screen detection.
Note that dynamic imports cannot be CDN-ed, so they always come from your NODE server on the first visit per app version. Dynamic imports take a bit longer to download so your first load experience might be affected. In this case you could load something in your main.html until your app is ready to render.

  • 2 Meteor projects, detect device at proxy server level and direct to the right place.
    If you are a small team, mobile-first might be the best option to navigate fast to beyond an MVP.
1 Like
3

A good way to handle this is to support a responsive layout for a single app, i.e., the app adjusts according to the width of the viewport. The elements of the page will adjust accordingly. That includes hiding/showing features according to the width. An extreme case is to have two implementations of the same feature in the UI, and only one version is displayed according to the width of the viewport.

Another option is to detect if the user is using Android or iOS, and then assign them as “mobile.” This technique fails when using a tablet. Although there are apps wherein the tablet users comprise a very small amount of users, which might be a compromise, you can deal with it, e.g., you sacrifice the experience of 0.1% of your users using a mobile version of the app on a tablet.

A combination of these two techniques covers much of our use cases to only serve a single app with a responsive layout and some targeted feature implementation based on either the width of the viewport or if the user is using a mobile device.

1 Like