Mobile App Development Hybrid vs Native

Download Mobile App Development Hybrid vs Native

Post on 13-Apr-2017




0 download

Embed Size (px)


<p>PowerPoint Presentation</p> <p>Hybrid vs. Native Mobile App Development</p> <p>1</p> <p>Outline Mobile development today Native and Hybrid app development overviewsIntro to Cordova and IonicReasons for going HybridReasons for going Native Real-world demoConclusion and product information</p> <p>2</p> <p>Mobile Application DevelopmentMobile Web SitesWeb languages: JavaScript, HTML5, CSSNative Applications iOS App: Objective C / Swift Android: JavaWindows Phone (UWP): C#Hybrid Apps Mix of web and native approachNative app-like experience: Ionic Cordova (Hybrid)</p> <p>3</p> <p>Web Application DevelopmentDesktop Websites Looks nice on high res / dpi screensHighly feature-rich</p> <p>Mobile / google.comSingle domainhave logic to control layout</p> <p>4</p> <p>Why arent web apps enough?End users need to open up a web browser and navigate to your siteNot available in any App Stores Bound to limitations of browserYoull need to support every web browser for each OSDoesnt feel like they are using an app</p> <p>Android has Chrome, firefox, opera, othersiOS has Chrome, safari 5</p> <p>Two Philosophies of Mobile App DevelopmentHybrid Web Apps JavaScript/HTML5 web apps with native wrapperIonic Cordova</p> <p>Native App Development Java, Objective C, C#iOS, Android</p> <p>A Minute on the Internet is like a Month in Real Time. Or something like that. Point is, this stuff moves quick. </p> <p>Idea here is that we can break Mobile development down into two thought groups. </p> <p>Native vs Browser. 6</p> <p>Hybrid App DevelopmentWeb apps execute within native wrappersWrappers provide device APIs Cordova creates Hybrid Web Apps Hybrid Web AppsBlends mobile site with native app-like experience Utilize existing responsive web frameworks Same code base as desktop and mobile web apps </p> <p>7</p> <p>Native App DevelopmentApps that target iOS, Android, or Windows PhoneDesign single screens and navigation between themUI can be built in designer, expressed in markup language, or generated in code behindEach platform has its own codebaseDevelop in different IDEs for each platform</p> <p>8</p> <p>Hybrid App Development</p> <p>9</p> <p>What if we could develop one single code base for our website and still provide a mobile app to our end users without having to duplicate business logic?</p> <p>Best of Both Worlds </p> <p>10</p> <p>11</p> <p>About Cordova Free and open source by Apache Allows you to use JS, HTML5, CSS3 for cross-platform developmentAvoids each mobile platforms development language Cordova will create XCode and/or Android Studio projects You can run the app via the Cordova CLI or launch the IDE </p> <p>Examples of SPA libraries you can use in your Cordova applications are:AngularJSEmberJSBackboneKendo UIMonacaReactJSSencha TouchjQuery Mobile</p> <p>Use Apache Cordova if: a mobile developer and want to extend an application across more than one platform, without having to re-implement it with each platform's language and tool set.a web developer and want to deploy a web app that's packaged for distribution in various app store portals.a mobile developer interested in mixing native application components with aWebView(special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView componen</p> <p>12</p> <p>Where does Cordova fall short?Interactions, look, and feel are lackingCordova is simply the engine; you still need to write your custom UI css files to match platforms specific look and feel Basically strips the browser window and gives you a full screen browser view port</p> <p>And thats where Ionic comes in.</p> <p>13</p> <p>About Ionic Focuses on consistent look, feel, and UI interaction Loosely comparable to BootStrap Heavy on AngularJS actionSheet -&gt; CSS </p> <p>Lets jump in the wayback machine and recall a time prior to the popularity of front-end frameworks. Developers were laying down some mean code, but they had to start from scratch for each project, and individually figure out the quirks of each browser. Eventually developers were given a huge push forward by starting projects with the[insert your favorite front-end framework here].Great frameworks like Twitter Bootstrap simply make it easier to develop web apps and web sites, not because developers cant write it themselves, but because it gives them a great starting point to build high-quality projects. Immediate benefits include a slick design and built-in cross-browser testing at no cost. But in my opinion, the great achievements of Twitter Bootstrap are the knowledge sharing it has brought developers, and the excellent way to document and promote recommended design patterns it provides.</p> <p>14</p> <p>Advantages of HybridTargets the largest amount of devices with the smallest code baseCreates an App that you can publish in the App StoresEasier to maintainLet Cordova, Ionic, and other JavaScript libraries handle breaking changes</p> <p>It used to be the case that simply having a app on the app store put you at a huge advantage over your competition, whether you were a large company or a small company, it really didnt matter. The only thing that did matter was that you were first. </p> <p>Well, today, with over 50 billion app downloads on the app store alone, simply having it or being first isnt going work. Today, you need to have not only the best app but have options across all platforms and screen sizes. 15</p> <p>Advantages of Hybrid: Rapid PrototypingWrite one viewRun it on all platforms</p> <p>ChromeiOSAndroid</p> <p>16</p> <p>Advantages of Hybrid: Utilize JavaScript Libraries</p> <p>17</p> <p>Shortfalls of HybridNeed to hire JS, HTML5, AngularJS developers Look and feel is static (Is it a shortfall?)Performance will never be as good as nativeDevice-specific configurationsMight require freelance or consulting workDocumentation can be lacking</p> <p>18</p> <p>Native App Development</p> <p>19</p> <p>Advantages of Native iOSPerformanceHighest ceiling for performanceNatural look and feel</p> <p>Device FeaturesDirectly access device features and services via APIEasily provide appropriate interfaces depending on device</p> <p>20</p> <p>Advantages of Native iOS: Development &amp; DebuggingUtilize Native IDE and Development toolsBuilt-in GIT supportDocumentation Easier to debug code Compiled versus interpreted code$99 a year for iOS Developer Account</p> <p>21</p> <p>Shortfalls of Native iOSSpecific developer skill set required Target only one market Competing languages</p> <p>Highest development cost</p> <p>Objective CSwift</p> <p>22</p> <p>Real World Sample </p> <p>23</p> <p>GrapeCity Controls Used in our Demo Apps</p> <p>24</p> <p>Wijmo (Web/Hybrid)</p> <p>JavaScript UI Controls Zero dependenciesFocus on performanceSmall core controls and extensibleOffer additional features as optional extensions</p> <p>25</p> <p>(Native)</p> <p>Native iOS and Android controlsUses the same API across all platformsFocus on touch first experienceProvides expressive animations for loading, updating, and selecting data</p> <p>26</p> <p>Conclusion: Which Solution is Best?</p> <p>27</p> <p>It depends on your needs.HybridLow barrier to entryLeast expensive to develop Biggest target market and audience</p> <p>NativeBest end user experienceRequires most specific developer skillsMost expensive to develop and maintainTargets single market </p> <p>Hybrid: App depends on a website; Already have a website developedNative: Device-based functionality28</p> <p>Contact InformationWijmo DedererDeveloper Kelley RickerDeveloper </p> <p>29</p>