Skip to main content

Ionic vs. Bootstrap - for a Web App

Ionic 1.x vs Bootstrap 3.x for a Web App

I was recently asked at work to come up with a comparison between Ionic Framework and a more traditional Angular/Bootstrap combination to create a web app. The application will primarily be used in a desktop web browser (probably Chrome or IE). There are also some use cases where it will be accessed from Safari on an iPad. However, this is purely a web; there are no plans to install the app onto the iPad as a hybrid app. Thus, recommending Ionic to build the UI hadn't occurred to me until the request was made.

This is even more surprising in that I recently published a Pluralsight course on Ionic Framework 1. It should have been the first thing that crossed my mind.

One constraint is that currently only Angular 1.x and Bootstrap 3 are authorized web technologies. Ionic 1.3 was recently approved, but not Ionic 2, Angular 2, or TypeScript yet.

Given those constraints, herein is my attempt at coming up with reasons to use (or not to use) Ionic Framework 1 to build a pure web application.

Ionic

  • Ionic is designed for Mobile First, and will look and perform great on the iPad.
  • Ionic leverages Angular knowledge.
  • Designed for Angular
  • Requires a newer version of Angular (1.5.x) than most of our teams are using.
  • More modern UI than Bootstrap (see below).
  • Leverage existing Ionic code, including test cases and styles.
  • More “app-centric” design over Bootstrap’s “webpage-centric” design.
  • Grid layout system designed for mobile.
  • Uses Angular/CSS animations by default.

Bootstrap

  • May introduce a slightly steeper learning curve to our developers who have not used Ionic before, though probably about the same as Bootstrap.
  • Bootstrap is already part of our integrated CICD pipeline, so using Ionic may be more difficult to adopt.
  • Many Bootstrap Desktop UI elements (split buttons, dropdown buttons) have no Ionic equivalents, though I don’t believe these elements have a place in a mobile app environment.
  • Bootstrap requires 3rd party library to integrate with Angular.
  • I've seen a few online reports of Bootstrap performance problems on mobile devices (iPad, iPhone).

Components

Both frameworks provide set of common components, a sample of which can be seen below. Many desktop-focused components (Split buttons, large navbars) have no analog in Ionic. However, the Ionic versions seem to sport a more modern appearance, at least to this humble developer's eye.


Ionic 1.3

Bootstrap 3

Button Bar
Button Groups
Ion-list
List Group
Tabs
Tabs
Cards
Panels

Typography
Typography
Forms
Forms
Checkbox (or Toggle)
Checkbox

Radio Buttons
Radio Buttons
Select
Select


JavaScript Extensions

Ionic provides a large number of modern AngularJS directives and extensions to make development easier and quicker. Bootstrap also provides Javascript extensions, but requires an additional library to work with Angular.


Popover
Similar to Bootstrap - need to find a sample.
Tooltip / Popover
Popup
Alert
Slide Box
Carousel
Modal
Modal
Loading / Spinner


Conclusion

After my brief review of the two frameworks, my conclusion is that Ionic is perfectly suited for web development, even if you have no intention of using any Cordova functionality. It's clean and attractive, seems just as easy to learn as Bootstrap, and integrates with Angular right out of the box.

If I were beginning a brand new web application today, I would not hesitate to recommend at least trying a quick proof of concept with Ionic Framework.



Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. Excellent and useful blog post on Ionic vs. Bootstrap for a Web App. Keep up the good work and share more like this.
    Angularjs Training institute in Chennai | Angular 2 Training in Chennai

    ReplyDelete
  3. Your article is very useful for me, explained perfectly and thoroughly. Keep sharing this kind of information.

    Ionic Training in Chennai  | Ionic Course in Chennai

    ReplyDelete

Post a Comment

Popular posts from this blog

How to copy your Frozen Free Fall progress to a new phone

It's happened to all of us. You are about to get a branch new smartphone, when it hits you. You're on level 250 of Frozen Free Fall. If you get a new phone, you'll lose all of that progress! Ok, admittedly this isn't the most pressing problem of our time, but it's annoying. So today I decided to do something about it.

I have a Samsung Galaxy S4 (Android), and just received an iPhone 5c. Before you bash me on my phone choice, let me explain that the iPhone is provided by my employer at no cost to me. Now you may proceed to bash me for putting games on my work phone. 
First step: Frozen Free Fall had already been installed on both devices. Next, using the Astro File Manager on my Galaxy, I searched and found the Frozen game save stored in /storage/sdcard0/Android/data/com.disney.frozensaga_goo/files/user.dat. I imagine it will be in the same location on any Android phone. If not, just look for user.dat in a folder with a similar name. So, using a USB cable and the A…

Windows 10/Server 2016 100% Disk on BootCamp and Parallels!

I've been wrestling with Windows on my 2014 Mac Mini for more than two years. Soon after I bought the Mac, I made a 200GB BootCamp partition and installed Windows 7. I also bought Parallels 10 Desktop and pointed it at the BootCamp partition. It was great. I had a convenient VM when I needed something quick. I also had BootCamp when I needed native performance. Not long after that, I upgraded it to 8.1. Then sometime later, Windows 10.

I don't remember exactly when it happened, but one day I fired up Parallels and my entire system ground to a halt. Shutting down the virtual machine caused everything to go back to normal, so I figured the problem was with Parallels. So I upgraded it. Same problem. I made sure Windows was up-to-date, thinking that maybe the Windows Update service was going nuts. Nothing changed. Whenever Windows was running in Parallels, the Task Manager showed the disk activity pegged at 100%.

I tried all sorts of online solutions, but none worked. On a whim, I…