Dart

Merre tart a kereszt platformok fejlődése a mobil eszközökön?
Melyiket válasszuk 2020-ban?

Viktor

Az utóbbi években egyre elterjedtebbek az un. kereszt platformok használata a mobil app-ok fejlesztésére. Ami mindenre jó, az igazán semmire sem, tartja a közszó. Vannak azonban olyan helyzetek, amikor verhetetlenek ezek az eszközök.

A kereszt platform (cross-platform) vagy multi-platform azt jelenti, hogy egyszerre készül el az alkalmazás Androidra, iOS-re (Windows Phone-ra ???). Ebből érezhető, hogy azért előnyös a fejlesztőnek, mert elegendő egyszer elkészíteni az alkalmazást, és a feladat nagy részével megvan. A megrendelőnek szorosan kapcsolódik az érdeke ehhez, hiszen pontosan fele annyi fejlesztői munkát kell kifizetnie, mintha mindegyik platformra natívan, külön-külön készíttetné el.

kereszt platform mobil eszközökön megoszlása 2020 évben
A statista.com kimutatása alapján a React Native és a Flutter keretrendszerek 2020-ban a legnépszerűbbek

A thedroidsonroids.com cikke alapján készítettem ezt az összefoglalót.

A népszerű mobil kereszt platformok

A fenti ábrán látszik, hogy a React Native (42%) mögött kevéssel marad le a Flutter (39%). Az évek közti növekedésbeli helyzést egyértelműen ez utóbbi hozta.

A saját vállalkozással rendelkezők mindig tudni szeretnék néhány kritikus kérdéseikre a választ:

  • Melyik illik legjobban a projektemhez?
  • Melyik megoldás hozza a legjobb Time-to-market időt?
  • Az app-om stabilan megbízható lesz és felhasználóbarát?
  • Melyik lesz a legjobb, ha pixel-perfect kinézetet akarok?

A cikkből kiderül, hogy a követőtábor alapján fej-fej mellett halad a két framework. A React Native-t a Facebook 2015-ben jelentette meg, ami egy érettebb keretrendszert feltételez. Ezt azonban a Google, 2018-ban kiadott, Flutter béta megjelenése beérte mára.

Tudásban nehezen megkülönböztethető, apró eltérések vannak. Mindkettő natívan fut a telefonon, ez meglátszik a kiváló teljesítményen. Alkalmanként akár túl is teljesítve azt. Ennek ugyan ára van az alkalmazás méretében. Ez talán mára elhanyagolható, de érdemes megemlíteni.

Az, hogy ki melyiket használja, szinte ízlés kérdése. Meghatározhatja, hogy a fejlesztő korábban web oldalkat programozott, akkor a React Native JSX nyelve fog jobban kézre állni. A Flutter Dart nyelve viszont modern, szerethető és könnyen elsajátítható.

A gombok, listák, stb. az adott OS-re megszokott kinézetet hozza. Androidon a Material Design-t, iOS-en pedig a Cupertino Design-t. Az érzet és kinézet tehát teljesen ugyan az.

Hol tart most a Flutter

Korábban írtam a Flutter keretrendszerről, és előnyeiről. Az azóta eltelt néhány hónap további újdonságokat hozott. Lekövetve az Android 11 nyári, és az iOS 14 őszi érkezését. Azonnal reagálva a változásokra, gyakorlatilag napokon belül kikerültek az utánkövetések, amiket az OS megkövetelt.

App-ok, amik Flutter-ben készültek:

App-ok, amik React Native-ben készültek:

  • Instagram
  • Facebook
  • Skype
  • Pinterest
  • Tesla
  • Fb Ads Manager

Minden app tulajdonos rémálma

Az jól látszik, hogy az elmúlt másfél évtized kitermelt magából sok megoldást, hogy minél egyszerűbben, zökkenőmentesebben, vagy éppen a tudásunk újra felhasználásával lehessen mobil app-okat készíteni. Egy kereszt platformnak számos előnye van a mobil fejlesztésben.

