Flutter: Google's neue Cross-Plattform-Technologie

Flutter: Google's neue Cross-Plattform-Technologie

32ae0ae04b5c4f1b29ee9e8826823fbc?s=128

Jörg Neumann

February 26, 2020
Tweet

Transcript

  1. LET’S FLUTTER CROSS PLATFORM A LA GOOGLE JÖRG NEUMANN |

    ACLUE
  2. JÖRG NEUMANN THEMEN ▪ Frontend Technologies ▪ Mobile Development ▪

    Machine Learning ▪ Consulting, Coaching, Training KONTAKT ▪ Mail: joerg.neumann@aclue.de ▪ Twitter: @joergneumann ▪ GitHub: https://github.com/joergneumann ▪ Blog: http://www.headwriteline.blogspot.com
  3. != UI Stacks != Entwicklungs-Tools != Programmiersprachen UI Komponenten- modell

    Produktivität Performance
  4. DEVELOPMENT APPROACHES MVC/MVVM Reactive Compiled to native Interpreted (JavaScript) iOS

    SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, … React Native Flutter
  5. WAS IST FLUTTER? BACKGROUND ▪ Open Source-Projekt von Google ▪

    Entwicklung nativer Apps für iOS & Android ▪ React-style Framework ▪ Basiert auf Dart & Skia ▪ Kompiliert zu nativem Code FEATURES ▪ Native Performance ▪ Mächtiger UI-Stack ▪ Material Components ▪ Hot Reload
  6. DEVELOPMENT DEVELOPMENT TOOLS ▪ Android Studio ▪ IntelliJ IDEA ▪

    Visual Studio Code ▪ Flutter CLI https://flutter.io/setup https://flutter.io/using-ide/
  7. DEMO

  8. ARCHITEKTUR Framework (Dart) Material Engine (C++) Skia Dart Text Widgets

    Rendering Animation Foundation Painting Gestures Cupertino
  9. CORDOVA System Services (Location, Bluetooth, Camera, …) HTML, CSS JavaScript

    Bridge Canvas Events WebView REACT NATIVE System Services (Location, Bluetooth, Camera, …) JavaScript Bridge Canvas Events Platform Widgets FLUTTER Widget Rendering System Services (Location, Bluetooth, Camera, …) Native ARM Binary Code Platform Channels Canvas Events APP PLATFORM
  10. DART FEATURES ▪ JavaScript Transpiler ▪ Ähnlich wie TypeScript ▪

    Typsichere, objektorientierte Sprache ▪ Kann auch nativ kompiliert werden
  11. AHEAD-OF-TIME COMPILATION *.dart compiler .js .apk .ipa

  12. JUST-IN-TIME COMPILATION PAY AS YOU GO ▪ Kompilierung während der

    Ausführung ▪ Schnelle Aktualisierungen während der Entwicklung
  13. HOT RELOAD

  14. MATERIAL WIDGETS https://flutter.io/widgets/material/

  15. CUPERTINO WIDGETS https://flutter.io/widgets/cupertino/

  16. WIDGET RENDER TREE App Widget Material Widget Scaffold Widget Text

    Container Button Column
  17. WIDGETS DEFINIEREN

  18. DEMO

  19. BUILD-IN LAYOUT WIDGETS https://flutter.io/widgets/layout/

  20. LAYOUT LOCAL LAYOUTS ▪ Jedes Widget definiert sein eigenes Layout

    ▪ Widgets müssen nicht ihrem Elternelement mitteilen, wie sie positioniert werden sollen
  21. FAZIT FLUTTER VEREINFACHT DIE CROSS-PLATTFORM-ENTWICKLUNG ▪ Einheitliches Framework für die

    Entwicklung nativer Apps ▪ Einfache Entwicklung von Custom UIs ▪ Plattformspezifische Anpassungen leicht möglich ▪ Vorhandenes Wissen kann wiederverwendet werden
  22. RESSOURCEN FLUTTER HOME ▪ https://flutter.io FLUTTER CODE LABS ▪ https://codelabs.developers.google.com/codelabs/flutter

  23. RESSOURCEN DOCUMENTATION ▪ https://docs.flutter.io/ GITHUB ▪ https://github.com/flutter/flutter STACKOVERFLOW ▪ https://stackoverflow.com/questions/tagged/flutter

    GITTER ▪ https://gitter.im/flutter/flutter