Introduction CIS 136 Building Mobile Apps 1

What is a mobile app? 2  Computer program  Designed for small devices  Smartphones  Tablets  Other handhelds  Software distribution  “apps” available through distribution platforms  originally offered for general productivity and information retrieval  public demand and the availability of developer tools drove rapid expansion into other categories

History of the Smartphone 3  Great example of device convergence  A handheld computer integrated with a cellphone  IBM and BellSouth introduced first smartphone in 1994 called the IBM Simon  Touch screen; 1MB ram, and a few apps  2004 – PDS’s arrived with Palm Pilot, Blackberry, Pocket PC  2007 – Nokia released the N95  June29, 2007 – 1 st version of the iPhone  Disrupted the development world by stating no need for an app store  2008 Apple released iPhone 2 and an SDK and opened the app store  2008 – Google released Android OS for Google Nexus  2010 – Microsoft released Windows phone

Three main mobile OS’s today 4 March 2014

Popular mobile OS’s 5

Apps Application Software 6

“Apps” 7  102 billion apps were downloaded in 2013  91% of them free  generated US$26 billion  up 44.4% on 2012's US$18 billion

Considerations when building apps 8  Device determination  Constraints and features of the device  run on battery  have less powerful processors  have more features such as location detection and cameras  Building and testing issues  Budget  Emulators  Good User interface (UI) design is essential  User is the focus, and the app’s design is the interface to the device  limited attention span  Various form factors

Approaches to building apps 9  Web  Native  Hybrid

Web Apps vs. Native Apps vs Hybrid Apps 10  Web App  Website optimized for a smart phone  Not available on marketplace  Not installed  Easily designed/created using common tools  Runs in a browser  Can’t access hardware  Limited sophistication

Web Apps vs. Native Apps vs Hybrid Apps 11  Native App  Available on marketplace  Installed  Access to hardware  Written in higher level languages  Sell for $$  Pay to Publish  Slow development cycle  Different versions for different platforms

Web Apps vs. Native Apps vs Hybrid Apps 12  Hybrid App  Easily designed/created using common tools & languages  Available on marketplace  Installed  Access to hardware  Sell for $$  Pay to Publish  Quick development cycle  One version for different platforms  Uses bridging software to access native functions  Can be slow

Third Party Frameworks Bridging Frameworks 13

Cross-platform Development for Hybrid Apps Bridging software 14  Developers write their mobile applications using HTML, JavaScript and CSS.  These assets run in a “WebView” inside a native application container on the target platform.  a web application packaged within a native application container where JavaScript has access to device-level APIs that normal web applications would not

Phonegap 15  Originally created by Nitobi  the name was changed to “Apache Cordova” when it was donated to the Apache Software Foundation  Adobe purchased Nitobi – including rights to the PhoneGap name – and now distributes Cordova under that name  Leverages HTML, JavaScript and CSS  Installs just like a native application, and is able to leverage app store discoverability  Follows a plugin architecture  access to native device APIs can be extended in a modular way.  Build in the cloud (Phonegap Build, Icenium, Kendo UI Mobile)  Integrates into known IDE’s as Brackets and Dreamweaver  Improvements in device hardware and WebView implementations have improved performance

Titanium 16  Appcelerator’s Titanium provides a unified (across devices) JavaScript API, coupled with native-platform- specific features  Developers write JavaScript and utilize a UI abstraction (the Alloy MVC framework) that results in the use of native UI components.  Native UI components is a performance win  Developer is required to manage target platform SDKs locally

Sencha 17  Sencha Touch is an HTML5 mobile application framework for building web applications that look and feel like native applications  Apps built with Sencha Touch can be used with Apache Cordova/PhoneGap or Sencha’s native packager  either will package the application in a native container and enable access to select device-level APIs unavailable to traditional web apps  Variety of tools for cross platform app development such as Sencha Architect, Sencha Animator  main product is Ext JS 5, which lets developers create HTML5 apps, which can then be converted into native apps with PhoneGap  Suffers from the same performance pains  Requires custom plug-ins

User interface frameworks 18

UI Frameworks 19  Angular  Google - uses HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly  Ionic  HTML5 mobile app development framework targeted at building hybrid mobile apps  Uses Angular  Kendo UI Mobile ($$)  Build mobile app experiences using HTML and JavaScript that automatically adapt to the native look-and-feel of different mobile platforms  jQuery Mobile  An HTML5/CSS3-based user interface system designed to make responsive web sites and apps  jQuery UI  a widget and interaction library

What we will be using in this class 20

There is a strong belief that HTML5 will rule over time 21