Building Hybrid HTML5 Mobile and Desktop Apps

1. going hybrid
mobileapps
with HTML5

2. Hugo Rodrigues
Full-stack Developer (and Full-time HackHands expert)
www.hackhands.com/hugorodrigues
www.hugorodrigues.com
mail@hugorodrigues.com
@hugorodrigues

3. WARNING
Opinionated Talk ahead
( haters will hate )

4. WTFisHybridMobile/DesktopHTML5?
HYBRID
HTML5
APPS
HTML5
APPS
Everything
you already know
about HTML5
All from HTML5
+
Native OS API’s
runs in browser runs inside a native app

5. WhenyouneedtogoHybrid?
HYBRID
HTML5
APPS
Hybrid Desktop
- Full filesystem access
- Use NPM Packages
- Shell Access
- Interact with system
…
Hybrid Mobile
Access Native OS API -
Plugin Access -
Hardware Access -
Camera, GPS, Vibration -
…

6. html 5
istricky
hybrid

7. there are
hundredsof
different devices

8. we really need to
UNDERSTAND
how it works

9. how to
getstarted?

10. You think you have
manyoptions?

11. Letmetellyouasecret…
isthebaseofeverything!

12. They all depend on Cordova

13. Cordova?
★ Phonegapstartedeverything
★ PhonegapCoremovedtoApache
foundationwhenAdobeacquires
Phonegap.
★ Iliketocallit“theabstractionlayer”
★ Canbeusedwithoutanyothertool
★ It’sextendablebyusingplugins

14. Plugins… Plugins everywhere!
BatteryStatus
Camera
Console
Contacts
Device
FileSystem
FileTransfer
GeolocationMedia
Vibration

15. UsingtheCameraplugintoTakeapicture!

16. let’s see how
MOBILESTACK
works

17. Native stack
Phone Operative System
(iOS, Android, Windows Phone)

18. Native stack
Phone Operative System
(iOS, Android, Windows Phone)
Camera
API
File
API
GPS
API
Media
API

19. Native stack
Phone Operative System
(iOS, Android, Windows Phone)
Your NATIVE App
(Java, objectiveC, swift)
Camera
API
File
API
GPS
API
Media
API

20. Hybrid HTML5 Stack
Phone Operative System
(iOS, Android, Windows Phone)

21. Hybrid HTML5 Stack
Phone Operative System
(iOS, Android, Windows Phone)
Camera
API
File
API
GPS
API
Media
API

22. Hybrid HTML5 Stack
Phone Operative System
(iOS, Android, Windows Phone)
Camera
API
File
API
GPS
API
Media
API
Cordova bridge
(Abstraction layer)

23. Hybrid HTML5 Stack
Phone Operative System
(iOS, Android, Windows Phone)
Camera
API
File
API
GPS
API
Media
API
Cordova bridge
(Abstraction layer)
Camera
JS
File
JS
GPS
JS
Media
JS

24. Hybrid HTML5 Stack
Phone Operative System
(iOS, Android, Windows Phone)
Camera
API
File
API
GPS
API
Media
API
Cordova bridge
(Abstraction layer)
Rendering layer
(Safari, Chrome, webkit)
Camera
JS
File
JS
GPS
JS
Media
JS

25. Hybrid HTML5 Stack
Phone Operative System
(iOS, Android, Windows Phone)
Camera
API
File
API
GPS
API
Media
API
Cordova bridge
(Abstraction layer)
Your HTML5 App
(Html5 + CSS3 + JS)
Rendering layer
(Safari, Chrome, webkit)
Camera
JS
File
JS
GPS
JS
Media
JS

26. Hybrid HTML5 vs NATIVE stack
Phone Operative System
(iOS, Android, Windows Phone)
Camera
API
File
API
GPS
API
Media
API
Cordova bridge
(Abstraction layer)
Your HTML5 App
(Html5 + CSS3 + JS)
Rendering layer
(Safari, Chrome, webkit)
Camera
JS
File
JS
GPS
JS
Media
JS
Phone Operative System
(iOS, Android, Windows Phone)
Your NATIVE App
(Java, objectiveC, swift)
Camera
API
File
API
GPS
API
Media
API
Hybrid HTML5 Native APP

