HTML5 vs Silverlight

vs

Matt Casto
http://mattcasto.info

vs

Did You Want
an Answer?

HTML5 is many things ...

Ofﬂine / Storage Multimedia

Communication CSS 3

Hardware Access 3D Effects

Semantics Performance

This is not
an overview of
HTML5 Features.

http://www.w3.org/html5
http://www.html5rocks.com/
http://slides.html5rocks.com
http://diveintohtml5.org

Platforms
IE 9 (Vista, Win7)
Firefox 3.5+ (WinXP, OSX, Android, Linux)
Chrome (WinXP, OSX, Linux)
Safari (OSX, iOS)
Webkit (Android, etc)

Platforms
IE 9 (Vista, Win7)
Safari (OSX, iOS)

Just about everywhere

Platforms
IE 9 (Vista, Win7)
Safari (OSX, iOS)

Just about everywhere
... to varying degrees.

Platforms
IE 6+ ( WinXP+)
Firefox 2+ (WinXP, OSX)
Chrome (WinXP+)
Safari (OSX)
Windows Phone 7

Platforms
IE 6+ ( WinXP+)
Chrome (WinXP+)
Safari (OSX)
Windows Phone 7

Don’t forget about Moonlight

Platforms
IE 6+ ( WinXP+)
Chrome (WinXP+)
Safari (OSX)
Windows Phone 7

Don’t forget about Moonlight
... even though Novell has.

Storage
Local Storage
// use localStorage for persistent storage
// use sessionStorage for per tab storage
window.localStorage.setItem('value', area.value);
window.sessionStorage.setItem('timestamp', (new Date()).getTime());
var val = window.localStorage.getItem('value');
window.localStorage.removeItem('value');
window.localStorage.clear();

Storage
Local Storage

Source: http://caniuse.com

Storage
ApplicationSettings / Site Settings
// ApplicationSettings are plugin instance specific
// SiteSettings are site (URL) specific
private IsolatedStorageSettings userSettings =
IsolatedStorageSettings.ApplicationSettings;
private IsolatedStorageSettings siteSettings =
IsolatedStorageSettings.SiteSettings;

userSettings.Add("value", "hello world");
userSettings.Remove("value");
userSettings.Clear();

Storage
Isolated Storage
// GetUserStoreForApplication() - plugin specific
// GetUserStoreForSite() - site (URL) specific
var isf = IsolatedStorageFile.GetUserStoreForApplication();

using (var isfs = new IsolatedStorageFileStream(fileName,
FileMode.Create, isf))
using (StreamWriter sw = new StreamWriter(isfs))
sw.Write(data);

using (var isfs = new IsolatedStorageFileStream(fileName,
FileMode.Open, isf))
using (StreamReader sr = new StreamReader(isfs))
var allData = sr.ReadToEnd();

Databases
Web SQL Database
var db = openDatabase('exampleDB', '1.0', 'example database', 5 * 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")');
tx.executeSql('SELECT * FROM foo', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
alert(results.rows.item(i).text);
}
});
});

Databases
Web SQL Database


Databases
IndexedDB
var trans = db.transaction(["foo"], IDBTransaction.READ_WRITE, 0);
var store = trans.objectStore("foo");
var request = store.put( {"bar": foobar} );

request.onsuccess = function(e) { alert("Success!" + "rnrn" + e.value); };
request.onerror = function(e) { alert("Error! " + "rnrn" + e.value); };

Databases
IndexedDB


Databases
3rd Party Client-Side Databases for Silverlight

• Sterling - http://sterling.codeplex.com/
• Perst - http://www.mcobject.com/silverlight-demo
• siaqodb - http://siaqodb.com/
• efﬁproz - http://www.efﬁproz.com/
• Ninja Database - http://www.kellermansoftware.com/p-42-ninja-
database-lite.aspx

Ofﬂine
AppCache - Cache Manifest
CACHE MANIFEST
# version 0.0.8
index.html
site.css
jquery-1.4.1.js
emoticon_smile.png
emoticon_unhappy.png

NETWORK:
noncached.html

FALLBACK:
/ offline.html

Ofﬂine
AppCache - Referencing Caching
<!DOCTYPE HTML>
<html manifest="cache.manifest">
<head><title>Hello AppCache</title></head>
<body>
<h1>Hello AppCache!</h1>
</body>
</html>

Ofﬂine
OnLine / Ofﬂine API
document.body.addEventListener("online", function() { checkOnLineState(); }, false);
document.body.addEventListener("offline", function() { checkOnLineState(); }, false);
checkOnLineState();

function checkOnLineState() {
if (typeof (navigator.onLine) == 'undefined') {
alert("navigator.onLine isn't defined.");
return;
}
if (navigator.onLine) {
alert("You are online.");
} else {
alert("You are online.");
}
}

Ofﬂine
AppCache & onLine API


Ofﬂine
Out-of-Browser (OOB)
• OOB applications run in a separate window and work
regardless of network connectivity.
• Silverlight API gives full control of installation and updates.
• Default Isolated Storage capacity increases from 5 MB to
25 MB
• Web Browser control for OOB applications
• With Elevated Trust you can call COM APIs
• Silverlight 5 introduces p/invoke, multiple windows

Threading
Web Workers
var worker = new Worker("worker.js");
worker.onmessage = function(e){ alert(e.data) };
worker.postMessage("Hello Worker");