Mindezek ellenére a fórumokon örökzöld téma, hogy mi lesz, ha majd bezárják, vagy fizetőssé teszik ezeket a keretrendszereket. Mi lesz, ha egyszer csak az Apple nem engedi be a nem natívan megírt alkalmazásokat? (Az Apple amúgy is eléggé szőrszálhasogató tud lenni az elfogadási irányelveivel.)

Nos, látva a Google, szinte minden hétre jutó bejelentéseit, ez nem várható, legalábbis rövid távon. Azáltal, hogy mind a két mobil operációs rendszert beveszi, továbbá, Linux, Mac és Windows asztali fejlesztések felé nyitja meg a kapukat a fejlesztők előtt. (A Microsofttal a hetekben közösen jelentették be az együttműködést.)

Egy nagy előnnyel mindenképpen érdemes tisztában lennünk: az a keretrendszer fejlesztőinek a feladata, hogy összecsiszolják az adott operációs rendszerrel. Ezzel nem a fejlesztőnek kell foglalkoznia, hosszú órákat eltölteni egy hiba keresésével. Ez növeli a produktivitást.

Merre tovább?

Az látszik, hogy a Flutter még az elején van a pályafutásának. Ez a görbe a felszálló ágon van. Nem is lehet megjósolni, hogy mikor éri el a csúcspontját. Az eltökéltség a Google részéről látszik. Mivel van még mit csiszolni az alfa/béta támogatásokon, ez eltart egy darabig.

De ki tudja. Az informatikában egy biztos, hogy folyamatosan fejlődik. Pár év alatt elavulnak a dolgok, és újat kell tanulni. Egyszer jön majd egy jobb, szebb keretrendszer, ami ugyanúgy rabul ejti a fejlesztők szívét.

Egy népszerű kereszt platformok ismeretére a mobil fejlesztésénél szüksége van minden fejlesztőnek. Bármelyik is legyen az.

Ezért használják már félmillióan a Flutter-t
Ideje újat tanulnod

Viktor

Újabb bejelentések történtek a Google háza táján. A Flutter Spring 2020 Update nyilvánosságra hozta, hogy több, mint 500 000 fejlesztő használja már az egyre népszerűbb Flutter UI kit-et. Ez nem meglepő, hiszen cross-platformos megoldásokban (Android, iOS, web, desktop, …) egyelőre a legjobb megoldásnak találtatik.

Előnye, hogy egy kódbázissal a fent említett platformokra elkészül a kód, és a fordítást (build) kell elvégezni a megfelelő rendszerre. A közös kódnyelvre a Google a saját Dart nyelvét választotta. Ez azt is jelenti, hogy meg kell tanulni egy új nyelvet. Bár ha van alapvető objektum-orientált előképzettségünk, akkor ez nem jelent gondot. Összehasonlítva pl. a Java teljesen OOP megközelítésével, itt lehetőség van az osztályokon kívüli, modul szintű egységek szervezésére is. Ez nagy előny, és rugalmasságot ad a kezünkbe. Összességében elmondható, hogy egy egyszerű, de mondern nyelvről van szó.

Ennyit a technikai háttérről, nézzük a számokat!

A fejlesztők 60%-a Windows-on, 27%-a macOS-en, 13%-a Linux-on fejleszti a kódját.

A gyors UI fejleszthetőség miatt felkapott a startupok körében (35%), de a vállalati használat is jelentős (26%). Emellett említsük meg, hogy a design studiók is elkezdték használni (7%). Ez főként annak köszönhető, hogy a Flutter-t már a legelejétől fogva a Google a fejlesztőkkel egyeztetve, és kellően felvértezett eszközarzenált adott a kezünkbe. (Nem akarta elkövetni azt a hibát, amit pl. az Android esetében, hogy csak évek múlva sikerült valamelyest jól használható tool-okat adni a fejlesztők kezébe.)

