Blog:

At Future of Web Apps Miami 2010 Molly Holzschlag looked beyond the new HTML5 elements and into the technologies that will be powering your web apps in the future. A full transcript is available below.

Watch this and other videos from Future of Web Apps Miami 2010 on our Vimeo channel

Transcript

Ryan: Next up, we have someone I think is absolutely awesome in the HTML 5 area and she’s a real visionary and understands what’s going on. We asked her to speak about HTML 5 and how it’s going to affect you, who are building web apps. Please give Molly a big welcome.

Molly: There you are. Hello everybody. I’m Molly, molly.com, @molly.com, all of that. My real name is Molly Holzschlag, but molly.com seems to work better. How many people think I should make that my official name?

Anyway, I’m here to talk about HTML 5 because this is the Future of Web Applications, and while HTML 5 is happening now, there is still a lot of future stuff. We don’t expect to see a spec until – anybody know? 2022. What did you say, 2020? Yeah, 2020-2022, somewhere in there.

Does that mean that HTML 5 is that far off? No, it does not and I’m here to kind of hone in on some of that stuff. It’s a fast-paced session today. I’m going to hone in on a few critical pieces of interest to people and then tomorrow afternoon I’ll be doing a full afternoon workshop in which I get into the really nitty gritty.

From you, I want you to randomly shout out what you feel, not what you think but what you feel when I say HTML 5. animation, let’s hear some more clear things. iTags, mobile, Flash killer – who believes it? Blink tags. Very witty. Of course, this is great; blink tags are included. Do you know why? HTML 5 is trying to be inclusive of all the things we’ve already done on the web, and say if this is what has been done, then we need to be supportive of it at least in some way, even if you are going to be sending our good friend IE 6 some vanilla content, while some progressively beautifully enhanced materials to other browsers, the fact of the matter is that content still should be available. It’s a fundamental premise of the things that we do.

Let’s take a look at some of the exciting things. I honed in on a few topics that I thought would be of interest in HTML 5 and it’s called “The Future of Web Apps”. One of the really interesting things is its origin of the HTML 5 species. It came out of the WHAT working group, which is also known as the Web Hypertext Application Technology working group. This should give you a big clue as to why HTML 5 is really changing the way we are going to be making our web apps. It emerged as not just a solution to adding more semantics to the language, but also to embrace that which has come before, to embrace that which will come in the future, and especially to understand that the web is as much building sites now as building applications.

It is “baked in” if you will, forgive the corporate speak, to the actual language. That has been ported to the W3C in a way, but interestingly enough, the WHAT working group and the W3C HTML working groups are working side-by-side, and not always in agreement. This adds to the controversy and if you follow along on the HTML 5 – I don’t know how many people here are actually reading the public mailing lists on a regular basis; one guy, a brave man, because the volume is insane. Are you a member of the working group? Yes, so an open working group. We have approximately 800 working group members that are invited experts. This is the only working group under the auspices of the W3C that is, in fact, completely open.

Yes, let’s take a look. The first thing I wanted to talk about in this short talk today is Canvas because people have a lot of questions about Canvas and what Canvas really means for the web. In general, I’d like to say Canvas is essentially the drawing API; that’s the terminology that we use, the drawing API for the web. We draw, however in JavaScript. We could also play around with SVG in this case, but JavaScript is the predominant language that we use for Canvas.

In this film here, what I’ve got going on is this is a bit of work that somebody’s put in, very complicated work, and actually has created an ability to mess around with shapes, transforms, and transitions in Canvas. What you’re seeing here, it’s a wonderful site – it will be in the slides. You can go check this out. The person who is running this has actually created quite a lot of interesting interfaces.

What I loved about this example is it really is a design tool, vector-based, using JavaScript in the Canvas. I find that’s a very intriguing and compelling thing when we talk about web applications. Similarly speaking, you can do something as simple as a very easy animation or something as complex as an entire game. But there are some problems.

