Vue Native alapozó

Vue Native alapozó

avagy natív mobil appok fejlesztése Vue.js-sel

Nemrég írtam egy cikket a Vue.js-ről. Ott említettem, hogy létezik a Vue-nak egy Vue Native nevű implementációja amivel mobil appokat fejleszthetünk egyszerűen, Vue.js alapon. Mivel a Vue Native valójában egy plusz réteg a React Native felett így nagy előnye, hogy mindent megkapunk ami React Native esetén elérhető (natív alkalmazás, gazdag komponens készlet, nagy fejlesztő community, stb.) úgy, hogy emellett kihasználhatjuk a Vue.js előnyeit (egyszerűen tanulható, elegáns, stb.). Mivel a dolog nagyon ígéretesnek hangzott, gondoltam teszek vele egy próbát. Ebben a rövid cikkben a tapasztalataimat szeretném összefoglalni a Vue.js cikkben már megismert egyszerű todo appon keresztül. Mivel a Vue Native alapja a React Native, ezért ha nem ismered a React Native-ot, érdemes elolvasnod az erről szóló írásomat. Illetve nyilván érdemes megismerkedned a Vue.js alapjaival is.

A Vue Native telepítéséhez telepítsük elsőként a React Native cikkből már ismert Expo-t, valamint a Vue Native CLI-t:

npm install --global expo-cli
npm install --global vue-native-cli

Ezt követően hozzunk létre egy projektet amit rögtön indíthatunk is az Expo-val:

vue-native init todo-vue-native
cd todo-vue-native
expo start

Ha minden jól ment, akkor a böngészőben megjelenik a QR kód amit az Expo Android vagy iOS appjával becsippanthatunk. Az első buildra egy kicsit várni kell, de kb. fél perc múlva megjelenik a telefon képernyőjén a “My Vue Native App” felírat. Ennyi. Kész is van életünk első Vue Native alkalmazása.

Ha megnézzük a generált projektet, láthatjuk, hogy a felépítése kb. megegyezik egy sima Expo-s React Native app felépítésével. A különbség, hogy App.js helyett App.vue a belépési pont. Az App.vue fájlt megnyitva láthatjuk, hogy egy sima Vue komponenssel van dolgunk. Megvan a template rész, a style rész, és ugye lehetne még egy opcionális script rész, ami a programlogikát tartalmazza. A Vue Native a fordítás során React Native-os js-re fordítja a vue fájlokat, onnantól pedig már a React Native-os folyamatok futnak tovább.

Most, hogy idáig eljutottunk, semmi nem állíthat meg abban, hogy összerakjuk a bevezetőben említett TODO appot. Ehhez a NativeBase komponensgyűjteményt fogjuk használni amit a következő módon telepíthetünk Vue Native-hoz:

npm install native-base --save
npm install

Ha ezzel megvagyunk, másoljuk be a következő kódot az App.vue -ba:

A script rész pöccre ugyanaz mint a webes Vue.js példában, így arról most nem is érdemes túl sokat beszélni. Ami extra, az az első 3 sor, ami a NativeBase-t inicializálja. Ami talán érdekesebb, az a template rész. Itt sok esetben inkább a React Native-os logika érvényesül a Vue.js-sel szemben. Ez jól megfigyelhető például az eseménykezelőknél. Vue.js-ben @click=”…” formában adjuk meg az eseménykezelőket, míg itt simán az :on-press attribútum értéke az eseménykezelő neve. Ugyanígy az elemek eltávolítására Vue.js-ben simán működött a @click=”removeItem(idx)” forma, míg itt egy függvény kifejezés kell mint React Native esetén. Ezeket a különbségeket viszonylag hamar meg tudja szokni az ember és onnantól már könnyen megy a fejlesztés a Vue.js logikája alapján. Mivel a Vue Native projekt egyben React Native projekt is, ezért szabadon használhatunk bármilyen React Native komponenst, vagy akár dönthetünk úgy, hogy egyes komponenseket React Native-ban valósítunk meg.

Amiről még szerettem volna pár szót írni az a Vue Native projektek debugolása. Ahogyan az Expo-tól már megszokhattuk, ha megrázzuk a telefont (shake gesture), előjön a fejlesztői menü. Itt a “Debug Remote JS” menüpontot választva tudjuk az appunkat debugolni. A debugolás bekapcsolását követően nyissuk meg a böngészőben a http://localhost:19001/debugger-ui/ oldalt. Itt ha megnyitjuk a Chrome fejlesztői panelt, látni fogunk egy workert, ahol szépen látszanak a vue és js fájlok. El tudunk helyezni bennük töréspontokat, nézegethetjük a belső változókat, stb. mintha egy sima böngészős weboldalt debugolnánk. Az egyetlen gond az egésszel, hogy nem működik rendesen a vue fájlok script részében. Kis netes keresgélés után arra kellett rájönnöm, hogy ez általános hiba és máig nem sikerült jól megoldani. Ez elsőre elég rosszul hangzik, de szerencsére van rá áthidaló megoldás. Az előbb összerakott TODO app megtalálható a GitHubon is: https://github.com/TheBojda/VueNativeTodo . Ha valaki itt belenéz a vue fájlba, láthatja, hogy a methods rész ki van rakva egy külön JS fájlba és mixin-ként van behúzva a vue komponensbe. Ezzel a kis trükkel megoldható a debug probléma ugyanis a js fájlok debugolása tökéletesen működik.

A Vue Native szerintem egy nagyon jó eszköz arra, ha valaki webfejlesztőként szeretne natív mobil appokat fejleszteni. Ha pedig esetleg eddig is Vue.js-t használt, akkor nyilván adja magát a dolog. Véleményem szerint a Vue sokkal egyszerűbb, elegánsabb és könnyebben tanulható mint a React Native, így aki most kezd el mobil appokat fejleszteni, annak talán jobban kézre fog állni. Ha pedig esetleg mégsem jön be a dolog, könnyen lehet migrálni React Native-ra.