Mobile development isn't as simple as one may think... and the biggest problem isn't the technology... In this webinar we cover some of the big and important subjects of mobile development: > Framing the mobile challenge >> Mobile Glossary >> What is a mobile device? >> Just a small computer? >> Mobile device characteristics >> UX considerations >> Choose the right architecture > How OutSystems Platform helps? > Leveraging Silk UI Framework > Going further with OutSystems Now This was an internal OutSystems training converted to a webinar format.

1. Become a Mobile
developer from scratch
Free OutSystems webinar

2. Become a Mobile developer from scratch
Rúben Gonçalves
Mobile team leader @ OutSystems
@techrug
2

3. Disclaimer
! Dense and deep introduction to Mobile !

4. Become a Mobile developer from scratch
Agenda
● Framing the Mobile challenge
4
○ Mobile Glossary
○ What is a mobile device?
○ Just a small computer?
○ Mobile device characteristics
○ UX considerations
○ Choose the right architecture

5. Become a Mobile developer from scratch
Agenda
● Framing the Mobile challenge
● How OutSystems Platform helps?
5
○ Preview in devices
○ Prefetching resources
○ Notify mechanism

6. Become a Mobile developer from scratch
Agenda
● Framing the Mobile challenge
● How OutSystems Platform helps?
● Leveraging Silk UI Framework
6
○ Templates
○ Mobile patterns
○ Demo

7. Become a Mobile developer from scratch
Agenda
● Framing the Mobile challenge
● How OutSystems Platform helps?
● Leveraging Silk UI Framework
● Going further with OutSystems Now
7
○ What is it?
○ Features
○ Architecture overview
○ Demo
○ Customizing OutSystems Now
○ Adding new plugins
○ Checklist to app stores

8. Become a Mobile developer from scratch 8
When building the first mobile app!

9. Framing the Mobile challenge

10. Become a Mobile developer from scratch
Agenda
● Framing the Mobile challenge
● How OutSystems Platform helps?
● Leveraging Silk UI Framework
● Going further with OutSystems Now
10
○ Mobile Glossary
○ What is a mobile device?
○ Just a small computer?
○ Mobile device characteristics
○ UX considerations
○ Choosing the right architecture

11. Become a Mobile developer from scratch
Mobile Glossary
● Android Studio – Android IDE for creating native apps (Java)
● B2C – Business to Customer (public distribution – via app stores)
● B2E – Business to Employee (internal distribution – via non app store)
● BYOD – Bring Your Own Device
● Hybrid apps – web apps running inside a native shell
● MAM – Mobile Application Management
● MDM – Mobile Device Management (eg. AirWatch)
● RWD – Responsive Web Design
● X Code – iOS IDE for creating native apps (Objective-C, Swift)
11

12. Become a Mobile developer from scratch
What is a mobile device?
12
http://dunnnk.com/

13. Become a Mobile developer from scratch
What is a smartphone device?
13
Pocket
EXTREMELY PERSONAL

14. Become a Mobile developer from scratch
Just a small computer?
14
Source: techarea

15. Become a Mobile developer from scratch
Just a small computer?
1. Small? Not necessarily…
Source: Design for Touch
15

16. Become a Mobile developer from scratch
Just a small computer?
1. Small? Not necessarily…
2. Inputs are different…
16
Source: Mobily input types
And hard for the user

17. Become a Mobile developer from scratch
Just a small computer?
1. Small? Not necessarily…
2. Inputs are different… and more powerful!
17
• Location detection
• Multi-touch sensors
• Device positioning & motion: from accelerometer
• Gyroscope: 360 Degrees of motion
• Orientation: direction from a digital compass
• Video & image: capture/input from a camera
• Dual cameras: front and back
• Audio: input from a microphone
• Ambient Light: light/dark environment awareness
• Proximity: device closeness to physical objects
• NFC: Near Field Communications through RFID readers
• Device connections: through Bluetooth between devices

18. Become a Mobile developer from scratch
Just a small computer?
1. Small? Not necessarily…
2. Inputs are different… and more powerful!
3. Outputs are different
18
The app itself Notifications

19. Become a Mobile developer from scratch
Just a small computer?
1. Small? Not necessarily…
2. Inputs are different… and more powerful!
3. Outputs are different
19
The app itself Notifications
Device speaker
Vibration mechanism

20. Become a Mobile developer from scratch
Just a small computer?
1. Small? Not necessarily…
2. Inputs are different… and more powerful!
3. Outputs are different
4. Context of usage
20
Source: Liz Hafalia, The Chronicle

