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
Macha da COSTA
CHILLCODING
Born to be Mobile! Amphi Keynote - 12 M...
# Nombre d’application sur les
stores
Jan
2017
Source : www.statista.com,
2,600,000 2,200,000
! 
# Applications Zombies
80 %
# ASO !
# Challenge des applications
mobiles
$
% & ' (&& )
♥
# Distribution des applications
par revenus
$
nb app.
2 600 000
1 000 000
# Rentabilité des applications
0,01% d’applications rentable d’ici 2018
Source : www.gartner.com,
(
# Application Mobile
# Exigences projet mobile
+ ,-
Performance DesignRespect
Ergonomie
Native
# Contraintes projet mobile
. / )
01
2
Budget Planning Équipe Maintenance
De l’application mobile à
l’application web progressive
# Application Mobile Native
# Application Multiplateforme
# Applic...
# Application Mobile Native
# Répartition des plateformes
FEV
2017
2 %
24 %
73 % ANDROID
IOS
WINDOWS
BLACKBERRY
AUTRES
FR
12
!
3

Source : Kantar wor...
# Répartition des plateformes
2 %
42 %
56 %
ANDROID
IOS
WINDOWS
BLACKBERRY
AUTRES
13
FEV
2017
!
3
US

Source : Kantar wor...
# Application Mobile Native
Android Windows phone
• Android
Studio,
Eclipse,
Netbeans,
etc.
• Objective C,
Swift
• C#,
Sil...
# Application Mobile Native
Son
GPS
Vibreur
Accéléromètre
Tactile
Ergonomie ,
4 Utilisation intensive du matériel
5 Calcul...
# Application Mobile Native
4 Application métier
77777
# Application Mobile Native
+ ,-8 8 8
# Application Mobile Native
. / )
01
28 8 88
# Application Mobile Native
Type d’application 4
2 Utilitaire
9 Informations
 Utilisation intensive du matériel
; Navigat...
# Application Mobile Native
# Application Multiplateforme
?> Technologie
Hybride
# Application Multiplateforme
@
5
!  3
+
?! ? ?3> Technologie
Hybride
# Application Multiplateforme
> Technologie
Hybride
# Application Hybride
+ ,-8 8 8
# Application Multiplateforme
Type d’application 4
2 Utilitaire
9 Informations
 Utilisation intensive du matériel
Exemple...
# Application Hybride
. / )
01
28 8 88
# Application Multiplateforme
?> Open GL ES C / C++
# Application Multiplateforme
@
5
!  3
 
> Open GL ES
# Application Multiplateforme
> Open GL ES
# Application Open GL ES
+ ,-8 8 8
# Application Multiplateforme
Type d’application 4
= Jeux 2D / 3D
, Présentation produit
Exemple :
= Deus Ex Go
> Open GL ...
# Application Open GL ES
. / )
01
28 8 88
# Application Multiplateforme
?0100203> Métalangage
# Application Multiplateforme
@
5
!  3
> Métalangage
# Application Multiplateforme
> Métalangage
# Application Métalangage
+ ,-8 8 8
# Application Multiplateforme
> Métalangage
Type d’application 4
2 Utilitaire
9 Informations
Exemple :
9 Scoutmob
# Application Métalangage
. / )
01
28 8 88
# Application Multiplateforme
?<HTML/>> WebView
# Application Multiplateforme
@
5
!  3
> WebView
# Application Multiplateforme
> WebView
# Application WebView
+ ,-8 8 8
# Application Multiplateforme
Type d’application :
2 Utilitaire
9 Informations
4 Prototype
Exemple :
9 TD Trading
> WebView
# Application WebView
. / )
01
28 8 88
# Application Multiplateforme
Material Design Vs Flat Design
-
# Application Web Progressive
?<HTML/>> PWA
# Application Web Progressive
B A2HS
# Application Web Progressive
C
D Mode hors ligne
# Application Web Progressive
E
D Fidélisation
# Application Web Progressive
F
D Installation
G
7G
7
G
7
# Application Web Progressive
H
D Continuité
H H
# Application Web Progressive
%
D Découvrable
SE
# Application Web Progressive
 J
D Lien unique
# Application Web Progressive
K
D Mise à jour
# Application Web Progressive
@
L
!  3
> PWA
# Application Web Progressive
Technologies et principes :
1 HTTPS + HTML5/JS/CSS
? Manifest
M Service Workers
N Fréquentat...
# HTML5/JS
1 Créer l’application
1 Support des intégrations natives
(Android, iOS)
# Material Design
Source : MaterializeCss,
# Manifest d’application
? JSON
> Nom
> Icônes
> Url d’accueil
> Couleurs du thème
> Orientation
> Mode d’affichage
Source ...
# Service Workers
C E K 
# Modèle Coquillage
P Charger l’interface minimale
(menu, onglet, navigation)
○ Charger le contenu
# Modèle Coquillage
# Big Cookie Strategy
E C
   ( R | 3G | S )
TH U
# 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 u...
# Application Web Progressive
+ ,-8 8 8
# Application Web Progressive
Types d’application :
2 Utilitaire
9 Informations
= Jeux
V eCommerce
4 Prototype
Exemple :
a...
# Application Web Progressive
. / )
01
28 8 88
# Conclusion
# Application Mobile Native
! Android
 iOS
# Application Multiplateforme
> Technologie Hybride
> Open GL ES
...
# Conclusion
+ &
# Application Mobile Native
! Android,  iOS
# Application Multiplateforme
> Open GL ES
# Conclusion
- &
# Application Mobile Native
! Android,  iOS
# Application Multiplateforme
> Technologie Hybride
# Conclusion
, & # Application Multiplateforme
> Open GL ES
# Conclusion
. & # Application Multiplateforme
> WebView
# Conclusion
/ & # Application Multiplateforme
> WebView
# Conclusion
&)
0C#
# Application Multiplateforme
> Technologie Hybride
0!
0
# Conclusion
&) # Application Mobile Native
! Android,  iOS
0!
0
# Conclusion
&N
0WEB
# Application Multiplateforme
> WebView
# Conclusion
2 & Application Multiplateforme
> WebView
# Conclusion
L & # Application Web Progressive
> PWA
Work
is
Better
at the
Beach.
CHILLCODING
Recevez des news Chill en vous inscrivant à notre Newsletter !
Merci !
Des questions ?
W macha@chillcoding.com
X Macha DA COSTA
+ ChillCoding
Z @MachaDaCosta
[ ChillCoding
 ChillCoding
Sources
# L’envers du décors
# Statista: Number of available apps in the apple app-store
# Gartener: 0.01 % of financial ap...
Sources
# Tour d’horizon des technologies
# Éditions ENI : Cédric Millauriaux - Développement mobile multiplateforme
# Hyb...
Sources
# Progressive Web App
# https://gitlab.com/chillcoding-at-the-beach/macha/wikis/page-progressive-web-
app
# https:...
Nächste SlideShare
Wird geladen in …5
×

De l'application mobile à l'application web progressive

603 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/

×