Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hybrid HTML5 Apps

Building Hybrid HTML5 Mobile and Desktop Apps

  • Be the first to comment

Hybrid HTML5 Apps

  1. 1. going hybrid mobileapps with HTML5
  2. 2. Hugo Rodrigues Full-stack Developer (and Full-time HackHands expert) www.hackhands.com/hugorodrigues
 www.hugorodrigues.com 
 mail@hugorodrigues.com @hugorodrigues
  3. 3. WARNING Opinionated Talk ahead ( haters will hate )
  4. 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. 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. 6. html 5 istricky hybrid
  7. 7. there are hundredsof different devices
  8. 8. we really need to UNDERSTAND how it works
  9. 9. how to getstarted?
  10. 10. You think you have manyoptions?
  11. 11. Letmetellyouasecret… isthebaseofeverything!
  12. 12. They all depend on Cordova
  13. 13. Cordova? ★ Phonegapstartedeverything ★ PhonegapCoremovedtoApache
 foundationwhenAdobeacquires
 Phonegap. ★ Iliketocallit“theabstractionlayer” ★ Canbeusedwithoutanyothertool ★ It’sextendablebyusingplugins
  14. 14. Plugins… Plugins everywhere! BatteryStatus Camera Console Contacts Device FileSystem FileTransfer GeolocationMedia Vibration
  15. 15. UsingtheCameraplugintoTakeapicture!
  16. 16. let’s see how MOBILESTACK works
  17. 17. Native stack Phone Operative System
 (iOS, Android, Windows Phone)
  18. 18. Native stack Phone Operative System
 (iOS, Android, Windows Phone) Camera API File API GPS API Media API
  19. 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. 20. Hybrid HTML5 Stack Phone Operative System
 (iOS, Android, Windows Phone)
  21. 21. Hybrid HTML5 Stack Phone Operative System
 (iOS, Android, Windows Phone) Camera API File API GPS API Media API
  22. 22. Hybrid HTML5 Stack Phone Operative System
 (iOS, Android, Windows Phone) Camera API File API GPS API Media API Cordova bridge
 (Abstraction layer)
  23. 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. 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. 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. 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. 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. 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. 29. So what the other projects do? ?
  30. 30. So what the other projects do? ★ ExtraTools(CLI/Consoletools) ★ Helpers(IDE’s,WYSIWYGtools) ★ MobileUIFrameworks(UserInterface) ★ Cloudbuilding ★ CI&Deployment ★ AutosubmissiontoAppstore’s ★ ExtraCordovaPlugins ★ …
  31. 31. hum… i see movingparts everywhere
  32. 32. it’s all about USERINTERFACE performance Do Hybrid html5 apps suck because theyareslow?
  33. 33. Does Hybrid html5 suck because ithasuglyUI&badUX?
  34. 34. it’s all about USERINTERFACE performance & usability
  35. 35. Some popular UI frameworks
  36. 36. WhatmakesagreatuserMobileUIframework? ✓ Performance
  37. 37. WhatmakesagreatuserMobileUIframework? ✓ Performance ✓ Nativelookandfeel
  38. 38. WhatmakesagreatuserMobileUIframework? ✓ Performance ✓ Nativelookandfeel ✓ Usability(forusersanddevelopers)
  39. 39. WhatmakesagreatuserMobileUIframework? ✓ Performance ✓ Nativelookandfeel ✓ Usability(forusersanddevelopers) ✓ SPA (Single-pageapplication)
  40. 40. WhatmakesagreatuserMobileUIframework? ✓ Performance ✓ Nativelookandfeel ✓ Usability(forusersanddevelopers) ✓ SPA (Single-pageapplication) ✓ LargenumberofUIcomponents/widgets
  41. 41. WhatmakesagreatuserMobileUIframework? ✓ Performance ✓ Nativelookandfeel ✓ Usability(forusersanddevelopers) ✓ SPA (Single-pageapplication) ✓ LargenumberofUIcomponents/widgets ✓ Welltestedagainsmultipledevices
  42. 42. WhatmakesagreatuserMobileUIframework? ✓ Performance ✓ Nativelookandfeel ✓ Usability(forusersanddevelopers) ✓ SPA (Single-pageapplication) ✓ LargenumberofUIcomponents/widgets ✓ Welltestedagainsmultipledevices
  43. 43. ionic + ngCordova = Epic win! ✓ GreatDocumentation ✓ QualitysetofJSComponents ✓ LargesetofCSSComponents ✓ BuildonAngularJS ✓ ngCordovaforefectiveuseofCordova
 pluginsonAngular
  44. 44. Keypointsforbuildgreatapps ✓ Understandhowitworks
 (Toavoidcommonpitfalls)
  45. 45. Keypointsforbuildgreatapps ✓ Understandhowitworks
 (Toavoidcommonpitfalls)
 ✓ KnowthateverythingisCordova
 (Tofindplugins&knowhowtheyareconnected)

  46. 46. Keypointsforbuildgreatapps ✓ Understandhowitworks
 (Toavoidcommonpitfalls)
 ✓ KnowthateverythingisCordova
 (Tofindplugins&knowhowtheyareconnected)
 ✓ HowNativepluginswork
 (Soyoucanwriteyouown)
  47. 47. Keypointsforbuildgreatapps ✓ Understandhowitworks
 (Toavoidcommonpitfalls)
 ✓ KnowthateverythingisCordova
 (Tofindplugins&knowhowtheyareconnected)
 ✓ HowNativepluginswork
 (Soyoucanwriteyouown)
 ✓ ChooseagreatUIFramework
 (TodelivergreatUXandsmoothUI)
  48. 48. Keypointsforbuildgreatapps ✓ Understandhowitworks
 (Toavoidcommonpitfalls)
 ✓ KnowthateverythingisCordova
 (Tofindplugins&knowhowtheyareconnected)
 ✓ HowNativepluginswork
 (Soyoucanwriteyouown)
 ✓ ChooseagreatUIFramework
 (TodelivergreatUXandsmoothUI)
  49. 49. got it, but SHOWUSTHECODE!
  50. 50. InstallSDKforyourtargetplatforms Xcode for building iOS Apps Android SDK for building Android Apps
  51. 51. InstallNodeJSfromwebsiteorbrew/apt-getit
  52. 52. InstallingCordova+Ionic $ npm install -g ionic $ npm install -g cordova
  53. 53. Common development workflow RunningScaffolding DebuggingCoding
  54. 54. Common development workflow RunningScaffolding DebuggingCoding
  55. 55. Common development workflow RunningScaffolding DebuggingCoding
  56. 56. Common development workflow RunningScaffolding DebuggingCoding
  57. 57. Common development workflow RunningScaffolding DebuggingCoding
  58. 58. Common development workflow RunningScaffolding DebuggingCoding
  59. 59. .Scaffolding
  60. 60. ScaffoldingyourProject $ ionic start myApp tabs
  61. 61. ScaffoldingyourProject-AddPlatforms $ ionic platform add ios $ ionic platform add android
  62. 62. 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
  63. 63. ScaffoldingyourProject-Directorytree myApp |-- platforms | |-- android | `-- ios |-- plugins | `-- org.apache.cordova.camera `-- www |-- css |-- img |-- js |-- lib `-- templates
  64. 64. 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
  65. 65. ScaffoldingyourProject-Directorytree myApp |-- platforms | |-- android | `-- ios |-- plugins | `-- org.apache.cordova.camera `-- www |-- css |-- img |-- js |-- lib `-- templates All the installed plugins will go here
  66. 66. ScaffoldingyourProject-Directorytree myApp |-- platforms | |-- android | `-- ios |-- plugins | `-- org.apache.cordova.camera `-- www |-- css |-- img |-- js |-- lib `-- templates This is where you will code!
  67. 67. .Running
  68. 68. Running on Emulator $ ionic emulate ios $ ionic emulate android
  69. 69. Running on RealDevice $ ionic run ios $ ionic run android
  70. 70. Running on Browser $ ionic serve
  71. 71. .Debugging
  72. 72. Debugging - Android $ adb logcat $ adb logcat "CordovaLog:D *:S"
  73. 73. Debugging - Android-Chrome chrome://inspect/ https://www.jshybugger.com Android 4.4+ Previous versions
  74. 74. 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
  75. 75. don’t be shy! Q&A
  76. 76. ( hope you like it ) THANKYOU
  77. 77. www.hugorodrigues.com

    Be the first to comment

    Login to see the comments

  • mikevanvendeloo

    May. 1, 2015
  • ShikitaDeLaCruz

    May. 1, 2015
  • giovannibonamigo1

    May. 2, 2015
  • 7876785926

    May. 2, 2015
  • YiannisPrangidis

    May. 2, 2015
  • IqraNoor3

    May. 2, 2015
  • prasadshelar

    May. 4, 2015
  • mostafaosama1232

    May. 4, 2015
  • TwittingDog

    May. 5, 2015
  • NiravPatel154

    May. 5, 2015
  • tomcyjohn

    May. 6, 2015
  • ChoiSuHwan

    May. 6, 2015
  • AhmetRecaiAkgz

    May. 8, 2015
  • dreq72

    May. 17, 2015
  • SerkanTURAN

    May. 17, 2015
  • JaeTaekJung

    Jun. 7, 2015
  • virajs

    Dec. 3, 2015
  • satyajitburman

    Sep. 19, 2016
  • Jeferex

    Sep. 15, 2017
  • KrzysiekKondracki

    Jul. 18, 2018

Building Hybrid HTML5 Mobile and Desktop Apps

Views

Total views

2,418

On Slideshare

0

From embeds

0

Number of embeds

7

Actions

Downloads

78

Shares

0

Comments

0

Likes

21

×