A Flutter öt legelterjedtebb területe India, Kína, az Egyesült Államok, az EU, és Brazília.

Flutter a vállalatoknál

A Flutter növekedése gyors ütemben bővül a vállalati ügyfelek körében, és a Google kutatásai azt mutatják, hogy ennek az a fő oka, hogy gyorsan lehet teljesen saját arculatot kialakítani úgy, hogy a többplatformos megoldást támogatja. Egységesíteni lehet a front-end kialakításánál a fejlesztő csapatot egy közös keretrendszerre, mindamellett, hogy gyorsan készülnek el a funkciók Android-ra és iOS-re egyszerre.

Fontos, hogy rendelkezésre állnak sok és nagyon jó minőségű, professzionális építőkockák, amikből a felületek, vagy a drótvázak létrehozhatóak.

Az új verziók kiadását újragondolták

A keretrendszer egymást követő verzióinak stabilitása és egy új kiadás dátumának megjósolhatósága fontos lépés volt. Ezt szem előtt tartva, nagy hangsúlyt fektetnek rá, hogy még egyértelműbb legyen a különféle verziók stabilitása. Egy gyors fejlesztést követelő megoldásban elengedhetetlen, hogy az új verziók megjelenése ne borítsa fel a fejlesztőcég életét. Ezek a módosítások már az áprilisi kiadásokban is tetten érhetőek lesznek.

Konlúzió

Látható tehát, hogy a Google nagy erőket mozgósít, hogy minél jobban megszerettesse az új rendszerét a nagyközönséggel. Használva a Flutter-t nekem az a tapasztalatom, hogy nem az a kérdés, hogy hogyan, hanem hogy mit szeretnék megcsinálni. Több éves Android fejlesztői tapasztalataim alapján elmondhatom, itt valóban jól ki vannak találva az építőkockák. Könnyedén összerakhatóak az alkalmazások. Az eszközök használata (ami folyamatosan bővül) elgondolkoztat, hogy akár már egy drótvázat is érdemes kód szinten elkészíteni (vagy generáltatni, pl. Adobe XD-ben). Ebben az esetben a kód fele már megvan, a UI.

Az egyszerűségéről te magad is meggyőződhetsz, ha be akarod piszkítani a kezedet. Ebben az írásomban letölthető kód példával bemutatok egy pár alap dolgot.

Külön szimpatikus az a törekvése a Google-nek, hogy a “mezei” fejlesztőkből egycsapásra design-erek válhatnak. Persze mindegyik egy külön szakma, de a közös nyelvezet kialakításában mindenképpen segíthet.

Ha tetszett az írásom, oszd meg velem. Amennyiben javítani valót találsz, ne tartsd magadban. Várom a hozzászólásaidat a témához.

A mobil app fejlesztés új formája
Minden mobilfejlesztő álma

Viktor

A Google gurított egy nagyot a multiplatformos mobil app-ok fejlesztése teréln. Ennek 2019 adta meg a végső lökést a Flutter UI toolkit erős promóciójával. A Flutter egy olyan multiplatoformos keretrendszer, ami megsokszorozza a produktivitást a fejlesztői csapatban. Nem pusztán arról van szó, hogy Android-ra, iOS-re, Desktop-ra és Web-re (és a sor folytatódik) egy kódbázissal tudunk fejleszteni.

Maga a fejlesztési folyamat nagymértékben felgyorsul azáltal, hogy élő nézetet kapunk a felületről, amint elmentjük a kód módosításunkat. Ennek ugyan az az ára, hogy a kódot a Google által fejlesztett Dart nyelven kell írni. Persze aki ismer már egy objektumorientált nyelvet (Java, JavaScript, TypeScript, C++, Kotlin, stb.) ez nem akadály. Akinek pedig ez az első nyelve, az egy modern nyelvet fog megtanulni. A kódolás szintaxisának megtanulása pár órában, legfeljebb napokban mérhető.

