Mobile Web Apps

IT University4 Nov. 2013

Troels Parbst

2

• Established 1999• Locations in Copenhagen, Aarhus, Aalborg og Warsaw• About 250 employees (2011)• About 320 employees (2012)• 420 employees (oct. 2013)

Netcompany

”At være Danmarks største og foretrukne leverandør af forretningskritiske it-projekter med leveranceansvar.”

Our business is line-of-business applications, portals and system integration using technology and standards primarily for .NET and J2EE

3

Troels Parbst

• Cand.scient in Computer Science, DIKU• Senior consultant in Netcompany (2½ years)• Been working in telcos for about 6 years

Who’s talking?

4

Section 1–Why do mobile– Different solutions and taxonomy– Choose an approach

Section 2– Expensive native apps–Mobile browsers– The hybrid app

Agenda

5

Mobile Web

Section 1

6

Why our customers cannot ignore mobile

Why is mobile important?

Source: Google, 2012

Users expect and reward a good experience• Most users think mobile-friendly sites are important. All of these users

encountered sites that were not mobile-friendly (so they know the difference)

• Most users are more likely to revisit mobile-friendly sites• Many users are more likely to buy or convert after visiting a mobile-friendly

site

… and punish a bad experience• Many users will leave a non-mobile-friendly site, without buying.• Over half of the users said a frustrating experience on a (mobile) website

would hurt the perception of the brand.

7

Why is mobile important?

Samsung Apple Nokia HTC BlackBerry (RIM) Others Total0

100

200

300

400

500

600

700

800

20122011

Annual number of smartphones shipped (in millions)

494 million in 2011, 712 million in 2012!

8

Mobile solutions

What is this Mobile Web?

“The Mobile Web refers to access to the world wide web, i.e. the use of browser-based Internet services, from a handheld mobile device, such as a smartphone, a feature phone or a tablet computer, connected to a mobile network or other wireless network.”

Wikipedia

9

Mobile solutions

Responsive design

Facilitated by the CSS3 Media Queries Module

• Specified styles are applied given certain conditions• Conditions are composed of ANDs, ORs and presentation feature tests• Window width/height, device width/height, orientation, ratios• Simple but powerful!

Combined with careful HTML structure yields a many-in-one solution

10

Mobile solutions

Responsive design example

Web Tablet Smartphone

The rest is default HTML document flow, no JavaScript!

11

Mobile solutions

Web app as dedicated mobile web site

• A component based approach using HTML, JavaScript and CSS• Adapted for a single device type e.g. iPhone

12

Mobile solutions

General Web app

• Visual expression is identical on all platforms

13

Mobile solutions

Full blown App store app

• Presence in the app store with search and ranking• Device access

• Camera• Files• Compass• And so on…

• Notifications• Services (on Android)• Utilize the device hardware to it’s full extend

14

Mobile app taxonomy

• For one playform only.• Code and environment bound to platform.Native app

• A Web app wrapped as a native app.Hybrid app

• Website that looks like and behaves more like an app than a website, fx transitions and navigation.Web app

• Website customized for one platform, fx iPhone or Android. Fx transitions and navigation.

Dedicated mobile website

• Website adapted for varying screen sizes.General mobile website

15

Choosing an approach

What the customer needs

• Functional or design requirements might dictate the approach

• Price is a huge factor, most mobile for the money• How well an app sits with the existing channels. Do the

customer have skills to support the engagement?• Time to market

Working smart and offering competitive prices

• Development time, including design, building and testing• Developer skills. Front-end developer or app specialist

16

Comparing approaches

Native Web

Graphics Native HTML, Canvas, SVG

UI performance Fast Slow

Look and feel Native Emulated

Distribution App store Web

Device access Yes No

Swipe, pinch Yes Not pinch

Connectivity Runs offline Must be online

Required skills Specific to OS Web technologies

17

Hybrid apps

Section 2

18

Native app frameworks

SilverlightXNAWPFXAMLDevice APIWinRT APIWinJS & HTMLAzureNotification Service

XcodeObjective CVertical frameworksUINotifications

JavaAndroid UIProgramming model15 > API versionsSupport LibraryNotifications

19

• One dedicated UI thread• Non-responsive apps are killed• OS has license to kill any app at any time• Event driven MV* applications• Asynchronous behavior• Notification service

• Vendor frameworks have varying degrees of freedom– Power consumption– Runtime control– Security

Native framework similarities

20

…compared to the browser

A single-page JavaScript application has

Environment comparable with native platforms• Threads• Asynchronous behavior• Event based interaction

While reaping the benefits of standards• Cross-platform code• Well known technologies• Using web technologies for their originally intended purpose

21

Mobile OS distribution

22

Mobile browsers

23

• Layout engine in Chrome, Safari, Android, BlackBerry Tablet, BADA and webOS

• GNU open source project with contributers from Apple, Google, Nokia, RIM and more.