21. Become a Mobile developer from scratch
Just a small computer?
1. Small? Not necessarily…
2. Inputs are different… and more powerful!
3. Outputs are different
4. Context of usage
21
Source: unable to find the source of the image

22. Become a Mobile developer from scratch
Just a small computer?
1. Small? Not necessarily…
2. Inputs are different… and more powerful!
3. Outputs are different
4. Context of usage
22
Source: we are social
39%
of internet traffic

23. Become a Mobile developer from scratch
Recap
1. Mobile devices are NOT small computers
It’s a whole new way to engage
2. Inputs and outputs are different
And we should leverage it as much as possible
3. Mobile is used on the go
And pretty much for everything
23

24. Become a Mobile developer from scratch
Framing the Mobile challenge
Mobile device characteristics
24

25. Become a Mobile developer from scratch
Mobile device characteristics
Typical Laptop
● Intel cpu
● 8 Gb RAM
● 1,3M pixels
Typical Android
● ARM cpu
● 2 Gb RAM
● 2M pixels
25
Source: Screen time
-75%
-2,7x slower
+53% to paint
Less capacity

26. Become a Mobile developer from scratch
Mobile device characteristics
Not only less capacity… but different browsers
26
1,5x 3,9x 9,8x
DELL E6440
Chrome 42
237ms
IPhone 6 Plus
Safari
360ms
Nokia Lumia 925
IE 11
924ms
Samsung Tab4
chrome
2312ms
Test made on webkit.org

27. Become a Mobile developer from scratch
Mobile device characteristics
Connected to network
27
• GPRS (2G)
• EDGE (2G, 2.5G or 3G)
• UTMS (3G)
• WCDMA (3G)
• HSPA (3G)
• EVDO (3G)
• HSPA (3G or 4G)
• Mobile WiMax(4G)
• LTE (4G)
“We have 4G now! We don’t have performance
problems on the network anymore”
Anonymous developer
Assumptions are the
mother of all… Bad things!

28. Become a Mobile developer from scratch
Mobile device characteristics
LTE is not everywhere
28
64%
55%
30%
6
%
20% 25%
2G 3G LTE
Worldwide average
USA average
Source: data from 2014
70% of time
the connection is
3G or 2G

29. Become a Mobile developer from scratch
Mobile device characteristics
How mobile network works under the hood?
29
• how many cell phone towers are in the
vicinity?
• how many users are sharing these towers?
• what is the bandwidth available to these
cellphone towers to connect to the
Internet or the carrier's network?
RNC
Radio Network
Controller
SGSN
Service GPRS
Support Node
GGSN
Gateway GPRS
Support Node
Internet
IP network
Cell tower Firewall
Typical 3G (UMTS) network

30. Become a Mobile developer from scratch
Mobile device characteristics
How mobile network works under the hood?
• how many cell phone towers are in the
vicinity?
• how many users are sharing these towers?
• the bandwidth available to these cellphone
towers to connect to the Internet or the
carrier's network?
LATENCY
function of the electrical
characteristics of the circuit
30

31. Become a Mobile developer from scratch
Mobile device characteristics
How mobile network works under the hood?
• how many cell phone towers are in the
vicinity?
• how many users are sharing these towers?
• the bandwidth available to these cellphone
towers to connect to the Internet or the
carrier's network?
LATENCY
function of the electrical
characteristics of the circuit
31
Mobile
50 – 550ms
350 ms
Desktop
20 – 150ms
80 ms
Be careful with the amount of
requests done to the server!

32. Become a Mobile developer from scratch
Mobile device characteristics
How mobile network works under the hood?
32
Antenna
When not in use, goes idle
after a given amount of
time to spare battery, then
needs to power up…
3G – 2.5s
4G – 100ms
WiFi
Turned On but not
connected consumes more
energy than radio

33. Become a Mobile developer from scratch
Requests done to the server?
> By far the biggest hurdle
33
71 requests
~8s to Load
17 CSS
25 JS
21 img
4 fonts
3G (750 Kbps 100ms RTT)
762 KB
downloaded
Your typical
Web app

34. Become a Mobile developer from scratch
Recap
1. Big resolution, less capacity
2. LTE (4G) is here
But aim for the worst scenario
3. Latency is a big performance hurdle
Careful with # requests to the server
34

35. Become a Mobile developer from scratch
Framing the Mobile challenge
UX considerations
35

