Webes alkalmazásfejlesztésHTML5 és GWT segítségével

Nagy Péter

Bevezetés

Hogyan készítsünk böngészőben futó alkalmazásokat?

A böngésző mint futtatókörnyezetWebes appfejlesztéshez eddigi lehetőségek:

●Flash●Java applet●Silverlight●etc...

Fő probléma: Platformfüggőség

A megoldás

HTML5

Fő előnyök:●Böngészőfüggetlenség●Sebesség●Nincs szükség plug-inekre

Komponensek

●Szemantikus tagek●Media tagek ●Kibővített form mezők (validálás, widgetek)●CSS3●Javascript API-k

Javascript API-k●Canvas API●Request Animation Frame●Webstorage●Web SQL●Web workers●Websocket●File API●Geolocation API●Drag 'n' Drop

Canvas APIA <canvas> tag-gel hozható létre

Funkciók:●Alakzatok rajzolása●Gradiensek és minták készítése●Szöveg- és képkirajzolás●Transzformációk●Pixel manipuláció

Canvas APIhttp://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png

Request animation frameJS animációk készítéséhezEgy callback, ami mindig akkor fut, amikor a böngésző rajzol.

requestAnimationFrame(step);function step(timestamp) {

//Do some magic requestAnimationFrame(step);}

WebstorageMax. 5-10Mb adatCsak kliensoldali

Session storageAz adat csak addig tárolódik, amíg be nem zárjuk az adott tabot vagy ablakot.

Local storagePermanens adattárolás.

Webstorage

sessionStorage.setItem('key', 'value');sessionStorage.getItem('key');

Web SQL●Böngészőbe ágyazott SQLite●Lokálisan tárolhatunk adatot●SQL lekérdezések

var db = openDatabase('mydb', '1.0', 'my first database',2 * 1024 * 1024);db.transaction(function (tx) { tx.executeSql(

'CREATE TABLE IF NOT EXISTS foo (id unique, text)' ); tx.executeSql(

'INSERT INTO foo (id, text) VALUES (1, "bar")' );});

Webworkers●Nagyobb számításigényű feladatokhoz●Külön szálon fut●Nem szakítják meg a felhasználói

interakciók●Üzeneteken keresztül lehet velük

kommunikálnivar worker = new Worker("worker_script.js");worker.postMessage("Hello World!");worker.onmessage = function(event) { alert("Received message " + event.data); doSomething();}

WebsocketKétirányú hálózati kommunikáció

●Ideális multiplayer játékokhoz●Csevegő alkalmazásokhoz

Websocket server implementációk:●node.js●python●c++●java●stb...

Websocket // Let us open a web socket

var ws = new WebSocket("ws://someaddress:9998/echo"); ws.onopen = function() { // Web Socket is connected, send data using send() ws.send("Message to send"); alert("Message is sent..."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("Message is received..."); }; ws.onclose = function() { // websocket is closed. alert("Connection is closed..."); };

Geolocation és File APIGeolocation API

●Engedély szükséges●A felhasználó pozícióját kérhetjük el

File API●Gyenge támogatottság●fájlolvasás, fájlmentés, szeletelés

Böngésző támogatottságFő probléma:Még nem egységesek a szabványok, többféle implementációwindow.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })();

Fejlesztési nehézségek●Nehéz bővíteni a támogatott platformokat●Könnyű bugot csinálni

o régebbi verzióbanomás böngészőbenoeljövendő verziókban

●Workaround-okoNyilvántartás

Melyik böngészőben? Melyik verzióban?

oKell-e még?●Tesztelési nehézségek

oAz előzőek miatt

TeljesítményNagyobb alkalmazásoknál elengedhetetlen a teljesítmény figyelése

Lehetnek különbségek a böngészők között:●Memóriaszivárgás●Sebességkülönbségek

KitekintőEgyéb platformok:

●Windows 8 fejlesztésoA HTML5 teljesértékű programozási nyelv...

... - mondott valami hasonlót az MS DE NEM! Metro stílusú appok fejlesztése Nem egyenértékű a többi natív nyelvvel WP8 valószínűleg már nem támogatja natívan

●Mobilalkalmazás-fejlesztésoWebview-koAppok böngészőn keresztül

GWT (Google Web Toolkit)

●Google fejleszti●Első verzió: 2006●Kliens oldali programfejlesztéshez

oWeb UIoAJAX támogatás

●Java - JavaScript fordító●Kódolás, debuggolás Java-ban

oHosted mode●Jelenleg 2.5-ös verzió

Miben segít?●Java nyelv

oOOP tervezés (Osztályok, interface-k, öröklődés, típusok)

oEclipse integráció Okos kódkiegészítés Verziókezelő plug-inek Gyors fejlesztés

●Modularitás●Multiplatform●Optimalizálás●Obfuszkálás

Miben hátráltat?

●Multiplatform nehézségekoÁltalában áthidalható származtatással

●TípusosságoA natív JS-hez képest körülményes

●Lassú fordításoModuláris fejlesztéssel gyorsíthatóoHosted mode

Itt a vége...

Köszönöm a figyelmet!Kérdés?