Hybrid mobile application architecture considerations

1. Mobile Web Architecture
Structure, architecture and capabilities of hybrid mobile
applications

2. Contact Me
•
Ynon Perek
•
ynon@ynonperek.com
•
http://ynonperek.com

3. Agenda
Introduction to Hybrid Apps (+Phonegap)
1
HTML5 Features for Hybrid Apps
2
Push Notifications
3

4. Why is mobile
different?

5. Questions To Ask for Mobile
•
How does my solution:
•
Affects battery life ?
•
Affects network traffic ?
•
Deal with interruptions ?
•
Deal with connectivity ?
•
Respects user’s privacy ?

6. Choosing Mobile Technology

7. Problems With Native
•
Too many different programming languages

8. Problems With Native
•
Too many different programming languages
•
“Same app”, different code

9. Web is not perfect either
•
Code runs in a browser:
•
Slower
•
Restricted by the browser

10. Web vs. Native
Native
Web
Browser
App
App

11. Hybrid Apps
Web Content
Native App Wrapper

12. Demo: Implementing A
Hybrid Solution

13. Hybrid Architecture
Web
Content
Native Wrapper
3rd party
extensions
Server + DB

14. Takeaways
•
Hybrid architecture provides the good AND bad
from both worlds
•
Understanding the platform is necessary

15. Hybrid Apps +
•
Most of the app is written once
•
Only native parts are written again and again
•
“Feels” native
•
Developer controls native code => can use native
APIs

16. Hybrid Apps •
Complex code
•
Requires knowledge in many programming
languages
•
Data is transferred between environments
•
Hard to debug

17. Let’s Analyse A Hybrid App
•
Hystagram is a hybrid
version of instagram with
minimal functionality
•
Supports:
•
Taking photos
•
Watching photos
•
Uploading photos to
server

18. Processes and scopes
Process
Take a photo
Upload photo to server
View photo stream
Scope
Why

19. Processes and scopes
Process
Take a photo
Upload photo to server
View photo stream
Scope
Why
Native
Need to show a camera
overlay

20. Processes and scopes
Process
Take a photo
Upload photo to server
View photo stream
Scope
Why
Native
Need to show a camera
overlay
Native
Upload must continue
when app is not active

21. Processes and scopes
Process
Scope
Why
Native
Need to show a camera
overlay
Upload photo to server
Native
Upload must continue
when app is not active
View photo stream
Web
Because we can
Take a photo

22. Introducing Phonegap

23. Introducing Phonegap
•
An open source connection layer between web
content and native
•
Extensible
•
Supported platforms:
iOS, Android, Blackberry, WebOS, Windows
Phone, Symbian, Bada

24. Q&A

25. Agenda
Introduction to Hybrid Apps (+Phonegap)
1
HTML5 Features for Hybrid Apps
2
Push Notifications
3

26. The Web Side
Users and Sessions
Location
Camera
Video
Audio

27. Web 101
HTTP Request
HTTP Response

28. HTTP and state
•
HTTP is stateless
•
This means server has no way to know two
requests originated from the same client

29. Cookies
•
Bits of data saved on a device and sent to the
server with each HTTP request
•
Used to store state
•
Demo

30. Session Management
Login: user, pass
Client
Server
DB

31. Session Management
Login: user, pass
Verify: user, pass
Client
Server
DB

32. Session Management
Login: user, pass
Client
Save session
Server
DB
Session id

33. Session Management
Login: user, pass
Save session
Client
Set Cookie:
Session id
Server
DB
Session id

34. Session Management Options
•
Session id on client, Session data on server
•
Encrypted session data on client, key on server
•
RESTful

35. RESTful Web Services
•
Server provides resources
•
Resources are in known conventional URLs

36. RESTful Web Services
/collection
/collection/item
GET
Returns an array of
items
Returns details for a
specific item
POST
Create a new item
PUT
DELETE
Modify an existing item
Delete the collection
Delete an item

37. RESTful authentication
•
Client uses a private authentication token to
access restricted resources
•
Demo:
https://developers.facebook.com/tools/explorer

38. What You Should Use

39. What You Should Use
•
For web clients, cookies are the easiest
•
If possible, prefer to store only session id in the
cookie
•
For other clients, consider a token

40. Q&A

41. Geolocation
•
Detect where your user is
now
•
Show nearby places
•
Display location aware data
•
Enable location specific
features

42. Technologies
•
GPS
•
A-GPS
•
Cell Information
•
WiFi Positioning

43. GPS
•
Global Positioning System
•
Accuracy error: 2-10m
•
Requires clear sky view
•
Time to position:
5 seconds - 5 minutes

44. A-GPS
•
Uses both GPS chip and
network information to get
location
•
Much faster to get location

45. Cell Information
•
Uses cell towers to
calculate a device’s location
•
Accuracy: A block or up to
some km
•
Time to location: immediate

46. WiFi Positioning
•
Detect location using a list
of wireless routers in your
area
•
Relies on existing router
databases

47. Permissions
•
Browser asks user
permissions before sharing
location
•
Best practice: Request
location just before using it

48. Location Failures
•
Location services don’t
always work
•
Why ?
•
What do you do when
you’re lost ?

49. Location API
1 navigator.geolocation.getCurrentPosition(
successCallback,
2
3
6
7
failureCallback,
4
{
5
timeout: 0,
maximumAge: 60000,
enableHighAccuracy: false
8
});

50. Using A Map

51. Show Me The Map
•
Both iOS and Android have built in maps
applications
•
Open the built-in maps application using a simple
link
•
Demo

52. Built-In Maps +
•
Great UI
•
User feels “at home”

