What is the best approach to use common code base for Web Application and Tablet version.
At this point you have two choices:
a) Use ionic for both. From a UI standpoint you will want to implement various reactive behaviors based on the size of the screen or the availability of cordova features but you can end up with a UI that can work in both places. The downside is that ionic does not support all browsers so if people use IE to access your website it may not work. It would probably take ionic expanding to support modern browsers (or at least degrading features where appropriate) for this to be viable.
b) Implement common code in services, directives, controllers, etc. Create two versions of your application and embed ionic in one of them and another framework (e.g. bootstrap) in the other. If you are attempting to provide a completely different UI (an iOS app and a traditional web application) then this works ok but there is a lot of extra thinking to implement all the features twice. If you are attempting to have the applications look the same then you will need to force one platform to look more like the other. This is quite difficult for the css because platforms often use conflicting style names, apply style to base html elements, have overlapping variable names (if you are working with SCSS), have different sets of icons, etc.
Attempting to support Android material ui further complicates the problem.
My wish list for ionic
There are a couple of things that could be done by ionic to help with this situation.
-
Clearly document platform support and highlight any exceptions. Pick a set of html5 browsers based on flex support or other requirements. If some features only work with a smaller subset of browsers then document the exceptions.
-
Allow the framework to coexist with web application frameworks and tools. You should be able to include both ionic and bootstrap in your project and choose the features that you want in creating the ui. Naming of styles, directives, attributes, css variables should use ion prefix to avoid conflicts. There are many 3rd party controls I would like to use on iPad ui but have run into problems coexisting with ionic. One of many examples where ionic attempts to take too much control is providing styling for input elements (margins, borders, etc.). This makes sense if you are just thinking about a phone screen, but for iPad or web you often want them to be different. The ionic styles should be applied in the context of some container class so they do not have side effects.
Ionic is a great platform and it is so close that I think it may get there, but the reality is that it is currently a platform just for the mobile app.
Thank you so much for your in detail explanation.