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 ?

1. De l’application mobile à
l’application web progressive
Macha da COSTA
CHILLCODING
Born to be Mobile! Amphi Keynote - 12 Mai 2017

2. # Nombre d’application sur les
stores
Jan
2017
Source : www.statista.com,
2,600,000 2,200,000
! 

3. # Applications Zombies
80 %
# ASO !

4. # Challenge des applications
mobiles
$
% & ' (&& )
♥

5. # Distribution des applications
par revenus
$
nb app.
2 600 000
1 000 000

6. # Rentabilité des applications
0,01% d’applications rentable d’ici 2018
Source : www.gartner.com,
(

7. # Application Mobile

8. # Exigences projet mobile
+ ,-
Performance DesignRespect
Ergonomie
Native

9. # Contraintes projet mobile
. / )
01
2
Budget Planning Équipe Maintenance

10. De l’application mobile à
l’application web progressive
# Application Mobile Native
# Application Multiplateforme
# Application Web Progressive

11. # Application Mobile Native

12. # Répartition des plateformes
FEV
2017
2 %
24 %
73 % ANDROID
IOS
WINDOWS
BLACKBERRY
AUTRES
FR
12
!
3

Source : Kantar world Panel

13. # Répartition des plateformes
2 %
42 %
56 %
ANDROID
IOS
WINDOWS
BLACKBERRY
AUTRES
13
FEV
2017
!
3
US

Source : Kantar world Panel

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. # Application Mobile Native
Son
GPS
Vibreur
Accéléromètre
Tactile
Ergonomie ,
4 Utilisation intensive du matériel
5 Calcul
6

16. # Application Mobile Native
4 Application métier
77777

17. # Application Mobile Native
+ ,-8 8 8

18. # Application Mobile Native
. / )
01
28 8 88

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. # Application Mobile Native

21. # Application Multiplateforme
?> Technologie
Hybride

22. # Application Multiplateforme
@
5
!  3
+
?! ? ?3> Technologie
Hybride

23. # Application Multiplateforme
> Technologie
Hybride

24. # Application Hybride
+ ,-8 8 8

25. # Application Multiplateforme
Type d’application 4
2 Utilitaire
9 Informations
 Utilisation intensive du matériel
Exemple :
A Slack
> Technologie
Hybride

26. # Application Hybride
. / )
01
28 8 88

27. # Application Multiplateforme
?> Open GL ES C / C++

28. # Application Multiplateforme
@
5
!  3
 
> Open GL ES

29. # Application Multiplateforme
> Open GL ES

30. # Application Open GL ES
+ ,-8 8 8

31. # Application Multiplateforme
Type d’application 4
= Jeux 2D / 3D
, Présentation produit
Exemple :
= Deus Ex Go
> Open GL ES

32. # Application Open GL ES
. / )
01
28 8 88

33. # Application Multiplateforme
?0100203> Métalangage

34. # Application Multiplateforme
@
5
!  3
> Métalangage

35. # Application Multiplateforme
> Métalangage

36. # Application Métalangage
+ ,-8 8 8

37. # Application Multiplateforme
> Métalangage
Type d’application 4
2 Utilitaire
9 Informations
Exemple :
9 Scoutmob

38. # Application Métalangage
. / )
01
28 8 88

39. # Application Multiplateforme
?<HTML/>> WebView

40. # Application Multiplateforme
@
5
!  3
> WebView

41. # Application Multiplateforme
> WebView

42. # Application WebView
+ ,-8 8 8

43. # Application Multiplateforme
Type d’application :
2 Utilitaire
9 Informations
4 Prototype
Exemple :
9 TD Trading
> WebView

44. # Application WebView
. / )
01
28 8 88

45. # Application Multiplateforme
Material Design Vs Flat Design
-

46. # Application Web Progressive
?<HTML/>> PWA

47. # Application Web Progressive
B A2HS

48. # Application Web Progressive
C
D Mode hors ligne

49. # Application Web Progressive
E
D Fidélisation

50. # Application Web Progressive
F
D Installation

51. G
7G
7
G
7
# Application Web Progressive
H
D Continuité
H H

52. # Application Web Progressive
%
D Découvrable
SE

53. # Application Web Progressive
 J
D Lien unique

54. # Application Web Progressive
K
D Mise à jour

55. # Application Web Progressive
@
L
!  3
> PWA

56. # Application Web Progressive
Technologies et principes :
1 HTTPS + HTML5/JS/CSS
? Manifest
M Service Workers
N Fréquentation

57. # HTML5/JS
1 Créer l’application
1 Support des intégrations natives
(Android, iOS)

58. # Material Design
Source : MaterializeCss,

59. # Manifest d’application
? JSON
> Nom
> Icônes
> Url d’accueil
> Couleurs du thème
> Orientation
> Mode d’affichage
Source : Exemple de Manifest,

60. # Service Workers
C E K 

61. # Modèle Coquillage
P Charger l’interface minimale
(menu, onglet, navigation)
○ Charger le contenu

62. # Modèle Coquillage

63. # Big Cookie Strategy
E C
   ( R | 3G | S )
TH U

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. # Application Web Progressive
+ ,-8 8 8

66. # Application Web Progressive
Types d’application :
2 Utilitaire
9 Informations
= Jeux
V eCommerce
4 Prototype
Exemple :
airberlin.com
> PWA

67. # Application Web Progressive
. / )
01
28 8 88

68. # Conclusion
# Application Mobile Native
! Android
 iOS
# Application Multiplateforme
> Technologie Hybride
> Open GL ES
> Métalangage
> WebView
# Application Web Progressive
> PWA

69. # Conclusion
+ &
# Application Mobile Native
! Android,  iOS
# Application Multiplateforme
> Open GL ES

70. # Conclusion
- &
# Application Mobile Native
! Android,  iOS
# Application Multiplateforme
> Technologie Hybride

71. # Conclusion
, & # Application Multiplateforme
> Open GL ES

72. # Conclusion
. & # Application Multiplateforme
> WebView

73. # Conclusion
/ & # Application Multiplateforme
> WebView

74. # Conclusion
&)
0C#
# Application Multiplateforme
> Technologie Hybride
0!
0

75. # Conclusion
&) # Application Mobile Native
! Android,  iOS
0!
0

76. # Conclusion
&N
0WEB
# Application Multiplateforme
> WebView

77. # Conclusion
2 & Application Multiplateforme
> WebView

78. # Conclusion
L & # Application Web Progressive
> PWA

79. Work
is
Better
at the
Beach.
CHILLCODING
Recevez des news Chill en vous inscrivant à notre Newsletter !

80. Merci !
Des questions ?
W macha@chillcoding.com
X Macha DA COSTA
+ ChillCoding
Z @MachaDaCosta
[ ChillCoding
ChillCoding

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