Flutter: Google's neue Cross-Plattform-Technologie

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

DEMO

Slide 8

Slide 8 text

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

Slide 9

Slide 9 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 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

HOT RELOAD

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

WIDGETS DEFINIEREN

Slide 18

Slide 18 text

DEMO

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 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