Flutter app architektúrák (Flutter app architectures)

Úgy tűnhet, hogy a Flutter csak a Widgetekről szól, konkrétabban a UI Widgetekről. Alkalmazás fejlesztőként viszont a UI feladatokon felül az alkalmazások mélyebb struktúrájával, felépítésével is foglalkoznunk kell. Feladatunk még például a UI és alkalmazás állapot kezelés, dependency injection, hálózati hívások, stb. összeállítása. Ez az előadás bemutat néhány Flutter architektúrát és package-et, amiket a Flutter közösség előszeretettel alkalmaz.
Az előadás a 2020. júliusi HWSW free! online meetupon hangzott el magyarul.
https://rendezveny.hwsw.hu/free/51/flutter-fejlesztes-meetup

Video:
https://youtu.be/E7pOdgTJ6YE?t=4671

Flutter seems to be all about Widgets, especially UI Widgets. But as app developers, we should take care about much more while developing applications on any platform. UI and app state handling, dependency injection, networking, and so on. This talk highlights some frequently used architectures and packages preferred by the Flutter community itself.
Presented at the July 2020 instalment of the HWSW free! meetup series (online) in Hungarian.
https://rendezveny.hwsw.hu/free/51/flutter-fejlesztes-meetup

Transcript

1. Juhos István
   Flutter app architektúrák
   stewemetal
   

   View Slide

2. @stewemetal
   Mit látunk először a Flutterből?
   

   View Slide

3. @stewemetal
   Mit látunk először a Flutterből?
   Widgeteket
   

   View Slide

4. @stewemetal
   UI Widgeteket!
   Mit látunk először a Flutterből?
   

   View Slide

5. @stewemetal
   https://flutter.dev/docs/development/ui/widgets
   

   View Slide

6. @stewemetal
   https://flutter.dev/docs/development/ui/widgets
   

   View Slide

7. @stewemetal
   https://flutter.dev/docs/development/ui/widgets
   

   View Slide

8. @stewemetal
   UI
   

   View Slide

9. @stewemetal
   Preferences Database, DAOs Network APIs
   DiskDataSources NetworkDataSources
   Interactors
   App state handling
   UI
   

   View Slide

10. @stewemetal
    Mire koncentrálnak a
    Flutter app architektúrák?
    App state handling
    

    View Slide

11. @stewemetal
    Flutter app architektúrák
    BLoC
    Mobx
    Redux
    

    View Slide

12. @stewemetal
    BLoC
    UI BLoC Interactors
    Állapotok
    Események Aszinkron lekérdezés
    Aszinkron válasz
    https://pub.dev/packages/flutter_bloc/
    

    View Slide

13. @stewemetal
    Flutter app architektúrák
    BLoC
    Mobx
    Redux
    

    View Slide

14. @stewemetal
    Mobx
    https://pub.dev/packages/mobx
    

    View Slide

15. @stewemetal
    Flutter app architektúrák
    BLoC
    Mobx
    Redux
    

    View Slide

16. @stewemetal
    Redux
    https://pub.dev/packages/redux
    https://pub.dev/packages/flutter_redux
    https://redux.js.org/
    

    View Slide

17. @stewemetal
    Flutter app architektúrák
    BLoC
    Mobx
    Redux
    

    View Slide

18. @stewemetal
    Mi kellhet még egy apphez?
    Adatbázis-kezelés
    JSON szerializálás
    Dependency Injection
    Hálózati hívások
    

    View Slide

19. @stewemetal
    Adatbázis-kezelés
    JSON szerializálás
    Hálózati hívások
    Mi kellhet még egy apphez?
    http
    Retrofit (Flutter)
    Chopper -
    

    View Slide

20. @stewemetal
    Hálózati hívások
    Adatbázis-kezelés
    JSON szerializálás
    Dependency Injection
    Mi kellhet még egy apphez?
    sqflite
    floor
    moor
    

    View Slide

21. @stewemetal
    Hálózati hívások
    Adatbázis-kezelés
    JSON szerializálás
    Dependency Injection
    Mi kellhet még egy apphez?
    json_serializable
    json_annotation
    dart:convert
    

    View Slide

22. @stewemetal
    JSON szerializálás
    Dependency Injection
    Mi kellhet még egy apphez?
    InheritedWidgetek
    Provider
    Modular
    

    View Slide

23. @stewemetal
    Preferences Database, DAOs Network APIs
    DiskDataSources NetworkDataSources
    Interactors
    App state handling
    UI
    

    View Slide

24. @stewemetal
    Hivatkozások
    flutter.dev/docs/development/ui/widgets
    pub.dev/packages/flutter_bloc
    pub.dev/packages/mobx
    pub.dev/packages/flutter_redux
    https://speakerdeck.com/stewemetal/app-
    architecture-concept-in-flutter
    

    View Slide

25. @stewemetal
    Flutter app architektúrák
    A Flutter alkalmazások nem csak
    Widgetekből állnak
    Más platformoktól átvett
    architektúrák, működő ötletek
    (Majdnem) mindenre van már package
    stewemetal
    

    View Slide