Flutter: Google’s neue Cross-Plattform-Technologie

Flutter ist Google’s kommendes Cross-Plattform Framework für die Mobile App-Entwicklung. Es ermöglicht das Schreiben nativer Apps für iOS und Android auf Basis von Dart. Dies dürfte besonders JavaScript-Entwicklern den Einstieg erleichtern. Zudem bietet Flutter interessante Features, wie z.B. ein Hot Reload-Verfahren, welches direkte Änderungen der laufenden App ermöglicht. Thomas Reinsch stellt das Framework vor und beleuchtet Stärken und Schwächen gegenüber anderen Cross-Plattform-Technologien.

Transcript

1. Google’s neue Cross- Platform Technologie Thomas Reinsch
2. THOMAS REINSCH THEMEN ▪ Mobile Web Development ▪ Frontend-Architekturen und Frameworks ▪ UI, UX und SEO KONTAKT ▪ Mail: thomas.reinsch@acando.de ▪ Twitter: @confector666 ▪ GitHub: https://github.com/confector ▪ Xing: https://www.xing.com/profile/thomas_reinsch5 ▪ LinkedIn: https://www.linkedin.com/in/confector ▪ Facebook: https://www.facebook.com/keyknot
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 ▪ 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
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 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. MATERIAL WIDGETS https://flutter.io/widgets/material/
16. CUPERTINO WIDGETS https://flutter.io/widgets/cupertino/
17. WIDGET RENDER TREE App Widget Material Widget Scaffold Widget Text Container Button Column
18. WIDGETS DEFINIEREN
19. WIDGETS & STATE STATELESS WIDGETS ▪ Besitzen keinen Zustand – können nicht verändert werden ▪ Beispiele: Icon, Text, IconButton, … ▪ Leiten von der Klasse StatelessWidget ab
20. WIDGETS & STATE STATEFUL WIDGETS ▪ Können verändert werden (z.B. durch den Benutzer oder eine Animation) ▪ Beispiele: Slider, Checkbox, … ▪ Leiten von der Klasse StatefulWidget ab ▪ Der State eines Widget wird in einem separaten State-Objekt gespeichert ▪ Ändert sich der State, ruft das State-Objekt die setState() Methode des Widget auf (um Redraw zu veranlassen)
21. DEMO
22. BUILD-IN LAYOUT WIDGETS https://flutter.io/widgets/layout/
23. LAYOUT LOCAL LAYOUTS ▪ Jedes Widget definiert sein eigenes Layout ▪ Widgets müssen nicht ihrem Elternelement mitteilen, wie sie positioniert werden sollen
24. FAZIT FLUTTER VEREINFACHT DIE CROSS-PLATTFORM-ENTWICKLUNG ▪ Einheitliches Framework für die Entwicklung nativer Apps ▪ Plattformspezifische Anpassungen leicht möglich ▪ Vorhandenes Wissen kann wiederverwendet werden
25. RESSOURCEN FLUTTER HOME ▪ https://flutter.io FLUTTER CODE LABS ▪ https://codelabs.developers.google.com/codelabs/flutter/index.html#0 GOOGLE+ FLUTTER GROUP ▪ https://plus.google.com/communities/105405018459127452410
26. 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