• About 40% marked share on handheld devices in July 2012• Estimated 50% marked share by the end of 2012• More users than Trident (IE) and Gecko (FF) as of September

2013

Mobile browsers

WebKit

24

Why is that important?

• Homogeneity. Consistent capabilities and features

• CSS3 support varies a lot in HTML5 browsers, but webkit has many implements of the –webkit vendor specific property

• Support like no other browser. For instance remote debugging of the browser running on the device in Safari and Chrome

Webkit browsers

25

WebKit implements fancy CSS3

• Fonts• Text effects• Borders and boxes (round corners)• Gradients and opacity• Transitions and animations

Webkit browsers

26

WebKit has rich HTML5 support

• Web Storage (client side SQLite)• File API• Server-sent events• WebSockets (permanent HTTP connection to server)• Web Workers (long running scripts)• GeoLocation• Audio and Video tags• Offline web applications• Canvas element

Webkit browsers

What will the WebKit platform (probably) never do?

Web app limitations

27

Demanding, leading edge applications e.g. games

28

What is missing from WebKit as mobile platform?

• Device access features not supported by the browser– Notification– Compass– Camera– Contacts– Files– System events

• Native packaging is missing– App store infrastructure

Need an intermediate layer to access the host platform!

Web app limitations

29

The hybrid app

Source: brightcove.com

30

Device access and native wrapping

• Apache Cordova / PhoneGap• Appcellerator Titanium• Nimblekit• Rhodes (RoR server on the phone)

Device access

31

Cordova / PhoneGap

• Has plugin structure where any native feature can be reached

• Can embed into existing application

32

Basic PhoneGap app

A WebView packaged as a native app!

… and nothing else

33

Choosing framework for adding chrome and abstraction to an app• Many contenders. Potentially every app framework for JS with

touch support

Selection criteria• presentation layer: HTML or JavaScript• UI Bindings: key for reducing boilerplate code• Bar to entry• Composed Views: component reuse. Framework thoroughness• Provides app structure• Supports other browsers than webkit

Web app framework

34

Web app frameworkPresentation layer

UI Bindings

Bar to entry

Composed views

Provides app structure

Support > WebKit

Sencha Touch

JavaScript

Yes High Yes Yes No

jQuery mobile

HTML Kind of Medium Do it yourself

Kind of Yes

Dojo Mobile

HTML Kind of Medium Do it yourself

Yes Yes

DHTMLX Touch

Javascript

Yes High No Yes Firefox

SproutCore

None Yes Medium Yes Yes Firefox

iUI HTML No Low No No No

XUI None No Low No Yes Yes

Sencha Touch

35

• iOS like Components• Animations• Layout abstractions• Unified event model (true MVC /

MVVM)• Touch events• Data package with web storage• Charts• App structure

36

• Taps into the other jQuery ongoings• Supports every browser• Community

jQuery Mobile

37

Hybrid app criticism

Limited to what graphics the browser can produce• Games and animations will meet hard limits

Android sucks• Entry level phones run Gingerbred and have low memory• Hardware undersized for top browser performance

• Only Chrome utilizes the GPU, default browser never will• The F-word: fragmentation

• Vendors don’t update and screw up the browser with ”good ideas”

Javascript• No explicit resource management for memory and cycles• Libraries seldom minded for single page apps (fixed with the

next reload)• Tooling• Power consumption

What about the developer skills?• Same same but different• More complex apps: more architecture, more testing, more PoC

code

38

Price vs. user experience vs. flexibility• Easy to have an opinion on an app• Customers expect the best from an app• Level expectations with expenditure

In some regards, only ½ the work• The simpler the more likely• Code still has to make exceptions for the each

platform.• Visual expression is identical unless two

designs are made

Compared to an average portal project• An app is (just) a fancy front-end• Things like integrations and secutity are often harder to

provide• Apps are often secondary to a regular website

Experiences

39

If you think you’ve got a consultant hidden in you and you’re considering to let him out

Keep Netcompany in mind!

• Many of us start right after finishing the Masters degree

• Great place to learn and develop your skills!

• Awarded Denmark’s best IT consultancy 4 times by “Børsen” 2005-2012• Awarded Denmark’s best consultancy by “Computerworld“ 2007• Awarded Dynamic CRM Partner of the Year and Information Worker Partner of the Year (MOSS platform) by Microsoft

Denmark 2009• Microsoft awarded Dynamic CRM partner of the year, Best customer satisfaction of the year and Azure Partner of the year

by Microsoft Denmark 2010 • Awarded Cloud Platforms Partner of the year and Portal and • Collaboration Partner of the year by Microsoft Denmark 2011• CRM and Cloud Platform Partner of the year by Microsoft 2012• Winner of Highest Impact BI solution award @ European SP conference 2013• Supplier of the year @ TDC (TAK-prisen) 2013

Netcompany

40

?

Questions