A Devoxx-on jópár előadás webalkalmazásokról és azok optimalizálásáról szólt. Ezen belül a mobil böngészők különös figyelmet kaptak, mivel a 2012-es az az év volt, amikor a mobilról jövő forgalom leelőzte a desktop-ot.
Wesley Hales HTML5 and Javascript Web Apps című előadása volt az első a témában, akinek van egy azonos című könyve is. A terem totálisan megtelt, a lépcsőn találtunk magunknak helyet. Pontokba szedve foglalom össze, hogy mik kerültek szóba, miket véstem a füzetembe:
- A böngésző egy platform, ha valakinek eddig még esetleg nem esett volna le.
- Minden egyes platformra lefejleszteni egy alkalmazást rettentő drága mulatság (Android, IOS, stb) szóval bőven megéri böngésző alapú rich client app-ot fejleszteni. Nem a Devoxx-on volt, de érdekes volt amikor a Sencha ledemózta, hogy lehet olyan Webapp-ot csinálni, ami felveszi a versenyt a natív facebook alkalmazással.
- Vigyázni kell, mert mobilon máshogy mennek a dolgok. Ott pl. egy rosszul szervezett webapp/webpage konkrétan gyorsabban merítheti az akksit, ami elég nagy baj. A JQuery mobile például eléggé meríti az elemet, állítólag.
- A WebKit alapú browserek adják a mobil platform 87 százalékát. Az Android default böngésző szívás, de a Firefox, a Chrome, a Dolphin és az Opera Mobile jó. (Mondjuk nekem a Defy+-omon a fapados default böngésző a legstabilabb, a többi mind elszállt és felbosszantott már legalább egyszer.) Az Opera Mini más tészta, mert az offline rendereli a tartalmat.
- Mac-re elég jó browser emulátorok vannak.
- A mobilok kapcsolata mindig elég döcögős, ezért érdemes lehet használni a link rel="prefetch"-et, ami előre le tud tölteni egy bizonyos tartalmat. De az is jó megoldás lehet, hogy egy hidden iframe-be letöltjük a tartalmat és document.adoptNode-dal megjelenítjük amikor kell. Az iframe-nek van egy seamless atributuma, ami azt mondja meg, hogy az iframe-nek tökéletesen bele kell illeszkedni a dokument-be, mintha annak a része lenne. Csak a Chrome támogatja, úgyhogy. Azt is meg lehet oldani Javascript-tel, hogy bizonyos class-ú href-eket letöltsön előre a browser.
- Javascript-ben mindenféle kevéssé ismert érdekes eseménykezelő van, pl. az offline arra az esetre, ha offline-ba megy a készülék. Nem árthat úgy megtervezni a webalkalmazásokat, hogy offline is viszonylag értelmesen viselkedjenek.
- A Websocket-ek jók, full duplex kapcsolatot nyújtanak, de nem minden böngészőn támogatott. Gondoskodni kell fallback-ról. Van rá JQuery plugin. onmessage, onerror, onclose a kapcsolódó eseménykezelők.
- Ma már az accelerométer is elérhető böngészőből (Orientation API), de pl. a Geolocation API nincs benne a HTML5-ben.
- Szintén optimalizálási lehetőség a saját weboldalba ágyazás helyett külső URL-ekről, CDN-ekről letöltetni a gyakran használt lib-eket. Ezzel ők 17 százalék sávszélességet spóroltak.
- Mérjünk performanciát! loadreport.js, PhantomJS - full web stack without browser. filmstrip - webkitre screenshotokat csinál egy oldal betöltődéséről.
Végülis sikerült pár hasznos linket lejegyzetelnem az előadás során és a live demó is érdekes volt amit bemutatott a srác. Pl. lehet olyan webapp-ot, weboldalt csinálni ami reagál rá ha megdöntöm vagy meglóbálom a telefont és mindezt magas frame rate-tel teszi, szaggatás nélkül. Akit valóban érdekel a téma, jobb ha a fent említett könyvet lapozgatja. Valójában az igazán hasznos megfejtések nem ezen a kurzuson hangzottak el. Stay tuned.
