Comments 0

Document transcript

Web, Hybrid, Native — Explained|Craig Isakson1701.235.5525

|888.sundog|fax: 701.235.89412000 44th St. S|Floor 6|Fargo, ND 58103www.sundoginteractive.comWE B, HY BRI D, NAT I VEJune 2013CRAI G I S AKS ONMOBILE ENGINEERING LEAD / SOFTWARE ENGINEERE XPL AI NE DWeb, Hybrid, Native — Explained|Craig Isakson2Today’s mobile space can be overwhelming andsomewhat confusing. There are a number of differentterms floating around out there which can make it difficultto make business decisions for your company’s mobilestrategy. This whitepaper will explain current mobiletechnologies giving you detailed information on features,limitations, best practices, and tools for development.This information will help you decide which route to takewhen determining a mobile strategy; web, native, orhybrid application.BUSINESS DILEMMAThe largest issue in today’s mobile environment facingbusinesses is choice. There are a number of differentoptions available for a user to use when it comes tomobile. Anything from iOS, Android, BlackBerry, andMicrosoft. When developing a mobile strategy it is key toreach as many people as you can and to also accountfor the future to some extent. Try to anticipate where themarket is going to move. Keep in mind that it took onlytwo years for BlackBerry to go from having the largestuser base of smartphones to almost the smallest at 6.4%losing out to iOS and Android. The current US Market isas shown:Based off of these numbers, it is clear that if gettingthe most out of the resources that are put towards amobile strategy, targeting a strategy around iOS andAndroid would be advantageous. This is not to say thatsomething may happen and Microsoft Windows Phoneor some other mobile OS may rise to take a top spot.These are all things that need to be considered whendeveloping a mobile strategy. It can be cumbersome butit is also what makes working in mobile so exciting. It isalways changing.TECHNOLOGIESOne of the biggest hang-ups in the mobile space isthe terminology surrounding Web, Hybrid, and Nativeapplications. These terms are somewhat new and onthe difficult side to comprehend. It does not help thatthe space is always changing which makes the definitionto these terms somewhat of a moving target. Below isa diagram giving a visual representation of the differenttypes of applications:As shown in this diagram, native applications are platformspecific with the most capabilities. As the chart movesacross to hybrid and HTML5/Web, it is easy to see thatthey are supported on multiple platforms but capabilitiescan be restricted. Below will describe in great detail thedifferent applications and break certain applications intosub categories as there can be multiple definitions for asingle category.Web, Hybrid, Native — Explained|Craig Isakson3WEB APPLICATION/HTML5The easiest way to understand a web application is tonotthink of it as a web application. A web application isjust a different way of saying a website. The only differencewith a web application when referring to the mobile spaceis that the web application is designed and developed towork well on a small screen whether it be a phone or atablet.For a user to get to a web application, they wouldneed to open the browser on their phone and eithersearch or click on a link to get to that specific URL.This is a great and easy way for your business to havea mobile presence alongside the full desktop site. Thetechnologies behind a web application is HTML5, CSS,and JavaScript. These technologies for the most parthave been around for a long time. As such, findingdevelopers that are familiar with them is easier thanfinding developers that can write code native to platformspecific OS’s. Another benefit to web apps is that thereis no need to install software. As long as the user has abrowser, they are able to access the site. This means, ifthere are software updates to the web application, all thatis needed is to push those changes to the web serverthat is hosting the web application and all subsequentvisits to the web application will have the newest version.By utilizing responsive design, the web app can changewhat is presented to the user based off of screen sizeand resolution.While there are a number of benefits to using a webapplication, there are also a number of downsides.One of the most notable downsides is the speed of theapplication. 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 speedof the data transfer is not the only speed issue, there isalso speed issues with graphics and animations withinthe application. Since the device is using the browser tocompile and render all graphics, it can be slow and notperform as well as other methods.Another downside to this type of application is datastorage. It is possible with HTML5 to store data usingWeb Storage but this is just a simple SQL database,which is not nearly as fast or secure as any of the devicesnative database utilities. This means that if you are tryingto cache data within the browser, it will work fine, as longas you do not have a lot of data. There will be noticeablelag with long running data operations.The other downside to a web application can beclassified as mostly poor user experience. For instance,if the user is accessing a secure site, there is no way ofaccount management. This means that the user will needto login each time their session has expired and they tryto access the application. Another example of the pooruser experience comes from simply having to open thebrowser and either go to your bookmarks or type in theaddress of the specific web application you are tryingto access. This is much more onerous than having aninstalled application.Another downside that isn’t always thought of, is an issuewith the battery. Mobile devices depend on the battery tofunction. Use of a web application requires more data tobe downloaded as well as more processor for renderingthe graphics. Because of this, the battery will drain fasterthan with the native application alternatives.To recap: 1) A web application is just a website. 2)Development for a web application is faster than othermethods. 3) Web apps do not have access to devicehardware and can present a number downsides includingspeed, storage, responsiveness, and user experiences.Web, Hybrid, Native — Explained|Craig Isakson4NATIVE APPLICATIONOn the completely opposite end of the spectrum ofa web application sits a native application. A nativeapplication is an application that is installed on yourphone that was built or compiled using it’s nativeprogramming language. For iOS the native languageis Objective C and Android is Java. Both are similarin that you need to install an integrated developmentenvironment (IDE) in order to develop and ultimately installthe applications. A native application is platform specific.An application built for iOS cannot be installed on anAndroid device or a Windows Phone device and viceversa. Because the developed apps are platform specific,development time and expertise is greatly increasedover using a web application. It is necessary to have adevelopment team that is well versed in each platform inorder to build the applications.So why would someone want to go the route of a nativeapplication if the costs and work associated with buildingthe application are greatly increased over a web app?The simple answer is because a native application hasthe best performance and user experience. A nativeapplication has a fast graphics API so all of the in-application animations and graphics will be smooth andappear effortless. A native application also has built incomponents. What this means is the user will be using UIcomponents within the application that they are familiarwith. They will be the same components used by othernative and system applications. This makes the learningcurve for learning how to use the new application quitea bit easier. Native apps use the least amount of batterypower over any other alternative. This is due to the factthat the app’s are running how they were meant to berunning and because less data is being used due to onlyneeding to download only the information and not theinterface.Native apps also have full access to all the deviceshardware and system resources. With the newer phonesthis can range from camera, gps, accelerometer,barometer, gyroscope, Wi-Fi, Bluetooth, NFC, andany other type of hardware sensor or component. Thesystem resources include contacts, address book,other applications (to an extent), accessibility options,account management, and a variety of others. Thisallows the developer/designer be as creative as possiblein developing unique and innovative solutions. In a sense,the device becomes the limitation with native apps asopposed to the software being a limitation with web apps.To recap a native application is an application that isinstalled on your device. It is device specific and run OSspecific code. You have full access to build any solutionas long as it conforms to the hardware. It is the mostefficient and easy to use application for the end user butit is the most costly application to write with the steepestlearning curve.HYBRID APPLICATIONBy definition, a hybrid application is simply an applicationthat can be installed on a device the same way as anative application but contains what is called a webviewthat renders HTML code either via a web request orvia static HTML that is loaded as a resource in theapplication. This definition covers a variety of differenttypes of applications that could be hybrid apps. Becauseof this, it makes more sense to breakout hybrid apps intothree different categories; Thin Hybrid, Full Web Hybrid,and Full Device Hybrid.Web, Hybrid, Native — Explained|Craig Isakson5FULL WEB HYBRIDA full web hybrid application is an application that canbe installed as a native application. The entire nativeapplication is a webview. The webview is a view that canrender HTML code the same way the device’s browsercan. The webview will then point to an HTML5 webapplication that resides on a web server. The benefits ofa full web hybrid application is that once installed, it ispossible to update the code base in one place, the webserver where the application resides, and instantly, all ofthe users will have the updated software. The downsideto this type of application is much the same as a webapplication in that speed is a big issue. The users devicehas to download the entire interface and data each time itneeds to render anything.

