I’m really big on the idea of using a “one size fits all” approach and controlling CSS/JS through smart ways with media queries/match media. I also believe in the “mobile first” approach and how this can weigh in heavily for performance (especially for mobile). That being said, I’m a little confused on how a framework such as Ionic can be used in a smart way to do this? I know the primary use for Ionic is geared towards mobile, but can it also play nicely with “Desktop/Tablet” web apps?
QUESTIONS:
One of my main concerns is browser support. I’ve heard that Ionic is targeted towards Webkit Broswers… So what does that mean for IE and FireFox? Is it completely incompatible or just have minor compatibility issues? What are they? Can I see a list of these incompatibilities?
Older mobile browsers have some quirky things happen with using some CSS techniques like “poitioned: fixed” or “overflow: auto”… My guess is that Ionic has taken care of these issues, but how? I’ve used the “Southstreet Workflow” by the Filament group for some time now, does Ionic have similar methods baked into their framework?
A big question/road block in my mind right now is the switch from Mobile UI to Desktop UI… Mobile UI for SPA’s generally have their views as “full pages” and you could swipe across them (for example) to get to different pages… but when in a Desktop browser you might want to have these views as sections inside the page (for example), or sometimes you might want to make them completely separate pages all together (for example). What would be the best approach to handling this functionality? Would it be as simple as targeting a media query and saying “display: block” for Desktop mode, or is there a smarter way to do it with Ionic/Angular (possibly with EnquireJS)?
I’m big on using my own custom CSS. What !important classes do I need to know about that Ionic relies on? Would I end up stabbing myself in the back if I were to not use Ionic’s default CSS?
I’m really a big fan of Ionic and I want to use it. I just have to make sure I don’t use it the wrong way.
I can’t answer that for you, because I don’t know how you’re wanting to mix Ionic with your production stack, but I can tell you how it works for me. I don’t actually use a lot of the Ionic + Angular stuff. And I remove the standard Ionic CSS and JS files almost entirely. I use Ionic for it’s ability to hand me information from the lower layers and then compile for hybrid apps. So I write a HTML5 app that either does or doesn’t use Angular, and then pull it into an Ionic project and include the Cordova.js file in the head. Some things won’t make sense to put on a standard Mobile version of a site because they’re too device-oriented. So any code I’m going to write against Ionic needs to be wrapped in an if statement to make sure Ionic is coming into play. You could even do a separate Grunt file for each build.) But that means that regardless of if the app is running on the web, or on a device, it should work.
That gets problematic if you have a UI that reflects certain functionality. But, the other thing about this is that you can use the same codebase for the other versions of your site with standard Media Queries stuff. By only putting your project in a git repo, you can easily bring that code into whichever platforms you want. You could even use another framework like Tide (http://www.tidesdk.org) to handle a case for OS X development, if you needed.
I guarantee that a good number of people will say that I use it “wrong”, but it works best for me this way because of how my apps work/function and how I prefer to deploy them. It also means that I’m in complete control of what I add into a project and how it’s used. If I need Angular on this project, I can use it. If I just want HTML + jQuery with some AJAX requests, I can do that too. Ionic is fantastic as a bridge, I just prefer not to have an Ionic version of my app and a web version laying around to maintain. I hope that helps.
Ionic can work on a desktop, but mostly chrome and safari, since they’re webkit based.
So for Firefox, there are a few issues with things not being prefixed correctly, such as flex box.
For IE, it’s a bit worse, since IE doesn’t have touch events, which ionic uses.
As for ever older browser, it basically wont work (like IE 8). For older mobile browsers, we’ve said that we support android 4.0 and up. Anything below that we don’t support. The amount of work need to have support on those older browser just didn’t make sense. Android 2.3 already has a low market share so it’s not worth.
Again for UI, Ionic is focused for mobile apps, not mobile sites or web-apps. That being said, you can use 90% of your code (the angular part) as a base for your web-app. Such framesworks as angular-matieral provide the UI need for a responsive website.