Dua hari yang lalu DapurMasak merilis kembali versi mobile website yang lebih ringan. Library JS yang kami gunakan untuk versi terbaru ini adalah ZeptoJS.

Berdasarkan pengalaman, development mobile web seharusnya tidak menggunakan Javascript sama sekali. Karena sebagian besar pengguna DapurMasak datang dari Indonesia (obviously) dan mereka umumnya memiliki mobile device dengan spesifikasi low-end.

Ditambah lagi dengan maraknya penggunaan browser yang tidak mampu me-render Javascript dengan sempurna, contohnya Opera Mini. Namun Javascript tetap diperlukan, terutama untuk browser mobile mutakhir seperti Chrome, Firefox dan Safari.

ZeptoJS dipilih karena kita ingin memanfaatkan banyaknya fitur seperti di jQuery namun dengan ukuran yang lebih kecil. Karena ZeptoJS dibuat dengan filosofi download and executes fast, kita diberi kebebasan memilih modul-modul yang diperlukan saja.

ZeptoJS tidak di-support di Rails, sehingga saya menggunakan gem bower-rails untuk menggunakan bower sebagai dependency manager:

https://gist.github.com/1f185854dd461096cdba

Sedikit off topic, ada dua alasan kenapa Opera Mini masih merajai pangsa pasar browser mobile di Indonesia:

Opera Mini menghemat bandwidth dengan melakukan compression pada proxy server milik Opera

Maps are cool, but map APIs are complicated. jHERE solves this problem by offering a simple but powerful map API in the form of a jQuery (or Zepto.JS) plugin.

I'm currently working on my second full iPad app. Due to the piece being very text heavy, I decided to augment my normal CoronaSDK development with an html layer via WebPopups. I thought this seemed like an efficient way to handle all of the copy styling. One thing I needed to make it work, though, was a library to handle touch and swipe events within the popup. A short search led me to XUI, but it didn't seem to handle the touch events in the way that I needed. I moved right on to Zepto and had luck pretty much right away. It can deal with swipes and tweens with quick ease.  One thing I'm trying to figure out with it, though, is image loading. Using the load method returns what I think is the binary data of the image itself. Loading into a div displays all that crazy symbology you see when you try to open an image with a text editor.