I want to build an app that is accessible both from the web and from apple/android devices. The web app will be built using Angular 2. Some of the code used in the web app will be required in developing my app in Ionic. What is the best way to combine the two code bases to minimize any duplication of code?
“best way” is sort of subjective, but if your primary goal is really to minimize duplication, you could just make the web app using Ionic. Try cloning the conference app and serving it to a browser to see if the UX is acceptable to you.
1 Like
That’s awesome, thanks! I’m new to Ionic, can you recommend other open source projects/examples that I can look at for some inspiration?
Try to keep your concerns seperate.
Have your database access / business logic / form validation etc in seperate files from your UI.
Then you only need to build the distinct UI layers using ionic and angular2/bootstrap or whatever your UI framework will be.
On some of my apps I’ve gone for even having a form configuration file detailing which fields I want to surface and if they apply to either mobile or desktop. It’s a good approach but I wouldn’t recommend that level of code share if your app has complex forms as you’ll spend longer building a framework than it would be to simply throw the fields on your HTML.
Thanks for the reply. If I were to design the distinct UI layers, would I still only have one repo?
If i’m happy how the Iconic app displays in the browser, is it fine if I use it as the web app or are there downsides to doing this?
It’s really up to you if you have one repo or several.
I opt for one for convenience personally - your mileage may vary I guess based on the amount of developers working on your project - whether you have distinct teams tackling each piece.
There’s a fantastic article on the subject WITH a git repo (not mine) which explains in great detail…
1 Like
Apologies I didn’t even try to answer the second part.
If you’re fine with the look using Ionic in the browser - you’re good APART from…
- Compatibility with IE11
- All plugins you make use of need adequate fallbacks for the browser (i.e. camera / barcode scanner)
Personally I’m not a fan of this approach and other guys much cleverer than me will give another dozen reasons as to why this is a good / bad approach.
Thanks for the info and links. Mobile apps are my first priority, with the web as a fall back for people without the app - similar to most sites that have an app and web presence. I’ll develop the app in Iconic and only then look at the best way to get it on the web. Does this seem like a good approach?
Will your users be interacting with your app frequently or seldom?
Some users on a daily basis and others less frequently. Almost like Uber, driver daily and drivers less frequently.
In that case your approach is probably right for your use case.
If you are going to have a seperate desktop Ui then of course give a nod to having your business logic etc in a seperate project. It’ll only slow you down by a couple of hours at the beginning when you decide what you want to share, and will probably make your code much cleaner as having a separation of concerns won’t just be an after thought, but absolutely mandatory.
HI, I’m not sure if you’ve been given a definitive answer to this yet?
Yes, you can develop a single Ionic app (which is Angular 2+, currently Angular 4) and use it on the web and package the same app for mobile (deploying to the app store).
Here is a live example of an app that has been developed for both web and android/ios use. On mobile devices it will use native maps (via the native maps plugin) but on mobile/desktop browser it just uses normal google maps (web):
https://map.openchargemap.io/
Just gone onto that site - impressed with the small 331kb payload (https://map.openchargemap.io/build/main.js)
Have you striped the libraries right back for that size?
1 Like
That’s great, thanks!
My plan was to develop it for mobile and see how I can get it working good enough on the web with minimal effort.
Is the source code for that app available somewhere?
Thanks, that’s bundle size is just ionic build browser --prod, then the server is set to serve static content gzipped.
The app source is here: https://github.com/openchargemap/ocm-labs/tree/master/App/Ionic2/ocm-app
However it’s quite specialised and is doing a lot of stuff you wouldn’t strictly need (like multiple map providers).
That answer went above and beyond. Much appreciated sir 
1 Like
Just for kicks just had a quick look at some of the code. Nicely organised.
Just noticed in utils.ts you have a formatStringArray function: could be shorter with the following…
static formatStringArray (list: string[], seperator = ', ') {
return list === null ? '' : list.filter(l => l !== null).map(l => l.trim()).join(separator);
}
1 Like
Excellent, that’s great!
In the end, a Ionic build will create mostly the builds for Android and iOs. Everything else you’d not want in your web app should be scraped.You can make conditional loops based upon platform for that purpose, for instance (app.module.ts).