11

Ok, so in our 'innovation lab', there is currently a push to use Ionic, an hybrid app framework built on top of Cordova for native access and angularJS for the ‘web code’.

There are also some projects which are pure mobile web, using Angular + bootstrap for responsive design for example.

The thing is some projects coming up will need to have both a mobile web site and native apps (ionic hybrid). Most features and screens will be the same, sharing back end and most of the UI but there still will be some difference.

So my question is; How to architecture a project so that it can be both an ionic project and a normal angular website with 2 different deployment approaches. Most of the code being reused but some views for the mobile website and some views for the hybrid app (using more native components and conventions), maybe some routing differences as well.

Is that even a good idea?

And in the shared code, is there a simple way to know in which case you are? some IF, some directives inactive outside of their context, etc.

It feels like there is some sort of missing link i may be unaware of.

Thanks in advance.

Improve this question

2 Answers 2

Reset to default
2

You can build a shared kernel which contains some atomics Components (https://docs.angularjs.org/guide/component) / Services.

Web app, android app, ios app, supervision app ... all will use functionalities provided by the kernel, in the adaptive way.

Imagine if you want to deploy an Android app. Using https://material.io makes sense, along with some Android capabilities. iOS app, will have different design (https://developer.apple.com/ios/human-interface-guidelines/overview/themes/) etc ...

Build solid implementation, and use atomics components and adapt them !

Improve this answer
0

For mobile apps using Ionic, and web apps using AngularJS or Angular, its very common that some of these apps will have shared functionality as well like connecting to server and obtaining some data but that does not mean that you will not have copy of that code in your new projects.

My point is that if you know that there would only be UI layer differences and the project requires web app and a mobile app and you can have 3-tiers where UI for web app can be in angular and mobile app can be in ionic. The benefits you get from using native functions like cordova phonegap or ionic maybe far more than keeping it all in one type.

I just want to make it clear that it is not difficult to switch between these UIs in case your client wants to have a web app converted to native mobile app.

I would start with following questions

  1. Does this project need separate UI for mobile?
  2. Does this project need native mobile functions?
  3. Does this project need separate UI and backedn functions for mobile?

If your answer is yes for all 3 then create two projects. If your answer is yes for 1 and 2 then create angular backend and web app along with ionic or phonegap app. If your answer is yes to 1 only then I would recomment using angular for both.

If at somepoint you want o use angular views in ionic (look for ionic-ng stuff) you will have same code for both front end, mobile app and web app. At the end you will be able to manage following independently:

  1. Database Migrations
  2. Server Side Backend Functionality with API connecting to 1 for data
  3. Front end web app using Angular Views consuming 2
  4. If mobile app is needed it uses Ionic/phonegap for resolving device dependencies but uses Angular to create views and consume 2.

Hope this helps and open a bit of discussion.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.