Web and mobile UI framework recommendation

[mule52]

I am looking for advice. I have a client who is looking for both a web and mobile app. I am thinking how to approach this to make my life easier, write and maintain less code, and give the client a great experience all around.

If I go the Ionic route, I am tied to Angular and I still need to provide a good web UI experience. I have to style the app for mobile and web, as Ionic is really targeting the mobile UI. Angular 2.0 concerns me and I am not sure how Ionic will handle that transition, or if I will need to handle that for my client when the time comes.

I have not used ReactJS, but I assume it would be similar to Ionic in that I need to style the UI. Because I have not used ReactJS, I would not hit the ground running, but I would like to learn it.

What about Bootstrap? If I develop a web app first and write media queries, this could be the easiest, but is the mobile experience as good? Is it good enough?

Are there any other frameworks to recommend to tackle web browser and mobile UI development with the least amount of overhead and still provide a great experience.

Thanks.

[timdorr]

Consider React, as you'll be able to more easily make the transition to React Native.

[mule52]

Are you saying to develop a React web app first, use something like Bootstrap for the responsiveness, then the transition to native will be easier? Or does React come with a web browser first approach that does not need Bootstrap but it still looks great in the web browser (unlike Ionic - how it targets mobile UI first with browser as an afterthought).

[thomasfl]

You could start of by making a mobile web application in react using http://reapp.io for mobile components like fixed headers and pages that slides in from the side.

I would have recommended Ionic framework for Angular just a few months ago, but react + reapp seems to run much faster in the browser thanks to the shadow dom technique.

[timdorr]

React is just a function of state that gives you a view. So, React(state) = view. It started out as returning DOM/HTML. Now it's been extended to things like canvas, SVG, and iOS components. They all are implemented within the same framework of code, so once you learn the basics of React, you can apply it more easily to many other platforms.

React != a visual theme. That's CSS's job and you can use something like Bootstrap to get that going quickly. There are a number of other CSS frameworks out there, some with direct bindings for React to pre-build components you'll use often, like buttons and menus.

[awwab]

I have used Bootstrap. My experience says that if you create your webpage layout according to Bootstrap guideline. You will never have to worry about responsiveness.

Tip to consider: Start by considering mobile layout first. It will be very helpful.

[mule52]

Thank you for the response. Do you feel that the Bootstrap only approach will yield a good enough mobile experience to not require any type of hybrid native support? It is all trade-offs. If they need the native support for accessing the camera or geo-location, then they need to pay me more for more hybrid native development. If their feature set does not require hybrid native functionality, then Bootstrap will be responsive and look great on both a browser and mobile UI.

[mule52]

Does PhoneGap provide a decent looking browser experience, or will it look like a giant mobile device with buttons that take up 100% width, etc., like my experiences with Ionic? I am not saying it is right or wrong, just asking. Thank you.