4 nyomós ok, amiért most megéri a Flutter fejlesztés
2021-ben a mobil app-ok további lendületet kapnak

A Flutter cross-platform terjedőben van.
forrás: Pixabay.com

A nyár nem telik el eseménytelenül. A Webuni szervezésében Augusztus 10-én velem együtt három, a mobil alkalmazások fejlesztésben jártas szakembert kérdeztek meg a Flutter fejlesztés előnyeiről, jövőjéről. Nagyon jó beszélgetés kerekedett, amiből elhoztam 4 fontos kérdést, amire érdemes figyelni. Lássuk is!

Az eredeti teljes YouTube videó megtekinthető, amiből összefoglaltam a lényeget.

A webináron társaim voltak Juhos István, Senior Software Engineer, a BME oktatója; valamint Vogel Csongor, Senior Android és Flutter Software Engineer, az ff.next nevű fintech startup senior munkatársa.

Aki nem akar kódolni, de érdekli a Flutter fejlesztés

Egy eszköznél mindig vonzó, ha minél előbb ki tudjuk próbálni. Bodor Ádám kérdésére, hogy mi kell hozzá, István válaszolt.

Az első és legegyszerűbbb, hogy a dartpad.dev, online felületén ki tudjuk próbálni a Dart nyelvet, valamint előre megírt Flutter minta alkalmazásokat. A kódot tudjuk módosítani, ami egyből kipróbálható.

Lehet-e a Dart nyelv ismerete nélkül, még egyszerűbben? Igen!

Ez a FlutterFlow, egy online felület, ahol Drag&Drop módon, össze lehet kattintgatni egy működő alkalmazást. Még eléggé kezdetleges, de folyamatosan kap új funkciókat. A lényege, hogy az ebből generált kód ténylegesen egy működő alkalmazást ad. Integrációt biztosít még a saját, meglévő szervereink API-jaival is.

Korábbi cikkeimben írtam a FlutterFlow online szerkesztőről és a Figma UICode pluginjáról. Ha bővebben olvasnál róluk, akkor kattints a linkekre.

Milyen a Flutter fejlesztés belépési szintje?

Amit ki lehet mondani, hogy a Flutter viszonylag kényelmes – mondja István. Az elején ugyan egy új nyelvet, a Dart-ot kell megtanulni. Ez azonban egy új, modern alapokra építkező nyelv. Ha valaki programozott már Java-ban, Kotlin-ban, Swift-ben, C-ben, akkor ez nem lesz idegen tőle. Az többi nyelvhez képest az eltéréseket megtanulja, átnézi a dokumentációt, és kezdhet fejleszteni. A Visual Studio Code (VS Code), Android Studio szerkesztők legenerálják a kezdő alkalmazást, ami működik, alap dolgokat meg lehet nézni benne. Sikerélmény van mindjárt az elején.

“Nincs még egy ilyen platform, amivel ilyen tooling-gal, ilyen gyorsan el lehet kezdeni fejleszteni.”
Juhos István

Le kell cserélni a régi kódbázist?

Ennél a résznél valós környezetből hallhattunk róla infót, hogy egy már megírt, régi alkalmazásnál ezt hogyan kell érteni. Csongor elhessegette azt az általános megközelítést, ami sok cégvezető rémálma: újra kell írni az egész alkalmazást.

Ennél vannak kifinomultabb módszerek. Egy nagy alkalmazásban, ha el tudunk különíteni modulokat / funkcionalitásokat (képernyőket), akkor oda befűzhető egy Flutter-ben megírt modul, ami Android-on vagy iOS-en jól működik.

Ez alapvetően már megköveteli a natív platform ismereteket. De jellemzően, ha 1 ilyen ember van egy csapatban, aki el tudja végezni az integrálást, akkor nagyban növelhető a produktivitás.

Milyen a munkapiaci kereslet a Flutter fejlesztés iránt?

Fontos kérdés, hogy ugyan sok fejlesztőt érdekel ez az újdonság, és szívesen fejlesztenek benne, de mégiscsak a piac fogja kifizetni a fejlesztő bérét. Erre a kérdésre többféle válasz született.

Nagyon le vagyunk maradva – kezdi ezzel a felütéssel Csongor. Európában a lengyelek élen járnak a technológia alkalmazásában. Nyugat-Európában felismerték, hogy a régen megírt alkalmazásokat vagy Flutterben érdemes újraírni, vagy apránként, a modulokat lecserélni benne. Merthogy erre is van lehetőség. Távol-keleten, Kínában egy nagyon erős növekedés látszik. Indiában pedig az olcsó fejlesztési költségek további versenyelőnyhöz juttatják a megrendelőket.

