00:18:32 video length
Bio Michael Mahemoff is a Chrome Developer Advocate for Google, based in London, always looking at ways to make the web a more habitable place for users and developers. He’s been programming on the web since the mid ’90s, in a range of public-facing and enterprise (Java, what else?) contexts, and is the author of Ajax Design Patterns (O’Reilly, 2006) and a blogger.
QCon is a conference that is organized by the community, for the community.The result is a high quality conference experience where a tremendous amount of attention and investment has gone into having the best content on the most important topics presented by the leaders in our community.QCon is designed with the technical depth and enterprise focus of interest to technical team leads, architects, and project managers.
I’m Michael Mahemoff, I work in Google, on the Chrome team , I’m a developer relations based in London and so, developer relations at Google means doing general like conferences, like this one, talks and blogging, that’s the fun that people see but there is also a lot of working with partners which is also good if you’re working with start-ups doing innovative things on the web, HTML 5, using things like Chrome extensions, working on the Chrome web store.
Yes, there are few of those, the biggest one at the moment that’s on everyone’s mind is the whole aspect of bookmarking and being able to share links and being able to go back use those things that are very standard about the web, don’t come for free with single page apps if you like, are constantly changing page with links that might not be the best user experience but it does actually have the benefit that you’ve got a unique URL to represent what you are seeing that is a really important thing about the web so one of the big challenges there is getting the most of all the dynamic browser activity so that this is a really great user experience but at the same time preserving the meaning of a URL and getting there without HTML5.
No, I don’t at all actually; I think quite on the contrary, they are making the web a better place for users.
The first think to say is that Chrome has got a whole extension of framework that is very powerful and easy for people to hook into, so people can write their own frameworks and there are a whole ton of extensions to support development, but as well as that there is the dev tools and the dev tools are built in, they are similar sort of interface that people have seen with Firebug , they’ve got console, they’ve got the ability to inspect elements in the DOM they’ve got a split so you can do both of those, you can basically split the console out and in the same time do something else, like look at the elements, you can also look at the resources on a page as well so you can look at one of the things you downloaded like images and so on.
But you can also inspect some of these new HTML5 concepts too, so client side storage you can actually see what’s been stored inside the browser against this domain and application cache which is also quite a tricky, it is actually it’s a quite easy API maybe it is actually tricky thing in practice it’s got a few subtle aspects to it and caching is always tricky, right? You never know what’s in the browser and what’s not.
It is. I tend to live on the edge on the Chromium cause I am never 100% sure what’s in the stable version of Chrome but most developers are probably using dev channel of Chrome or not use anyway so it’s definitely, but it’s definitely not there in the nigh-lies or quite possibly there in the stable channel now, which is just went live anyway Chrome 10.
I think in a way all of them are valuable in terms of the user interface aspects just make the single page app better, but there are some that are most specifically related to single page apps and the most obvious one there is HTML5 history because that’s the ability to actually change the URL dynamically. It’s a bit of a dream, like a few years ago when I was writing Ajax Design Patterns the book basically looking at these very early attempts to change the URL and at the time there was this technique that was also quite magical at the time, the idea of a hash that kind of gets trashed right now but is a cool concept that you can change the URL without having to do a page refresh.
Yes, the hash is also called the fragment identifier because it’s suppose to identify a path in the page so the browser should be able to scroll down to that page when you click on a link or when you dynamically change the URL to, the fragment will actually jump scroll up and down that’s why it doesn’t actually do a page refresh because it’s trying to scroll to the right place. The interesting thing is of course now we are actually using we don’t actually have any such element on the page we’re just using it as a cheat basically, as a little trick to force the browser to change the URL that the user sees but not actually do a page refresh. It’s the only way you can change a URL using document dot location equals something without actually doing a page refresh but it does have some downsides so that’s where the whole issue of HTML5 History comes in .
With the hash it doesn’t actually go back to the server so if you actually type in the URL to the server, all the server ever knows is your domain, all it ever gets is your domain that then has to come down and the browser has to interpret it and transform the user interface which is ok it works and people have certainly done that sort of user interface but it does mess with the web; that’s kind of why people say it breaks the web because it means you can’t actually put a URL in and get content coming out of the server that is the content related to that URL.
10. What about other APIs like for example WebSockets? I mean if you are on a single page you need to have a nice way to communicate with the server without doing refreshes. What do you think about web circuits and how can someone debug them? I mean I think currently there is no way to debug them directly from any browser.
Right, there is no browser tool built in that I know of that actually does direct web sockets apart as far as debugging web sockets there are just the traditional methods of sniffing traffic which you can do either on the browser or on the server and just see what’s going back and forth. Hopefully in the future there will be better tools for that, but there is, Chrome has actually started to built in into its extension API the ability to inspect network traffic and that will hopefully once the API become available these things are much more important than any browser tools that are built in, because the developer can scratch its own itch and I think we will see more of that from all the browsers in the future. And as far as just web sockets in general for single page apps, it’s really part of a whole general trend that is allowing a single page app to talk to the rest of the cloud without having to go back to the server for a full page refresh.
And that trend began a few years ago with Ajax when we learnt about how we can do that with XMLHttpRequest and iframes, iframes were kind of a hack, XMLHttpRequest was only single domain, we also developed JSONP technique. None of those was particularly strong for doing things like cross-domain and for doing streaming like we can do with WebSockets, but now we have techniques like WebSockets, WebSocket is great because it’s also cross domain, we also have CORS which is also an important networking technology cross origin domain sharing that lets us do XMLHttpRequest to other domains as long as they get permission.
12. There are some functional testing tools like Selenium that can be very useful at development time in order to replay scenarios and mimic interaction, so you can avoid for example regression bugs as you develop. Single page apps are very hard to combine with tools like that and it’s even harder when you have to work with generated or minified code obviously. Do you have any tips for that?
13. At the early days you didn’t have any decent tools to work with, web developers didn’t have any decent tools, than we got Firefox tools like web developer plug-in that made life a little bit easier, then we got Firebug which radically changed the way we debug the client side, then we got firebug plug-ins which helped a lot then we got similar tools from Chrome and Safari. what would you expect as the next step in debugging tools, because for the last 2 or 3 years it’s been pretty much "evolving firebug" ?
A couple of things, which is the idea of extra API’s that people can use to either write their own extensions or something like Firebug which is already an extension that could be enhanced. I think that is a really important direction, if we can do things like being able intercept all network events and start to write really powerful tools around that and I also think that mobile debugging is a huge area and a huge gap right now that’s causing a lot of pain for the developers so I hope there’s gone be a lot more work for people doing mobile web apps to be able to do mobile debug from their desktops as well.
The web store you can look at it in a few different ways. It’s the idea of installing web apps into your browser but it’s also, and that’s the part that people see the most, but I also think that it gets missed a little bit is being a catalogue of all the web apps that are out there. So if you look for a photo editor you can actually just go to search or instead you can go to the web store now and you can see screenshots of all the different photo editors. You can get reviews before you actually commit to one, because I think with web apps nowadays they are quite complex. Some of them require login because they are rich applications. There is also the monetization aspect of the web apps or web store where people can pay for it.
So there is a commitment in some cases to be able to start getting up and running with a web app and it’s nice to have reviews and so on. People have got familiar with the mobile app store it’s something that developers can hook into. It’s actually quite easy if people got a really nice HTML5 or Flash app that’s already giving that nice app-like experience, it’s task-focused, it’s a Richie’s rich face. It really doesn’t take more than an hour or two for them to go into the web store and submit their app.
There can be but it tends to be because most of them are just the same mode.Because most of them are what I call hoster web apps which is just web app that’s sitting on a website somewhere like you visit just as if you found it from Twitter or Google or something so there are not, there should be the built-in security module of the browser already and that’s part of the whole argument for web apps and using the web instead of using the desktop for instance, the security is sort of built-in. But web apps do have certain permissions like geolocation, notification, some of those things are also built into the browser and other things there is a new thing called background apps which basically let the web app open up a background window which is like a hidden window that can actually run even if the user closes the actual app, so it can do things like notifications and so on, and that’s kind of the privilege that the user would have to be able to see like which of the background apps are running at any given time.
No it’s not, not at the moment , I hope something like that would eventually become some sort of standard spec, but it’s something specific to Chrome in that case.
Yes, it’s using the standard window open in java script so it open up a pop up window but in this case the pop up has a third parameter, you know how there is, window.open() has a set of parameters to describe the size it will be and so on, so it just ads a new parameters that called background, it basically means the window runs not with the user interface but it can sit there and a have script that it can be polling for new information, it could show you if someone is trying to chat with you or it could preemptively download content so when the user clicks on it for the first time it would actually open up the app.
With memory leaks in Firefox 4, Chrome beats firefox as a development platform.