First of all, it’s controversial. Part of the reason is fundamentally it’s not accessible. We haven’t figured out how to make regions of Canvas more accessible and people are coming up with different ideas. Some people have suggested image mapping, very interesting stuff, because that will allow you to create regions within the Canvas and to have some fallback there.

Discussion on that is going on. There is an entire accessibility taskforce that is geared to that. There are big accessibility concerns. The controversy about that has caused big rifts amongst the WHAT working group and the W3C, and within W3C, Canvas is at risk. What does that mean? It means that it is at risk of being tossed out of HTML 5 and into its own working group. It doesn’t mean that Canvas will go away.

There are also ownership issues over Canvas. I don’t know how many people are following the buzz that went on a couple of weeks ago. There was a big political issue about Canvas and Adobe, and the whole blocking of HTML 5, and this very unclear conversation that is going on. Clearly whoever yelled out Flash killer knows that Canvas, along with embedded audio and video in HTML 5, can in fact supersede if we are able to solve some of the problems like codecs and licensing and things like that, and it looks like we will be able to solve some of those problems. If we solve some of those problems, we actually do have a standardized means of creating essentially exactly what Flash does but even more accessible, more everything. Because it’s API, everything is scriptable via the DOM – really cool stuff.

But, we have to be aware, and we have to pay attention and stay ahead. Bear in mind that anything I tell you about HTML 5 in this minute may be different in the next, so if I’m wrong I’m sorry. It really is changing that fast.

Another area, this is an area I’m enchanted with, along with Canvas, which represents an incredible shift and move forward. Just as a sidebar commentary, we also see some interesting things happening in SVG. How many people have worked with SVG here? Quite a few of you. SVG, Scalable Vector Graphics, we actually see Microsoft becoming very interested in SVG which would of course open up that entire language for drawing, animations, styling, and we would be using all of those things in tandem. Potentially, we have an incredible rich world of wonder ahead of us. We also have to be very careful, I think, about how we take that forward, and to be responsible to good practices in general.

But this area, the forms, when the WHAT working group began, essentially one of their main goals was to take a look at HTML forms. How many people here just love HTML forms? You get up in the morning and are like “I’m going to design a form today.” That’s some hardcore passion right there.

Me? I don’t know. How many people are familiar with Mr. Eric Meyer, also known as the “Pope of CSS”? Many of you know that. I have a little anecdote I’d like to share with you about Eric. This goes back a few years, but one day I was sitting in my office in Tucson, Arizona. Why I took a job with Opera Software in Oslo, Norway when I have a home in Tucson, Arizona with swaying palm trees; I’ll never know.

There I was, sitting in my office and I’m online doing whatever. All of a sudden Eric pings me on IM and says, “Hey Molly, got a minute?” I’m like “Sure, what’s up?” He’s like, “I have to style this form really quickly. Do you have any tips or tricks for me?” I said, “I hate forms, go talk to Andy Clark who is good at that.” He goes, “I don’t have time for that. I’ll figure it out.” He goes off in a huff and I continued working. A few minutes later he comes back and says, “I did it!!!” I said, “Great, how did you do it?” “I used a table” – this from the Pope of CSS. So, of course, things have evolved from that point.

Notoriously, forms are not only hard to style, but there is so much JavaScript and so much crap that goes along with them, for lack of a better word, in order to validate, in order to autofocus, in order to do all of these things. One of the things which Web Forms 2.0, which is a subset of HTML 5 – really the heart and soul of a part of HTML 5 came along and said the browser should be doing all this. Let’s save JavaScript for the stuff it’s really good at.

We have some cool things happening in forms now. Many of you will know, if you follow the HTML 5 thing, that Ian Hickson, its benevolent dictator, or maybe not so benevolent but he’s certainly the dictator there and he’s the Editor of the HTML 5 Specs at WHAT working group and the W3C. This is before Hickson so hopefully you’ll be able to see that red but I’ll read it out for you.

This is before Hicksy “BH”. If we wanted to grab autofocus on an input in a form, we would basically have to stick some JavaScript in there, that basically says by ID, let’s go by the search and bring focus to the search. A bit of JavaScript, not a terrible thing, but it’s that extra piece and suddenly we’ve added more gunk and crud to our pages. Why don’t we look at how, in HTML 5, we could do that by relying on the browser’s intelligence?

