Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

De l'application mobile à l'application web progressive

621 Aufrufe

Veröffentlicht am

Avec l’avénement des téléphones intelligents, l’application mobile est devenu incontournable et indispensable à tous business. Nous verrons en quelques chiffres l’envers du décors de cette ruée vers l’or.

Publier une application mobile pour le Play Store, pour l’App Store d’Apple, pour le Windows Phone Store, etc. heureusement, il existe des solutions de développement mobile selon le type d’application souhaitée et les contraintes du projet. De l’application native à l’application multiplateforme, nous ferrons un tour d’horizon des technologies.
Nous nous attarderons sur l’application multiplateforme de type WebView avant d’envisager l’application web progressive. Un exemple concret d’implémentation sera mis en lumière (Application shell, Service workers, Manifest).

Avec une telle facilité de mise en oeuvre, quel est l’avenir du développement mobile ?

Veröffentlicht in: Mobil
  • Als Erste(r) kommentieren

De l'application mobile à l'application web progressive

  1. 1. De l’application mobile à l’application web progressive Macha da COSTA CHILLCODING Born to be Mobile! Amphi Keynote - 12 Mai 2017
  2. 2. # Nombre d’application sur les stores Jan 2017 Source : www.statista.com, 2,600,000 2,200,000 ! 
  3. 3. # Applications Zombies 80 % # ASO !
  4. 4. # Challenge des applications mobiles $ % & ' (&& ) ♥
  5. 5. # Distribution des applications par revenus $ nb app. 2 600 000 1 000 000
  6. 6. # Rentabilité des applications 0,01% d’applications rentable d’ici 2018 Source : www.gartner.com, (
  7. 7. # Application Mobile
  8. 8. # Exigences projet mobile + ,- Performance DesignRespect Ergonomie Native
  9. 9. # Contraintes projet mobile . / ) 01 2 Budget Planning Équipe Maintenance
  10. 10. De l’application mobile à l’application web progressive # Application Mobile Native # Application Multiplateforme # Application Web Progressive
  11. 11. # Application Mobile Native
  12. 12. # Répartition des plateformes FEV 2017 2 % 24 % 73 % ANDROID IOS WINDOWS BLACKBERRY AUTRES FR 12 ! 3  Source : Kantar world Panel
  13. 13. # Répartition des plateformes 2 % 42 % 56 % ANDROID IOS WINDOWS BLACKBERRY AUTRES 13 FEV 2017 ! 3 US  Source : Kantar world Panel
  14. 14. # Application Mobile Native Android Windows phone • Android Studio, Eclipse, Netbeans, etc. • Objective C, Swift • C#, Silverlight • Visual Studio• Xcode • Java iOS 14 !  3
  15. 15. # Application Mobile Native Son GPS Vibreur Accéléromètre Tactile Ergonomie , 4 Utilisation intensive du matériel 5 Calcul 6
  16. 16. # Application Mobile Native 4 Application métier 77777
  17. 17. # Application Mobile Native + ,-8 8 8
  18. 18. # Application Mobile Native . / ) 01 28 8 88
  19. 19. # Application Mobile Native Type d’application 4 2 Utilitaire 9 Informations  Utilisation intensive du matériel ; Navigation GPS < Métier = Jeux Exemple : = Angry Birds > Natif
  20. 20. # Application Mobile Native
  21. 21. # Application Multiplateforme ?> Technologie Hybride
  22. 22. # Application Multiplateforme @ 5 !  3 + ?! ? ?3> Technologie Hybride
  23. 23. # Application Multiplateforme > Technologie Hybride
  24. 24. # Application Hybride + ,-8 8 8
  25. 25. # Application Multiplateforme Type d’application 4 2 Utilitaire 9 Informations  Utilisation intensive du matériel Exemple : A Slack > Technologie Hybride
  26. 26. # Application Hybride . / ) 01 28 8 88
  27. 27. # Application Multiplateforme ?> Open GL ES C / C++
  28. 28. # Application Multiplateforme @ 5 !  3   > Open GL ES
  29. 29. # Application Multiplateforme > Open GL ES
  30. 30. # Application Open GL ES + ,-8 8 8
  31. 31. # Application Multiplateforme Type d’application 4 = Jeux 2D / 3D , Présentation produit Exemple : = Deus Ex Go > Open GL ES
  32. 32. # Application Open GL ES . / ) 01 28 8 88
  33. 33. # Application Multiplateforme ?0100203> Métalangage
  34. 34. # Application Multiplateforme @ 5 !  3 > Métalangage
  35. 35. # Application Multiplateforme > Métalangage
  36. 36. # Application Métalangage + ,-8 8 8
  37. 37. # Application Multiplateforme > Métalangage Type d’application 4 2 Utilitaire 9 Informations Exemple : 9 Scoutmob
  38. 38. # Application Métalangage . / ) 01 28 8 88
  39. 39. # Application Multiplateforme ?<HTML/>> WebView
  40. 40. # Application Multiplateforme @ 5 !  3 > WebView
  41. 41. # Application Multiplateforme > WebView
  42. 42. # Application WebView + ,-8 8 8
  43. 43. # Application Multiplateforme Type d’application : 2 Utilitaire 9 Informations 4 Prototype Exemple : 9 TD Trading > WebView
  44. 44. # Application WebView . / ) 01 28 8 88
  45. 45. # Application Multiplateforme Material Design Vs Flat Design -
  46. 46. # Application Web Progressive ?<HTML/>> PWA
  47. 47. # Application Web Progressive B A2HS
  48. 48. # Application Web Progressive C D Mode hors ligne
  49. 49. # Application Web Progressive E D Fidélisation
  50. 50. # Application Web Progressive F D Installation
  51. 51. G 7G 7 G 7 # Application Web Progressive H D Continuité H H
  52. 52. # Application Web Progressive % D Découvrable SE
  53. 53. # Application Web Progressive  J D Lien unique
  54. 54. # Application Web Progressive K D Mise à jour
  55. 55. # Application Web Progressive @ L !  3 > PWA
  56. 56. # Application Web Progressive Technologies et principes : 1 HTTPS + HTML5/JS/CSS ? Manifest M Service Workers N Fréquentation
  57. 57. # HTML5/JS 1 Créer l’application 1 Support des intégrations natives (Android, iOS)
  58. 58. # Material Design Source : MaterializeCss,
  59. 59. # Manifest d’application ? JSON > Nom > Icônes > Url d’accueil > Couleurs du thème > Orientation > Mode d’affichage Source : Exemple de Manifest,
  60. 60. # Service Workers C E K 
  61. 61. # Modèle Coquillage P Charger l’interface minimale (menu, onglet, navigation) ○ Charger le contenu
  62. 62. # Modèle Coquillage
  63. 63. # Big Cookie Strategy E C    ( R | 3G | S ) TH U
  64. 64. # Big Cookie Strategy S T & H Données sur 1 Heure 3G T & H Données sur 3 Jours R T & H Données sur 15 Jours Exemple pour une application d’informations
  65. 65. # Application Web Progressive + ,-8 8 8
  66. 66. # Application Web Progressive Types d’application : 2 Utilitaire 9 Informations = Jeux V eCommerce 4 Prototype Exemple : airberlin.com > PWA
  67. 67. # Application Web Progressive . / ) 01 28 8 88
  68. 68. # Conclusion # Application Mobile Native ! Android  iOS # Application Multiplateforme > Technologie Hybride > Open GL ES > Métalangage > WebView # Application Web Progressive > PWA
  69. 69. # Conclusion + & # Application Mobile Native ! Android,  iOS # Application Multiplateforme > Open GL ES
  70. 70. # Conclusion - & # Application Mobile Native ! Android,  iOS # Application Multiplateforme > Technologie Hybride
  71. 71. # Conclusion , & # Application Multiplateforme > Open GL ES
  72. 72. # Conclusion . & # Application Multiplateforme > WebView
  73. 73. # Conclusion / & # Application Multiplateforme > WebView
  74. 74. # Conclusion &) 0C# # Application Multiplateforme > Technologie Hybride 0! 0
  75. 75. # Conclusion &) # Application Mobile Native ! Android,  iOS 0! 0
  76. 76. # Conclusion &N 0WEB # Application Multiplateforme > WebView
  77. 77. # Conclusion 2 & Application Multiplateforme > WebView
  78. 78. # Conclusion L & # Application Web Progressive > PWA
  79. 79. Work is Better at the Beach. CHILLCODING Recevez des news Chill en vous inscrivant à notre Newsletter !
  80. 80. Merci ! Des questions ? W macha@chillcoding.com X Macha DA COSTA + ChillCoding Z @MachaDaCosta [ ChillCoding ChillCoding
  81. 81. Sources # L’envers du décors # Statista: Number of available apps in the apple app-store # Gartener: 0.01 % of financial app sucess through 2018 # Brandongaille: 9 reasons why people download mobile apps # Wearesocial: Digital social mobile les chiffres 2017 # Application native # Mrc-productivity: The mobile app comparison chart hybrid vs native vs mobile web # Stablekernel: Native vs hybrid mobile app development 5 reasons you should go native # Kantar world Panel : Smartphone os market share
  82. 82. Sources # Tour d’horizon des technologies # Éditions ENI : Cédric Millauriaux - Développement mobile multiplateforme # Hybride # Xamarin: Everything you need to deliver great mobile apps. # Open GL ES # Worldofleveldesign: Recommended game engines # blog.venturepact.com/8-high-performance-apps-you-never-knew-were-hybrid/ # Métalangage # Appcelerator: Build great mobile experiences faster # WebView # Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.
  83. 83. Sources # Progressive Web App # https://gitlab.com/chillcoding-at-the-beach/macha/wikis/page-progressive-web- app # https://blog.wigzo.com/how-to-overcome-the-business-app-discovery-challenge/ # https://pwa.rocks/ # http://blog.ionic.io/what-is-a-progressive-web-app/ (FR) # https://www.smashingmagazine.com/a-beginners-guide-to-progressive-web- apps/ # https://developers.google.com/web/progressive-web-apps # https://m.yourstory.com/2017/03/progressive-web-vs-native-apps-will-mobile- experience/

×