István azzal kezdi, hogy ha van angol tudás, és hajlandóság megtanulni valami újat, akkor nyugodtan pályázzunk külföldi állásokra. A mostani távoli munkavégzési lázban égve sokkal elérhetőbbek lettek a külföldi munkahelyek is. Nem szükségszerű a kiköltözés, hanem remote munkák itthonról is végezhetőek. Maga egy-egy interjúzás tapasztalata pedig felbecsülhetetlen.

Zárásként a magam véleménye erről az, hogy ha megvan már egy natív Android-os vagy iOS-es tudás, akkor amellé mindenképpen érdemes egy valamelyik cross-platformos keretrendszert megismerni. Előnye ennek, hogy a másik operációs rendszerre is tudunk fejleszteni, kevés hozzátanulással. Ha pedig a Flutter fejlesztés megtetszett, akkor érdemes azt elmélyíteni, és munkát keresni.

Ha megtetszett a Flutter, de nem tudod, hogy hogyan indulnál neki, vagy csak támogatásra van szükséged benne, akkor keress meg a kapcsolataim egyikén.

FlutterFlow: egy új Low-code eszköz, ami mobil app kódot generál
Muszáj megoldani a növekvő szakemberhiányt

A FlutterFlow low-code igérete
forrás: www.flutterflow.io

Idén visszatért a Google nagyszabású éves eseménye, a Google I/O. Május 18 és 20-a között rendezték, ezúttal az online térben. Ezt azonban már megszoktuk. Újdonságokból nem volt hiány, debütált a FlutterFlow nevű online eszköz, ami egy low-code (kevés kódolást igénylő) eszköz. Kipróbáltam, ennek osztom meg a tapasztalatait.

A low-code eszközöket nyomon követem, és kipróbálom, mert ezek már most is pótolják az IT-ban jelen lévő szakemberhiányt. Írtam már a UICode megoldásáról, ami a Figma designerek és az app fejlesztők táborát közelíti egymáshoz.

Ide fogok eljutni a FlutterFlow példával

Egy egyszerű példán keresztül néztem meg, hogy mit tud. Ez a végeredmény. Jelen esetben a Chrome böngészőben indítottam el, mert a Flutter Web-es támogatása első osztályú. Mobilon ugyan így nézne ki.

A végeredmény elkészült.

Előkészületek a FlutterFlow kipróbálásához

Az online eszköz a www.flutterflow.io oldalán érhető el, ahova egy Google accounttal regisztrálva máris hozzáfértem a felülethez.

Egyből végigvezet egy projekt beállításán, ami egy név megadásából áll. Adjunk neki egy nevet, és már kezdhetjük is a felületek kialakítását. Előtte még felajánlja, hogy már egy meglévő sablon alapján készítsen elő egy megoldást, vagy teljesen szabad kezet kapva, egy üressel kezdjünk.

Én a példában egy üres projekttel kezdtem, mert kíváncsi voltam, hogy mennyire bonyolult a játszadozás vele. Természetesen elérhetőek a tanuló videók, amik nagyban segítenek, ha elakadnánk.

A bal oldali menüben láthatjuk a választható widget-ek (kis grafikai komponensek) listáját. Van belőlük bőven, kedvemre válogathattam.

Csak fogd-és-vidd technikával be kell húzni a komponenst az előre elkészített Home screen-re. Ide én egy olyan listát adtam meg, aminek minden eleme egy termék képe és a neve.

A kezdőképernyő a listával.
Képernyőkép szerkesztése nagyon egyszerűen.

Ezután létrehoztam egy másik képernyőképet, hasonlóan egyszerűen, ahova akkor navigál az app, amikor rákattintunk egy sorra.

Ez lett a Részletek képernyő. A tetején van egy nagy kép, alatta különböző formázásokkal a neve, leírása, származási ország, ára. A formázások a megszokott kényelmes beállításokkal működik: betűméret, vastagítás, döntés, színe, igazítás. Egyszerű.

A termék részletek képernyő
A termék részletek képernyője.

Amiben nagyot tud az FlutterFlow low-code

Eddig mondhatnánk, hogy nem rossz, de azért mutasson valami igazán menőt!