This is what it becomes, an attribute simply named “autofocus”. That keys the browser – here we have to wait for browser support, but it can be emulated in JavaScript. That of course brings autofocus to that input immediately in the supporting browsers. Gone is all that extra JavaScript that will eventually pile up in your document to get this sort of thing.

Similarly is forms validation. An enormous issue – how many people love doing forms validation, writing the scripts and making sure everything works, and going through all that. You love it right? Come on, where is your form love? Come on; I love forms validation – who’s with me? Ain’t going to happen. Okay, I don’t love forms validation. Alright now watch this.

You know, if you want to validate a form and if you want a field to be required, how about the idea of simply saying this field is required? You think maybe somebody would have thought about this. Now they have. When this happens, immediately the browser is now responsible for that form’s validation. I actually have a prototype in its very early stages that I can actually show you this in action. I’m going to do that if I can find my glasses, because – there is that aging thing going on.

Speaking of Canvas, do you remember I mentioned that you could actually have a full game? This is all done in Canvas. That is a Canvas game and I’ll show you the code for that later on if you want.

Here is an example of an early prototype that I’m working on. Please excuse the styling. It’s nothing fancy but I wanted to show you. Automatically I have an input and I’m able to fill in my forms here. I’m booking for a hotel. I want one occupant, two night stay, a different room, all things that you would be familiar with.

What should I be? Baroness, Frau? Okay, I’ll be Baroness. I’m Baronness Molly Holzschlag, but let’s say I don’t put in my billing address and I said I’m going to complete the reservation. Notice where the target goes. It goes to the first area that I forgot to fill in. So I’ll put in some information there. Blah, blah, and then I can go on and maybe put a postal code. I will give out my credit card details to everybody in the room right here. I have read and of course I have left that blank. Guess what, it automatically goes to the first unrequired thing.

Do you like forms better now? Just a little bit. Isn’t that cool? Yes, I did it. It’s all mine. Thank you – I’m here to show you what other people have done. Actually, this prototype – I have to give some props; Dean Edwards of IE 7, IE scripts fame. Does anybody recognize that name, JavaScripter – he’s working on this prototype with me. We are actually going to do it up nice so we have a really robust working prototype of as much of the HTML 5 spec as we can actually figure out implementing. He’s the JavaScripter so he’s doing the emulation.

This is actually an interesting project to work on because what happens is this is what implementers have to do. Because I work for a software company, Opera Software, and we built a browser; you might have heard of it, there are about 2% of you who use it in the United States on your desktops. We own the world on the mobile space. Also, your Nintendo, Wii, and Ford; it’s amazing where Opera goes.

It’s been a fascinating adventure to work for them because you get to see exactly how this stuff gets implemented, how challenging some of it is, how easy some of it is, and how it’s sometimes very tough. Getting a prototype done first has been extremely helpful, I think, in envisioning. That’s one of the important design principles of HTML 5, is to make sure that everything is clearly spec’d out for implementers. That is why the current spec is 900 pages, if you print it out.

If you get to the spec and you think “I’ll print this out for some light reading on the plane,” don’t do it. Most of it is very hard to read because it’s like taking a regular W3C spec and reading it, then making it only for implementers. It’s that much more confusing.

Another thing that is very fascinating to me about where we’re going in applications in the future is the browser is becoming everything. Not only is it now becoming the interpreter of forms, and we’re not pushing JavaScript out of the picture; in fact, JavaScript becomes ever so much more important, but for important stuff, not just piecing little things together. The browser now has to be responsible for that.

One of the fascinating things about HTML 5, and believe it or not, the people who are doing a lot of work on this is Microsoft, with Internet Explorer. They’re very much into the storage on the client side. We have offline web apps. People are probably familiar with Gears. This was not done in HTML 5, but Google has stepped back and said we’re going to do it in HTML 5 now. Basically it’s the idea of using caching, within the browser to hold all your information so that not only are we building applications out there on the web but we’re bringing those applications to our desktop as well, which is fascinating to me.