27. Hybrid HTML5 vs NATIVE stack
Phone Operative System
(iOS, Android, Windows Phone)
Camera
API
File
API
GPS
API
Media
API
Cordova bridge
(Abstraction layer)
Your HTML5 App
(Html5 + CSS3 + JS)
Rendering layer
(Safari, Chrome, webkit)
Camera
JS
File
JS
GPS
JS
Media
JS
Phone Operative System
(iOS, Android, Windows Phone)
Your NATIVE App
(Java, objectiveC, swift)
Camera
API
File
API
GPS
API
Media
API
Hybrid HTML5 Native APP
Plugins
Cordova App
Webview

28. The same codebase runs everywhere
Your HTML5 App
(Html5 + CSS3 + JS)
Phone Operative System
iOS
Camera
API
File
API
GPS
API
Media
API
Cordova bridge
(Abstraction layer)
Rendering layer
Safari
Camera
JS
File
JS
GPS
JS
Media
JS
Phone Operative System
Android
Camera
API
File
API
GPS
API
Media
API
Cordova bridge
(Abstraction layer)
Rendering layer
Chrome or webkit
Camera
JS
File
JS
GPS
JS
Media
JS
Phone Operative System
Windows Phone
Camera
API
File
API
GPS
API
Media
API
Cordova bridge
(Abstraction layer)
Rendering layer
Internet Explorer
Camera
JS
File
JS
GPS
JS
Media
JS
Nexus iPhone Lumia

29. So what the other projects do?
?

30. So what the other projects do?
★ ExtraTools(CLI/Consoletools)
★ Helpers(IDE’s,WYSIWYGtools)
★ MobileUIFrameworks(UserInterface)
★ Cloudbuilding
★ CI&Deployment
★ AutosubmissiontoAppstore’s
★ ExtraCordovaPlugins
★ …

31. hum… i see
movingparts
everywhere

32. it’s all about
USERINTERFACE
performance
Do Hybrid html5 apps suck because
theyareslow?

33. Does Hybrid html5 suck because
ithasuglyUI&badUX?

34. it’s all about
USERINTERFACE
performance & usability

35. Some popular UI frameworks

36. WhatmakesagreatuserMobileUIframework?
✓ Performance

37. WhatmakesagreatuserMobileUIframework?
✓ Performance
✓ Nativelookandfeel

38. WhatmakesagreatuserMobileUIframework?
✓ Performance
✓ Nativelookandfeel
✓ Usability(forusersanddevelopers)

39. WhatmakesagreatuserMobileUIframework?
✓ Performance
✓ Nativelookandfeel
✓ Usability(forusersanddevelopers)
✓ SPA (Single-pageapplication)

40. WhatmakesagreatuserMobileUIframework?
✓ Performance
✓ Nativelookandfeel
✓ Usability(forusersanddevelopers)
✓ SPA (Single-pageapplication)
✓ LargenumberofUIcomponents/widgets

41. WhatmakesagreatuserMobileUIframework?
✓ Performance
✓ Nativelookandfeel
✓ Usability(forusersanddevelopers)
✓ SPA (Single-pageapplication)
✓ LargenumberofUIcomponents/widgets
✓ Welltestedagainsmultipledevices

42. WhatmakesagreatuserMobileUIframework?
✓ Performance
✓ Nativelookandfeel
✓ Usability(forusersanddevelopers)
✓ SPA (Single-pageapplication)
✓ LargenumberofUIcomponents/widgets
✓ Welltestedagainsmultipledevices

44. ionic + ngCordova = Epic win!
✓ GreatDocumentation
✓ QualitysetofJSComponents
✓ LargesetofCSSComponents
✓ BuildonAngularJS
✓ ngCordovaforefectiveuseofCordova
pluginsonAngular

45. Keypointsforbuildgreatapps
✓ Understandhowitworks
(Toavoidcommonpitfalls)

46. Keypointsforbuildgreatapps
✓ Understandhowitworks
(Toavoidcommonpitfalls)
✓ KnowthateverythingisCordova
(Tofindplugins&knowhowtheyareconnected)

