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

Flutter: Ein App Modell für alles

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

    JOERG.NEUMSNN@ACLUE.DE
  2. JÖRG NEUMANN THEMEN ▪ Frontend Technologies ▪ Mobile Development ▪

    Machine Learning ▪ Consulting, Coaching, Training KONTAKT ▪ Mail: Joerg.Neumann@Aclue.de ▪ Twitter: @JoergNeumann
  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
  4. != UI Stacks != Entwicklungs-Tools != Programmiersprachen UI Komponenten- modell

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

    SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, … React Native Flutter
  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
  7. DEVELOPMENT DEVELOPMENT TOOLS ▪ Android Studio ▪ IntelliJ IDEA ▪

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

  9. ARCHITEKTUR: CORE ENGINE Framework Dart Material Engine C++ Skia Dart

    Text Widgets Rendering Animation Foundation Painting Gestures Cupertino
  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
  11. DART FEATURES ▪ JavaScript Transpiler ▪ Ähnlich wie TypeScript ▪

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

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

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

  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
  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.
  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
  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
  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: <iframe src="URL"></iframe> Während der Entwicklung werden Chrome (macOS, Windows & Linux) und Edge (Windows) als Default Browser für das Debugging unterstützt.
  20. MATERIAL WIDGETS https://flutter.io/widgets/material/

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

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

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

    Container Button Column
  24. DEMO

  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
  26. RESSOURCEN FLUTTER HOME ▪ https://flutter.io FLUTTER WEB ▪ https://flutter.dev/web FLUTTER

    CODE LABS ▪ https://codelabs.developers.google.com/codelabs/flutter
  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