Introduction

CIS 136 Building Mobile Apps

1

2

What is a mobile app? 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

3

History of the Smartphone 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 – 1st 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

4

Three main mobile OS’s today

March 2014

5

Popular mobile OS’s

6

Apps

Application Software

7

“Apps” 102 billion apps were

downloaded in 2013 91% of them free generated

US$26 billion up 44.4% on 2012's

US$18 billion

8

Considerations when building apps 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

9

Approaches to building apps Web Native Hybrid

10

Web Apps vs. Native Apps vs Hybrid Apps 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

11

Web Apps vs. Native Apps vs Hybrid Apps 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

12

Web Apps vs. Native Apps vs Hybrid Apps 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

13

Third Party Frameworks

Bridging Frameworks

14

Cross-platform Development for Hybrid AppsBridging software

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

15

Phonegap 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

16

Titanium 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

17

Sencha 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

18

User interface frameworks

19

UI Frameworks 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

20

What we will be using in this class

21

There is a strong belief that HTML5 will rule over time