{"id":244,"date":"2014-08-22T12:30:00","date_gmt":"2014-08-22T12:30:00","guid":{"rendered":"http:\/\/localhost\/?p=244"},"modified":"2015-12-16T19:48:51","modified_gmt":"2015-12-16T19:48:51","slug":"case-study-habitrpg","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/case-study-habitrpg","title":{"rendered":"Built with Ionic: HabitRPG"},"content":{"rendered":"<p><img decoding=\"async\" class=\"showcase-image lazyload\" data-src=\"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/habitrpg-header.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"><noscript><img decoding=\"async\" class=\"showcase-image\" src=\"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/habitrpg-header.png\"><\/noscript><\/p>\n<p><a href=\"https:\/\/habitrpg.com\/static\/front\">HabitRPG<\/a> is a fantasy role-playing game for improving real-life habits. When users achieve their goals, such as exercising for a certain number of hours a day or writing a specific number of words a day, they gain experience and \u201cgold.\u201d Failed goals (smoking, eating junk food, etc.) result in lost hit points. It\u2019s for anyone who can use a motivation boost for self-improvement.<\/p>\n<p>The website is currently the main property and includes additional features, like boss-battles, quests, challenges, guilds, and pets. The mobile app has, until recently, served as a slimmed-down companion to the website, but CTO Tyler Renelle says, \u201cNow that we\u2019re on Ionic, this will change fast.\u201d The HabitRPG website, mobile app, and Chrome extension are all <a href=\"https:\/\/github.com\/habitrpg\/\">open source<\/a>.<\/p>\n<p>The original HabitRPG app was built using PhoneGap, AngularJS, and Topcoat. \u201cTopcoat was a decent leg up from a blank slate, mostly bare bones CSS for a mobile-ish feel, but it wasn\u2019t enough,\u201d says Renelle. \u201cAfter poor reviews on performance and design, we decided it was time for a facelift and new framework.\u201d<\/p>\n<p><!--more--><\/p>\n<p>When it was time to re-do the app, Renelle says Ratchet and Ionic were the main contenders. Based on recommendations, research, and the insistence of their top contributor, <a href=\"https:\/\/github.com\/paglias\">paglias<\/a>, the HabitRPG team chose Ionic. \u201cIonic had many more features than Ratchet, was a tad more performant in my basic <code>cordova run android --device<\/code> experiments, and had much more steam in meetups and online discussions,\u201d says Renelle. \u201cThis already was enough for our decision. Then we found out Ionic is on AngularJS. As an AngularJS shop ourselves, the rest is history.\u201d<\/p>\n<p>The HabitRPG team chose to build an HTML5 app for two reasons: cross-platform builds and the ability to use JavaScript.<\/p>\n<p>\u201cWe wrote our app once, and it\u2019s available for iOS and Android,\u201d says Renelle. \u201cThe small performance and native-feel penalty is worth the time and resources saved, especially as our small operation has a limited supply of both.\u201d<\/p>\n<p><a href=\"https:\/\/ionic.io\/img\/blog\/habitrpg-app-preview.png\"><img decoding=\"async\" class=\"body-image lazyload\" data-src=\"https:\/\/ionic.io\/img\/blog\/habitrpg-app-preview.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"><noscript><img decoding=\"async\" class=\"body-image\" src=\"https:\/\/ionic.io\/img\/blog\/habitrpg-app-preview.png\"><\/noscript><\/a><\/p>\n<p>Plus, HabitRPG is a \u201cfull-stack JavaScript shop,\u201d using AngularJS, Node.js, MongoDB, and Chrome Extension. \u201cPhoneGap fit our stack like a glove,\u201d says Renelle. \u201cWe have a \u2018common lib\u2019 housing all our algorithms, helper functions, services\/directives, etc.&#8211;a package included on all properties and comprising the majority of each property\u2019s codebase. Fix a web bug, and we get that fix on mobile for free. It saves us tremendous amounts of time. Furthermore, any of our developers can jump to any of the other properties with ease&#8211;they\u2019re all JavaScript, and AngularJS to boot.\u201d<\/p>\n<p>Renelle explains that using Ionic allowed his team to replace awkward custom solutions with much cleaner code. \u201cOur app was basically a combo of Ionic\u2019s side menu and tabs starters&#8211;very basic,\u201d says Renelle. \u201cHowever, our previous framework didn\u2019t support much of this by way of JS components or CSS, so we home-grew the majority of it. Ionic allowed us to gut most of our code. I went in with a sledge hammer, replacing rickety custom solutions with Ionic\u2019s side menus, tabs, performant scrolling, navigation history, and more. Swipe-refresher was a pleasant surprise, so we put that right in.\u201d <\/p>\n<p>The HabitRPG team plans to incorporate more Ionic components over time. \u201cWe had Github tickets planning contending solutions for modals, item sorting, and infinite-scroll,\u201d says Renelle. \u201cThese would have added more dependencies and more home-grown clunkiness. Needless to say, I\u2019m excited to find these supported in Ionic proper. Our app has a much brighter future, thanks to Ionic.\u201d<\/p>\n<p>Renelle says he believes Ionic is the second most important thing to happen to the hybrid app dev space (the first being PhoneGap). \u201cIonic will grow an impressive showcase, proving to companies that hybrid is a viable option,\u201d he says.<\/p>\n<p>Find HabitRPG was developed by <a href=\"http:\/\/about.me\/lefnire\">Tyler Renelle<\/a>. You can find it on the <a href=\"https:\/\/itunes.apple.com\/us\/app\/habitrpg\/id689569235?mt=8\">iOS App Store<\/a> or the <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.ocdevel.habitrpg\">Android Play Store<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HabitRPG is a fantasy role-playing game for improving real-life habits. When users achieve their goals, such as exercising for a certain number of hours a day or writing a specific number of words a day, they gain experience and \u201cgold.\u201d Failed goals (smoking, eating junk food, etc.) result in lost hit points. It\u2019s for anyone [&hellip;]<\/p>\n","protected":false},"author":6,"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,8,3],"class_list":["post-244","post","type-post","status-publish","format-standard","hentry","category-all","tag-angularjs","tag-built-with","tag-ionic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Built with Ionic: HabitRPG - 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\/case-study-habitrpg\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Built with Ionic: HabitRPG\" \/>\n<meta property=\"og:description\" content=\"HabitRPG is a fantasy role-playing game for improving real-life habits. When users achieve their goals, such as exercising for a certain number of hours a day or writing a specific number of words a day, they gain experience and \u201cgold.\u201d Failed goals (smoking, eating junk food, etc.) result in lost hit points. It\u2019s for anyone [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/case-study-habitrpg\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-08-22T12:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-12-16T19:48:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/habitrpg-header.png\" \/>\n<meta name=\"author\" content=\"Katie Ginder-Vogel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@katiegv\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Katie Ginder-Vogel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/case-study-habitrpg#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/case-study-habitrpg\"},\"author\":{\"name\":\"Katie Ginder-Vogel\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/2910da3234dfb4b3870480300da225fd\"},\"headline\":\"Built with Ionic: HabitRPG\",\"datePublished\":\"2014-08-22T12:30:00+00:00\",\"dateModified\":\"2015-12-16T19:48:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/case-study-habitrpg\"},\"wordCount\":642,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/case-study-habitrpg#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/habitrpg-header.png\",\"keywords\":[\"angularjs\",\"Built With\",\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/case-study-habitrpg#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/case-study-habitrpg\",\"url\":\"https:\/\/ionic.io\/blog\/case-study-habitrpg\",\"name\":\"Built with Ionic: HabitRPG - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/case-study-habitrpg#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/case-study-habitrpg#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/habitrpg-header.png\",\"datePublished\":\"2014-08-22T12:30:00+00:00\",\"dateModified\":\"2015-12-16T19:48:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/case-study-habitrpg#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/case-study-habitrpg\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/case-study-habitrpg#primaryimage\",\"url\":\"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/habitrpg-header.png\",\"contentUrl\":\"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/habitrpg-header.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/case-study-habitrpg#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Built with Ionic: HabitRPG\"}]},{\"@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\/2910da3234dfb4b3870480300da225fd\",\"name\":\"Katie Ginder-Vogel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/131787f56fe4a7c430c43dc65597a3cebe4410b5c9e07b86ea7a07b30886e12b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/131787f56fe4a7c430c43dc65597a3cebe4410b5c9e07b86ea7a07b30886e12b?s=96&d=mm&r=g\",\"caption\":\"Katie Ginder-Vogel\"},\"sameAs\":[\"https:\/\/x.com\/katiegv\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/katie\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Built with Ionic: HabitRPG - 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\/case-study-habitrpg","og_locale":"en_US","og_type":"article","og_title":"Built with Ionic: HabitRPG","og_description":"HabitRPG is a fantasy role-playing game for improving real-life habits. When users achieve their goals, such as exercising for a certain number of hours a day or writing a specific number of words a day, they gain experience and \u201cgold.\u201d Failed goals (smoking, eating junk food, etc.) result in lost hit points. It\u2019s for anyone [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/case-study-habitrpg","og_site_name":"Ionic Blog","article_published_time":"2014-08-22T12:30:00+00:00","article_modified_time":"2015-12-16T19:48:51+00:00","og_image":[{"url":"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/habitrpg-header.png"}],"author":"Katie Ginder-Vogel","twitter_card":"summary_large_image","twitter_creator":"@katiegv","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Katie Ginder-Vogel","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/case-study-habitrpg#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/case-study-habitrpg"},"author":{"name":"Katie Ginder-Vogel","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/2910da3234dfb4b3870480300da225fd"},"headline":"Built with Ionic: HabitRPG","datePublished":"2014-08-22T12:30:00+00:00","dateModified":"2015-12-16T19:48:51+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/case-study-habitrpg"},"wordCount":642,"commentCount":5,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/case-study-habitrpg#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/habitrpg-header.png","keywords":["angularjs","Built With","Ionic"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/case-study-habitrpg#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/case-study-habitrpg","url":"https:\/\/ionic.io\/blog\/case-study-habitrpg","name":"Built with Ionic: HabitRPG - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/case-study-habitrpg#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/case-study-habitrpg#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/habitrpg-header.png","datePublished":"2014-08-22T12:30:00+00:00","dateModified":"2015-12-16T19:48:51+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/case-study-habitrpg#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/case-study-habitrpg"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/case-study-habitrpg#primaryimage","url":"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/habitrpg-header.png","contentUrl":"https:\/\/ionic.io\/img\/blog\/coride-app-preview.pngblog\/habitrpg-header.png"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/case-study-habitrpg#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Built with Ionic: HabitRPG"}]},{"@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\/2910da3234dfb4b3870480300da225fd","name":"Katie Ginder-Vogel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/131787f56fe4a7c430c43dc65597a3cebe4410b5c9e07b86ea7a07b30886e12b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/131787f56fe4a7c430c43dc65597a3cebe4410b5c9e07b86ea7a07b30886e12b?s=96&d=mm&r=g","caption":"Katie Ginder-Vogel"},"sameAs":["https:\/\/x.com\/katiegv"],"url":"https:\/\/ionic.io\/blog\/author\/katie"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/244","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\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=244"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/244\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}