Ez nem más, mint az, hogy a meglévő szerverünket (BackEnd) hozzá tudjuk kapcsolni. Lehet ez saját, meglévő interfész, vagy akár a Google Firebase cloud megoldása. A példában a Firebase integrációt próbáltam ki, ami ugyan igényel némi hozzáértést, de nem lehetetlen küldetés. Tulajdonképpen a szokásos beállításokat kell végigcsinálni, és nekem elsőre működött.

Nem írom le a lépéseket, de a lényeg, hogy meg tudjuk adni, hogy az adatok milyen szerkezetben érkeznek a szerverünkről. Ehhez egy adattípust készítünk el, és a későbbiekben ezt használjuk mindenhol.

A kezdő képernyőn a listát feltöltjük a szerverről jövő adatokkal. A termék kép címét, és nevét már ebből az adattípusból vesszük. Ha kiválasztunk egy elemet, akkor megjegyezzük, hogy melyik volt az, és a részletező képernyőn pedig bővebb infókat jelenítünk meg róla. Ennyire egyszerű. Mindezt úgy, hogy ugyan nem árt, ha láttunk már kódot, de nem kell kódot írnunk. Inkább csak táblázatokat töltünk ki hozzá.

Nagyon sok minden van a FlutterFlow alap eszköztárában, pl. hogy előnézetben egy kattintható drótvázat (wireframe) kapunk, ami arra jó, hogy legyen egy érzetünk a végtermékről. Sokszor már ez is elegendő a felhasználóknak, hogy kiderüljön, hogy mit csinál az app.

A gyorsan növekvő IT szakember hiány számos területen nehezíti a projektek indulását vagy befejezését. A low-code, no-code, vagy a kereszt-platformos (cross-platform) megoldások ezeket a terheket enyhíthetik. Ezekkel pótolhatóak fejlesztői pozíciók, amikre esetleg éveket kellene várnia egy cégvezetőnek.

Ingyenes vagy fizetős?

Kezdtem az ingyenes részével, ahol kipróbálhattam a fő funkcióját, hogy elkészíthettem a képernyőket. Ezután le akartam tölteni a kódot, hogy kipróbáljam.

Havi 30 USD-ért megkapjuk a kódot, ami azt jelenti, hogy sok órányi kódolástól mentesülünk.

A Pro-ban már havi 70 USD-t kell fizetnünk érte, ami jól jöhet egy mobil app fejlesztő stúdiónak.

Minden esetre az első 14 nap ingyenes, így el tudjuk dönteni, hogy áldoznánk-e rá?

Egyelőre még egy friss, első verzióról van szó, tehát sok hiba lehet benne.

Konklúzió

Összegzésként a FlutterFlow low-code webalkalmazásról elmondható, hogy érdemes volt kipróbálnom. Sok funkciót tud már most is, ami várhatóan hamarosan még tovább bővülnek.

Ennek, és számos, a közelmúltban útjára indult az eszköznek a megjelenése egyértelműen bizonyítja, hogy nagy jövő előtt áll a Flutter UI keretrendszer. Nem csupán mobil, de a web és asztali platformokat is meghódítja.

Ha további kérdésed lenne erről az eszközről, vagy magáról a mobil app fejlesztésről, a kapcsolati oldalamon vagy LinkedIN-en elérhető vagyok.

Harmony OS: mi lesz ezután az alkalmazásainkkal?
Felértékelődik a cross-platformos fejlesztői tudás

A Huawei a Harmony OS bétaverziójával kezdi meg hosszú távú átmenetét az Androidról egyes okostelefonokhoz és táblagépekhez
forrás: xda-developers.com

A Huawei és az USA hegemóniájának egyik mellékterméke, hogy a Huawei már egy éve az új Harmony OS operációs rendszer kifejlesztésén munkálkodik. Ez a legújabb mobilokon már béta fejlesztői fázisba érkezett. A kérdés azonban adódik a fejlesztő cégeknek, hogy használhatjuk a már megszerzett keresztplatformos ismereteinket az új Hongmeng OS-en is?

Mi az a Harmony OS?

2019 augusztusában jött a hír, hogy a Huawei saját operációs rendszert fejleszt Harmony OS néven (kezdetben a Hongmeng OS nevet kapta, kb. “őskáosz”). Ezt először IoT (Internet of Things) eszközökre szánta hivatalosan. A 2.0-ás verzió pedig egy évre rá, 2020 szeptemberében hivatalosan is megjelent (watch, smart TV, head unit mellett) okostelefonokra. Az első hivatalos mobilok 2021-ben várhatóak szériában.