53. Built-In Maps -
•
User leaves the app

54. When To Use
•
Use built-in maps app for navigation
•
Use embedded maps for geo-data related to your
app

55. Map APIs
•
Google Maps
•
Open Street maps
•
Demo:
https://developers.google.com/maps/
documentation/javascript/examples/map-simple

56. Q&A

57. Taking Photos

58. getUserMedia
•
Desktop browsers support the new getUserMedia
API
•
Demo: http://shinydemos.com/photo-booth/

59. getUserMedia Browser Support

60. Using The Camera
•
iOS >= 6; Android >= 3
•
<input type="file" field opens camera app
Normal <input> capture="camera" accept="image/*"
id="takePictureField">

61. What You Can Do
•
Take a picture and send it to server
•
Analyse picture on the client - Demo
•
Apply filters or edit - Demo

62. What You Still Can’t Do
•
Can’t check if camera is available
•
No camera overlay

63. Q&A

64. VIDEO
THE EASY WAY

65. Video Tag
•
HTML5 introduces a <video> tag to embed
videos in a web page.
•
Different browsers support different video
formats. The <video> tag can specify multiple
formats.

66. Video Formats
•
Video formats are like
languages
•
The same video can be
encoded in different
formats
•
A browser must “speak the
language” to be able to play
the video

67. Video Converter
•
Miro is a free open source
video player and converter
•
http://www.getmiro.com

68. Browser Support
•
HTML5 spec does not define a video codec to
use
•
h.264 is the most widely supported. Plays on
iPhone and Android

69. The Markup
<video poster=”star.png”>
<source src=”zebra.mp4” />
</video>
!

70. Limitations: Autoplay
“ Apple has made the decision to disable the
automatic playing of video on iOS devices,
through both script and attribute
implementations.”
Issue 159336:
On Android, html5 video autoplay attribute
does not work.

71. Limitations: Play Inline
“ Currently, Safari optimizes video
presentation for the smaller screen on
iPhone or iPod touch by playing video using
the full screen
”
Videos play inline for Android >= 3

72. Playing Audio
HTML5 Audio
Audio API

73. Audio Tag
•
New addition of HTML5
•
Simple to use
•
Both HTML tag and JS api

74. Audio Tag
<audio src="scifi002.mp3" controls="YES"></audio>

75. Audio Tag JS API
audio.src =
“http://static1.grsites.com/archive/sounds/scifi/scifi002.mp3";
audio.pause();
audio.currentTime = 0;
audio.play();

76. Audio Tag
•
Demo
•
Play a gun fire sound when button is clicked

77. Audio Tag Limitations on Mobile
•
Not accurate (has short delays)
•
Starts to load sound after user interaction
•
Can’t control the audio data

78. Audio API
•
A new improved API for playing sounds
•
Timing considerations built-in

79. Audio API Browser Support

80. Audio API Architecture
Audio Context
Source
Destinatio
n

81. Audio Context
Source
Gain
(volume)
Destinatio
n

82. Quiz
How do you implement cross fade ?

83. Cross Fade
Audio Context
Source
Gain
(volume)
Destinatio
n
Source
Gain
(volume)

84. Audio API: What You Can Do
•
Apply audio filters (using filter nodes)
•
Change volume (using gain nodes)
•
Merge multiple audio sources to one destination
•
Play with accurate timing

85. Audio API Demo
•
Same game as before
•
This time no delays in playing the audio
•
More complex demo:
http://labs.dinahmoe.com/ToneCraft/#

86. Recording Audio
•
getUserMedia() will allow audio recording
•
Not yet supported on mobile

87. Q&A

88. Agenda
Introduction to Hybrid Apps (+Phonegap)
1
HTML5 Features for Hybrid Apps
2
Push Notifications
3

89. User’s Perspective

90. Marketer’s Perspective
“
For the first time in human
history, you can tap almost
two billion people on the
shoulder.
”

91. Developer’s Perspective
•
What is a notification ?

92. Developer’s Perspective
•
What is a notification ?
•
User visible information reflecting some event

93. Developer’s Perspective
•
Why should I use notifications ?

94. Developer’s Perspective
•
Why should I use notifications ?
•
Ensure time-sensitive delivery when your app isn’t
running

95. Developer’s Perspective
•
How does push compared to poll ?

96. Developer’s Perspective
•
How does push compared to poll ?
•
Pushes are server driven and immediate, polls are
app driven and latent

97. Keep In Mind
•
Push notifications are not reliable
•
(even if the APN server gets them)

98. Types Of Notifications
•
Badges (iOS only)
•
Alerts

99. Push Service Architecture
Your Server
User’s Device
Push
Notification
Server

100. Getting A Token

101. Sending A Notification

102. Demo App
•
A simple push chat room hybrid app
•
HTML layer handles user interface
•
Native layer receives notifications

103. Server: Sending A Notification
my $notifier = $APNS->notify({
cert => "cert.pem",
key => "key.pem",
passwd => "1234"
});
!
$notifier->devicetoken($device_token);
$notifier->message("message");
$notifier->sound('default');
$notifier->custom({ custom_key => 'custom_value' });
$notifier->sandbox(1);
!
$notifier->write;

104. APNS Best Practices
•
Keep the connection open
•
Use multiple connections to the gateway
•
Be polite with your users

105. Q&A

106. Thanks For Listening
•
Ynon Perek
•
ynon@ynonperek.com
•
http://ynonperek.com

107. Photos Used In The Slides
•
Choices (slide 6):
http://www.flickr.com/photos/danmoyle/
11715566974/sizes/l/
•
Man with camera (slide 43):
http://bit.ly/1gb5ZZM