worker.js
onmessage = function(e) {
if (e.data === "Hello Worker") {
postMessage("Hello World");
}
};

Threading
Web Workers


Threading
Silverlight BackgroundWorker
var bg = new BackgroundWorker
{
WorkerReportsProgress = true,
WorkerSupportsCancellation = true
};
bg.DoWork += (o, e) =>
{
for (var i = 1; i <= 100; i++)
{
System.Threading.Thread.Sleep(500);
((BackgroundWorker) o).ReportProgress(i);
}
};
bg.ProgressChanged += (o, e) => MessageBox.Show("Working %" + e.ProgressPercentage);
bg.RunWorkerAsync();

Communication
WebSocket API
var ws = new WebSocket("ws://websocket.example.com");
ws.onopen = function(e) { alert("WebSocket connection open"); };
ws.onmessage = function(e) { alert("WebSocket message received: "
+ e.data); };
ws.onclose = function(e) { alert("WebSocket connection closed"); };
ws.postMessage("Hello WebSocket");
ws.disconnect();

Communication
Silverlight & WCF
• Silverlight WCF client supports PollingDuplexHttpBinding
for a simulated duplex communication over HTTP
• Silverlight supports System.Net.Sockets for low level
sockets communication
• Silverlight supports UDP multicast clients over Sockets
• The only thing Silverlight doesn’t support that WebSockets
API does is secure socket communication

Notiﬁcation
Notiﬁcations API
if (window.webkitNotifications.checkPermission() == 0) {
// you can pass any url as a parameter
window.webkitNotifications.createNotification(tweet.picture,
tweet.title, tweet.text).show();
} else {
window.webkitNotifications.requestPermission();
}

Notiﬁcation
Notiﬁcations API


Notiﬁcation
Silverlight NotiﬁcationWindow
if (App.Current.IsRunningOutOfBrowser)
{
var nw = new NotificationWindow();
nw.Content = "Look at me!";
nw.Show(5000); // milliseconds

}

Audio
Audio Tag


Audio
Audio Tag
Browser Ogg mp3 wav
Firefox 3.5+ ✓ ✓
Safari 5+ ✓ ✓
Chrome 6+ ✓ ✓
Opera 10.5+ ✓ ✓
IE 9 ✓ ✓

Audio
MediaElement
<MediaElement x:Name="media" Source="example.mp3"
Width="300" Height="300" />

Audio
MediaElement
Container Codecs
MP3 MP3

ASF WMA Standard & Professional

AAC-LC, HE-AAC v1 (AAC+), HE-AAC v2
MP4
(eAAC+)

Video
Video Tag


Video
Browser Ogg H.264 WebM
Firefox 3.5+ ✓
Firefox 4+ ✓ ✓
Safari 3+ ✓
Chrome 6+ ✓ ✓
Opera 10.5+ ✓ ✓
IE 9 ✓ ✓
iPhone Safari ✓
Android ✓ ✓

Video
MediaElement
<MediaElement x:Name="media" Source="example.wmv"
Width="300" Height="300" />

Video
MediaElement
Container Codecs
ASF WMV & VC-1
MP4 H.264

Also Supports...
• Progressive Download & Windows Media Streaming
• Server Side Play Lists
• Server Logs
• Timeline Markers

Canvas
<canvas id="canvas" width="838" height="220"></canvas>
<script>
var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);

canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
</script>

Canvas
Canvas


Canvas
<Canvas x:Name="LayoutRoot" Background="White" >
<Rectangle Canvas.Left="250" Canvas.Top="25"
Height="100" Width="150"
Stroke="Black" Fill="Black"/>
<Path Canvas.Left="406" Canvas.Top="10" Height="290" Width="137"
Stroke="#7FFF7F00" Fill="#00FFFFFF" StrokeThickness="15"
StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeEndLineCap="Round">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure>
<PathFigure.Segments>
<ArcSegment Size="50,50" RotationAngle="45" IsLargeArc="True"
SweepDirection="Counterclockwise" Point="0,250"/>
</PathFigure.Segments>
</PathFigure >
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>

Potpourri
• Canvas 3D - WebGL
• SVG (inline, etc)
• Drag & Drop, Drop In, Drag Out
• File System API
• Geolocation API
• Semantic HTML Tags
• New form types (email, date, range, search, tel, color,
number)

Potpourri
• CSS - Selectors, Rounded Corners, Shadows, Transitions,
Tranforms, Animations, etc.
• Webfonts
• Javascript selectors (getElementsByClassName,
querySelector, querySelectorAll)
• data-* attributes
• element.classList
• Browser History API

Potpourri
• XAML
• Languages - C#,Visual Basic.NET, Iron Ruby, Iron Python
• 3D - Silverlight 5 Beta
• GPU Hardware Acceleration
• Devices - Webcam, Microphones
• Printing - Bitmap in SL 4, Postscript vector in SL 5
• COM Interop (Out-of-browser full trust)
• P/Invoke (Out-of-browser full trust in SL 5)

HTML5 vs Silverlight

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (10)

Similar to HTML5 vs Silverlight

Similar to HTML5 vs Silverlight (20)

Recently uploaded

Recently uploaded (20)

HTML5 vs Silverlight

Editor's Notes