Previously I blog about Sencha and did mentioned about the advantages of building mobile web apps as compared to native client apps. HTML5 has great potential in building mobile we apps and James Pearce is ready to show us that potential. He and “his team” started WhitherApps.
WhitherApps is a bandwagon-busting experiment. I believe there are far too many native client apps which could have been far better written as mobile web apps. What we’re going to try and do is take a few examples, apply a little reverse-engineering, and rewrite them, warts and all, with web technologies.
The first project for the team is to rewrite the BBC News iPhone/iPad app into a web app based on HTML5. He has already started 3 blog post on the BBC News apps, Part1, Part2 and Part3. If you see the screenshot below he has gotten pretty far.
If you are into HTML5 and mobile apps developer I recommend you to read his blog and follow his journey to rewrite the BBC News apps. Although native client apps will not wither away, I am sure to see more of such project.
After I did the Nearby Tweet makeover, I kinda ran out of idea. But the past few days, I looked into making it more alive and more dynamic. The result is my very own Nearby Tweet Stream. I am sure if stream is the right word, but it does looks like it. This time my prototype is using jQuery (1.4.2) and created a plugin. Wohoo!!
The idea is kinda simple and first plugin. I used 2 set of timer, (1) to retrieve the nearby tweet and store it into queue and (2) to retrieve from queue and display. Did a sketch below
The plugin is still in its infant state and only accept geolocation as parameter. I thought of registering it into jq plugin repository later, for now testing and more testing. The minified version is available here and you can see it live at jqNearByTweetStream. (For better experience, try it in HTML5-ready browser as it requires geolocation).
Here is an example of how to use the plugin.
As you can see above, It is very simple to use the plugin. Must find time to update the plugin, wait for new release ho…ho…ho. Do leave comment if you like the plugin
Finally, JQuery teams embark into Mobile JS Framework. On the 11 Aug 10, John Resig announced the JQuery Mobile Project. http://jquerymobile.com/
The jQuery project is really excited to announce the work that we’ve been doing to bring jQuery to mobile devices. Not only is the core jQuery library being improved to work across all of the major mobile platforms, but we’re also working to release a complete, unified, mobile UI framework
I have been fan of JQuery and look forward to the Mobile version. The framework will work on all popular smarphone and tablet platforms such as Android, iOS, BlackBerry, Windows Phone, Palm WebOS, Symbian, MeeGo and Bada.
So far, there are a few others who are in beta now for example Sencha Touch and YUI 3.2. Let’s see which one will be the lightest and fastest.
The first time I read about designing with progressive enhancement, I was a bit confuse. So, I did a bit of digging around and I find it interesting. You can call Progressive Enhancement t a coding methodology and it is simple in theory: start with the basic and standard HTML only pages to ensure that any browser and device are able to render it in a usable way. Then, when the browser and device understand the style and script, enhance the page by adding the style and script layer.
The idea address concern from the 2 camps, the web developer and web designer. The designer wants to put the latest styles and technology to beautify the page while the developers concern about cross-browser and cross-device compatibility. By testing the browser capabilities, we can target which enhanced experience to layer into the page. One thing I learnt about progressive enhancement is you have think of the site in layer of enhancement, you must structure styles and script to ensure they are loaded proper order. That is the challenging part. :)
Let’s see how the concept work in code. In the script below, you see how the test work. If you pass the test you will get the “enhanced” styles and scripts. You can even have conditional test for IE. You no longer need to write those “complex” script find out the user agent and browser ‘s behaviors. It is clearner also.
The other useful feature of the framework is it is extensible. You can add your own browser capability test. Btw, EnhanceJS does not test HTML5 features this is where the “add test” come handy. You can integrate EnhanceJS and Modernizr or write your own test for that. A simple example below;
More info on the site: