Flutter - Valódi cross-platform megoldás, vagy egy újabb prototipizáló eszköz? // HWSW mobile! 2017 (written in Hungarian)

A Flutter SDK-ról szóló előadásom diasora a HWSW mobile! 2017 konferenciáról. // My presentation (written in Hungarian) about the Fluter SDK from HWSW mobile! 2017.

Magyar bevezető // Hungarian intro:
Egy natív központú Android és iOS fejlesztő tapasztalatai a Google Flutter SDK-jának használatáról cross-platform alkalmazások fejlesztésére, nagymértékű kód megosztással. Megvizsgálásra kerül hogy teljesít az SDK a két célplatformon (iOS és Android), mennyire nehéz beletanulni és milyen előnyökkel, valamint hátrányokkal rendelkezik a natív alkalmazásokhoz képest. Az előadás fókuszában a fenntartható és produktív fejlesztői környezet, a karbantartható architektúra és a felhasználói élmény lesznek. Szó lesz a Flutter potenciális jövőjéről is, és az operációs rendszerről, amely talán egy nap az Androidot leváltja.

Angol bevezető // English intro:
A native focused Android and iOS developer's take on using Google's Flutter SDK for developing cross-platform applications with extensive code sharing. We will take a look at how the SDK performs on the different platforms, how easy it is to develop using it, it's advantages and shortcomings versus native applications. Finally, we will look into the future of Flutter and the OS that may even replace Android one day.

Linkek a diasor végéről // Links from the end:
Flutter hivatalos weboldala // Flutter’s website
https://flutter.io

Flutter GitHub oldala // Flutter’s GitHub
https://github.com/flutter

A POSSE előadása a Hamilton app fejlesztéséről // POSSE’s presentation about how they built the Hamilton app
https://youtu.be/prlK_QL_qOA

Eric Seidel előadása a Strange Loop 2017 konferenciáról // Eric Seidel’s presentation from Strange Loop 2017
https://youtu.be/VUiVkDpikDI

