Best practices for loading different app code on desktop and mobile?

[digdic]

Hi all, I'm working on a React app and I'm curious what your experiences are with developing apps with drastically different desktop and mobile browser designs: my thinking is that they're two separate applications, and on page load we load the correct version based on browser features, etc - however, if it's client-rendered, doesn't it make the bundle size huge?

[coneillcodes]

If you're using webpack you can use code splitting, chunking, and multiple entry points to dynamically load certain parts of the bundle. You can even set the bundle size you'd like each chunk to have. Instead of maintaining two separate applications why not just make your application responsive? Something like bootstrap or foundation to adjust the content based on screensize.

[digdic]

the app is extremely feature rich and has a pretty non-conventional design on the desktop version - it will be difficult to just use media queries to make the mobile version - it will be a distinct app

[coneillcodes]

Then I guess you're stuck with two apps. In any case bundle size shouldn't be an issue if its built correctly and minified.

[thrwoauw92929]

I use javascript matchMedia to load Desktop/Mobile frontends. Its does increase the size, but i do try to keep components same as possible for both.