As mentioned in an earlier post, I went to Bologna this weekend to attend From The Front, a conference about Front-End technologies. These are my impressions.

The day before the conference day, four different workshop took place at Palazzo Isolani, an ancient, refurbished historical building in the center of the city. I went to the one about “Mobile Web applications", hosted by Remy Sharp.

Due to the small amount of people (about 10-20 per workshop), the session could be held very efficiently, allowing questions by the participants at any given time, and proceeding quickly through the course material.

Day 1 - The Workshop

The workshop began started of with the topic of mobile frameworks, like SenchaTouch, the Mobile Boilerplate, Impact.js and jQuery Mobile. The latter was then used to implement an example website that we could preview on our cell phones with the help of a local python HTTP server.

Without going into too much detail, the purpose of this task was to illustrate the possibilities of mobile development with today’s tools, which also involves dealing with the constraints of many devices, a topic we discuss later on during the course of the workshop.

Next, we got into the topic of debugging and the fact how much it sucks on mobile, given the currently available tools and the amount of different handhelds one has to deal with. The followign solutions however already provide a pretty decent way to face tricky tasks such as DOM inspection, network monitoring and console output:

  • Firebug Lite: Not recommended anymore
  • Allows remote debugging via the injection of a JS snippet
  • weinre: Enables the Webkit Developer Tools for remote debugging
  • Adobe Shadow: Synchronizes mobile devices with the desktop browser for debugging, also includes weinre
  • iWebInspector: A web debugging tool for iOS simulator
After that, we were introduced into several (technical) pitfalls of the mobile world, such as  touch events (and how to make them work on IE Mobile), CSS3 animations (and how to enable hardware acceleration) and the position:fixed attribute on mobile devices.
Another unit of the workshop was about performance. One of the most important techinques is to reduce the amount off HTTP requests and download volume. The Inliner is a tool to grab all your page’s resources (like external JS, CSS and images) and compress it so that you end up with one single file. You might wonder how this can be accomplished for images. Here’s an interesting post about this topic.
Some very advanced websites such as GMail also implement offline storage, so that you can access your mailbox even when you’re not connected. Jake Archibald, who gave a talk on this topic the day after, did some great research and you can check his talks’ slides at SpeakerDeck.

Here are some impressions of the first day at the conference.