When reviewing any new technology, library, or framework, you’ll first ask, “Where does this fit into the stack, and how would it benefit me?” TL;DR: Ionic’s ultimate goal is to make it easier to develop native mobile apps with HTML5, also known as Hybrid apps.
The Missing Piece
Compare it to something I know
While Ionic is not an exact one-for-one comparison to Twitter Bootstrap, it may be helpful when explaining where Ionic fits in. Let’s jump in the wayback machine and recall a time prior to the popularity of front-end frameworks. Developers were laying down some mean code, but they had to start from scratch for each project, and individually figure out the quirks of each browser. Eventually developers were given a huge push forward by starting projects with the [insert your favorite front-end framework here].
Great frameworks like Twitter Bootstrap simply make it easier to develop web apps and web sites, not because developers can’t write it themselves, but because it gives them a great starting point to build high-quality projects. Immediate benefits include a slick design and built-in cross-browser testing at no cost. But in my opinion, the great achievements of Twitter Bootstrap are the knowledge sharing it has brought developers, and the excellent way to document and promote recommended design patterns it provides.
Let’s Build Something Awesome
The Ionic Framework has similar goals in that we want to help promote recommended design patterns and document best practices. That’s why the framework is entirely open-source (MIT Licensed) so that as a community we can share our knowledge to build some great apps with HTML5. And as such, we trust others will help share best practices so that we can all continually improve.
HTML5 is ready!
Today’s mobile browsers compared to “yesterday’s” have become exponentially more advanced with modern APIs, and the devices themselves continually increase their performance. The best part is, there’s no sign of either slowing down, it’s only going to get better! There has never been a better time to kick-start a framework centered around native app development with HTML5.
That said, 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.
Markup and Presentation
We’re confident in our design patterns, but one area we made sure to focus on is giving developers full control. The CSS can stand on its own, but it is also built to be enhanced by the developer. For simplicity you can always just add in your own CSS and override default properties. And for even more power and flexibility, the core is written with SASS and includes easily customized variables and mixins. While the default design is similar to iOS, we feel we’ve left the CSS in a state which can be easily extended to get your own look and feel.
I’d also like to point out that while Ionic’s appearance is very “iOS 7”, it is purposefully not a “pixel-perfect” replication of it. The more CSS it takes to make it an exact match, the more developers have to override to get their own look. We feel its more important to let developers build an app for their brands rather than working so hard to be like everyone else.
In the beginning stages of Ionic, AngularJS continually entered our conversations and we quickly found it fit in great with our goals. If you know AngularJS already you’re going to love Ionic, and if you don’t know AngularJS yet then there is no better way to learn it than by building a practical native app. For us AngularJS just made sense, and as you build your first app with Ionic we hope you feel the same way too.
Use our default look and feel or customize it for your brand. And when you are ready to push to the app stores, compile your app with PhoneGap or Cordova (or Trigger.io), and you have a native-feeling app that will run on the most popular of platforms.
Go forth and build something awesome!