Lényegében hosszútávon az körvonalazódik, hogy az Android rendszert leváltja. Ami sok kérdést vet fel a szorosan összefonódó ökoszisztéma miatt. Bár a versenyképes minőség csak idő kérdése.

Melyik modellek kaphatják meg először?

Az xda-developers.com alapján a Harmony OS 2.0 developer béta verzióját ezek a készülékek kaphatják meg:

  • Huawei P40 (ANA-AN00)
  • Huawei P40 Pro (ELS-AN00)
  • Huawei Mate 30 (TAS-AL00)
  • Huawei Mate 30 5G (TAS-AN00)
  • Huawei Mate 30 Pro (LIO-AL00)
  • Huawei Mate 30 Pro 5G (LIO-AN00)
  • Huawei MatePad Pro (MRX-AL19)
  • Huawei MatePad Pro 5G (MRX-W09)
  • Huawei MatePad Pro Wi-Fi (MRX-AN19)

Ez egy frissítéssel kérkezhet meg az arra elszánt fejlesztőkhöz.

A fejlesztők élete

A cikk kitér arra is, hogy a kódot Java nyelven, és a UI képernyőket XML-ben lehet megírni. A Huawei ezzel azt reméli, hogy a fejlesztők körében népszerű lesz, és könnyűvé teszi az áttérést. Erre szükség is van, hogy a népszerű alkalmazások minél előbb átkerüljenek a saját Huawei App Galery-be. Az App Galery egy építőkockája a HMS (Huawei Mobile Services) ökoszisztémának. Ez a GMS (Google Mobile Services) huawei-es alternatívája.

2020 márciusában 50 000 alkalmazás volt elérhető, szemben a Google Play Store 3 milllió app-jával. Van hova fejlődni.

Lesz-e támogatás rá Flutter-ben?

A kérdés a Flutter hivatalos hibalistáján a #38437-es számot kapta, amiben aktív közösségi érdeklődés mutatkozik, hogy vajon lesz-e támogatás?

A Flutter hivatalos package repository-ját leszűrve feltűnik, hogy 2020 júniusától kezdődően számos csomag portolva van Flutterre, Android-os támogatással. Érthető, hogy az Androidra lőnek elsőként a magas penetrációja miatt.

A csomagok közül ott vannak az alapok: GPS, Machine Learning (ML), Augmented Reality (AR), Push Notification, Analytics, Maps, Ads.

Érdekesség, hogy van egy Huawei Contact Shield Kit Flutter Plugin, ami a mostani COVID-19 kapcsán jöhetett létre. Kifejezetten a kontaktkövetésre (elkerülésre) lett kihegyezve. Egyébként BLE (BlueTooth Low-Energy) technológiát használ.

A Flutter Embedder a Flutter legalsóbb szintű illesztő része, ami összeköti a keretrendszert az aktuális (mobil, böngésző) architektúrával. Ez mindig specifikusan van megírva, natívan, amit az adott eszköz megkíván. Emiatt mindig csak ezt a kis részt kell megírni, és a támogatás adott.

Ez nem tűnik korlátnak, így a támogatás biztosított.

React Native, a másik nagy szereplő

A keresztplatformos fejlesztés tárgyalásakor nem maradhat ki az RN sem. Az RN 0.60 verzió könnyű integrációt ígér a HMS-sel, ami a fő szolgáltatásokat nyújtja a mobilnak. Enélkül bajosan lehet üzemeltetni egy alkalmazást. A hivatalos Huawei oldalakon biztosítanak felőle, hogy az integráció könnyen megy.

A verseny jót szokott tenni a piacnak. Javulnak a szolgáltatások színvonala, nem ülhet bele a sikerbe egyik fél sem. Folyamatos az ádáz küzdelem a jobbnál jobb funkciókért. A verseny az árakat is lejjebb tolhatja, ami végül a fogyasztóknál csapódhat le nyereségként.

A keresztplatformra fejlesztő cégek komoly költségeket takaríthatnak meg azzal, ha egyszerre több platformra is képesek rövidebb idő alatt eljutni. Az, hogy ennek mi lesz a jövője, még sokakban kérdőjeles.

A technológiai választáskor figyelembe kell venni, hogy milyen meglévő csapat áll rendelkezésre. Webes, vagy inkább mobilos ismeret van-e több, és a technológia megtanulását eszerint beütemezni.

Egy FrontEnd-es webfejlesztő inkább a ReactNative mellett teszi le a szavazatát, míg egy natív mobilos szívesen tanul meg “flutterül”, Dart nyelven.

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

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.