{"id":94,"date":"2013-10-28T11:00:00","date_gmt":"2013-10-28T11:00:00","guid":{"rendered":"http:\/\/localhost\/?p=94"},"modified":"2015-12-16T19:55:02","modified_gmt":"2015-12-16T19:55:02","slug":"where-does-the-ionic-framework-fit-in","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in","title":{"rendered":"Where does the Ionic Framework fit in?"},"content":{"rendered":"

When reviewing any new technology, library, or framework, you\u2019ll first ask, \u201cWhere does this fit into the stack, and how would it benefit me?\u201d TL;DR: Ionic\u2019s ultimate goal is to make it easier to develop native mobile apps with HTML5, also known as Hybrid apps.<\/p>\n

The Missing Piece<\/h3>\n

Every semi-colon slinging cowboy is out riding alone in the wild-west of building native apps with HTML5. Great tools like PhoneGap<\/a> and Cordova<\/a> 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\u2019s landscape we feel there is something missing to easily bridge the gap between HTML5 and native app development.<\/p>\n

Compare it to something I know<\/h3>\n

While Ionic is not an exact one-for-one comparison to Twitter Bootstrap<\/a>, it may be helpful when explaining where Ionic fits in. Let\u2019s 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]<\/em>.<\/p>\n

Great frameworks like Twitter Bootstrap simply make it easier to develop web apps and web sites, not because developers can\u2019t 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.<\/p>\n

<\/p>\n

Let\u2019s Build Something Awesome<\/h3>\n

The Ionic Framework has similar goals in that we want to help promote recommended design patterns and document best practices. That\u2019s why the framework is entirely open-source (MIT Licensed<\/a>) 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.<\/p>\n

Ionic is what lays the foundation for your hybrid app\u2019s HTML, CSS and JavaScript. Instead of each developer having to individually figure out the quirks of native app development with HTML5, we\u2019ve documented our recommendations, written the base CSS, and created a great architecture to build on top of. <\/p>\n

HTML5 is ready!<\/h3>\n

Today\u2019s mobile browsers compared to \u201cyesterday\u2019s\u201d have become exponentially more advanced with modern APIs, and the devices themselves continually increase their performance. The best part is, there\u2019s no sign of either slowing down, it\u2019s only going to get better! There has never been a better time to kick-start a framework centered around native app development with HTML5. <\/p>\n

That said, Ionic is built for the devices of today and the future, not for devices built years ago. It\u2019s focused on native app development and not mobile website creation.<\/p>\n

Markup and Presentation<\/h3>\n

We\u2019re 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<\/a> and includes easily customized variables and mixins. While the default design is similar to iOS, we feel we\u2019ve left the CSS in a state which can be easily extended to get your own look and feel. <\/p>\n

I\u2019d also like to point out that while Ionic\u2019s appearance is very \u201ciOS 7\u201d, it is purposefully not a \u201cpixel-perfect\u201d 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.<\/p>\n

Application Scripting<\/h3>\n

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.<\/p>\n

In the beginning stages of Ionic, AngularJS<\/a> 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\u2019t 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.<\/p>\n

Conclusion<\/h3>\n

Ionic is that missing piece when creating native apps with web standards. Just drop in some CSS and JavaScript, and you\u2019ll quickly get up to speed developing native applications with HTML5. (And don’t forget it includes our open-source font pack, Ionicons<\/a>.)<\/em><\/p>\n

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<\/a> or Cordova<\/a> (or Trigger.io<\/a>), and you have a native-feeling app that will run on the most popular of platforms.<\/p>\n

Go forth and build something awesome!<\/p>\n<\/p>\n

Adam<\/div>\n
@adamdbradley<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

When reviewing any new technology, library, or framework, you\u2019ll first ask, \u201cWhere does this fit into the stack, and how would it benefit me?\u201d TL;DR: Ionic\u2019s 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 […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[2,3],"class_list":["post-94","post","type-post","status-publish","format-standard","hentry","category-all","tag-angularjs","tag-ionic"],"acf":[],"yoast_head":"\nWhere does the Ionic Framework fit in? - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Where does the Ionic Framework fit in?\" \/>\n<meta property=\"og:description\" content=\"When reviewing any new technology, library, or framework, you\u2019ll first ask, \u201cWhere does this fit into the stack, and how would it benefit me?\u201d TL;DR: Ionic\u2019s 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 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-28T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-12-16T19:55:02+00:00\" \/>\n<meta name=\"author\" content=\"Adam Bradley\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@adamdbradley\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adam Bradley\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in\"},\"author\":{\"name\":\"Adam Bradley\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/92f90fb9d52e33d4241c5ac46477cd21\"},\"headline\":\"Where does the Ionic Framework fit in?\",\"datePublished\":\"2013-10-28T11:00:00+00:00\",\"dateModified\":\"2015-12-16T19:55:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in\"},\"wordCount\":951,\"commentCount\":21,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"keywords\":[\"angularjs\",\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in\",\"url\":\"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in\",\"name\":\"Where does the Ionic Framework fit in? - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"datePublished\":\"2013-10-28T11:00:00+00:00\",\"dateModified\":\"2015-12-16T19:55:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Where does the Ionic Framework fit in?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/92f90fb9d52e33d4241c5ac46477cd21\",\"name\":\"Adam Bradley\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/04\/adambradley-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/04\/adambradley-150x150.jpg\",\"caption\":\"Adam Bradley\"},\"sameAs\":[\"http:\/\/twitter.com\/adamdbradley\",\"https:\/\/x.com\/adamdbradley\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/adam\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Where does the Ionic Framework fit in? - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in","og_locale":"en_US","og_type":"article","og_title":"Where does the Ionic Framework fit in?","og_description":"When reviewing any new technology, library, or framework, you\u2019ll first ask, \u201cWhere does this fit into the stack, and how would it benefit me?\u201d TL;DR: Ionic\u2019s 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 […]","og_url":"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in","og_site_name":"Ionic Blog","article_published_time":"2013-10-28T11:00:00+00:00","article_modified_time":"2015-12-16T19:55:02+00:00","author":"Adam Bradley","twitter_card":"summary_large_image","twitter_creator":"@adamdbradley","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Adam Bradley","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in"},"author":{"name":"Adam Bradley","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/92f90fb9d52e33d4241c5ac46477cd21"},"headline":"Where does the Ionic Framework fit in?","datePublished":"2013-10-28T11:00:00+00:00","dateModified":"2015-12-16T19:55:02+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in"},"wordCount":951,"commentCount":21,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"keywords":["angularjs","Ionic"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in","url":"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in","name":"Where does the Ionic Framework fit in? - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"datePublished":"2013-10-28T11:00:00+00:00","dateModified":"2015-12-16T19:55:02+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/where-does-the-ionic-framework-fit-in#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Where does the Ionic Framework fit in?"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/92f90fb9d52e33d4241c5ac46477cd21","name":"Adam Bradley","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/04\/adambradley-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/04\/adambradley-150x150.jpg","caption":"Adam Bradley"},"sameAs":["http:\/\/twitter.com\/adamdbradley","https:\/\/x.com\/adamdbradley"],"url":"https:\/\/ionic.io\/blog\/author\/adam"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/94","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/94\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=94"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=94"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}