47. Keypointsforbuildgreatapps
✓ Understandhowitworks
(Toavoidcommonpitfalls)
✓ KnowthateverythingisCordova
(Tofindplugins&knowhowtheyareconnected)
✓ HowNativepluginswork
(Soyoucanwriteyouown)

48. Keypointsforbuildgreatapps
✓ Understandhowitworks
(Toavoidcommonpitfalls)
✓ KnowthateverythingisCordova
(Tofindplugins&knowhowtheyareconnected)
✓ HowNativepluginswork
(Soyoucanwriteyouown)
✓ ChooseagreatUIFramework
(TodelivergreatUXandsmoothUI)

49. Keypointsforbuildgreatapps
✓ Understandhowitworks
(Toavoidcommonpitfalls)
✓ KnowthateverythingisCordova
(Tofindplugins&knowhowtheyareconnected)
✓ HowNativepluginswork
(Soyoucanwriteyouown)
✓ ChooseagreatUIFramework
(TodelivergreatUXandsmoothUI)

50. got it, but
SHOWUSTHECODE!

51. InstallSDKforyourtargetplatforms
Xcode
for building iOS Apps
Android SDK
for building Android Apps

52. InstallNodeJSfromwebsiteorbrew/apt-getit

53. InstallingCordova+Ionic
$ npm install -g ionic
$ npm install -g cordova

54. Common development workflow
RunningScaffolding DebuggingCoding

55. Common development workflow
RunningScaffolding DebuggingCoding

56. Common development workflow
RunningScaffolding DebuggingCoding

57. Common development workflow
RunningScaffolding DebuggingCoding

58. Common development workflow
RunningScaffolding DebuggingCoding

59. Common development workflow
RunningScaffolding DebuggingCoding

60. .Scaffolding

61. ScaffoldingyourProject
$ ionic start myApp tabs

62. ScaffoldingyourProject-AddPlatforms
$ ionic platform add ios
$ ionic platform add android

63. ScaffoldingyourProject-AddPlugins
$ cordova plugin add org.apache.cordova.camera
Find more plugin: http://plugins.cordova.io/
Installing "org.apache.cordova.camera" for android
Installing "org.apache.cordova.camera" for ios

64. ScaffoldingyourProject-Directorytree
myApp
|-- platforms
| |-- android
| `-- ios
|-- plugins
| `-- org.apache.cordova.camera
`-- www
|-- css
|-- img
|-- js
|-- lib
`-- templates

65. ScaffoldingyourProject-Directorytree
myApp
|-- platforms
| |-- android
| `-- ios
|-- plugins
| `-- org.apache.cordova.camera
`-- www
|-- css
|-- img
|-- js
|-- lib
`-- templates
One folder for every
platform you
have targeted

66. ScaffoldingyourProject-Directorytree
myApp
|-- platforms
| |-- android
| `-- ios
|-- plugins
| `-- org.apache.cordova.camera
`-- www
|-- css
|-- img
|-- js
|-- lib
`-- templates
All the installed
plugins will go here

67. ScaffoldingyourProject-Directorytree
myApp
|-- platforms
| |-- android
| `-- ios
|-- plugins
| `-- org.apache.cordova.camera
`-- www
|-- css
|-- img
|-- js
|-- lib
`-- templates
This is where
you will code!

68. .Running

69. Running on Emulator
$ ionic emulate ios
$ ionic emulate android

70. Running on RealDevice
$ ionic run ios
$ ionic run android

71. Running on Browser
$ ionic serve

72. .Debugging

73. Debugging - Android
$ adb logcat
$ adb logcat "CordovaLog:D *:S"

74. Debugging - Android-Chrome
chrome://inspect/
https://www.jshybugger.com
Android 4.4+
Previous versions

75. Debugging - iOS
$ defaults write com.apple.Safari IncludeDebugMenu 1
Activate Safari Dev/Debug Menu (or use the GUI)
Select the simulator or a connected device and start debugging

76. don’t be shy!
Q&A

77. ( hope you like it )
THANKYOU

78. www.hugorodrigues.com