Differences between bootstrap and Ionic

Question

I read this article Where does ionic framework fit in, and am trying to figure out the differences between Ionic and bootstrap. From what I understand, they have very similar goals: They both make it easier to develop web apps, giving many good design patterns and tools for css, js and html.

As far as I understand, Ionic is more towards mobile hybrid native apps, while bootstrap is more towards browser based apps, am I correct? But then again, Ionic by itself cannot convert html to mobile native application, it requires cordova for it. So again, where does Ionic fit in? How it differents from bootstrap? Also, Ionic requires angularJS to get most out of it. You can only use the CSS part of Ionic without AngularJS. So if you don't want angularJS in your project, then one could say, you are better off with bootstrap and cordova? What I have understood is, that the twitter bootstrap is also used a lot in regular websites in a manner of providing good interface to PC browsers as well, so the goal is not just to make it look good on a smartphone or tablet.

Could it be so, that Ionic is better for giving mobile feel in a hybrid application that is native to a mobile? With just cordova and bootstrap, one could not achieve the same, at least as easily? So with bootstrap, you can more easily get a native feel to a browser app, but not as easy to a native hybrid mobile app?

I know this question might be very opinion-based, but please don't close it, I want to understand the differences and best use-cases. In which cases it could be better to use bootstrap, and in which cases Ionic would be better? Would there be any sense using them both, if they could complement each other?

Answer 1

You can't compare Ionic and bootstrap in such a way.

Ionic is for building mobile apps and has a lot of building tools integrated. It is built upon bootstrap for styling content and cordova for building the actual app. But you can't create normal web apps for production with it.

Bootstrap itself is only a simple framework for styling html elements. Cordova is for wrapping up webpages in a native app context.

Answer 2

Bootstrap is cross platform UI components for mobile/web applications.

Ionic is Cordova + Angular + Cross platform UI components + Native plugins.

Answer 3

The Ionic Framework has similar goals in that we want to help promote recommended design patterns and document best practices.

Ionic combines AngularJS (JavaScript by the way) with HTML5+CSS and uses Cordova to access native device functions.

So effectively you are right that it is similar to Bootstrap but it they claim that Ionic is built for the devices of today and the future, not for devices built years ago. It’s focused on native app development and not mobile website creation.

Learn more differences here.

Answer 4

Building a web app is a bit more viable in Ionic2 than it was with Ionic1. They've added support for Progressive Web Apps (as well as continued support for native apps), which allows you to host your app on the web but still have a mobile-app feel to it. Check out this walkthrough of creating a PWA in Ionic2.

Of course, you probably want a more desktop-like feel for your web app. You can get close using responsive grid (very similar to Bootstrap's grid), split-pane, and nested navigation components. It isn't quite Bootstrap, but we're near to being able to write-once, run everywhere... I hope!