Ionic helps you create hybrid mobile apps with web technologies. Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps. Built with Sass and optimized for AngularJS.
Powerfull
Ionic utilizes AngularJS to provide the application structure, while Ionic itself focuses on the user interface. In other words, we see a match between the power of Angular and the beauty of Ionic UI.
I love UI frameworks as they are a simple way to make demos look nicer, but Ionic is much more than this. To be clear, there is a UI part to the framework and in theory you could use just that aspect, but you would be missing out on a significant part of what makes Ionic great. For example, Ionic provides a set of Angular directives (custom HTML elements) for it’s own components, making it as easy to use the widgets as writing a line of HTML code.
On top of the UI, there is also strong UX support as well. Common UX solutions like pull to refresh are easy to add via directives. Other examples include scrollable panes and even infinite scroll. Basically, all the “typical” UX things you may need in your app are baked into the framework and are pretty easy to use.
Other major aspect of Ionic is its use as a platform to build Cordova (PhoneGap) applications. Again, you don’t need to use it for that, but the main Ionic tool (the CLI) is wrapped around working with Cordova projects (the CLI provides a set of Ionic commands and it also wraps Cordova CLI commands). It gets interesting for Cordova developers when you mix this with projects like ngCordova as the combination becomes even more powerful.
UI and Theming
When it comes to UI, Ionic shows its potential. One of Ionic’s true beauty is its simplicity it empowers the web stack using existing HTML5 and CSS3 capabilities to deliver fast experiences. The speed is exactly in its simplicity, Ionic doesn’t promise you native-looking UI, but it does deliver very fast and consistent interface, even on the devices you considered to be slow with rendering HTML5 apps.
Extensibility
Customizable through SASS, Ionic comes with handy variables and mixins to extend for customized appearance. Additionally, it’s packaged with its own open sourced icon library featuring over 440 icons to choose from.
You can also create Angular directives and controllers, this gives ionic apps superpowers, and don’t worry even the developers new at Ionic and Angular won’t struggle.
Super powers
One of the main differences between mobile web and hybrid apps is that with the latest you are able to access the device native API’s (for example device camera, geolocation, push notifications, touchID, etc). Ionic is designed towards this, using ngCordova we can integrate a ton of device API’s to our ionic app.
What you will find
If you are a javascript developer you will find a refreshing and straightforward way of building rich apps no matter the size. Additionally, as views are defined using HTML and data models as simple as plain JavaScript objects, the developers will easily end up writing less code and use less of the expensive time to produce high quality apps. All you need to know is HTML, CSS, and JavaScript: the building blocks of the web. You’ll even learn AngularJS as you work. Ionic has tons of tutorials to get you started and help you level up your mobile development skills. There’s no question you’ll be shipping apps in no time.
If you are a designer you will love Ionic as it allows you to customize the layout to your liking, without having to modify someone else’s complicated widgets and potentially break the app’s functionality. Clean, simple, and functional, Ionic has been designed to work and display beautifully on all current mobile devices. With tons of popular mobile components, typography, interactive paradigms, and a gorgeous (yet extensible) base theme, you’ll wonder how you lived without it. Customizing the UI may remind of working with Zurb Foundation or Twitter Bootstrap.
If you are a product manager you will see that the initial barrier to get started with AngularJS is very low, without needing to know the entire framework in order to build an easy app. However, beginners faced with more advanced tasks in a complex application will face an increasingly steep learning curve. Also, Angular is built with testing in mind. Make use of it early in the game.
Ionic is modeled on popular native mobile development SDKs, just drop it in your code to get going, and push through Cordova when it’s ready. Develop once, deploy everywhere.
They claim to be performance obsessed and as you know speed is important. So important that you only notice when it isn’t there. Ionic is built to perform and behave great on the latest mobile devices. With minimal DOM manipulation, zero jQuery, and hardware accelerated transitions, one thing is for sure: You’ll be impressed.
Keep in mind that Ionic is meant to be used for hybrid apps and not mobile websites.
For all of you in addition to what ionic offers you will find a wonderful and active community, it’s popularity is skyrocketing, as today (april 2015) is THE go to solution if you want to build hybrid apps. And every day are popping new components and features.
How Ionic is perfect for you
Many developers can spend days or even weeks planning out the scaffolding for a new project – and we’ve all been there. Making sure that every architectural detail is thought out before development even begins isn’t always the best approach for verifying if your idea/prototype even has legs.
Building great mobile applications is challenging and all great mobile applications start with a proof of concept or prototype. A study found that testing your prototype/app with 5 users finds 80% of the usability problems (see: http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/). That’s a clear sign that you must start with a proof of concept, a rapid prototype and then evolve it.
Ionic provides the perfect framework and tools to start prototyping your app. You don’t even need to learn new technologies or languages as its built upon the web stack (HTML, CSS, JS).
Hints & Tips
You thought it couldn’t get faster? You can if you follow these tips:
#1 Find a good starter project/template
Besides ionic provides its own ready-made app templates (blank app, app with tabs navigation, and side menu navigation app).
They lack all the goodies and requirements of a real mobile app (Geolocation, Push Notifications, Camera access, AdMob, iAd, Facebook, Google Analytics, In App Browser, Instagram, Social Sharing, Twitter, Google, etc).
Never mind, there are super complete starter projects and app templates around the corner. Here i recommend you my favourites:
ionFullApp
IonFullApp gives you the bootstrap you need in order to build your next PhoneGap / Cordova application based on the Ionic framework. It’s a well designed and beautifull template for you to start, and comes with lots of goodies.
If you want to try it, you can download the APK
ionWordpress
IonWordpress is a ready to use Full WordPress Integrated app both for Android and iOS. You just need to add some plugins to your WordPress site and the app will do the rest.
It’s a nice template and perfect if you want to extend your wordpress with a mobile app.
Download the APK and try it out.
Find the perfect app template for you
If you are curious, you can find more template apps here, still if you are looking for a special app template, please tell us a little bit more about what you are looking for here and we will do our best to guide you on finding what you are looking for.
#2 Get a five stars professional design
If you want to go a little bit further you can also get an awesome design for your app at 99designs.
#3 Backend?
So far so good, but what about the backend part of the story? As you may know not all apps can live by its own. They need a backend to authenticate users, get products, posts, etc. The way your backend will communicate with your app is through an API.
Having that in mind, in my opinion you have three alternatives here:
- You can use all mighty WordPress as your backend
- WordPress is very flexible and you can use it in many forms, as a blog, a cms, or ecommerce (using woocommerce for example), etc. Also there are tons of plugins that will help you add different functionalities.
- You can access your WordPress content through it’s JSON API and there you have all you need for your mobile application.
- This a fast and general solution, so depending on what your are planning to build you may need something more powerful and custom.
- Use Parse or Firebase (both “backends as a service”)
- If you are one of those who like to have strict control over the backend implementation, I suggest you to try Strongloop.
- Strongloop is a perfect solution if you need full control and custom functionalities on your backend. Basically is a platform that enables you to easily (I would say VERY easily) build custom API’s for your backend needs. (This is the solution I use for my clients production apps).
Again, if you are looking for a custom backend to fit your needs, please tell us a little bit more about what you are looking for here and we will do our best to guide you on finding what you are looking for.
Guest Author (Agustin Haller, https://twitter.com/agustinhaller)