Client-side data storage by session, or persistent. This is the way that looks, but again, look at what is smack in the middle – the web browser. What HTML 5 is doing, in my opinion and the best way I can see it, is it is making the web browser the most important piece of software that we use. That means for those of us who work and build browsers, we have to get our acts together, more than ever.

Fortunately, everybody is working on it. There are some APIs or various aspects in HTML 5, but we have to be very careful because things like geolocation – HTML 5 is starting to turn into an umbrella, like Ajax. It doesn’t always mean that you’re using XMT HTTP requests. You may be using another way of getting that seamless experience, when in fact, under HTML 5 there are certain things that are not there, that have either been broken out or are sort of thought of as HTM5-esque.

Geolocation is one of those but these are all in HTML 5 so drag-and-drop, native drag-and-drop, without the need for any script. That’s very cool when it will be implemented correctly. Cross document messaging, native – get elements by class name. Yes, I like that one. Access key, spell check, key gen, and of course sending SVG which is an XML language, in MIME typed text to HTML.

So, related APIs, these are not specific to the HTML 5 specification, however, they are related – geolocation of course, allowing script access to geolocation data, native JSON support, something really easy. I was once hanging out with Douglas Crawford and he showed me the business card that he actually wrote spec on. It’s that big. In it goes, there we go, level one and two thank you Microsoft for making that available as an open standard XML, HTTP request.

Pretty cool stuff there. To finally wrap it up with time for questions, the one thing that I have not heard too much about – of course, the Palm guys were here, but device APIs – we are really starting to see the revolution of the mobile web. How many people doing mobile sites of one sort or another? Okay, so more and more. I’ve been asking that question for a period of ten years. It used to be zero or one. Now we start seeing many people, depending upon the type of conference it is.

A couple of things I wanted to point out; JIL – Joint Innovation Lab. These guys are working on a spec for widgets and device development and a similar project called BONDI, like the beach in Australia, and it’s from the Open Mobile Terminal Platform, OMTP, and it’s also for widget and device. These two organizations are sort of – I wouldn’t say fighting it out; they probably will end up doing stuff side-by-side, but they do have different infrastructure.

Both have the same ideology, which is to allow scripting access, via AIPs, to data such as remaining battery power, available bandwidth, processor speed, and other aspects that are device specific, especially mobile devices, and that behavior. That is a whole new thing that is opening up, in terms of APIs – again, under the HTML 5 umbrella but not HTML 5 itself. These are wonderful things to start looking into if you are in fact interested in device and alternative device development and mobile development. With that, I can see Ryan standing there. Open for questions.

Ryan: Give her a hand.

Molly: Thank you!

Questions

Ryan: We’ve got time for one question.

Molly: Oh boy, better be a good one. Oh, it comes from the one guy who’s on the working group.

Q: I didn’t hear you say too much about web sockets, so I know that’s probably underneath the umbrella like you were saying, not HTML 5 specific. I know it’s really interesting because it’s almost going to replace Ajax in some form.

Molly: In some ways, but it’s not my – the question is where does web sockets fit into all of this. That is an area I’m not too savvy with, and I can’t honestly tell you if it’s within HTML 5 or being broken off, the same with web workers being broken off into own working groups. This is one of the things we’re finding in general, so the direct answer is I don’t know. If you want to find out together, let’s. Does anybody else know? Okay, so we will find that out. The general answer is these things change so if I had an answer for you at this moment, it might be different the next. Keep your eye on it. I guess that is it for me. Thank you very much Future of Web Apps Miami. I love you.

Ryan: Thanks Molly, she kicks ass as usual. I’m actually going to give you five minutes because we’re going to do the PayPal draw for the iPad. So if you haven’t registered yet, go do that. Then stretch your legs and come back and be prepared to be shocked with Mr. Gary Vaynerchuk, so we’ll see you in five minutes. Thanks.