Slides de la présentation pour les meetup de Lyon et de Nantes

1. Alternative crédible pour vos applications mobiles ?

2. 2
© 2019
Flutter : la Promesse
Fast development
Expressive and Flexible UI
Native Performance

3. 3
© 2019
WHOAMI ?
Nicolas Hodicq
Mobile & Web developer / CTO
 Consultant Web & Mobile Cross-platform
 Développeur JavaScript / Java / Dart
 Industrialisation des développements
 Formateur
 17 projets mobiles et web

4. 4
© 2019
Flutter ?
SDK mobile cross-platform Open Source
par Google pour créer des applications 2D
Android & Ios
Moderne react-style framework
Moteur de rendu haute performance
Bibliothèque de Widgets
Écrit majoritairement avec le langage Dart

5. 5
© 2019
DART
Language open source créé par Google
(2010)
Destiné initialement à résoudre les
problèmes JavaScript (performance,
sécurité, projets grande échelle)
S’exécute dans une machine virtuelle (Dart
VM)
Compile en ARM et x86 code et transpile
en JavaScript

6. 6
© 2019
DART
Orienté objet et fortement typé
Gestion de types génériques
Single thread / Isolate
Traitements asynchrones (Future)
Programmation réactive (Stream)

7. 7
© 2019
POURQUOI Flutter utilise DART ?
Skia, Text et Dart VM implémentés en C/C++
Just In Time (JIT) / Ahead Of Time (AOT)
Fast allocation (short live objects)
Garbage collector (without lock)
Gestionnaire de dépendances
Permet l’écriture de Flutter en Dart (lisibilité
pour les développeurs)

8. 8
© 2019
ARCHItecture FLUtter

9. 9
© 2019
ARCHITECTURE REACT NATIVE
JavaScript
Bridge
OEM Widget Canvas
Location
Audio
Camera
Bluetooth
Sensors
…
PlatformApplication
Virtual Tree

10. 10
© 2019
REACT NATIVE : Ndash

11. 11
© 2019
ARCHITECTURE Flutter
Native code
Rendering
Canvas
Location
Audio
Camera
Bluetooth
Sensors
…
PlatformApplication
Virtual Tree
Platform
channels

12. 12
© 2019
Flutter : History of everything

13. 13
© 2019
Flutter : WEBVIEW

14. 14
© 2019
Architecture applicative
 SetState
 FutureBuilder / StreamBuilder
 Vanilla / Inherited Widget
 Scoped model
 Pattern Flux / Redux
 Business Logic Component (BLoC)

15. 15
© 2019
Expérience développeur 🤘
 IDE (Android Studio, IntelliJ, VS Code)
 Flutter-cli
 Live & Hot reloading
 Widgets tree inspector
 Tests unitaires, widgets et tests
d’intégration
 Performance profilling
 Formatting code (dartfm)

16. 16
© 2019
Expérience utilisateur
 Composants bas niveaux
 Bibliothèques de composants (Material &
Cupertino)
 API Animation
 API Gesture
 Performance / 60 fps

17. 17
© 2019
OPPORTUNITIES
O
STRENGTHS S WEAKNESSESW
THREATS
T
Flutter : SWOT
 Expérience utilisateur (animation, gesture)
 UX / UI (layout, custom, material, cupertino)
 Outils de développement
 Langage DART
 Hummingbird (Flutter web)
 Flutter Desktop
 Mutualisation de code métier avec
application web flutter et angular-dart
 SDK récent (maturité)
 Architecture, 4 approches
 Pas d’injection de dépendances
 Certaines fonctionnalités ne sont pas
réalisables
 ARM sur la platforme iOS (pas de bitcode)
 Composants natifs difficilement réutilisables

18. 18
© 2019
Merci de votre attention
@nartawak
Photo by Jefferson Santos on Unsplash
Photo by Samuel Zeller on Unsplash
Animation by Stan Yakusevich on Dribble
Crédits Photo / Animation