Integration of Ionic framework and nw.js - angularjs

Question

I am going to build a nw.js (node webkit) app for portability (Mac and Windows). As I'd like the app to run on mobile devices (iOS and Android) later, I use Ionic framework. As suggested by Ionic folks, it's better to keep two sets of views, one for Ionic (mobile) and one for nw.js (desktop). Hopefully I can share codes in the controller and factory.
So, here is what I do:
1) Create a Ionic skeleton project:
ionic start --appname Hello Hello sidemenu
cd Hello
ionic serve
...
quit
2) Create an entry point html for nw.js and setup the manifest:
cd www
cp index.html app.html
and remove the following cordova-specific lines in app.html:
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
then create a package.json:
{
"name": "hello",
"version": "1.0.0",
"description": "Hello World",
"main": "app.html",
"window": {
"title": "Hello",
"toolbar": true,
"frame": false,
"width": 800,
"height": 600,
"position": "mouse",
"min_width": 400,
"min_height": 200,
"max_width": 800,
"max_height": 600
},
"webkit": {
"plugin": true
},
"author": "Horace Ho"
}
and run the app in node webkit:
nw .
Basically I created app.html and package.json in the www folder of an Ionic skeleton project. Now I have a nw.js skeleton project with both Ionic and angular frameworks.
My question is, does the above make sense? As long as there are two entry points (index.html for Ionic, app.html for nw.js), is it safe to add unrelated html/css/js within the www folder of Ionic? To further extend, I may replace Ionic by Bootstrap and leave only AngularJS codes (controller and factory) to be shared between the mobile and desktop apps.

Answer 1

Ionic is clearly mobile centric, so you would have to make at least some trade-offs on your desktop UI. Having two entry points will clearly solve this, and it will be safe (albeit not efficient) to have two separate html/css/js for both. However, I'd suggest to identify as much common code as possible at least for css/js and use it for both. Try to use sass/scss instead of plain css if possible.
If you want to have a single UI for both desktop and mobile, I'd suggest to have a look at angular material. I am currently developing a desktop/tablet app with it, for which it works very well, but angular material is clearly mobile first or at least very suitable for mobile. This makes it imho a better choice for mobile than Bootstrap, which I regard as desktop first.