The following post is a long-winded summary of my experiences over the past year. I started a user group, wrote a book, gave up a secure job, and changed jobs 4 times. All to push myself, get uncomfortable, and better understand the challenges that front-end developers are facing in 2012 and beyond. I gained more than I ever thought possible. Sometimes you have to give up everything to find something. Almost one year ago (September 2011), I started the HTML5 user group in Atlanta Georgia.
HTTP requests, heavy/unminified resources, and UI thread blocking should be on the mind of every front-end developer. These are just a few issues that can cause serious bottlenecks in page load times. Having a faster load time equals better search engine rankings, higher conversion rates, and an overall reduction in bandwidth costs. I recently took on the task of coming up with an accurate way to measure all the aforementioned things, in an effort to understand which performance tweaks improved page load times and which ones didn’t.
The Intent of Sharing If you employ share buttons on your site, then you might already be aware of the increased load that comes with trying to make your content social. Allowing users to take action on your specific content and “share” it is a common task. Much like linking HTML documents together, we are now linking apps together that are capable of pushing content to a receiving service via the user.
I ran into a situation this weekend where certain pages of a PhoneGap application were incredibly choppy on iOS versions pre 4.3.x. Apparently, there is a problem with older browsers using CSS3 selectors like div[style*=‘foo’] in combination with other DOM elements. The test case was a little tricky to create, seeing that pinpointing this problem required mucho testing. However, I minimized the markup and CSS to only a few classes and DOM elements.
The AeroGear project had it's official launch last week and I want to review what we're doing and where we're headed. For starters, AeroGear is focused on: Education - Screencasts, Tutorials, and Quickstarts for running any (HTML5, Hybrid, Native) mobile solution with JBoss projects and app servers. Innovation - Many of AeroGear's primary goals are to provide HTML5 extensions for web applications, both mobile and desktop based. Community - We already have several community members contributing examples, demos, and other useful resources.
Update: @_boye has created a perf test which shows the performance of this solution. Remarkably, This iFrame solution outperforms innerHTML on Firefox 7 and maintains the same speed on Chrome 16. The most common approach for receiving markup from an Ajax request is to use innerHTML for placement of the responseText. This method has been widely used (and argued) since the inception of XHR, but it surprises me that it's still being recommended and used not only on desktop browsers but mobile ones as well.