WEB, HYBRID, NATIVE EXPLAINED June 2013 CRAIG ISAKSON MOBILE ENGINEERING LEAD / SOFTWARE ENGINEER 701.235.5525 888.sundog fax: 701.235.8941 2000 44th St. S Floor 6 Fargo, ND 58103 www.sundoginteractive.com Web, Hybrid, Native Explained Craig Isakson 1
Today s mobile space can be overwhelming and somewhat confusing. There are a number of different terms floating around out there which can make it difficult to make business decisions for your company s mobile strategy. This whitepaper will explain current mobile technologies giving you detailed information on features, limitations, best practices, and tools for development. This information will help you decide which route to take when determining a mobile strategy; web, native, or hybrid application. Based off of these numbers, it is clear that if getting the most out of the resources that are put towards a mobile strategy, targeting a strategy around ios and Android would be advantageous. This is not to say that something may happen and Microsoft Windows Phone or some other mobile OS may rise to take a top spot. These are all things that need to be considered when developing a mobile strategy. It can be cumbersome but it is also what makes working in mobile so exciting. It is always changing. BUSINESS DILEMMA TECHNOLOGIES The largest issue in today s mobile environment facing businesses is choice. There are a number of different options available for a user to use when it comes to mobile. Anything from ios, Android, BlackBerry, and Microsoft. When developing a mobile strategy it is key to reach as many people as you can and to also account for the future to some extent. Try to anticipate where the market is going to move. Keep in mind that it took only two years for BlackBerry to go from having the largest user base of smartphones to almost the smallest at 6.4% losing out to ios and Android. The current US Market is as shown: One of the biggest hang-ups in the mobile space is the terminology surrounding Web, Hybrid, and Native applications. These terms are somewhat new and on the difficult side to comprehend. It does not help that the space is always changing which makes the definition to these terms somewhat of a moving target. Below is a diagram giving a visual representation of the different types of applications: As shown in this diagram, native applications are platform specific with the most capabilities. As the chart moves across to hybrid and HTML5/Web, it is easy to see that they are supported on multiple platforms but capabilities can be restricted. Below will describe in great detail the different applications and break certain applications into sub categories as there can be multiple definitions for a single category. Web, Hybrid, Native Explained Craig Isakson 2
WEB APPLICATION/HTML5 The easiest way to understand a web application is to not think of it as a web application. A web application is just a different way of saying a website. The only difference with a web application when referring to the mobile space is that the web application is designed and developed to work well on a small screen whether it be a phone or a tablet. For a user to get to a web application, they would need to open the browser on their phone and either search or click on a link to get to that specific URL. This is a great and easy way for your business to have a mobile presence alongside the full desktop site. The technologies behind a web application is HTML5, CSS, and JavaScript. These technologies for the most part have been around for a long time. As such, finding developers that are familiar with them is easier than finding developers that can write code native to platform specific OS s. Another benefit to web apps is that there is no need to install software. As long as the user has a browser, they are able to access the site. This means, if there are software updates to the web application, all that is needed is to push those changes to the web server that is hosting the web application and all subsequent visits to the web application will have the newest version. By utilizing responsive design, the web app can change what is presented to the user based off of screen size and resolution. While there are a number of benefits to using a web application, there are also a number of downsides. One of the most notable downsides is the speed of the application. Since the user is essentially downloading all/ most of the data each time they hit the web application, the connection speed becomes an issue. The speed of the data transfer is not the only speed issue, there is also speed issues with graphics and animations within the application. Since the device is using the browser to compile and render all graphics, it can be slow and not perform as well as other methods. Another downside to this type of application is data storage. It is possible with HTML5 to store data using Web Storage but this is just a simple SQL database, which is not nearly as fast or secure as any of the devices native database utilities. This means that if you are trying to cache data within the browser, it will work fine, as long as you do not have a lot of data. There will be noticeable lag with long running data operations. The other downside to a web application can be classified as mostly poor user experience. For instance, if the user is accessing a secure site, there is no way of account management. This means that the user will need to login each time their session has expired and they try to access the application. Another example of the poor user experience comes from simply having to open the browser and either go to your bookmarks or type in the address of the specific web application you are trying to access. This is much more onerous than having an installed application. Another downside that isn t always thought of, is an issue with the battery. Mobile devices depend on the battery to function. Use of a web application requires more data to be downloaded as well as more processor for rendering the graphics. Because of this, the battery will drain faster than with the native application alternatives. To recap: 1) A web application is just a website. 2) Development for a web application is faster than other methods. 3) Web apps do not have access to device hardware and can present a number downsides including speed, storage, responsiveness, and user experiences. Web, Hybrid, Native Explained Craig Isakson 3
NATIVE APPLICATION On the completely opposite end of the spectrum of a web application sits a native application. A native application is an application that is installed on your phone that was built or compiled using it s native programming language. For ios the native language is Objective C and Android is Java. Both are similar in that you need to install an integrated development environment (IDE) in order to develop and ultimately install the applications. A native application is platform specific. An application built for ios cannot be installed on an Android device or a Windows Phone device and vice versa. Because the developed apps are platform specific, development time and expertise is greatly increased over using a web application. It is necessary to have a development team that is well versed in each platform in order to build the applications. So why would someone want to go the route of a native application if the costs and work associated with building the application are greatly increased over a web app? The simple answer is because a native application has the best performance and user experience. A native application has a fast graphics API so all of the inapplication animations and graphics will be smooth and appear effortless. A native application also has built in components. What this means is the user will be using UI components within the application that they are familiar with. They will be the same components used by other native and system applications. This makes the learning curve for learning how to use the new application quite a bit easier. Native apps use the least amount of battery power over any other alternative. This is due to the fact that the app s are running how they were meant to be running and because less data is being used due to only needing to download only the information and not the interface. Native apps also have full access to all the devices hardware and system resources. With the newer phones this can range from camera, gps, accelerometer, barometer, gyroscope, Wi-Fi, Bluetooth, NFC, and any other type of hardware sensor or component. The system resources include contacts, address book, other applications (to an extent), accessibility options, account management, and a variety of others. This allows the developer/designer be as creative as possible in developing unique and innovative solutions. In a sense, the device becomes the limitation with native apps as opposed to the software being a limitation with web apps. To recap a native application is an application that is installed on your device. It is device specific and run OS specific code. You have full access to build any solution as long as it conforms to the hardware. It is the most efficient and easy to use application for the end user but it is the most costly application to write with the steepest learning curve. HYBRID APPLICATION By definition, a hybrid application is simply an application that can be installed on a device the same way as a native application but contains what is called a webview that renders HTML code either via a web request or via static HTML that is loaded as a resource in the application. This definition covers a variety of different types of applications that could be hybrid apps. Because of this, it makes more sense to breakout hybrid apps into three different categories; Thin Hybrid, Full Web Hybrid, and Full Device Hybrid. Web, Hybrid, Native Explained Craig Isakson 4
FULL WEB HYBRID EXAMPLE A full web hybrid application is an application that can be installed as a native application. The entire native application is a webview. The webview is a view that can render HTML code the same way the device s browser can. The webview will then point to an HTML5 web application that resides on a web server. The benefits of a full web hybrid application is that once installed, it is possible to update the code base in one place, the web server where the application resides, and instantly, all of the users will have the updated software. The downside to this type of application is much the same as a web application in that speed is a big issue. The users device has to download the entire interface and data each time it needs to render anything. Below is an example of a hybrid application being laid out in Xcode, the ios IDE: FULL DEVICE HYBRID Much like the full web hybrid application, the full device hybrid is a native application that contains only a webview for displaying it s data. The difference with the full device hybrid is that it s entire UI (view) and controller logic is contained within the binaries of the installed native application. Essentially, the HTML, JavaScript, and CSS files for displaying and accessing the data are installed within the native application and reside and are rendered on the device. This mirrors the a full native data driven application in that the application takes care of all of the layout and accessing the data via API s. The full device hybrid uses JavaScript remoting and AJAX to make callouts to API s to receive the data needed to display within the layouts. The benefit of this over the full web hybrid is that there is a lot less data being passed between the device and the web server. While not as fast or responsive as a native application, this method will provide the best results from HTML5. As you can see, this is the main view for the phone and within the main view there is a UIWebView. This view is essentially a browser window used to render HTML code. This is a very simple example but this is good at giving an idea of what it would look like. If this webview were pointed to a web application, it would be considered a full web hybrid application. If it was using resource files installed within the native application, it would be considered a full device hybrid application. Web, Hybrid, Native Explained Craig Isakson 5
HYBRID PRO S & CON S The pro s to using a Hybrid application are that you are mixing the best of both worlds between a native and a web application. At the core a hybrid application uses web technologies which have less of a learning curve than native application development. Using a hybrid application gives the ability to write once (mostly) and deploy to a number of different platforms. Since a hybrid application doesn t use native UI components, the application has a tendency to not feel as though it belongs on the platform depending on how different the UI components are from the devices native experience. Because a hybrid application is rendering HTML in a browser, the graphics performance is not going to be as fast or smooth as that of a purely native application. The biggest issue with using a hybrid application is some lack of accessibility to the devices native functionality such as hardware and system controls. places mentality. To give an idea of what is available, here is a list of the current API methods available to the developer. Not all of these will will work across all platforms but for the most part they will work for the biggest players: Accelerometer - Use the device s motion sensor Camera - Capture an image using the device s camera Capture - Capture media files using the device s media capture application Compass - Obtain the direction the device is pointing Connection - Check network state and cellular networking information Contacts - Work with the devices contact database Device - Gather device specific information Events - Hook into native events through JavaScript File - Hook into native file system through JavaScript HYBRID TOOLS There are a number of tools out there to develop hybrid mobile applications. Because hybrid mobile applications are built off of web technologies, there are numerous options available for libraries and frameworks for building mobile UI s. These options range from jquery Mobile to Foundation to any other type of responsive web design tools. These tools provide mobile UI components, animations, behavior, and touch aspects to your hybrid application. These tools can also be used for your HTML5 web apps. Where the hybrid application really shines is it s ability to access device specific functionality. For this there are only a few options out there. The most widely used option is PhoneGap. Geolocation - Make your application location aware Globalization - Enable representation of objects specific to locate InAppBrowser - Launch URL s in another in-app browser instance Media - Record and playback audio files Notification - Visual, audible, and tactile device notifications Splashscreen - Show and hide the applications splash screen Storage - Hook into the devices native storage options PhoneGap allows you to use JavaScript to access device specific hardware with the write once, use in multiple Web, Hybrid, Native Explained Craig Isakson 6
PLATFORM DIFFERENCES Below is a quick rundown on differences between the three platforms: Native Html5 Hybrid Application Features Graphics Native API s HTML, Canvas, SVG HTML, Canvas, SVG Performance Fast Slow Slow Native Look and Feel Native Emulated Emulated Distribution App Store Web Appstore Device Access Camera Yes No Yes Notifications Yes No Yes Contacts, Calendar Yes No Yes Offline Storage Secure file storage Shared SQL Secure file system, shared SQL Geolocation Yes Yes Yes Gestures Swipe Yes Yes Yes Pinch, Spread Yes Yes Yes Connectivity Online and offline Mostly online Online and Offline Development Skills Objective C, Jave, C# HTML5, CSS, Javascript HTML5, CSS, Javascript Web, Hybrid, Native Explained Craig Isakson 7
It is important to keep in mind all the differences between the platforms when considering a mobile strategy. Know where your users are coming from and from what device. Knowing this information makes it easier to decide which route to take. For the most part, a mobile web application is a necessity. Current mobile web traffic, depending on where the statistics are received is equal to or greater than desktop traffic. This means when a user is visiting your site, there is a very good chance that they are visiting from a mobile device. For everything beyond a mobile web presence that requires an actual mobile application, it is important to know your audience and know what you want to accomplish with the application. Typically, if a mobile application is consumer facing, a native mobile application is ideal providing that the project has the time and budget for development. There is a lot that you can accomplish with a hybrid mobile application but the user experience can be lacking. For this reason, a hybrid mobile application is great for a company that needs to provide mobile functionality to their employees. This allows for bring your own device (BYOD). The employee can bring their own device, no matter the platform, and still be able to use the mobile application all with little extra development for the employer. Mobile technology is exciting and ever changing at a fast pace. Because of this, it is important to stay up to date on the technologies and how to best incorporate current and future aspects into your mobile strategy. Web, Hybrid, Native Explained Craig Isakson 8
References: comscore Reports March 2013 U.S. Smartphone Subscriber Market Share. 2013. Available at http://www.comscore.com/insights/press_releases/2013/5/comscore_reports_march_2013_u.s._ Smartphone_Subscriber_Market_Share. Access May 13th, 2013. Getting Started with HTML5 Local Storage. 2013. Available at http://blog.appery.io/2011/09/getting-started-with-html5-local-storage/. Accessed May 13th, 2013. PhoneGap Documentation, API Reference. 2013. Available at http://docs.phonegap.com/en/2.7.0/index.html. Accessed May 13th, 2013. Understanding Your Mobile Application Development Options. 2013. Available at http://wiki.developerforce.com/page/native,_html5,_or_hybrid:_understanding_your_mobile_application_ Development_Options. Accessed May 13th, 2013. Web, Hybrid, Native Explained Craig Isakson 9