27/10/2015
8 Reasons Why I’m Glad I Switched to the Ionic Framework
JOSH MORONY · SEPTEMBER 18, 2015
I’ve been in the HTML5 mobile development scene for over 3 years now, and during that time I’ve dabbled in quite a few frameworks and used two extensively. Those two frameworks are Ionic and Sencha Touch.
If you’ve been following my blog for a while you would know that I used to be a heavy Sencha Touch user and it was almost exclusively what this blog was about in the early days. But after an abrubt decision by Sencha to become more enterprise focused, I made the decision to switch to Ionic. I had wanted to give Ionic a proper try for a while, it seemed to be the hot thing all the cool kids were using and it was gaining momentum fast, but I wasn’t quite ready to drop all the time I had invested into Sencha – it sucks being a newbie again!
When those big changes from Sencha came though, which you can read about here if you like, it gave me the push I needed to dive into Ionic. I’ve been using Ionic for a while now and looking back, I couldn’t be happier that I did make this change.
Usually I would never proclaim something as “the best” without some provisions, different frameworks usually suit different purposes, but I am willing to say that I think Ionic is the best HTML5 mobile framework available today. Take that with a grain of salt because obviously I haven’t used all of the HTML5 mobile frameworks out there and am just speaking anecdotally.
Now, with all this gushing about Ionic I feel it’s necessary to let you know that this isn’t a sponsored post or anything like that (none of my content is), I really do just love using Ionic and I’d like to provide some justifications as to why I think the framework is so good.
1. Ionic is Completely FREE and Open Source
One thing I really like about the web approach is that there is such small barriers to entry. Anybody around the world can start creating websites and mobile apps no matter what their circumstances as long as they have a computer and an Internet connection.
When powerful frameworks like Ionic are provided free of charge it levels the playing field and allows almost anybody to create things that can change their lives and the lives of others. If you had to pay $1000s for a license just to start using these frameworks then a lot of developers or potential developers would never even be able to get started. A few grand for a license is nothing to a big company but to a freelance developer, small startup, or just a hobbyist without a lot of disposable income it can be the difference between being able to do it or not.
Now, that’s not to say I think we should live in some utopian world where all businesses provided their services for free. Ionic, like Sencha, is a real business with shareholders that needs to make money, and so it should. If someone creates some tool or service that they want to charge for, then they absolutely should. But I think there’s a lot of power behind lowering the barriers to entry as much as possible, whether that’s through making a project completely free and monetising through other means or just by creating affordable plans for small developers.
One concern when it comes to open source is stability. People worry about open source projects being abandoned, and since there is no direct revenue from the product this can quite often be the case. But when talking about goliath projects like Ionic and Angular, which have a lot of investment dollars and many avenues to create revenue, they are no more likely to go belly up than an enterprise focused company charging big bucks for their product.
2. Ionic is Built on Angular
If you’ve used Ionic then would probably know that Ionic is built on top of the AngularJS framework. Basically, Ionic extends Angular with a bunch of stuff to make building mobile apps with Angular super easy. AngularJS is the most popular JavaScript framework in use today and is backed by Google. If you want a citation for that “biggest framework” claim just check out this Google Trends graph:
When compared to AngularJS, the interest in other popular Javascript frameworks is barely a blip on the map, with the exception of ExtJS where there seems to be a steady decline of interest.
Just because it is the biggest framework and is backed by Google, it doesn’t necessarily mean it’s the best for every situation or even in general – but with so many developers using it and the fact that there’s a bunch of super smart engineers building and maintaining it, it is a pretty safe bet.
So why do I think it’s a good thing that Ionic is built on Angular? Here’s a few reasons:
As I’ve eluded to above, AngularJS is a powerful framework
You can hook into the AngularJS developer community for support with issues you are having in building an Ionic application (which, as we’ve established, is a lot of people)
If you already know AngularJS then you will have a super easy time learning Ionic
If you don’t already know AngularJS then you will learn it through using Ionic, and will then be able to use it to build web apps as well as mobile apps
AngularJS is also staying ahead of the curve with future development, and Ionic is going along for the journey. Before too long Angular 2 and Ionic 2 will be released which will be based on the new ECMAScript 6 standard and also come with a bunch of improvements (especially performance improvements for mobile). These will be big changes, but they are very forward looking and I think this will help establish both Angular and Ionic as dominant frameworks for years to come.
3. Ionic Is the Most “Native Like” Framework I Have Ever Used
I don’t necessarily agree with the mantra that mobile web apps should strive to be like native apps, but a well designed native application is smooth and pleasing to use, and a HTML5 mobile app should be too.
Some HTML5 mobile frameworks pull this off well and some don’t, but Ionic pulls it off really well. It is fast, smooth and responsive. It has everything built in to perform fast and efficiently on a mobile device, most notably Ionic:
Handles the “dreaded tap delay” by default
Recycles and reuses DOM elements to allow for large lists that scroll smoothly (DOM manipulation is one of the biggest limitations of performance for mobile devices)
Provides the option to use native scrolling
Has built in hardware accelerated animations that perform well on mobile devices
…and a whole bunch more under the hood
One thing that I think really highlights Ionic’s native like performance is the sliding menu functionality that is provided by default. Other frameworks I’ve used have not had this functionality out of the box, or if they did it wasn’t done very well.
Ionic Side Menu Example
That low resolution / low FPS gif is certainly no way to showcase this functionality but the sliding menu in Ionic feels like the kind of sliding menu you would find in a high quality app like Facebook. Every interaction with it feels super smooth and it just behaves how you would expect it to.
4. Ionic Has a Beautiful Default UI That Is Easy to Customise
Ionic comes with a bunch of default JavaScript components and CSS components that cover most of the basic things you would want to build into a mobile application. This includes components like the sliding menu I mentioned in the last point but also things like:
Form Inputs
Buttons
Lists
Navigation
Popups and prompts
Tabs
Sliding Boxes
…and a bunch more
The default styles that Ionic provides are very sleek and simple, and you can customise them simply by adding one of the pre-defined CSS classes to the element to achieves looks like this:
Ionic CSS Header Examples
If you want to get a little adventurous then it is also easy to create your own custom styles, and even your own custom layouts and themes.
BONUS CONTENT: Grab an example with complete source code of implementing a custom login screen layout in Ionic
Email Address...
UNLOCK
Ionic also caters for UX differences between iOS and Android. For example, if you add a title to a header it will be centered on iOS by default but it will be left aligned for Android. Similarly, buttons in the header are defined as “primary” and “secondary” so they can be placed wherever is most appropriate for the platform. You can override this if you wish and force the title to be center aligned on an Android for example, but it can be a big time saver and if you aren’t familiar with UX patterns for the different platforms then it can help you out a lot too.
5. Tools & Services
Ionic provides a range of tools and services that make using the framework just that much nicer. Once you’ve got node installed it’s as easy as running:
npm install -g cordova ionic
to get everything you need installed, and then:
ionic start myApp blank
to generate your first Ionic project. This will create a blank skeleton project, but you can also replace blank with sidemenu or tabs to generate an application that has those features built in already. You can even provide a link to any project on CodePen to suck that in as a template.
What’s also cool is that you don’t need to mess around with getting a webserver like XAMPP set up to run your application, all you have to do is run:
ionic serve
from within your application and your application will be loaded into the browser, with live reloading as you make changes to the code. You can also run:
ionic serve --lab
to see what your application would look like on iOS and Android devices. You can also upload your application to ionic.io by running:
ionic upload
and then you can view your application easily on a real device by downloading the Ionic View application for iOS or Android AND you can also easily share the app with your friends by running:
ionic share [email protected]
Want to create all the required splash screens and icons required for iOS and Android? No problem, just create a 192 x 192 icon and a 2208 x 2208 splash screen and run:
ionic resources
I used to create all of the required icons and splash screens manually in Photoshop and it kind of made me want throw my computer in the bin.
