Where does the Ionic Framework fit in?
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
Every semi-colon slinging cowboy is out riding alone in the wild-west of building native apps with HTML5. Great tools like PhoneGap and Cordova that package up HTML, CSS, and JavaScript into multi-platform native apps already exist. Developers are skilled at creating web-based applications and there is a magnitude of resources to pull from. However, in today’s landscape we feel there is something missing to easily bridge the gap between HTML5 and native app development.
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.
Ionic is what lays the foundation for your hybrid app’s HTML, CSS and JavaScript. Instead of each developer having to individually figure out the quirks of native app development with HTML5, we’ve documented our recommendations, written the base CSS, and created a great architecture to build on top of.
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.
Application Scripting
Ionic not only comes with well documented markup and CSS, but also JavaScript design patterns to help you build some serious apps with similar concepts to iOS and Android. We wanted to let developers create the same kind of powerful UI interactions seen in native apps, like side menus and navigation controllers. We wanted to free hybrid apps from the URL bar and move towards more generic and powerful View Controller concepts.
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.
Conclusion
Ionic is that missing piece when creating native apps with web standards. Just drop in some CSS and JavaScript, and you’ll quickly get up to speed developing native applications with HTML5. (And don’t forget it includes our open-source font pack, Ionicons.)
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!
