Last weekend I had the honour of speaking at the Free and Open Source Software Conference again (after having talked there last year and in 2006) which took place at my alma mater for the 7th time now.

The title of the talk was “conquering the mobile web: leverage standard technologies - gain extraordinary results” and it was great fun again. Talking at a conference is - at least for me - quite stressful since I’m really eager to deliver a talk which introduces the audience to something new while at the same time delivering it so that people have fun listening. And so I push myself to deliver at least some demos of cutting-edge features.

If you’d like to try out the demos just point your browser to froscon12.makk.es and scan the barcode using your smartphone. Since the stuff there is some kind of cutting-edge it currently only works on Firefox, in Chrome e.g. you’ll not see a barcode on the first slide, sorry.

I really enjoyed talking talking there this year; the room was packed and the discussion with the crowd afterwards was quite interesting. Here are the questions (and my answers) I still remember (drop a comment if you feel like your’s missing):

You disregarded PhoneGap as not really being a solution to the problems of native apps. I think it is a great framework which leverages the best of both worlds. Do you have any reason for not liking it?

PhoneGap can be great if you really need features that a sole web application cannot offer (like notifications, background operations or camera access). But PhoneGap can lead developers and especially users to the (wrong) conclusion that the app you’ve built is a native app even though it doesn’t use the native UI elements of the platform it’s running on. So the user may start using the app with false assumptions with regards to look & feel and probably performance. PhoneGap is just a compromise. If you keep that in mind and communicate it accordingly, you’re probably fine using it as long as mobile browsers don’t deliver the features you need.

Can you recommend any mobile web frameworks?

No, I cannot. I cannot because the choice of the right framework depends heavily on your experience and your requirements. I myself have built mobile web apps using Google Web Toolkit (and we’re quite happy with it at our company) and not using a framework at all (which suffices if your app is small enough). I know of the existence of jQuery Mobile but don’t have any experience with it. You could also use sth. like ExtJS or AngularJS or one of the many many other frameworks out there. The “Comparison of JavaScript frameworks” Wikipedia page is a good starting point.

You mentioned and showed features of modern smartphone browsers but actually which feature you can use depends heavily on the browser that the user of your application is running. I feel like 15 years ago when you had to implement a feature differently for every browser. Isn’t that a problem now with mobile web apps, too?

Yes and no. We’re in the middle of Browser War 2 in my opinion. The vendors (esp. Google and Apple) are pushing features out with every new version of their browsers which aren’t standardized. This applies to both HTML/JavaScript/DOM and CSS (vendor-prefixes, anyone?). But: Three things are different from the situation 15 years ago:

  1. There are more browser vendors on the market. In 1995 it was a war between Microsoft and Netscape. Now we have Apple, Google, Mozilla, Opera and Microsoft. This leads to less single power.

  2. The vendors have learned from the past (I mean, yes, this really happened). All the vendors are actively and seriously participating in the standards bodies of the web, esp. the W3C and the WHATWG.

  3. Developers have learned, too (this should be obvious :-). Good web developers approach the creation of a web application by using some sort of graceful degradation (which is a really old concept but just now came to fame) or progressive enhancement (keyword “responsive web design”).

So I’m optimistic that the differences in browsers and implementations (which never will be eradicated, standards are just the least common denominator in the end) will not lead to a big “this web designed is best viewed in XYZ” mess we had then.

Regarding offline storage: How can the user ensure which data is stored in his browser?

Every browser I know that implements the Application Cache and Web Storage APIs has a function that lets you clear the offline cache (in Firefox this is under “Tools | Clear Recent History” for example.

In your demo of the device orientation (see here) how have you implemented the phone rotation?

This is just a simple CSS transformation using a PNG image. You can have a look at the source code here.

How have you implemented the server side of your web remote control (controlling the presentation with your smartphone)?

I’ve developed a small server-side application and some JavaScript API called Webchan.nl which I’m using. The Webchan.nl is actually a generic realtime channel with a nice and simple JavaScript API that you could use for everything which has to do with pushing data to a browser/client.

So thank you everybody who attended my talk. Let’s get the open web rolling!