<?xml version="1.0" encoding="UTF-8" ?>

<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
   
    <title>thebhwgroup.com</title>
   
   <link>https://thebhwgroup.com</link>
   <description>We build web and mobile applications for businesses of all sizes.
</description>
   <language>en-us</language>
   <managingEditor>bhwinfo@thebhwgroup.com</managingEditor>
   <atom:link href="rss" rel="self" type="application/rss+xml" />
   
    
	  <item>
        <title>Converting an AngularJS website into a Cordova app on iOS and Android</title>
        <link>https://thebhwgroup.com/blog/converting-angularjs-website-cordova-app-ios-and-android</link>
		<author>Taylor Smith</author>
		<pubDate>2015-07-27T00:00:00+00:00</pubDate>
		<guid isPermaLink="true">https://thebhwgroup.com/blog/converting-angularjs-website-cordova-app-ios-and-android</guid>
		<description><![CDATA[
		   Cordova is Apache's tool to convert a web application into a native application. It supports all of the major mobile operating systems and provides the ability to use native features like the camera, device status, and file system. There are a few frameworks out there that build off of this including [Ionic](http://ionicframework.com/) and Phonegap. If you've heard of Phonegap, you may be familiar with this concept. Cordova is the framework that phonegap uses and as of writing this there is essentially very little difference between the two. If you want more specifics about the difference, the ionic blog talks more about the [details](http://ionicframework.com/blog/what-is-cordova-phonegap/). This guide will focus on Cordova specifically but the steps may be similar for other frameworks. This guide is also intended to focus on how to convert an existing app into a native app by using Cordova but again may be helpful for building an app from scratch.

{% include full-blog-image.html src="cordova-printer-transparent.png" alt="Using Cordova to make an iOS and Android app from an AngularJS web app" %}

The Apache Cordova website has an intro on [how to use the command line interface](https://cordova.apache.org/docs/en/5.1.1/guide/cli/index.html) to start building an app from scratch. This guide is great for getting Cordova running. There are several things that need to be installed before you can begin creating an app and their guide covers the majority of the setup process. For our application we focused on Android and iOS and so I will only cover steps pertaining to these two operating systems. As a general outline of things that you need to install you can follow this list:

1. Install npm first, it will be used to install other things.
2. Install Cordova and AngularJS.
3. Install xCode if you are on mac.
4. Install an android ide (either Android Studio or Eclipse, I chose Android Studio).
5. Install the sdk you want to use. Or install multiple sdks if you want/need them.
6. Make sure you add android to the path.
    - For me, since I used Android Studio on mac, the library was located in the `/Users/<username>/Library/Android/sdk` folder. I used the following commands to add this to the path: 
        `export ANDROID_HOME=/Users/<username>/Library/Android/sdk/`
        `export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools`
    - Depending on the version the paths might be slightly differenct so you will have to research that for your set up and version.
7. If you want to add other platforms you must download the correct tools for development with that platform.

Once you have all of this set up you can create a test application by running the command:

```bash
cordova create test com.tsmith.test Test
```

If this succeeds you can begin adding platforms with this syntax:

```bash
cordova platforms add ios
cordova platforms add android
```

In order to test these you can use the emulators that come with the development tools. These emulators can be used to test with many different devices and allow you to test builds to make sure that your app works. The default cordova app will not really do anything but it will allow you to make sure that you have everything set up properly. If it works properly the app will run and it will display a message indicating that the Cordova has connected to the device properly. The commands for running the emulators are:

```bash
cordova emulate ios
cordova emulate android
```

Once you reach this point it is fairly straight forward to copy your code over. There are a few directories that you should be aware of in order to accomplish this though. At the project directory level you will see the www folder. This is where all of the code goes that would normally be in your web app. In this example I have it organized for an angular application but you can organize this based on the needs of your application. No files are shown here but in the www directory I also have an index.html file as the base of the application.

{% include full-blog-image.html src="cordova-tree-view.png" alt="Cordova directory structure" %}

##Platform Specific Code via Merges
If you look in the platforms directories you will see a folder for each platform label platform_www. This folder and its contents are built by Cordova. Making changes in these directories will **NOT** change the application specific code. It will be erased every time you build the application. By default Cordova no longer adds a merges directory but if you want to add platform specific code you would do so through this directory. Simply add a merges directory at the project level and specify any platform specific code within this folder.

##Loose Ends
At this point your app should be working on multiple devices. There are however a few gotchas to look out for. When developing, ensure that links are not local links. Links may need a full url to function since it is not a typical server hosted application. Also be sure to check all relative links for the same reason. Creating an app isolates these references and you need to thoroughly test to ensure that all links work properly. One other big thing to look for is the status bar. Every platform uses different status bar styles and apps can individually affect the status bar. Be sure to check out the [status bar plugin](https://github.com/apache/cordova-plugin-statusbar) and be aware of the options that are available when designing your app.

##Deploying
By using the emulators you can test the app to make sure it works but at some point you will want to test on a real device. The platform specific folders contain all of the code necessary to deploy your applications. Simply follow the standard instructions for the desired platform to deploy your app. The Cordova project has great [guides](https://cordova.apache.org/docs/en/5.1.1/guide/platforms/index.html) on various platforms that detail the process better than this article can cover. With these steps you should be well on your way to android, iOS, and other apps built straight from your angularJs code.
		]]></description>

    
        <category>hybrid</category>
    
        <category>cordova</category>
    
        <category>Mobile</category>
    
    
        <category>Mobile</category>
    

	  </item>
    
	  <item>
        <title>Hybrid Mobile Apps</title>
        <link>https://thebhwgroup.com/blog/hybrid-mobile-apps</link>
		<author>Paul Francis</author>
		<pubDate>2015-06-12T00:00:00+00:00</pubDate>
		<guid isPermaLink="true">https://thebhwgroup.com/blog/hybrid-mobile-apps</guid>
		<description><![CDATA[
		   <h2>Overview of hybrid mobile apps</h2>

<p>Hybrid mobile apps are an attempt to reduce the cost and barrier to entry for <a href="https://thebhwgroup.com/services/mobile-app-development-company-austin-texas" target="_blank">mobile app development</a>. They do this by targeting multiple platforms using a single codebase written in HTML, CSS, &amp; Javascript. Apps that take this approach are created much in the same way that modern websites are made, but rather than being viewed in a mobile web browser, the app is placed inside a small native wrapper that allows it to be submitted to app stores and installed like any other mobile app. If all goes according to plan, developers will never have to write a single line of native code and users will not have the faintest idea that they are using a hybrid app.</p>

<div class="images full-row">
  <div class="image">
    <img src="https://thebhwgroup.com/sites/default/images/HTML_CSS_JS.png" 
      alt="HTML CSS Javascript logos"
      
      
       />
      
  </div>
</div>

<p>The hope is that hybrid mobile apps can significantly reduce development costs and drastically increase the number of developers who are capable of developing apps. This article will explore how close hybrid apps come to achieving this dream, explain several key limitations of hybrid apps, explore their ramifications in the industry, and finally outline how hybrid mobile apps fit into our overall mobile app development approach.</p>

<h2>What is so great about hybrid mobile apps?</h2>

<div class="images full-row">
  <div class="image">
    <img src="https://thebhwgroup.com/sites/default/images/App_Stores.png" 
      alt="Available on the app store and on Google Play"
      
      
       />
      
  </div>
</div>

<p>Recently there has been a surge in <a href="https://ionic.io/blog/capacitor-everything-youve-ever-wanted-to-know" target="_blank">popularity of hybrid mobile apps</a>. But what really makes them so great? One of the biggest advantages is that they open the door for web developers to the mobile app stores. JavaScript, the primary client-side language of web development, is the eighth most popular programming language according to <a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" target="_blank">tiobe.com</a>. Java, the primary language for Android, and Objective-C, the primary language used for iOS, rank 1st and 14th respectively. Since hybrid mobile apps allow developers to use JavaScript instead of the individual native platform languages, this creates a huge influx of developers. Additionally, companies that once only offered web development services can now begin offering mobile app development services as well. With a larger supply of capable developers, the cost of development will decrease and the number of apps in the stores will continue to grow.</p>

<p>Another massive advantage is that traditional mobile app development requires separate codebases for each platform the app targets. With multiple codebases, development time is increased and so too is the time required to QA each version. This also means that your development team will be larger and thus increases the likelihood that the app behaves differently on each platform. By building a hybrid mobile app, all versions are kept in sync. You will still have to QA the app on all targeted platforms, but the versions should behave the same in almost all cases.</p>

<p>A final triumph of hybrid mobile apps is their ability to convert existing web apps to mobile apps. This will not work in all cases and the time needed can vary significantly, but if you already have a web app that works well on mobile browsers, odds are you can fairly easily convert it to a hybrid mobile app. This works best if you planned to do this all along, but we have had great success taking web apps we built within the last few years and bundling them as a hybrid apps well after the original web app launched. Since creating a hybrid mobile app is so much like making a mobile website, often you simply have to go back and repackage what you already built.</p>

<h2>Who uses hybrid apps?</h2>

<div class="images full-row">
  <div class="image">
    <img src="https://thebhwgroup.com/sites/default/images/instagram-logo.png" 
      alt="Instagram logo"
      
      
       />
      
  </div>
</div>

<p>it is generally a good idea not to hop on the latest technology trend too soon. Early adopters often have significant growing pains, have to respond to frequent updates and changes, and risk buying into something that might not last more than a year. But, identifying a new technology that can significantly reduce your costs and help get your app live sooner can put you ahead of your competition. So, it is often a good idea to look at other top companies and see how they are approaching and adopting new technologies. With this in mind, here are a list of some highly successful hybrid mobile apps:</p>

<ul>
   <li><a href="https://instagram.com/" target="_blank">Instagram</a></li>
   <li><a href="https://www.uber.com/" target="_blank">Uber</a></li>
   <li><a href="https://play.google.com/store/apps/details?id=com.untappdllc.app&hl=en" target="_blank">Untappd</a></li>
   <li><a href="http://www.yelp.com/" target="_blank">Yelp</a></li>
</ul>

<p>It is equally important to understand why these companies chose to go with the hybrid app approach. Still more important is finding companies that choose to go in a different direction or ones that once had a hybrid app, but abandoned it in favor of another approach. Finding these stories will help you understand the shortcomings of hybrid apps and better understand if going hybrid is the proper approach for your app.</p>

<h2>What are some common problems with hybrid mobile apps?</h2>

<p>Many apps begin down the hybrid path, only to realize too late that there is going to be a serious problem with the chosen approach. For this reason, it is paramount that decision makers understand the shortcomings of hybrid apps before getting started. Here are some common issues faced when working with hybrid mobile apps:
<ul>
   <li>UI sluggishness on animations.</li>
   <li>Memory related issues on memory-limited devices.</li>
   <li>Lack of packages or built-in support for desired native functionality.</li>
   <li>UI/UX uniformity between platforms, rather than a platform-specific look and feel that many users expect.</li>
   <li>A later project milestone will add to the project scope, something that is very difficult or impossible to do with a hybrid app.</li>
</ul></p>

<p>These issues vary in severity from project to project and between hybrid app libraries. Some of these are deal breakers, whereas some are an inconvenience that is justified by the project&#39;s lower budget. It is important to get an informed and unbiased opinion prior to selecting the approach and technology before beginning any mobile app project.</p>

<h2>How much do hybrid mobile apps cost?</h2>

<p>Hybrid apps should be moderately less expensive than native apps, IF you are targeting more than one platform. They should also be cheaper to maintain and test since they use a single code base. They also might be more cost effective if you already have web developers on payroll, since now they will be able to work on your mobile app as well. It is not always true that going hybrid will save you 50% when targeting iOS and Android, but in our experience you can expect to save around 30% to 40%. This of course is reliant upon a hybrid app being a good fit for the project. </p>

<p>Like almost anything else in web and mobile development, there is not a one-size-fits-all cost equation and the total cost of a project could be less if you go native. It all depends on understanding the options and choosing the best one for your app. Hybrid apps have the potential to be cheaper, but that is not always the case.</p>

<h2>How do hybrid apps compare to native mobile apps?</h2>

<div class="images full-row">
  <div class="image">
    <img src="https://thebhwgroup.com/sites/default/images/rush-locator-small.png" 
      alt="Native mobile locator app"
      
      
       />
      
  </div>
</div>

<p>Hybrid app advocates would like you to believe that they deliver the exact same experience as native apps but with a substantially smaller price tag. For the most part, they are correct. Hybrid apps can be submitted to the app stores just like native apps. They can be downloaded by users just like native apps. They perform much in the same way as a native app and as we have already discussed they can be significantly less expensive to make than native apps.</p>

<p>However, there are some differences when it comes to performance, inter-app operability, animations, and native functionality. Since hybrid apps are basically a web view, they can be a bit sluggish and less responsive than native apps. This is particularly apparent with animations (such as the iOS tray open and close animation). Additionally, when a hybrid app wants to use native functionality, like accessing contacts or calendars, they have to rely on various packages. If there is not an existing package that performs your desired task, you might have to make your own. This is made more difficult by the fact that these packages must be written natively for each platform you are targeting. So much for not having to learn Java or Objective-C! A few other ways hybrid apps fall short of native apps include offline functionality, memory usage, and overall developer support and documentation.</p>

<h2>How do hybrid apps compare to responsive websites?</h2>

<div class="images full-row">
  <div class="image">
    <img src="https://thebhwgroup.com/sites/default/images/devices.png" 
      alt="Responsive website demo"
      
      
       />
      
  </div>
</div>

<p><a href="https://thebhwgroup.com/services/responsive-design" target="_blank">Responsive websites</a> are actually quite similar to hybrid apps. In many ways, you can consider the mobile form of a responsive website as the core of a hybrid app. A responsive website has the HTML, CSS, &amp; Javascript needed for the site to be functional on mobile devices. The content, styling, and logic can be the exact same for both. The hybrid app simply involves taking a web app and packaging it in a native wrapper. You have to ensure that the user experience still works in this form, but it is very possible that no additional work is needed to convert your responsive website (or mobile website for that matter) to a hybrid mobile app.</p>

<p>This means the most significant difference between the two is how they are accessed. Responsive websites are viewed in mobile browsers and benefit from your traditional Google SEO. Hybrid apps on the other hand are found in app stores and installed to your phone’s home screen. This has a huge array of benefits, many of which I discuss in my previous article on <a href="https://thebhwgroup.com/blog/2014/03/mobile-engagement-part-2-social" target="_blank">mobile engagement</a>.</p>

<h2>How do hybrid apps compare to cross-platform native apps?</h2>

<div class="images full-row">
  <div class="image">
    <img src="https://thebhwgroup.com/sites/default/images/Xamarin.png" 
      alt="Xamarin logo"
      
      
       />
      
  </div>
</div>

<p>Cross-platform hybrid apps are apps built using a single codebase, but compile to native code for each platform. Popular cross-platform technologies include <a href="http://xamarin.com/" target="_blank">Xamarin</a> and <a href="https://www.nativescript.org/" target="_blank">NativeScript</a>. These technologies compile code to native binary, making them true native apps. Being native, they have the ability to have better performance, can take on the platform specific native UI/UX, and can make better use of other native functions. The downside is these approaches often have a steep learning curve. So, although you can save money and effort when compared to platform-specific native approach, cross-platform native will likely be more expensive than going hybrid. </p>

<p>Deciding between these two options will largely come down to your development team’s skill set. If they have .Net and C# experience, Xamarin might be a great fit. But, they will have to learn a fair bit about native app processes along the way. If you do not fit in this group, it might be a good idea to consider going hybrid. Many would likely argue that if you have to invest time to learn a cross-platform native approach, maybe you should invest just a bit more and go platform-specific native, since ultimately that will always be the most performant and provide the best user experience.</p>

<h2>What do hybrid apps mean for web developers?</h2>

<p>On the surface, the emergence of hybrid mobile apps is fantastic for web developers. With the explosive growth in smartphones &amp; tablets, there is an enormous opportunity for app developers. But learning native development (let alone development for multiple platforms) has historically been a large barrier to entry. Hybrid apps, in theory, remove this barrier and allow web developers to enter this very profitable market. However, web developers should make sure to understand the limitations of hybrid apps and be willing to step into native code where necessary.</p>

<p>There is yet another interesting angle for web developers thanks to hybrid mobile apps. For freelance or consultant developers, you might be bidding against other developers who only offer native development. Since hybrid apps are usually cheaper, web developers can have a significant competitive advantage when pricing projects. This is increasingly true for apps that are targeting multiple platforms. Savvy web developers might be able to increase their rates and still be a competitively priced option. If you are a web developer, it makes a ton of sense and might require limited effort to begin offering hybrid app development services. Web developers should also keep an eye on <a href="https://facebook.github.io/react-native/" target="_blank">React Native</a>. It has allowed us to use experienced web developers on native mobile projects.</p>

<h2>What do hybrid apps mean for mobile developers?</h2>

<p>As a mobile developer, I would carefully read and understand the preceding paragraph. I would research and understand the current state of hybrid app development and pay particular attention to its shortcomings. If you are a freelance or consultant mobile developer, you will soon be or likely already are competing against web developers for mobile app projects. This could mean that you have to more competitively price your projects and that every one of your proposals is being compared to a whole new set of competitors. But, if you can explain and demonstrate the advantages of native mobile apps and know what apps are a better fit for your approach, you should be able to avoid losing any business to web developers employing the hybrid app approach.</p>

<p>Additionally, mobile developers could instead leverage their native development experience, learn some web development (if they don’t already), and become a world-class hybrid app developer. As already discussed, most hybrid apps rely on packages written natively. Developers with this cross-section of skills can really set themselves apart by mastering both native and hybrid app approaches.</p>

<h2>What do hybrid apps mean for businesses?</h2>

<p>Any experienced business person should have read the previous two sections with a big grin on their face. Since hybrid apps bring more developers to the table, you have many more options to consider when building a mobile app. More developers means increased competition for your business, which of course means you save money. Increased options does mean you will have to do more research to fully understand the correct approach. You need to consider what the app is and what it could be. Businesses would be wise to find someone or a company who truly offers a wide array of mobile app development approaches. That way, they can rely on their guidance and hopefully not be steered one direction because it is the only service that developer or company offers.</p>

<p>One other thing to consider is if you already have a web app, hybrid apps can likely parlay that site into a mobile app for a fraction of the cost a new app would cost. Having a mobile app is a fantastic idea for any business and thanks to hybrid apps, they are cheaper than ever.</p>

<h2>What are your options when making a hybrid app?</h2>

<div class="images full-row">
  <div class="image">
    <img src="https://thebhwgroup.com/sites/default/images/cordova_logo_normal_dark.png" 
      alt="Cordova Logo"
      
      
       />
      
  </div>
</div>

<p>As discussed, hybrid apps involve taking what is basically a website and wrapping it in a native package. There are several different frameworks that can make this process possible. Evaluating and choosing a framework can be overwhelming given the large number of options. Here is a list of some of the most popular options and a bit about each:
<ul>
   <li><a href="http://ionicframework.com/" target="_blank">Ionic</a> - Ionic provides several built in UI components and is heavily reliant on AngularJS for two-way data binding.</li>
   <li><a href="https://cordova.apache.org/" target="_blank">Cordova (Phone Gap)</a> - Cordova is the least opinionated option. Rather than bundling a bunch of things together, Cordova is a framework that lets you define your tools and simply handles the packaging and releasing of the app.</li>
   <li>Appcelorator Titanium - Uses Alloy (a MVC framework), has a built-in API framework, and offers real-time analytics.</li>
   <li><a href="http://www.sencha.com/products/touch/" target="_blank">Sencha Touch</a> - One of the older hybrid app frameworks, Touch places an emphasis on mimicking native UI/UX.</li>
   <li><a href="http://www.telerik.com/kendo-ui" target="_blank">Kendo UI</a> - Kendo is a great choice for fans of jQuery.</li>
</ul></p>

<h2>How much staying power do hybrid mobile apps have?</h2>

<p>Buying into a new technology can be a risky endeavor. Early adopters often pay a hefty price to maintain their apps if the underlying technology changes or gets abandoned. But, one of the great things about hybrid apps is that they rely so heavily on web development technologies. Given the immense staying power of the web and websites, the languages used to make hybrid mobile apps will be taught and used for quite some time. So, odds are you will not find yourself in a position where you have to pay for some niche developer to maintain your app. 
But, there is some risk in which hybrid app technology you choose. It is possible that one or more of the current frameworks will fall out of favor and stop being maintained. A final risk is that other methods, such as cross-platform mobile app development (e.g. Xamarin), become increasingly more popular.</p>

<p>Ultimately the thing to consider is how long you expect your app to be used and if it is reasonable to think hybrid apps will be in use for that whole period. In most cases, that seems like a pretty safe bet to me.</p>

<h2>Do we recommend taking the hybrid approach?</h2>

<p>As a rule, we think having a single technology stack or approach and applying it to every project is a terrible idea. Companies and developers that do this will often force an ill-fitting solution on a project when another approach would have worked much better. So, we think anyone arguing that hybrid apps are a silver bullet or completely useless is dead wrong and we would encourage you to be very skeptical of such developers as it is likely they are either only capable of doing hybrid apps or do not have the capacity to do anything other than native.</p>

<p>In general, we think hybrid is a solid budget and convenience option. Here are some common cases in which we recommend going with a hybrid app approach:
<ul>
   <li>A project requires a responsive website and a mobile app would be a “nice-to-have.”</li>
   <li>An app will be deployed to multiple platforms, not contain too many or too involved animations, and a limited amount of native functionality is required.</li>
   <li>A project has a limited budget and we want to test an app’s viability for as small of an investment as possible.</li>
   <li>A web app version already exists and the mobile app would be very similar.</li>
</ul></p>

<p>Here are some apps where we would be hesitant to go hybrid:
<ul>
   <li>The app relies on native functionality, such as extensive calendar, contacts, or photo utilization.</li>
   <li>The project budget is sizable and the goal is to have the best possible app.</li>
   <li>The app will only ever target 1 platform.</li>
   <li>The app will target multiple platforms and you want the app to follow each platforms standard UI and UX.</li>
   <li>The app will feature moderate to extensive animations.</li>
   <li>There is a possibility that down the road the app will need a feature or integration that isn’t possible or is prohibitively expensive with the hybrid app approach.</li>
</ul></p>

<p>Obviously these lists are more guides than hard rules, but this is an example of the types of things we consider when deciding on a mobile app development approach. </p>

<h2>Conclusion</h2>

<p>Hybrid apps are an exciting and impactful new technology. Decision makers and developers should make sure they understand the what, how, and why of this new mobile app development possibility.</p>

<p>As a web and mobile development company, hybrid apps have given us a great new tool to use on some projects. But like any tool, knowing when to use it is every bit as important as knowing how to use it. I would make sure any company you work with understands, considers, and offers all available options. If not, your app might be taking a wrong turn right out of the gate. If you would like to speak with us about your next <a href="https://thebhwgroup.com/services/mobile-app-development-company-austin-texas" target="_blank">mobile app project</a>, we would love to hear from you! </p>

<p>Let us know if you have any questions about this article or there are any other topics you would like us to cover related to hybrid apps or mobile development in general.</p>

		]]></description>

    
        <category>Mobile</category>
    
        <category>hybrid</category>
    
        <category>app</category>
    
        <category>cordova</category>
    
    
        <category>Mobile</category>
    

	  </item>
    
  </channel>
</rss>
