At that point in time iPhone 5 was not released and there was no web inspector for iOS, but it was a lot of fun, because I have found that it is possible to write web applications with great performance. flibbble is a dribbble feed viewer which displays the latest shots without any application frame. Browsing shots uses CSS 3D transforms and new shots are loaded via AJAX. Swiping to the right reveals navigation where users can select which feed they want to browse. Swiping to the left reveals additional information of the shot. Landscape mode displays the shot in original size and state is stored using localStorage.
The main challenge was to maintain a stable framerate for the
flipping effect having a lot of images loaded. I rewrote the
flipping effect multiple times and used Chrome’s developer tools to
find bottlenecks in my code. To gain performance I dropped
z-index and moved animations to CSS so that I just had
to add or remove one class to animate the images. This lead to great
performance with few images, but while browsing iOS’s memory filled
up and performance decreased. On iOS5 I was able to handle this
problem by adding
visibility: hidden to images which
are covered and therefore not visible. This probably freed up memory
and I could display up to 50 shots without performance issues.
Having read lots of good things about iOS6 I looked forward to update my iPhone’s operating system and test flibbble. iOS5 had some rendering issues so I was excited to see them fixed and to try the new web inspector, but loading my app the first time on iOS6 was a huge disappointment. Images loaded way slower, performance dropped with more than 20 images and the app crashed when rotating to landscape mode. This was the moment I stopped working on this project. How could an app which worked perfectly on iOS5 fail so hard on iOS6? I searched for another way to free up memory on iOS6, but Apple’s documentation for web applications is dated and very limited. If you know a way to free up memory on iOS6 without removing elements from the DOM feel free to contact me. Having seen fastbook by Sencha I know that there seems to be a solution.
I have uploaded
flibbble’s current source code
to github and would appreciate if you have a look at it.
The latest beta version is online on flibbble.com. There
is no descriptive web page, but after adding the site to your
homescreen it will load. For the final version I wanted to implement
a better way to switch between users and a history of viewed shots,
but I won’t release it until there is a way to gain the same
performance on iOS6 as on iOS5.