Introduction to HTML 5

Uploaded by GoogleDevelopers on 21.09.2009

>> NEUBERG: My name is Brad Neuberg. Today, I'm going to be talking to you about HTML
5 and giving you an introduction to the interesting aspects of the new standard. I'm at Google's
Developer Programs specifically a group called Open Web Advocacy. Our group is focused on
helping through outreach, education, JavaScript tool kits that help really increase the rate
at which developers can use interesting new Web technologies like HTML 5, SVG, CSS3 and
more. Before jumping into HTML 5, I want to set the context of where we are on the Web
today. The last two years, we've really seen the Web platform accelerate. In this graph,
you see, at the bottom, sort of the Web capabilities. And at the top you see the capabilities of
native applications which have stayed roughly the same the last few years. What's really
interesting is the last two years, we've seen an acceleration of what you can do on the
Web that's starting to get close to the abilities of native applications. We see the iPhone
was a real game changer. Safari 4 really increased capabilities. Opera has always been a leader.
The Android device really opened things up and so on with the introduction of Chrome,
Firefox 3.5. And we see that over time, the Web is getting better and better and better
at having a greater degree of fidelity of things that you want to do on the Web. And
what's really unique is that as the Web the last few years has really accelerated with
modern browsers, it's solving real developer challenges. And that, when we get into HTML
5, we'll see how some of these solutions play into these challenges. But things like, having
improved graphic support in the base platform of the Web. Being able to tie location into
your Web applications. Storage means actually being able to use the abilities of a desktop
machine to do storage, so that we can treat it as more than like a Commodore 64. We have
these very powerful machines. Let's start using them on the Web. And finally, speed,
that's been a really key change. JavaScript has gotten much faster and that's a game changer.
Along with this has been something that's really surprising. You know, when Firefox
really helped create the idea of a consumer driven open-source application, that was a
new untested idea. People didn't know it could open-source scale into the consumer market.
But I think, at this point, that's a done experiment. We know that it's true, that it
can happen. If you look at this, you'll see that it is an increasing accelerating number
of developers contributing to open-source projects, to open-source Web browsers including
Chrome, Firefox, WebKit. So that's really going to help accelerate even more what we
have. And at the same time you see a roughly linear trend in terms of the number of users.
Here we see millions of open-source browser users that is increasing overtime. At the
same time, and sort of setting the context of where we are today, we see a tremendous
improvement in JavaScript performance and we are only at the beginning of that trend.
The last two years, we've begun to see that. We've already seen a roughly 100x improvement
in JavaScript performance, really, pretty much within about the last sort of year and
a half. We're only at the beginning of the optimizations that are possible when you treat
JavaScript as something that you can really crank a lot of performance out of. So these
trends come together, you know, the increasing fidelity of Web applications, a greater number
of open source browsers, faster JavaScript. These come together to really kind of create
the stage at which HTML 5 can really do much more than HTML 4 which was the last major
iteration of HTML, which was really in the late ë90s. So it's really time for a new
version of HTML because we are in a different world at this point than we were then. And
this time around, I just want to sort of make a point that let's do it differently. One
of really surprising things is most people don't realize that AJAX, the idea was invented
by Microsoft in the late ë90s, Outlook Web Express in 1997 was the first app to use
AJAX, which at that time was the XML HTTP request object and it really took until about
2005 for Firefox to also support that and the other browsers, and people just sort of
wake up to the fact that, ìHey, you can combine server--background server talking
to support with things like more advanced CSS, HTML and that kind of gave us the world
that we have today. But it took something like eight years to really gain enough awareness
and gain enough support for people to really start paying attention. You know, this time
around, I think people are going to notice a lot sooner the capabilities of HTML 5, the
capabilities of SVG, CSS3, faster JavaScript. Let's not wait us long as we did then to start
really doing amazing things. And I think we're going to--we're actually going to see that
shift. So people are already jumping on these things. So let's do things differently this
time around. So the structure of the talk I'm going to do today is I want to talk about
five major sections. I'm going to talk about vector graphics on the Web including canvass
and SVG, Scable Vector Graphics. I'm going to talk about video within the HTML 5 standard.
I'll talk about geolocation. I'll talk about the application cache in the database and
then I'll talk about Web Workers. The HTML 5 spec includes more than this. These are
five aspects of the spec that are very exciting and very useful. We could spend the whole
day talking about these aspects. There are so many interesting things in there including
new tags, sort of cleaning up, describing how you render older content and so on. We're
going to focus on these aspects today. Each one of the sections, I'm going to give you
an introduction. I'm going to give you some sample code and some demos. And also to talk
about how this fits in to what you're doing. So let's get started. Let's jump in to vector
graphics. So until recently, you really couldn't draw on the Web. The Web itself didn't really
provide primitives to help you actually draw things on the screen. And the graphics--if
you could, you know, kind of get some graphics out there, they weren't very interactive.
They didn't interface very well with JavaScript. Now, you could sort of rely on other sort
of aspects of the Web to do this, things like Flash, Silverlight, VML which was an early
vector graphics language from Microsoft. So a lot of people would sort of do clever tricks
in order to do some drawing on the Web. But what's really cool is if, if we can get graphics
to be an intrinsic part of the Web, what you get is things interact really well with each
other and that's what so cool about Canvas and SVG, which I'll talk about both of them,
is they embed themselves into the Web platform. They are part of HTML. They're a part of the
document object model. They can fit into CSS and HTTP. And that gets really powerful. As
you'll see that lets them break out of the box and do really cool stuff using existing
Web skills. So let's talk about both. Let's jump into SVG. So SVG is a, is an acronym
that stands for Scalable Vector Graphics. Really, they just give you new HTML-like tags
for drawing. So to do a rectangle, you get a rectangle tag. You can say where on the
screen to put it. Here we're putting it at x=0, y=0. You can set a width and the height.
You can add a fill and a stroke if you're changing the width. You know, how many crazy
hacks people have done to do rounded corners? Well, it's really easy with SVG. There we
are making some rounded corners. We say, round the x side, round the y side by 8. Boom! You
know, one line for rounded corners. That's nice. And then finally, you know, we--I talked
about how this stuff is native to the Web stack. So we can add an ID that will allow
JavaScript to grab this. We can add a CSS class which lets you style this with CSS if
you want to control in a centralized way how aspects of your drawing are displayed. And
there, right there, is what that particular tag would get rendered as. A blue square with
some rounded corners and red outline. Now, what you just saw surround this is at the
very top, that is the HTML 5 doc type. That's the thing that you drop at the top of your
page. And that tells the browser, ìHey, this is HTML 5.î Now SVG is a Web standard
that predates HTML 5. One of the things that's really unique about HTML 5 is it now says,
here's how you drop SVG right into a normal HTML page. So it really makes SVG a core part
of HTML. So right here, we see, we've got some normal HTML. You say SVG and then you
drop your mark up in. So that's one of the really cool new aspects of HTML 5 that hasn't
got as much attention as it should, 'cause it's something that's really unique. We now
have HTML-like tags that do drawing right inside of HTML. Now, I mentioned that one
of the unique things about these things is they integrate well. So these aren't just
static graphics. These are graphics that you can animate, you can interact with. Here we
are using the normal document object model. We grab our rectangle. We can use sort of
the exact same way that we change the style of HTML. There we are changing the fill to
"green." We can add interactivity, again, the same way. There we are doing an onclick.
So when you click on the rectangle, it says, "Hello." And that's it, interactivity is really
straight forward. This shows sort of one of the nice benefits of what it means to have
scalable graphics. On the left you see a normal bitmap. When we change the size, it distorts.
It pixelates. On the right, whether you're looking at an SVG image on a 40-inch monitor,
or a small iphone screen which supports SVG, it still stays beautiful and legible. That's
one of the benefits of this technology. So let's jump into the Canvas API. The Canvas
API is--I like to think it as a scriptable image tag. As opposed to SVG which is mark
up, it's a tree inside of your HTML. The Canvas API is more like an image tag that you can
create JavaScript that directly scripts and draws your own custom image. So, the first
thing you do to use the Canvas tag is you drop a simple tag that say's, "canvas" into
your page, give it a width and height and you give it an ID. Then, your JavaScript grabs
that canvas tag, and gets what's known as the context. So we get a context which is
a drawing surface area. Right here, we say a 2D context. This is really interesting.
It opens up the door to say 3D in the future so you could possibly do a 3D drawing context.
We just saw something called WebGL which landed in Firefox 3.6 recently, which is a 3D Canvas
API based on OpenGL. And that's really exciting work. That stuff is not formally a part of
HTML 5, but it's experimental, interesting things that's happening out on the edges that
started to gain interaction. Once you've got your contexts, you can set the fill style.
Here we are saying, make anything that we're going to draw, fill it as red. Here we are
drawing a rectangle. That's the X, the Y, the width and the height. Here we are adding
opacity. So we say RGBA, that's going to make 50% shaded blue rectangle. There we are drawing
the rectangle. And there you go. There on the right, you see the two things that we
just drew. You see a red rectangle with the partially opaque blue rectangle on top. So,
I want to show you some demos. A lot of people ask, how do SVG and Canvas fit together. But
what's interesting is they both fulfill different use cases. I will touch on that. But I want
to show you something really unique, a really great way that they integrate together. This
is the Mozilla Firefox download page. What you see on this page, you see a map of the
world. That map is drawn using SVG, it's markup. And then you'll see occasionally a little
yellow boom, dot show up in a specific location. Those are drawn with Canvas. This page keeps
the connection open to the server, so that it has streaming events, and it records whenever
anyone downloads Firefox 3.5, where in the world are they downloading them. The thing
I love about this page is it really shows when to use either technology, and when it's
appropriate. SVG is great when you've got graphical assets like a map of the world or
maps in general or a drawing of a tiger for example. That's a really appropriate thing.
And you can bring that in. Canvas is really good when you want to add drawings on top.
SVG is good for interactivity. So you can play these things together in order to use
their strengths where appropriate.
This is a really cool demo of Canvas. Everyone's played Doom. This is not a first person player,
it's a first person gifter, as we walk around. So this entire thing is drawn with Canvas.
And you can't see, but I'm using my keyboard to walk around. Again, this is a really good
use case that shows Canvas. It doesn't have mouse interactivity. Canvas is really good
if you want to create games that are keyboard driven. SVG is good if you want to create
interactive mouse driven things. So Canvas is great for creating a side-scrolling game
for example.
This is an interesting population demo. Over here, we see sort of demographic information
showing the sort of the number of men and women in Germany. Now, this right here is
SVG. This is normal HTML. This shows them integrated together. The SVG is right in the
page using HTML 5. What's really cool is what makes this, and you see as we run over, this
is just using JavaScript that adds itself, just like you saw with the samples on mouse
over, to show further information there going in. What's interesting that makes this unique
is in real time we can change the language of the image. So if you were to push down
a static image, you couldn't dynamically change the language of the page and the data. And
you also couldn't do the interactivity. So this shows one of the strengths of SVG, you
can think of them as, as, information-dense data that you can push down. That, those are
really a unique way to use SVG. Another great example of Canvas is Bespin. This is a graphical developer's
editor created from Mozilla that allows you to do all sorts of interesting collaboration,
social sharing right within. The whole thing does all of its drawing through Bespin. A
really, really cool use case. And finally, I want to show you one last demo of these
two technologies.
This is an atlas that shows all of the results of the German election. It's information dense.
We can drag it around. We can zoom in. Again, on the right here is HTML, on the left here
is SVG, that's natively integrated. Of course, as we go over it, we can update what's going
on in the HTML. We can break this down by different political parties. So here you go.
You get kind of a sense of both technologies. So a really natural question is when Canvas
or SVG? When should you use one or the other? So SVG is actually what's known as a retained-mode
API. In graphics, you have retained-mode APIs and immediate-mode APIs. And you need both
for different situations. SVG is higher level. You want to use it when you need import and
export, like I said, of graphical assets. You can load in the Illustrator and the Inkscape.
Whenever you want to create easy user interfaces, because SVG is a retained-mode API, that means
there's a tree of everything that you've added to the screen. So it's really easy to do hit
detection and adding events to things 'cause you can just add your listeners somewhere
in the tree. It's interactive. It's good for medium animation and it gives you a tree of
objects. So when should you use Canvas? Well, Canvas is a lower level and depending on your
project, that's a strength or a weakness. It's really good when you don't need that
tree; when you don't have mouse interaction; when you have just keyboard interaction like
with a game. When you have a tremendous amount of high animation, especially if it's not
interactive, Canvas is a really good choice because the tree just gets in your way. You
don't need collision detection. It's JavaScriptcentric. It requires some more bookkeeping in order
to do what you need to do, but that can be a strength depending on your application,
and it's really pixel-oriented. So really depending on your application, you need to
ask yourself, what am I trying to do, and you need to use the right one. If you have
something that's sort of mark-up appointed, that it needs to be interactive and you end
up using it on Canvas, you're going to rebuild the lot of infrastructure that SVG gives you
and vice versa. If you try to do a thousand bouncing balls that aren't interactive or
a side-scrolling game with SVG, you're going to fail. So choose the right one. We need
both. So where is this supported? Well, both Canvas and SVG have excellence support across
all the modern open-source browsers. And something that's really cool. I want to briefly touch
on over at Google, we're working with others in open-source community to create a drop
in JavaScript Library called SVG Web that brings SVG to Internet Explorer so that you
can now deploy SVG to close to 100 percent of the installed base. I want to play a very
short video that sort of shows you SVG Web. It's one minute. I just want to mention, actually,
in just about two weeks, the SVG Open Conference will be talking more about SVG Web. We're
working with Wikipedia. They're doing some very cool SVG work. They'll also be using
SVG Web Toolkit to have these images work on IE. And so keep this in your radar, some
interesting things, we're doing some interesting things there. So let's talk about HTML 5 video.
So currently video is complicated and it's outside your control. So at this point, I
like to say in 2009, video really should be a part of the browser. You know, multimedia
is obviously here to stay on the web. It's an integral part. It needs to be a part of
the basic web platform at this point. What's so cool is that HTML 5 now gives you a video
tag that really works very similar to the image tag. You don't have to have really complicated
objects or plug-ins; video just works. So let's look at some example markup and what
that looks like. So you have a new video tag and there you point to your video file and
you can add attributes. There we've added the controls attribute, which will cause the
browser to give a nice little sort of control bar with play and stop. You can drop fallback
content on the inside if your, if that browser doesn't support the video tag. Now, what's
really interesting is, oh, one second. Technical difficulty. Lights went out in this room.
What's really interesting is the different browsers that support HTML 5 video support
different codecs. So at this time, you generally need to provide an Ogg [ph] version and what's
called an H.264 version and that's straightforward. You just drop in what are called two different
source files, and you can give the type. What's really cool is that again this stuff is a
native part of the browser. To script it is really straightforward. There we are grabbing
the video tag from the page and playing it. And there's a whole host of APIs around video.
You can have call backs when different events happen. You can draw on to the video element
in order to add your own custom interactivity. You can do all sorts of cool stuff. And I
will show you some of that.
This shows right there, you see there's the browser control that it added. This is an
Ogg video showing a FireFox promotional video that's in Ogg using the video tag. Now what's
really cool. as I said, this stuff jumps outside the box. So as it's playing, we can use JavaScript
to rotate and change what's going on. That's what's cool when things are a part of the
browser. This is a mockup of YouTube using the video tag, the HTML 5 video tag. Now,
what's cool is right here, this is HTML 5 video. It's not any other plug-ins. And each
of these little thumbnails is the HTML 5 video tag as well. And what's cool is they just
have some little JavaScript on them that says, "On mouse over, play," like you saw; "On mouse
out, stop." So we have some small thumbnails. And if, and I actually like to crack open
this page because I think it's a great example of a lot of different HTML 5 things going
on. So let's look at the source of this page. At the top, we see the HTML 5 doc type. We
see the HTML 5 header tag. This actually allows you to define a header, sort of something
at the top of your page. Here we are just sort of saying what the page is. We've got
the new HTML 5 nav element. This says that the following things are navigation and so
we fill that out. And then we've got the HTML 5 article tag. The article tag says that here
is where the real content of the page starts. So that helps search engines. That can help
anyone who wants to script a page and sort of understand it. So the article tag surrounds
where the real content is and then the header, the nav, that allows you to say, "Oh, that's
the chrome of the page." Within an article you can have various sections. So here's the
HTML 5 section tag. So our main video on the page is one section. Our list of thumbnails
is another section. Here we are, we see the HTML 5 progress tag. That allows you to show
as you're loading something how much is loaded. Here's the meter tag. So that helps with the
common use case of having little stars to rate something, which we you see all over
the web. So that's a way to actually do that with less scripting and less custom code.
And let's find one of these video tags. Here's one of our thumbnails. So auto buffer says,
"Hey, start loading this in the background even if we don't play it, that's going to
make the performance better when you run the mouse over." Loop says, "Just keep playing
this over and over, and over in a loop." There we are providing the source and so on. So
this is the, I just like this page, they're just using a lot of different HTML 5 elements,
it's a good showcase. And I think they use the footer tag as well at the bottom. So just
like the header tag, the footer tag is where you can put copyright information, other aspects
of things that aren't part of the article. So the video tag is well supported, it shows
up in Firefox 3.5; it's in Chrome; it starts in Safari 4; it's in Opera. The one thing
right now is there's essentially two codecs. Let's put this one known as the Ogg, sort
of Vorbis codec. And then there is H264. At this time the safest thing is just produce
both videos in both formats. There's open tools that can easily do that, it's a pretty
straight forward process. So let's look at the Geolocation. So Geolocation, this is one
of the things I'm really excited about. On this page, you see all sorts of things that
are possible once you have Geolocation. You can do CRM systems, social applications become
really, really interesting with the location. Ads of course, games, people haven't really
tapped into that one yet. That one is going to be really amazing especially when you combine
augmented reality, photos, and so on. Now, what's interesting is, most of the HTML 5
Geolocation back ends don't just use GPS and don't just use IP. They also tend to try to
grab the Cell ID and the WIFI to bring in more data. So having all three of these, you
only need one really to get location. They help you kind of trade off different design
constraints to get the location. But that actually happens in the background, you don't
have to be as concerned about that. So what's really cool is we now finally have browsers
that are location enabled. The latest rev of the iPhone OS has geolocation, Firefox
does and so on. It's now in enough places to do some really cool stuff. So let's look
at the API. I love this API. It's so straight forward. You get a new object called geolocation
that lives in the navigator object. And you call get current position, and you give it
a call back that will receive the location when it's ready and you get a position object,
and this object is really straightforward. You can grab the coordinates. There we grab
the latitude. We grab the longitude. And then you can pass that to some method that can
do something with that. Here we have a show location method that might show it on a map
for example. Now what's really cool is there's actually lots of other things on here, you
can find out, you know, what's the degree of reliability of that, sort of what's the
resolution so you could draw a circle, depending on how well you know the location and so on,
but the basic use is really straightforward. I want to show you a prototype of Google Maps
that uses this API. Here at the top, here's how we see how it becomes secure. No website
obviously should be able to reach your location unless you give permission. So it says, "Hey,
this website wants to show your location." You can give permission or not and you can
remember it. It thinks a little while and boom, it figures out where I am and that is
where I am, I'm downtown in San Francisco right now. So where is this supported? It's
in all the browsers. For Safari, it's on the iPhone currently but it's not yet on Safari
desktop. Now, let's look at the app cache in the database. So Web apps, if we really
want to keep them evolving, they really need to be able to work everywhere. You don't want
to use your web-based word processor or web-based address book only when you have a network
connection. It's important to be able to use it on airplanes, when you have a spotty internet
connection, perhaps you're overseas. Maybe you're in a dead zone where there's no WIFI
or cellular connection. So when you really critically need your Web App, it needs to
be available. The HTML 5 database and app cache work together to help provide offline
Web access. So before I show the code, I want to show you a cool demo of both of these together.
Here are some old messages, actually, they were already saved. We can add messages. We
can make new notes and delete notes. And then, if we quit the browser and come back, we will
see our latest data. And that is all being saved into the local database. So let's look at this. So the first aspect
is what's known as the application cache. This is what I like to call, it's a super
browser cache. We can't depend on the browser cache to have everything we need for our web
application for a number of reasons. One, things may have timed out and there may not
be stuff in there that we need. Maybe the user never went to some aspect of an application,
but you still want to go to it when you're offline. So the application cache, think of
it as a super browser cache that you control as the application writer, and it's really
straight forward to use. The first thing is you create a special file where the first
line says cache manifest and then you provide all of the resources, the HTML, the CSS, the
images that you want to take offline. And here we have all the things for that sticky
notes demo you saw. Then, in your HTML on the body tag, you add a new attribute, you
say manifest equals and then you point to your cache manifest. The one other thing that's
not shown here is on your web server, you make sure to have the cache manifest have
a certain mind type that's unique, that just, that's for this offline app cache manifest.
And that's it, that's really straight forward. At that point, when the browser first sees
this, it will take those resources, bring them locally, and then automatically in the
background, periodically see if they've updated to pull down the fresh version. And now they
are available for the user to actually see your user interface because the files are
available locally. So let's look at the database. That's the other major aspect of the HTML
5 offline abilities. What's really cool is, this is a real relational database so you
can do some cool stuff with it. To use, the first thing is you open a database. So here
we see, you give a database a name, you give it a version so that you can know what version
you're working with if you need to migrate data. You give it a title. Here we say, "Example
database." This would be shown to a user if, in Safari 4 for example, a user can go and
pull up a list of all their databases through the preferences or through the developer tools.
And then, you provide an estimated size at the very beginning of how big your database
is, and here we say 200K. When that happens by the way, the first time, a user will be
prompted, do you want to allow this website to store up to 200K of data and they'll give
permission or not. Then, let's look at an example sort of save-me method. Here we are,
we're taking, sort of, everything we need to save in one of these nodes. So we take
an ID, some texts, a time stamp of when it was made, where it is on the screen, and the
z-index of how it's stacked. So the first thing is, once you've opened your database,
you get a database object, you need to do everything as a transaction. And you call
a db dot transaction, and you give it a call back function that will be called when the
transaction is ready to go. The reason you need to do this is because the web is a very
unforgiving environment. Users could quit your application right in the middle. They
could crash their browser. This isn't--this is a tougher environment than a traditional
desktop application. If you put everything into a transaction, you're already set up
to make things more reliable. Once you're inside the transaction, then you can actually
execute SQL by calling the execute SQL method, and you provide normal SQL. Here we are, we
are saying insert into a table called WebKitStickyNotes we made. There's the columns, and then we
provide the values. One of the--you provide all your values where you want them to plug-in,
you put a question mark, and then you provide an array that will fill in any of the new
values, and there we go. One of the other things I should mention is not only are the
transactions asynchronous in order to help in a more unforgiving environment, it also
helps performance. It means that the browser can execute the sequel away from the user
interface thread to keep things from locking up, and really give a better experience. And
this one is in all the modern open-source browsers. It's currently only on Opera mobiles,
not the desktop edition yet. Now, Web Workers--so, sort of, using all this JavaScript, it's kind
of a double-edged sword, right? We can do more but that also means we can end up not
writing apps great that end up, sort of, freezing the browser, causing it to run slowly. If
you have a lot of JavaScript,JavaScript runs in the same thread as the user interface of
the browser. So as it's sitting there running, the browser won't respond to the user clicking
around or if they want to go to another tab. So as things get more powerful, we can end
up hosing the browser. So what's really cool is HTML 5 gives you something called Web Workers,
and this lets you run JavaScript in the background in such a way that it won't hose or kill the
browser. I want to show you an example that really illustrates this. Nothing really shows
us more than trying to find prime numbers. The field of cryptography is really based
on the fact that prime numbers are hard and computationally intensive. I want to show
a sample that tries to find prime numbers using traditional JavaScript without Web Workers.
We click "Go", and you'll see that the browser is totally locked up. As a matter of fact,
it doesn't even report a prime number yet, it's still working. Things are bad. And I
literally, have to kill the browser. That's bad. We don't want to do that. Let's look
at good primes; this is using the HTML 5 Web Workers API. We click "Go" and we see primes
coming in, things are still responsive, we can still interact with the browser, and it's
very fast and responsive. Very cool! Now, all these pieces come together, again, that's
what's so cool. You're going to see these things don't just live in a box. You're going
to--I want to show a really cool sample that brings together HTML 5 video, and the Canvas
tag, and Web Workers to do something that literally, a year ago, if you'd ask me, "Would
people do this on the web?" I'd say, "You're crazy." But someone did it on the web and
it works well. Okay. So what you're looking at here, is I'm going to play some video in
JavaScript running on a Web Worker, is going to get the pixels from the HTML 5 video; process
where people are moving; and then use the Canvas tag to draw bounding boxes over them.
So you're going to see someone walk across. And you see the green and red, that is doing
bounding box calculations. It's figuring out where people are. I just think that's amazing.
As someone moves, it's been motion-tracking. And of course, it could stay responsive as
the video comes through by using Web Workers. All right, so now that you've seen this being
used, let's actually look at using Web Workers in your code. So the first thing is, you have
to put all of your Workers into a separate file, and you ìinstantiateî a new Worker
like this. The thing to know about Workers is they need to be siloed from the rest of
your JavaScript because they will run in a different context. They can't access the screen.
So they can just do work. They can--they actually can do XML HTTP request calls. They can access
the database, and you actually pass the data back and forth for them to work with, and
they hand you the data back. And the way you do that is you set on message events. So over
on the browser side, you see worker.onmessage and you give a function that will get called
when the worker talks back to you. And here we are grabbing the event and I'll put in
the data. You could imagine taking that data, such as, from that video tracking, and that
data may be, here are the coordinates of where the person is. And you could use--and then
use the Canvas tag to draw on the video. Over on the Worker side, you just provide JavaScript.
Here we are, we have a find primes method. We would plug a prime number algorithm in
here. And once we found a prime number, we're going to send the message over to the JavaScript
side, and post message is a magic method that lives, that allows you to send something over
to the browser. So it's really straightforward. You just sort of toss these events back and
forth. And this one is well-supported as well on Opera, and it's only on the mobile edition,
but Web Workers are already across Chrome, Firefox, and Safari. So that brings us to
the end of our training today. This is really just--just the start. Like I said, HTML 5
has all sorts of interesting things. You got a taste of that with seeing some of the mark-up
of the YouTube prototype. And so I encourage you to begin working with these things, create
really cool demos and sites. And thank you so much for your time.