Flutter: Google's neue Cross-Plattform-Technologie

Transcript

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

   View Slide

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
   

   View Slide

3. !=
   UI Stacks
   !=
   Entwicklungs-Tools
   !=
   Programmiersprachen
   UI Komponenten-
   modell
   Produktivität
   Performance
   

   View Slide

4. DEVELOPMENT APPROACHES
   MVC/MVVM
   Reactive
   Compiled to native Interpreted (JavaScript)
   iOS SDK
   Android SDK
   Titanium, Cordova,
   PhoneGap, Ionic, …
   React Native
   Flutter
   

   View Slide

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
   

   View Slide

6. DEVELOPMENT
   DEVELOPMENT TOOLS
   ▪ Android Studio
   ▪ IntelliJ IDEA
   ▪ Visual Studio Code
   ▪ Flutter CLI
   https://flutter.io/setup
   https://flutter.io/using-ide/
   

   View Slide

7. DEMO
   

   View Slide

8. ARCHITEKTUR
   Framework
   (Dart)
   Material
   Engine
   (C++) Skia Dart Text
   Widgets
   Rendering
   Animation
   Foundation
   Painting Gestures
   Cupertino
   

   View Slide

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
   

   View Slide

10. DART
    FEATURES
    ▪ JavaScript Transpiler
    ▪ Ähnlich wie TypeScript
    ▪ Typsichere, objektorientierte Sprache
    ▪ Kann auch nativ kompiliert werden
    

    View Slide

11. AHEAD-OF-TIME COMPILATION
    *.dart
    compiler
    .js
    .apk
    .ipa
    

    View Slide

12. JUST-IN-TIME COMPILATION
    PAY AS YOU GO
    ▪ Kompilierung während der Ausführung
    ▪ Schnelle Aktualisierungen während der Entwicklung
    

    View Slide

13. HOT RELOAD
    

    View Slide

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

    View Slide

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

    View Slide

16. WIDGET RENDER TREE
    App Widget
    Material Widget
    Scaffold Widget
    Text
    Container
    Button
    Column
    

    View Slide

17. WIDGETS DEFINIEREN
    

    View Slide

18. DEMO
    

    View Slide

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

    View Slide

20. LAYOUT
    LOCAL LAYOUTS
    ▪ Jedes Widget definiert sein eigenes Layout
    ▪ Widgets müssen nicht ihrem Elternelement mitteilen, wie sie positioniert werden sollen
    

    View Slide

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
    

    View Slide

22. RESSOURCEN
    FLUTTER HOME
    ▪ https://flutter.io
    FLUTTER CODE LABS
    ▪ https://codelabs.developers.google.com/codelabs/flutter
    

    View Slide

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
    

    View Slide