Hybrid vs Native vs Web Apps

  • View

  • Download

Embed Size (px)

Text of Hybrid vs Native vs Web Apps

  • Introduction to Mobile ApplicationA mobile application, most commonly referred to as an app, is a type of application software designed to run on a mobile device, such as a smartphone or tablet.

    Three different approach for developing a mobile application.

    Mobile Web Apps Hybrid Apps Native Apps

  • Mobile Web Apps

    Accessed through mobile devices web browser. Built with three core technologies: HTML4/5 (defines static text and Images) CSS2/3 (defines styles and presentation) JavaScript (defines Interactions and animations). Since web apps are browser based theyre intend to be platform and device independent. Simple and easy to access.

    Google ChromeOpera

    Apple Safari

  • Mobile Web Apps- ExamplesThe Mobile Web apps url will look like asm.domain.com or domain.com/mobile/

    Few Examples of Mobile Web Apps :

    http://m.timesofindia.com/https://m.verizonwireless.com http://m.stanford.edu/http://www.bbc.co.uk/mobile/i/

    Some urls automatically detecting the devices based on the devices type it will automatically resize layouts.

  • Native Apps Built for a particular device and its operating systems. Downloaded from a web store and installed on the device. Native apps are written in Java for Android, Objective-C for Apple iOS.

    Native apps examples :

    Native Calendar Apps Native SMS Apps Native Game Apps Native Push Notifications Native To do list

  • Native Apps Platforms/ Operating Systems

    Objective - cApple (Ex : iPhone, iPad)Java, C, C++Google (Ex : Samsung, HTC)JavaRIM (Ex: Black Berry)C, C++Microsoft (Ex: Nokia)C, C++, JS, HTML, CSSHP (Ex : HP Touch pads)

  • Hybrid AppsHybrid apps, like native apps, run on the device, and are written with web technologies (HTML5, CSS and JavaScript). Hybrid apps run inside a native container, and leverage the devices browser engine (but not the browser) to render the HTML and process the JavaScript locally. Remarks: Cant handle heavy graphics Requires familiarity with a mobile framework You cannot access all hardware functions of mobile devices

  • Comparison

  • Hybrid Apps Examples RBC Launch iOS app for RBC Direct Investing which is Hybrid app developed with Hybrid application. This application can be download via apps store (iTunes). https://itunes.apple.com/ca/app/rbc-mobile/id407597290?mt=8

  • Hybrid Apps Examples

  • Hybrid Apps Examples

  • Hybrid Apps Example App (RBC)

  • Hybrid Mobile FrameworksList of hybrid mobile frameworks which can be work in multiple mobile devices

    FeaturesJquery MobileJqtouchSenchaTouchPhonegapRhomobileBuilt withHTML5CSS3JQUERYHTML5CSS3JQUERYHTML5CSS3ExtJsHTMLCSSJSRubyJavaScriptHTMLCSSSupported DevicesAppleAndroidBlackBerryPalm WebOS etcAppleAndroidiPodAppleAndroid(Motorola, Samsung)iOS, Android, webOS, Windows Mobile, Symbian, BlackBerry ,Windows Phone, Windows 8Android, BlackBerry, iOS, Symbian, Windows MobilePerformanceMediumMediumFastFastFastDevelopment effortFlexibleEasyFlexibleFlexibleFlexibleApproval ProcessOpen SourceOpen SourceOpen SourceOpen SourceOpen SourceSet upWebkit browsersWebkit browsersWebkit browsersWebkit browsers(iOS, Android, BB OS)Webkit browsers(Ruby,iOS, Android, BB OS)

  • Which one to chose?Once upon a time there were very clear distinctions between mobile web and native applications, but the recent surge in hybrid apps is blurring the lines and changing the decision matrix.

    Some of the more important considerations are explored below.

    FeatureMobile WebHybrid AppNativeDevelopment CostLowestLowExpensiveSpeed of AppInternet SpeedNear NativeNative SpeedDeployment ProcessEasy Relatively EasyDifficultApproval Process NAEasy Difficult Offline CapabilityFailsGood Design WorksWorks

  • Became Hybrid Application Developer

  • CareersHTML/CSS/JavaScript --------- UI DeveloperJavaScript/Jquery ---------Jquery DeveloperHTML5/CSS3 --------- Mobile Web DeveloperJquery Mobile/Sencha/Jqtouch --------- Hybrid Mobile DeveloperHTML/CSS/JavaScript/OOPS--------- Interactive UI DeveloperHTML4/5/CSS2/3/JS/Jquery ---------Web DeveloperHTML5---------Game Developer

  • Example Works

  • Example Works