36. Become a Mobile developer from scratch
Why apps fail?
● Lack of consistency
● Slow to change and adapt
● Poor strategy
● Not considering the complete journey
● Brand recognition
● Building mobile customer engagement
● Keep it simple
● Not solving a real world problem
● Not understand the target audience
● Not sure about the Mobile Platform
● Too many or too less features
● Making it too complex for the users
● Incompatible User Experience
● Neglecting the backend support
● Not enough Marketing
● Not using App Optimization Techniques
● Failure listening to Users’ Feedback
36
Source: Wired and Net solutions

37. Become a Mobile developer from scratch
Why apps fail?
● Lack of consistency
● Slow to change and adapt
● Poor strategy
● Not considering the complete journey
● Brand recognition
● Building mobile customer engagement
● Keep it simple
● Not solving a real world problem
● Not understand the target audience
● Not sure about the Mobile Platform
● Too many or too less features
● Making it too complex for the users
● Incompatible User Experience
● Neglecting the backend support
● Not enough Marketing
● Not using App Optimization Techniques
● Failure listening to Users’ Feedback
37
Source: Wired and Net solutions
UX related issues

38. Become a Mobile developer from scratch
UX considerations
● Any place, any time
38
Mobile phones are portable
attention is fragmented
Portable = Interruptible
sessions are short
Users have attention span
equivalent of a 6 years old
Source: image from Mobile Input and text from Mobile User Experience: Limitations and Strenghts

39. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands
39
Source: Read and Write in Mobile
1,333 observations of people using mobile devices on the street

40. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands
40
Source: Read and Write in Mobile

41. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands
41
Source: How to design for thumbs

42. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands
42
Source: How to design for thumbs

43. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands
43
Source: How to design for thumbs

44. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands
44
Source: How to design for thumbs
http://thumbzone.co/

45. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands big fat fingers
45
Source: Design for Touch
Touch
enabled

46. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands big fat fingers
46
Source: Design for Touch

47. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands big fat fingers
47
Source: Design for Touch

48. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands big fat fingers
● RWD is not always the right answer
48
Source: Mobile Design Essentials, Luke Wroblewski
University of Notre Dame,
Indiana, USA
4,5m

49. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands big fat fingers
● RWD is not always the right answer
49
“responsive web design isn’t
intended to serve as a
replacement for mobile web
sites”
Ethan Marcotte
B2C
For apps that
Mobile is a
nice to have

50. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands big fat fingers
● RWD is not always the right answer
● Use known mobile patterns
50
Loading
Carousel
List Item
Balloon
Pull To Refresh
Action Sheet (Context
Menu)
Modal
Toggle
Global Search
Card
Tabs
Blank Slate
Swipe Page Navigation
Title bar / Top Header Bar
Alerts
Card Stacked (tinder)
Carousel - Horizontal Photo
LightBox
Chat
Infinite Scroll
Collapsible Area
Progress Bar
Share
Floating menu
Feedback Message
Sidebar Panel
Post
Spinners / Numeric Text
Box
Counters
Form label
Side Navigation
Range Slider
Gallery
Bottom Menu (tab bar)
Swipe List Items
Calendar
Tooltip
Accordion
Timeline
Walkthrough (Focused
Onboarding)
Video
Upload
Input Icons
Tag Editor
Wizard
Badge (with placehoder)
Panel
Tile (research types)
Check Item
Button Group
UserInitials
DropDown
Box
BreadCrumbs
Character Count
Button Area
Tables

51. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands big fat fingers
● RWD is not always the right answer
● Use known mobile patterns
● Work and Personal apps
51
B2C app
• Customer oriented apps
• Distributed in public stores
• Needs lot of UX/UI investment
B2E app
• Enterprise apps
• Only to be used by Employees
• Distributed internally
• Can have less investment in UX/UI
(assumption)

52. Become a Mobile developer from scratch
UX considerations
● Any place, any time
● Used with hands big fat fingers
● RWD is not always the right answer
● Use known mobile patterns
● Work and Personal apps
52
BYOD Policy
Users device will have B2E and B2C apps installed.
Comparison and high expectations are inevitable.

53. Become a Mobile developer from scratch
UX considerations
53
● Any place, any time
● Used with hands big fat fingers
● RWD is not always the right answer
● Use known mobile patterns
● Work and Personal apps
● Design for perceived Performance
Perceived Performance
how quickly a software
feature appears to
perform its task

