Flutter: Google's neue Cross-Plattform-Technologie

Transcript

1. LET’S FLUTTER CROSS PLATFORM A LA GOOGLE JÖRG NEUMANN | ACLUE
2. 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
3. != UI Stacks != Entwicklungs-Tools != Programmiersprachen UI Komponenten- modell Produktivität Performance
4. DEVELOPMENT APPROACHES MVC/MVVM Reactive Compiled to native Interpreted (JavaScript) iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, … React Native Flutter
5. 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
6. DEVELOPMENT DEVELOPMENT TOOLS ▪ Android Studio ▪ IntelliJ IDEA ▪ Visual Studio Code ▪ Flutter CLI https://flutter.io/setup https://flutter.io/using-ide/
7. DEMO
8. ARCHITEKTUR Framework (Dart) Material Engine (C++) Skia Dart Text Widgets Rendering Animation Foundation Painting Gestures Cupertino
9. 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
10. DART FEATURES ▪ JavaScript Transpiler ▪ Ähnlich wie TypeScript ▪ Typsichere, objektorientierte Sprache ▪ Kann auch nativ kompiliert werden
11. AHEAD-OF-TIME COMPILATION *.dart compiler .js .apk .ipa
12. JUST-IN-TIME COMPILATION PAY AS YOU GO ▪ Kompilierung während der Ausführung ▪ Schnelle Aktualisierungen während der Entwicklung
13. HOT RELOAD
14. MATERIAL WIDGETS https://flutter.io/widgets/material/
15. CUPERTINO WIDGETS https://flutter.io/widgets/cupertino/
16. WIDGET RENDER TREE App Widget Material Widget Scaffold Widget Text Container Button Column
17. WIDGETS DEFINIEREN
18. DEMO
19. BUILD-IN LAYOUT WIDGETS https://flutter.io/widgets/layout/
20. LAYOUT LOCAL LAYOUTS ▪ Jedes Widget definiert sein eigenes Layout ▪ Widgets müssen nicht ihrem Elternelement mitteilen, wie sie positioniert werden sollen
21. 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
22. RESSOURCEN FLUTTER HOME ▪ https://flutter.io FLUTTER CODE LABS ▪ https://codelabs.developers.google.com/codelabs/flutter
23. 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