Minden “Widget”

Így van! Bármihez is kezdük a felületen, biztosan szükségünk lesz egy widget-re. De mi is ez valójában? A widget-ek olyan kis építőkockák, amikből független, előre megírt, de nagyban személyes igényeinkre szabható felületek hozhatóak létre. Jó-jó, de mit tud? Gondoljunk egy egyszerű gombra. Ez egy widget, a maga absztrakciójával. Ha van egy gombunk, pár paraméter beállításával módosítható a színe, a betű színe, a betű stílusa, a sarkok kerekítése. Egyszóval bármi. Értsd, tényleg bármi!

Material csomag

A legjobb az egészben, hogy a Google ehhez felépített egy teljes grafikai UI/UX open-source leírást. Ezt mérnökök sok-sok év tapasztalatával gyűjtötte össze, hogy mi mutat jól egy mobil kijelzőjén, és mitől lesz egyértelmű az interakció. Iránymutatást ad a design alapelveire, stílusokra, bevált módszerekre. Az egyes komponensek (widget) és ikonok használatára, tervezéséhez nyújt segítséget. Nem megfeledkezve az Accessibility-ről, vagyis gondolt azokra is, akiknek az alapvető kezeléssel nehézségei adódnak. Pl. látássérült, hallássérült vagy kognitív hiányosságai vannak.

Érdemes ellátogatni az oldalukra https://material.io. A későbbiekben vissza fogunk nyúlni ehhez a remek csomaghoz.

Példák

Ne múljon el ez az írás anélkül, hogy egy pár felületet megnéznénk.

Emlékszünk még az Androidon az Activity-kre és a Fragment-ekre? Nos, itt ezzel nem kell bajlódnunk. A navigációt pár sorral lerendezzük. A tranzíciók szépen meg vannak csinálva alapból, de tudunk finomítani rajtuk.

basic screen navigation with buttons
Alap képernyőképek navigációval

Button

Egy gomb definiálása a legegyszerűbb egy RaisedButton widget-tel. Ez be van még csomagolva egy Transform.rotate widget-be, ami az elforgatást intézi.

Transform.rotate(
                angle: 0.2,
                child: RaisedButton(
                  color: Colors.amber,
                  elevation: 5,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Text(
                      "Switch to Page Two",
                      style: TextStyle(fontSize: 20, color: Colors.green),
                    ),
                  ),
                  onPressed: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(builder: (context) => PageTwo()),
                    );
                  },
                ),
              )

ListView

Lista nézet egyszerűen. Nem kell a RecycleViewHolder rémálommal bajlódni, mint korábban. Felsoroljuk a ListView-ban a widget elemeket, és készen is vagyunk.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      ...
      body: Container(
        padding: EdgeInsets.all(10),
        color: bgColor,
        child: ListView(
          children: [
            ListItem(order: 1),
            ListItem(order: 2, onPress: _navigateToPageTwo(context)),
            ListItem(order: 3, onPress: _navigateToPageTwo(context)),
            ListItem(order: 4),
            ListItem(order: 5),
            ListItem(order: 6),
            ListItem(order: 7),
            ListItem(order: 8),
            ListItem(order: 9),
            ListItem(order: 10),
          ],
        ),
      ),
    );

AppBar

Az oldal teteji navigációra ugyancsak megvan a kész megoldás. Az AppBar-nak elnevezett widget ezután tetszőlegesen paraméterezhető. A szokásos materialos felületeket tudja. Ha nem lenne elegendő, akkor természetesen testre szabhatjuk.

SlivertAppBar

Komplex mozgási effekt az AppBar-t kiegészítve. Ezzel nagyon látványos navigációt tudunk készíteni. Lásd a Page Two-n lévő app bar-t a tetején.

A kódok elérhetőek a GitHub-ról.

Kíváncsi vagyok a véleményedre. Írd meg kommentben, ha tetszett, vagy valami javításra szorul.