FULL DEVICE HYBRIDMuch like the full web hybrid application, the full devicehybrid is a native application that contains only awebview for displaying it’s data. The difference with thefull device hybrid is that it’s entire UI (view) and controllerlogic is contained within the binaries of the installednative application. Essentially, the HTML, JavaScript,and CSS files for displaying and accessing the data areinstalled within the native application and reside and arerendered on the device. This mirrors the a full native datadriven application in that the application takes care ofall of the layout and accessing the data via API’s. Thefull device hybrid uses JavaScript remoting and AJAXto make callouts to API’s to receive the data needed todisplay within the layouts. The benefit of this over the fullweb hybrid is that there is a lot less data being passedbetween the device and the web server. While not as fastor responsive as a native application, this method willprovide the best results from HTML5.EXAMPLEBelow is an example of a hybrid application being laid outin Xcode, the iOS IDE:As you can see, this is the main view for the phone andwithin the main view there is a UIWebView. This view isessentially a browser window used to render HTML code.This is a very simple example but this is good at givingan idea of what it would look like. If this webview werepointed to a web application, it would be considereda full web hybrid application. If it was using resourcefiles installed within the native application, it would beconsidered a full device hybrid application.Web, Hybrid, Native — Explained|Craig Isakson6HYBRID PRO’S & CON’SThe pro’s to using a Hybrid application are that youare mixing the best of both worlds between a nativeand a web application. At the core a hybrid applicationuses web technologies which have less of a learningcurve than native application development. Using ahybrid application gives the ability to write once (mostly)and deploy to a number of different platforms. Since ahybrid application doesn’t use native UI components,the application has a tendency to not feel as though itbelongs on the platform depending on how different theUI components are from the devices native experience.Because a hybrid application is rendering HTML in abrowser, the graphics performance is not going to be asfast or smooth as that of a purely native application. Thebiggest issue with using a hybrid application is some lackof accessibility to the devices native functionality such ashardware and system controls.HYBRID TOOLSThere are a number of tools out there to develop hybridmobile applications. Because hybrid mobile applicationsare built off of web technologies, there are numerousoptions available for libraries and frameworks for buildingmobile UI’s. These options range from jQuery Mobile toFoundation to any other type of responsive web designtools. These tools provide mobile UI components,animations, behavior, and touch aspects to your hybridapplication. These tools can also be used for yourHTML5 web apps. Where the hybrid application reallyshines is it’s ability to access device specific functionality.For this there are only a few options out there. The mostwidely used option is PhoneGap.PhoneGap allows you to use JavaScript to access devicespecific hardware with the write once, use in multipleplaces mentality. To give an idea of what is available,here is a list of the current API methods available tothe developer. Not all of these will will work across allplatforms but for the most part they will work for thebiggest players:•Accelerometer - Use the device’s motion sensor•Camera - Capture an image using the device’scamera•Capture - Capture media files using the device’smedia capture application•Compass - Obtain the direction the device ispointing•Connection - Check network state and cellularnetworking 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•Geolocation - Make your application location aware•Globalization - Enable representation of objectsspecific to locate•InAppBrowser - Launch URL’s in another in-appbrowser instance•Media - Record and playback audio files•Notification - Visual, audible, and tactile devicenotifications•Splashscreen - Show and hide the applicationssplash screen•Storage - Hook into the devices native storageoptionsWeb, Hybrid, Native — Explained|Craig Isakson7PLATFORM DIFFERENCESBelow is a quick rundown on differences between thethree platforms:NativeHtml5HybridApplication FeaturesGraphicsNative API’sHTML, Canvas, SVGHTML, Canvas, SVGPerformanceFastSlowSlowNative Look and FeelNativeEmulatedEmulatedDistributionApp StoreWebAppstoreDevice AccessCameraYesNoYesNotificationsYesNoYesContacts, CalendarYesNoYesOffline StorageSecure file storageShared SQLSecure file system,shared SQLGeolocationYesYesYesGesturesSwipeYesYesYesPinch, SpreadYesYesYesConnectivityOnline and offlineMostly onlineOnline and OfflineDevelopment SkillsObjective C, Jave, C#HTML5, CSS, JavascriptHTML5, CSS, JavascriptWeb, Hybrid, Native — Explained|Craig Isakson8It is important to keep in mind all the differences betweenthe platforms when considering a mobile strategy. Knowwhere your users are coming from and from what device.Knowing this information makes it easier to decide whichroute to take. For the most part, a mobile web applicationis a necessity. Current mobile web traffic, depending onwhere the statistics are received is equal to or greaterthan desktop traffic. This means when a user is visitingyour site, there is a very good chance that they arevisiting from a mobile device.For everything beyond a mobile web presence thatrequires an actual mobile application, it is importantto know your audience and know what you want toaccomplish with the application. Typically, if a mobileapplication is consumer facing, a native mobileapplication is ideal providing that the project has thetime and budget for development. There is a lot that youcan accomplish with a hybrid mobile application but theuser experience can be lacking. For this reason, a hybridmobile application is great for a company that needsto provide mobile functionality to their employees. Thisallows for bring your own device (BYOD). The employeecan bring their own device, no matter the platform, andstill be able to use the mobile application all with littleextra development for the employer.Mobile technology is exciting and ever changing at a fastpace. Because of this, it is important to stay up to dateon the technologies and how to best incorporate currentand future aspects into your mobile strategy.Web, Hybrid, Native — Explained|Craig Isakson9References:comScore Reports March 2013 U.S. Smartphone Subscriber Market Share. 2013. Available athttp://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 athttp://blog.appery.io/2011/09/getting-started-with-html5-local-storage/. Accessed May 13th, 2013.PhoneGap Documentation, API Reference. 2013. Available athttp://docs.phonegap.com/en/2.7.0/index.html. Accessed May 13th, 2013.Understanding Your Mobile Application Development Options. 2013. Available athttp://wiki.developerforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options. Accessed May 13th, 2013.