CODEWITHSUNDEEP
reactjsmobile-website
Do Hyeong Jason Kim
Do Hyeong Jason Kim

Reputation: 57

react.js desktop and mobile web project architecture

I have really big concern on my web project architecture which will have separate mobile and desktop web app.

I already finished to develop web version based on "create-react-app" project template and for mobile version, I want to reuse my exists web version component as much as possible.

We will serve these with separate url "www" for desktop and "m" for mobile.

I am thinking of two possible ways.

  1. Just build another create-react-app project for mobile and share the common code.
  2. In exists web client create-react-app project src folder, make mobile version codes like component.js component.web.js component.mobile.js. But in this case I am worrying about the size of bundle js file.

I also thought about the responsive web design, but we have totally different layout and components.

Rendering two different layout within a component by the size of viewport or url(www/m) might be another possible way but it is highly possible for me to use server-side-rendering...

What would be the good approach to solve this problem....

Upvotes: 5

Views: 4282

Answers (2)

Krina Soni
Krina Soni

Reputation: 930

You can use the same code and build mobile application using Cordova Framework as your web code will be the one to generate application.

As well you can create for multiple platforms. Go through official website. https://cordova.apache.org/docs/en/latest/guide/cli/index.html

Upvotes: 0

Harkirat Saluja
Harkirat Saluja

Reputation: 8114

I would approach this as follows:-

  1. Move all business logic to a common package and use it in both mobile and web. This would make your logic common.
  2. Move all the common components/config/colors etc. to a common package and use them in both the apps.

  3. Handle view part for both the apps separately.

    I also thought about the responsive web design, but we have totally different layout and components.

    If you have totally different layout and components I would suggest to keep mobile and web segregated. Its not only about the bundle size, you can get around it by lazy loading, but your code complexity can increase.

Upvotes: 6

Related Questions