54. Replace This image in
master
UX considerations
● Any place, any time
● Used with hands big fat fingers
● RWD is not always the right answer
● Use known mobile patterns
● Work and Personal apps
● Design for perceived Performance
54Become a Mobile developer from scratch
Perceived Performance
how quickly a software
feature appears to
perform its task
Show info
already available

55. Replace This image in
master
UX considerations
● Any place, any time
● Used with hands big fat fingers
● RWD is not always the right answer
● Use known mobile patterns
● Work and Personal apps
● Design for perceived Performance
55Become a Mobile developer from scratch
Perceived Performance
how quickly a software
feature appears to
perform its task
Load remaining
asynchronously

56. Become a Mobile developer from scratch
Recap
1. You can’t fit it all
2. Who is your target user
3. What are they aiming to do?
4. What will you remove?
5. Expectation are high!
6. We are required a Mind Shift
56
B2C? You can’t use RWD!
Expect a lot more effort
for UX and UI!
What is the application
trying to solve?
Without making the
user frustrated.
Due to amazing
B2C apps out there
29 years

57. Become a Mobile developer from scratch
Framing the Mobile challenge
Choose the right architecture
57

58. Become a Mobile developer from scratch
Choose the right architecture
Source: OutSystems Blog
58

59. Become a Mobile developer from scratch
Choose the right architecture
59
● Is your app single screen with lot of animations and sounds?
● Do you need to access the device’s sensors?
● Do you need access to custom native functionality?
● Do you need your app on the store?
● Do you need to support multiple operating systems?
● Do you need to support devices with poor performance?
See this and more in OutSystems Blog!

60. How OutSystems Platform helps?

61. Become a Mobile developer from scratch
Agenda
● Framing the Mobile challenge
● How OutSystems Platform helps?
61
○ Preview in devices
○ Prefetching resources
○ Notify mechanism

62. Become a Mobile developer from scratch
Preview in devices
62

63. Replace This image in
master
Prefetching resources
● Can be activated per application
● Runs only once per session
● Downloads the application resources and caches
CSS, JavaScript, img, Fonts
● On 2nd access only downloads resources not cached
Become a Mobile developer from scratch 63
Available from 9.0.1.25

64. Replace This image in
master
Prefetching resources
Become a Mobile developer from scratch 64
Available from 9.0.1.25

65. Replace This image in
master
Prefetching resources
Become a Mobile developer from scratch 65
Available from 9.0.1.25
To customize

66. Become a Mobile developer from scratch
Notify mechanism Available from 9.1
Mobile Server
Button.Click
OnNotify
OnNotify
Ajax.Update
Mobile Server
Button.Click
Ajax.Update
Bali
LATENCY
function of the electrical
characteristics of the circuit
66

67. Become a Mobile developer from scratch
Recap
1. Preview in devices good starting point
Not the same as testing in a device
2. Prefetching will help on first access
Can be customized
3. Notify server side
Avoids unnecessary round trips to the server
67

68. Leveraging Silk UI Framework

69. Become a Mobile developer from scratch
Agenda
● Framing the Mobile challenge
● How OutSystems Platform helps?
● Leveraging Silk UI Framework
69
○ Templates
○ Mobile patterns
○ Demo

70. Become a Mobile developer from scratch

71. Become a Mobile developer from scratch
Why Silk UI?
71

72. Become a Mobile developer from scratch
Why Silk UI? Because CSS is Awesome*!
72
*When you know what you’re doing…

73. Become a Mobile developer from scratch
Why Silk UI?
View presentation and recording
73

74. Become a Mobile developer from scratch
Information from Silk UI
● Device: desktop, tablet, phone
● Dimension: big, hd, small
● Operating systems: iOS, Android, Windows, …
● Browser: chrome, firefox, IE10, IE11, Safari, etc.
● Orientation: landscape, portrait
● Locale: en, pt, …
74

75. Become a Mobile developer from scratch
Templates
75
Dublin
Liverpool
Lisbon Tokyo
Vanilla

76. Become a Mobile developer from scratch
Tokyo Template
76
If your target are smartphones, this
is the template to use. It's
optimized for touch and devices,
and the recipient for the mobile
patterns.

77. Become a Mobile developer from scratch
Leveraging Silk UI Framework
Mobile Patterns
77

78. Become a Mobile developer from scratch
Mobile Patterns
SilkUIFramework module
• Global Search
• ListItem
• ListItemToggle
• ListItemGroup
• Bottom Menu
Tokyo Theme module
• MainContentMargin
• ButtonBack
• ButtonMenu
78

