Mellékleteink: HUP | Gamekapocs
Keres
8 x 3 óra mélyvíz a HWSW mobile! második napján: Kotlin, Android, React Native, UX és analitika, Azure IoT Edge + fintech élesben

Gyors UI-keretrendszerrel jelentkezik a Facebook

Gálffy Csaba, 2017. április 20. 09:30

Kimondottan sebességre és egyszerűségre optimalizált új androidos UI frameworköt mutatott be a Facebook. A fejlesztői keretrendszert a cég házon belül már élesben is használja, most más alkalmazásokban is megjelenhet.

hirdetés

Vadonatúj androidos UI frameworköt leplezett le a Facebook a cég héten zajló F8 fejlesztői konferenciáján. A Litho egy deklaratiív keretrendszer, amelyet kimondottan komplex listák hatékonyabb megjelenítéséhez fejlesztett a Facebook, saját androidos alkalmazásaiban pedig már széles körben használja is azt.

A Litho létezését az Android-ökoszisztéma sajátosságai indokolják. Ez messze a legnagyobb bázisa a Facebooknak, havonta egymilliárd ember használja a cég androidos alkalmazását. A nagy szám azonban nagy kihívás is, az appnak egészen szélsőséges körülmények között kell használhatónak lennie, változatos androidos verziók, változatos processzorok és processzorteljesítmények, kijelzőméretek, hálózati kapcsolatok mellett is.

Görgetés, 60 fps-sel

A Facebook az appok sikerét az alkalmazásban eltöltött idővel (is) méri, a számok pedig egyértelműen mutatják, hogy minél gyorsabbnak érződik az app, annál szívesebben indítják el a felhasználók. A mágikus küszöbérték (ahogy a weben is) a 60 fps (képkocka másodpercenként), ezt kell elérni ahhoz, hogy az élmény kifogástalan legyen. A Facebook-féle alkalmazások (Facebook app, Instagram, stb.) legfontosabb nézete pedig a komplex, képekkel, videókkal, szöveggel feldíszített lista, ez az, amire a Litho is fókuszál.

Az ilyen listák megjelenítése ugyanis nem az Android alap keretrendszerének erőssége. Az erre kínált standard (és széles körben használt) RecyclerView ugyan egyszerűbb esetekben jól működik, a Facebook igényeihez azonban már több okból sem talált, ezért kezdett a cég saját alternatív megoldás fejlesztéséhez. A RecyclerView lényege, hogy fogja a nyers adatokat és egy előre megadott sémának megfelelően megjeleníti azokat egy lista elemeiként a képernyőn. Majd a továbbgörgetés után a képernyőről lecsúszó view-kat kiüríti és erőforrásigényes újrainicializálás nélkül újrahasznosítja, a lista alján immár új adatokkal feltöltve megjeleníti.

Flexboxos elrendezés - egyszerű

A Litho feladata pontosan ez, az előre definiált layoutot húzza rá az adatokra (képekre, szövegre, videóra), azonban az alapértelmezett androidos megoldáshoz képest több fontos ponton okosabb, pontosabban hatékonyabb. A Facebook három ilyen területet említett a bejelentésben: az első, hogy a Litho esetében csak a kirajzolás fut a fő threadben, a layout felépítése háttérszálon, aszinkron fut, így nem vesz el értékes időt a görgetést is vezérlő programszáltól. A második előny, hogy a Litho "kilapítja" a view hierarchiát, vagyis külön kép- és szövegmezők helyett egyetlen, előre elkészített blokkba rendezi a tartalmat. A ViewGroupok számának léepítése pedig jótékony hatása van a memóriahasználatra és a görgetési teljesítményre is.

Lapos hierarchia, kevesebb elemmel.

A harmadik fontos előny pedig a finomszemcsés újrahasznosítás. A RecyclerView hátránya ugyanis, hogy az egyes listaelemeket csak egyben tudja újrahasznosítani - ez nem nagy gond, ha csak egyféle layout van a listában. A Facebook azonban rengeteg különböző elemtípust használ, van sima szöveges, van, amelyiket egy kép van, van, amelyiken több, van amelyik videót tartalmaz, illetve ezek valamilyen kombinációját. A RecyclerView ilyen esetben elhasal,  megfelelő működéshez minden elemtípust "raktáron" kell tartani, előkészítve a betöltődésre, ami nagyon megdobja a memóriahasználatot. A Litho a problémát úgy oldja meg, hogy az egyes UI-elemeket egyenként recikálja, a szövegmező, a képes és videós doboz is külön hasznosul újra, ezzel megnyitva az utat ezek teljesen tetszőleges keverése előtt.

A fentieken túl még számos kisebb-nagyobb optimalizációt tartalmaz a keretrendszer, de ezek alapján nagyjából mindenki el tudja dönteni, hogy érdemes-e átállni a Lithóra, vagy meg lehet tartani a RecyclerView-t.

A layout elkészítéséhez a Litho egyébként a Facebook másik saját fejlesztését, a Yogát használja, amely pedig a CSS-világban már gyorsan terjedő Flexbox implementációja.

Már élesben működik

A Litho egyik nagy előnye lehet, hogy bevezetése történhet fokozatosan. Ez egyébként a fő "kliens", a facebookos mobilos fejlesztők legfontosabb igénye is volt, hiszen kész, meglévő mobilappokat kell az új keretrendszerre migrálni, így egyáltalán nem mindegy, hogy a UI-t a nulláról kell újraírni, vagy törtéhet a Litho bevezetése fokozatosan. Ma már egyébként a Litho a cég alkalmazásaiban éles bevetésen van, a Facebook app hírfolyamát, a Messengert, a céges Facebook-appot (a Workplace-t), sőt, az ultraminimalista Facebook Lite app felületeit is ez az új keretrendszer mozgatja.

A bevezetés tapasztalata, hogy a görgetési teljesítmény (ideális esetben) 35 százalékkal javulhat (ez valószínűleg a frame kirajzolásához szükséges idő csökkentését jelenti). A komplex felületi elemeket használó alkalmazásoknál lényegesen csökkenteni tudta a cég a memóriahasználatot - erre azonban statisztikát most nem közöltek a fejlesztők.

Kotlin alapok Androidhoz, Android refaktorálás, React Native gyorsítósáv, UX és analitika, Azure IoT Edge, fintech élesben: alkalmazásfejlesztés banki aggregátor API-ra, itthon először!