$30 off During Our Annual Pro Sale. View Details »

Flutter: Ein App Modell für alles

Jörg Neumann
September 27, 2022

Flutter: Ein App Modell für alles

Jörg Neumann

September 27, 2022
Tweet

More Decks by Jörg Neumann

Other Decks in Programming

Transcript

  1. FLUTTER
    EIN APP MODELL FÜR ALLES
    JÖRG NEUMANN | ACLUE
    [email protected]

    View Slide

  2. JÖRG NEUMANN
    THEMEN
    ▪ Frontend Technologies
    ▪ Mobile Development
    ▪ Machine Learning
    ▪ Consulting, Coaching, Training
    KONTAKT
    ▪ Mail: [email protected]
    ▪ Twitter: @JoergNeumann

    View Slide

  3. FLUTTER
    STRATEGIE
    ▪ Ein einheitliches App Modell für nahezu alle Device Typen
    ▪ Das neue App Modell für Android & Fuchsia
    PLATTFORMEN
    ▪ Mobile: iOS, Android
    ▪ Desktop: Windows, MacOS, Linux
    ▪ Web: WASM-basiert
    OPEN SOURCE
    ▪ Contributions u.a. von Microsoft und Toyota

    View Slide

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

    View Slide

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

    View Slide

  6. WAS IST FLUTTER?
    BACKGROUND
    ▪ Open Source-Projekt von Google
    ▪ Apps auf einer Source Code Basis entwickeln
    ▪ React-style Framework
    FEATURES
    ▪ Native Performance
    ▪ Mächtiger UI-Stack
    ▪ Material Components
    ▪ Hot Reload

    View Slide

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

    View Slide

  8. DEMO

    View Slide

  9. ARCHITEKTUR: CORE ENGINE
    Framework
    Dart Material
    Engine
    C++ Skia Dart Text
    Widgets
    Rendering
    Animation
    Foundation
    Painting Gestures
    Cupertino

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

  14. HOT RELOAD

    View Slide

  15. FLUTTER WEB
    VORTEILE
    ▪ einfacher Weg um aus der Mobile App eine Web App zu machen
    ▪ App entwickeln und später schauen, wo sie laufen soll
    ▪ Kein dediziertes Web Know-how erforderlich

    View Slide

  16. FLUTTER WEB: EINSATZSZENARIEN
    Progressive Web Apps
    High Quality PWAs mit einer hohen Client Integration,
    inkl. Installation, Offline Support und maßgeschneiderte UX.
    SPA Single Page Apps
    Standalone Web Apps, mit erweiterten Grafikanforderungen
    und komplexer Benutzerinterkation über Device Grenzen
    hinweg.
    Mobile
    Existierende Mobile Apps
    Browser-basiertes Delivery Modell für existierende Flutter
    Mobile Apps. Dart Code wird gegen ein anderes Modell
    kompiliert und muss nur geringfügig angepasst werden.

    View Slide

  17. ARCHITEKTUR: FLUTTER WEB
    Framework
    Dart Material
    Browser
    JavaScript / C++ HTML/CSS WebGL WASM
    Widgets
    Rendering
    Animation
    Foundation
    Painting Gestures
    Cupertino
    Canvas
    ▪ Flutter Web ist eine
    Kombination aus:
    DOM, Canvas &
    WebAssembly
    ▪ Core Drawing Layer wurde
    in Dart entwickelt
    ▪ Wird über den JavaScript
    Compiler fürs Web
    kompiliert
    ▪ Framework & App wird über
    eine einzelne Datei verteilt
    ▪ Funktioniert mit jedem
    modernen Browser und mit
    jedem Web Server

    View Slide

  18. WEB RENDERERS
    HTML Renderer
    ▪ Verwendet eine Kombination aus HTML-, CSS-, Canvas- und SVG-Elementen.
    ▪ Hat eine geringe Download Größe
    ▪ Für Text-intensive Apps
    CanvasKit Renderer
    ▪ Ist vergleichbar mit dem Flutter Mobile- und Desktop-Renderer
    ▪ Hat eine höhere Performance
    ▪ Hat jedoch auch eine größere Bundle Size (~2 MB)
    ▪ Für Grafik-intensive Apps

    View Slide

  19. BROWSER SUPPORT
    Flutter Web Apps können in den folgenden Browsern ausgeführt werden:
    ▪ Chrome (Mobile & Desktop)
    ▪ Safari (Mobile & Desktop)
    ▪ Edge (Mobile & Desktop)
    ▪ Firefox (Mobile & Desktop)
    Flutter Web in Website einbetten:

    Während der Entwicklung werden Chrome (macOS, Windows & Linux) und Edge
    (Windows) als Default Browser für das Debugging unterstützt.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. DEMO

    View Slide

  25. FAZIT
    FLUTTER VEREINFACHT DIE CROSS-PLATTFORM-ENTWICKLUNG
    ▪ Einheitliche Entwicklung nativer Apps für Mobile, Desktop und Web
    ▪ Einfache Entwicklung von Custom UIs
    ▪ Plattformspezifische Anpassungen leicht möglich
    ▪ Vorhandenes Wissen kann wiederverwendet werden

    View Slide

  26. RESSOURCEN
    FLUTTER HOME
    ▪ https://flutter.io
    FLUTTER WEB
    ▪ https://flutter.dev/web
    FLUTTER CODE LABS
    ▪ https://codelabs.developers.google.com/codelabs/flutter

    View Slide

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