Single Codebase, Two Apps with Flutter and Firebase (Google I/O '17)
https://youtu.be/w2TcYP8qiRI

Korábbi előadásom a témában angolul // My earlier presenation about the same topic in english:
https://speakerdeck.com/balazsgerlei/gdg-devfest-budapest-2017

Transcript

1. Gerlei Balázs @balazsgerlei Valódi cross-platform megoldás, vagy újabb prototipizáló eszköz? Flutter
2. Mi a Flutter? • Új cross-platfom mobil SDK Androidra és iOS-re • Nyílt forráskódú • Még csak alpha verzió • Közös forráskód, dizájn és fejlesztői csapat lehetővé tétele a cél • Testreszabható, gyors és magas performanciájú appok • Dart nyelven lehet alkalmazásokat írni
3. Mi a Dart? • Nyílt forráskódú programnyelv a Google-től • Szintaktikailag hasonló a Java-hoz, JavaScript-hez (és Kotlinhoz) • Opcionálisan (egyelőre), de erősen típusos • Generational garbage collection • “Tree-shaking” compiler, nem használt (dead) kód eltávolítása, kis méretű binárisok • A Google-nél széles körben használják webfejlsztésre, jól skálázódik
4. Motiváció • Mobilra fejleszteni nem könnyű • Kétszereplős piac, az Android és az iOS között megosztva • Két külön fejlesztői csapat menedzselése, két külön app fejlesztése körülményes • “Write once, run everywhere” – ismerjük a szlogent, de ki látott valóban ilyet? • Jó lenne, ha biztosak lehetnénk, hogy amit fejlesztés közben látunk, azt látják majd a felhasználók is
5. A Flutter megoldása • Cross-platform SDK a lassú, natív és cross-platform környezet közötti bridge szükségessége nélkül • A Dart kód tejesen natívra fordul • A teljes UI-t a Flutter rendereli, nem használ natív UI komponenseket • Skia (a Chrome render motorja) • OpenGL vagy Vulkan API • Produktív fejlesztői környezetet biztosít
6. Layout és painting egy menetben • Gyors lehet, mert maga intézi a renderelést • Más platformok sokszor multi-pass O(Nˆ2) layout megoldást használnak • A Flutter one-pass (egy meneteben), O(N) komplexitású, elkülönített layout és painting fázist alkalmaz • Egyszerű, kényszer (constraint) alapú modell: min és max szélességek és magasságok • Nem téglalapokat, hanem a UI hierarchia egy részfáját (subtree) invalidálja
7. A UI is kód • A UI-t is kódként kell írni az app többi részével együtt, nem egy elkülönülő leíró nyelven • A kompozíciót részesíti előnyben az örökléssel szemben, minden Widget, még a Padding is • Kétféle Widget: • StatelessWidget: állapotmentes (immutable) nézetek, pl. szimpla szöveg • StatefullWidget: állapottal rendelkező (mutable) nézetek, pl. hálózatról letöltött elemek listája
8. Widget kompozíció class ExampleWidget extends StatelessWidget { @override Widget build(BuildContext context) { return new Column( children: <Widget>[ new Text("One"), new Center(Text child: new ("Hello, world!"), ), ], ); } }
9. Hot Reload • Az Android Studio ”Instant Run” funkciójához hasonló • Működik iOS-en is • Megtartja az alkalmazás állapotát (heap and stack) • Gyors és megbízható • UI debuggoláshoz kiváló
10. Flutter reflektorfényben
11. Flutter reflektorfényben: a Hamilton app • A méltán híres amerikai musical, a Hamilton hivatalos appja Flutter-rel készült • Teljesen egyedi dizájn (alig használ platform specifikus View-kat/Widget- eket) • Nagy felhasználói bázis, több, mint 900.000 telepítés, több, mint 450.000 napi aktív felhasználó, több, mint 2 millió nevezés a jegy- nyereményjátékoknál
12. Flutter reflektorfényben: a Hamilton app • A méltán híres amerikai musical, a Hamilton hivatalos appja Flutter-rel készült • Teljesen egyedi dizájn (alig használ platform specifikus View-kat/Widget- eket) • Nagy felhasználói bázis, több, mint 900.000 telepítés, több, mint 450.000 napi aktív felhasználó, több, mint 2 millió nevezés a jegy- nyereményjátékoknál
13. Használható-e production környezetben? • Talán… • Még mindig nagyon korai fázisban van • Vegytiszta Material Design, vagy teljesen egyedi UI-jú alkalmazásokhoz használható jól, melyek nem integrálódnak mélyen a rendszerrel • Promóció-jellegű alkalmazások (mint a Hamilton) jó példák • (Még) nem ajánlanám komplex alkalmazásokhoz
14. Használható-e production környezetben? Előnyök • Legteljesebb Material Design implementáció • Az appok minden platform verzión ugyanúgy néznek ki • Hot Reload jól működik, gyors fejlesztési ciklusok • Jól működő és gyorsan fejlődő statikus analízis • Nagyon kevés bug • Aktív és elkötelezett közösség • Headless futtatási mód UI teszteléshez Hátrányok • Még mindig alpha, kevesen használják • Új programozási nyelvet kell megtanulni • Még fejlesztés alatt • Könnyen keveredik a UI kód és az alkalmazás logika (MVP-vel vagy MVVM-el elkerülhető) • Beépített Widgetek korlátozottak – van egy (általában Material Design inspirálta) működés, amire kitalálták őket • Kevés elérhető library • Nem mindig működnek jól mindkét platformon (általában Android a prioritás)
15. Köszönöm a figyelmet! • Flutter hivatalos weboldala • flutter.io • Flutter GitHub oldala • github.com/flutter • A POSSE előadása a Hamilton app fejlesztéséről • youtu.be/prlK_QL_qOA • Eric Seidel előadása a Strange Loop 2017 konferenciáról • youtu.be/VUiVkDpikDI • Single Codebase, Two Apps with Flutter and Firebase (Google I/O '17) • youtu.be/w2TcYP8qiRI Gerlei Balázs @balazsgerlei speakerdeck.com/balazsgerlei