Webapplication development with HTML5 and GWT
Post on 16-Apr-2017
102 Views
Preview:
Transcript
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?
top related