Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

DEMO

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

HOT RELOAD

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

DEMO

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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