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.
When I first got into single page apps I was simply learning about JavaScripts and doing dynamic scripting and the browser, it’s just the easiest way to get started I think, it’s like create a text file, start coding something, and suddenly you end up with this interactive app and you can do so much without even touching the server. Then it’s evolved from this, I was working on TiddlyWiki which is a framework, I was working in Osmosoft in London, that’s very unusual sort of architecture, that’s also based on that sort of architecture, and now I’m with the Chrome web store and what I’ve been working with a lot of apps that is also a single page apps just making the most of the web and HTML 5 to do a lot without doing any page refreshes.
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.
4. So you don’t think that single page apps are breaking the web?
No, I don’t at all actually; I think quite on the contrary, they are making the web a better place for users.
I think they’re all used to the standard tools that people have come to know and love like Firebug and Firefox and now Chrome it’s got its own dev tools that are kind of similar in terms of their functionality, they let you inspect what’s on the page in real time, they let you run JavaScript commands so you can actually inspect the state of variables and so on, and they let you see what sort of network activity is going on which is sort of incredible important when you’re running a single page app cause most of them aren’t just something like TiddlyWiki or a game that you just download and never touch the cloud again, a lot of the single page apps are still actually talking to the cloud all the time they’re just not doing a full page refresh and you can actually inspect the traffic that’s going on using these tools.
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.
7. Is that currently available in Chrome tools? You can see exactly what is behind?
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.
8. Which of the new HTML5 APIs you find most valuable for single page web apps?
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.
9. Would you like to explain a little how the hash operator works on a URL?
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.
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.
The first thing if you’ve got a minified code is not to try to debug the minified code as much as you can, and try to work with, try to set up your tool chain right so you actually work on the plain text code and then only compress it at the final stage. But if you are using something like GWT that’s compiling on a server then you have to resort to its own debugging tools but saying there are things you can do, one of the nice things about the web technology is that you can inspect things in real time so even if you can’t see the actual JavaScript very neatly, cause it’s all obfuscated you can still actually inspect the state of the DOM and so on so you can do a little work there too.
There are a couple of things. Firstly, with a scripting tool like Selenium you can still test a flow trough just interacting with a single page app but there is also the aspect that I think people miss in the JavaScript world a little bit, cause I come from a enterprise Java background and even though that tends to get trashed by people who want to do dynamic hacking. I think the dynamic way is a lot better but at the same time we give up a lot of things too that seems to have been forgotten.
I’m talking about things like dependency injection and mock objects, testing with those sorts of things to actually break things down and have an architecture that is easily decomposed into modules and can be hooked together into different ways or wired up together into different ways so that you can actually test minimal scenarios as well and testing outside of the browser.We’ve got a lot more now, there is a lot of excitement about Node.js for instance, so we’ve got better tools for testing JavaScripts on the command line and making sure things are automated.
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.
15. Is there some process where these apps are audited for security or?
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.
17. So you basically create a window it has some property like visibility?
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.
Right, things like GWT, it’s down to personal preference for me, or since the whole Ajax revolution came about, I’ve been very keen on doing things in JavaScript. I think it’s a very powerful language and certainly can do a lot of things, cheat a lot, but at the same time people who were coming from a Java background or if they are familiar with all the tools, I can’t see what’s really wrong with being able to keep on using it can be a nice success story in some cases. For instance I had a partner who had an android app that was written in Java and he was very quickly able to turn it into a rich web app. Some web purist would say it’s not ideal but it doesn’t mean the code is obfuscated and so on because it is compiled but at the same time he was very quickly able to get it up and running. So in practical terms it was of great help to him.