79. Become a Mobile developer from scratch
Mobile Patterns
SilkUIFramework module
• Global Search
• ListItem
• ListItemToggle
• ListItemGroup
• Bottom Menu
Tokyo Theme module
• MainContentMargin
• ButtonBack
• ButtonMenu
79

80. Become a Mobile developer from scratch
Mobile Patterns
SilkUIFramework module
• Global Search
• ListItem
• ListItemToggle
• ListItemGroup
• Bottom Menu
Tokyo Theme module
• MainContentMargin
• ButtonBack
• ButtonMenu
80

81. Become a Mobile developer from scratch
Mobile patterns
SilkUIFramework module
• Global Search
• ListItem
• ListItemToggle
• ListItemGroup
• Bottom Menu
Tokyo Theme module
• MainContentMargin
• ButtonBack
• ButtonMenu
81

82. Become a Mobile developer from scratch
Demo
82

83. Become a Mobile developer from scratch
Recap
1. Silk UI Framework helps
With specific templates and mobile patterns
2. Tokyo template is the smartphone template
Containing specific patterns and behaviors
3. Leverage the information made available
To tweak the experience per platform
83

84. Going further with OutSystems Now

85. Become a Mobile developer from scratch
Agenda
● Framing the Mobile challenge
● How OutSystems Platform helps?
● Leveraging Silk UI Framework
● Going further with OutSystems Now
85
○ What is it?
○ Features
○ Architecture overview
○ Demo
○ Customizing OutSystems Now
○ Adding new plugins
○ Checklist to app stores

86. Become a Mobile developer from scratch
What is it?
● Transforms apps build in OutSystems Platform in Hybrid apps
iOS, Android and Windows apps
● Enabling access to device capabilities
Camera, location, local storage or other device APIs
● Apps can then be released to public stores
86

87. Become a Mobile developer from scratch
OutSystems Now screens
1. The Icon 2. Splash 4. Login 5. The List 6. App3. Environment
On B2E this
should be
removed
On B2C these
must be removed
87

88. Become a Mobile developer from scratch
Going further with OutSystems Now
Features
88

89. Become a Mobile developer from scratch
Cordova plugins
89

90. Become a Mobile developer from scratch
Supported features
90

91. Become a Mobile developer from scratch
Easy configuration
91

92. Become a Mobile developer from scratch
Going further with OutSystems Now
Architecture overview
92

93. Become a Mobile developer from scratch
What is Apache Cordova?
● Open-source mobile development framework
● Allows use of standard web technologies (HTML5, CSS3, and JavaScript) for cross-
platform development
● Applications execute within wrappers targeted to each platform
● Standards-compliant API bindings to access each device's sensors, data, and network
status.
93

94. Become a Mobile developer from scratch
Cordova vs PhoneGap
Cordova: open source project maintained
by Apache
PhoneGap: is powered by Cordova but
maintained by Adobe
94

95. Become a Mobile developer from scratch
Architecture overview
95
OutSystems Now Native Shell
Native Functionalities
Plugins/Addons Authentication
OutSystemsNowServices
OutSystems Platform Functionalities
Plugins Modules Authentication Provider
REST API
HTTPS
Communication
Server side
Device

96. Become a Mobile developer from scratch
Architecture overview
96
OutSystems Now Native Shell
Native Functionalities
Plugins/Addons Authentication
Web View
Offline Mode

97. Become a Mobile developer from scratch
Demo
● Let’s add to calendar a reminder with the deadline

98. Become a Mobile developer from scratch
Going further with OutSystems Now
Customizing OutSystems Now
98

99. Become a Mobile developer from scratch
Customizing OutSystems Now
99

100. Become a Mobile developer from scratch
Available Cordova Plugins
100

101. Become a Mobile developer from scratch
Plugins on Forge
101

102. Become a Mobile developer from scratch
Plugins on Forge
102

103. Become a Mobile developer from scratch
Going further with OutSystems Now
Submitting to the app stores
103

104. Become a Mobile developer from scratch
Available Cordova Plugins
104

105. Become a Mobile developer from scratch
Recap
1. OutSystems Now is in major app stores
For everyone to start using it and testing their applications
2. OutSystems Now is Open source
Enabling everyone to customize it and extend
3. Built on top of cordova
Leverage this by using plugins created by the cordova community
105

106. Thank you