Perjalanan Panjang Bersama Ember.js ~ Blog Indra El Firasy

Ini pengalaman gw akhir tahun 2013 ngembangin sebuah aplikasi dengan menggunakan Emberjs. Bagi yang belum tau apa itu Ember, bisa lihat di website resminya www.emberjs.com. Menurut hemat gw, Ember merupakan framework berbasis javascript yang ditujukan bagi front-end developer. Bagi yang pernah menggunakan Node, Backbone, atau Angular, Ember mungkin tidak asing lagi bagi mereka. Secara umum Ember memiliki peran yang sama dengan Backbone atau Angular. Ember bisa membuat website kita smoothy, transisi antar halaman bisa lebih cepat, tanpa loading browser. Ember sangat membantu dan menjadi pilihan yang tepat jika lo pengen bikin aplikasi mobile web.

Semakin laman tren dunia digital semakin mengarah ke dunia mobile. Sekarang orang kalo mau bikin website, mereka juga berfikir untuk membuat versi mobile. Paling tidak website mereka responsive di berbagai device. Beberapa poin itu wajib lo pertimbangkan kalo mau bikin website buat lo sendiri ato buat project yang lo kerjain.

Beranjak dari situ, mulailah gw berkenalan dengan Ember karena ada kebutuhan sebuah project membuat aplikasi mobile web. Gw langsung terjun ke situsnya pengen cari tau apa sih Ember js itu. Setelah baca sana-sini, gw sedikit mengerti apa itu Ember. Dokumentasi yang diberikan oleh Tom Dale (penemu Ember js) cukup membuat gw mengerti. Sekarang saatnya action. Di sana juga ada video tutorial sederhana pengenalan ember. Kalo lo nonton, lo bakal berfikiran sama dengan gw bahwa Ember is magic. Dari situ gw berfikir ini bakalan gampang pasti. Akhirnya gw download filenya, gw pasang di htdocs-nya xampp, terus buka browser. Blank.

'Uncaught Error: assertion failed: Ember Views require jQuery 1.8 or 1.9 '

Oke, gw pasang jQuery 1.7 ternyata. Gw ganti jQuerynya lalu gw kembali ke browser dan masih blank?

'Uncaught Error: assertion failed: Ember Handlebars requires Handlebars 1.0.0-rc.3

Oke, ini menarik sekali (remes pantat). Gw ganti pasang Handlebars nya.

Sekarang sepertinya sudah tidak bakal ada error lagi. Oke, buka browser. Blank! B L A N K ? ? ? ! WTF!

Assertion failed: Ember Handlebars requires Handlebars version 1.0.0. Include a SCRIPT tag in the HTML HEAD linking to the Handlebars file before you link to Ember.

Oke gw pindahin Handlebarsnya sebelum file ember dan akhirnya muncul juga halamannya. Barusan itu merupakan tahap instalasi doank. Untuk satu produk yang gw kembangin waktu itu, butuh waktu 4 bulan buat first release. Sesuai banget dengan tag nya, kalo gak ada ambisi, itu porduk gak bakal release. Kuncinya kalo mau make ember js harus memiliki ambisi yang kuat. Sesuai banget dengan tag nya ember berikut:

A FRAMEWORK FOR CREATING AMBITIOUS WEB APPLICATIONS.

Ada beberapa poin penting yang perlu diperhatikan saat lo menggunakan Ember js, ini berdasarkan pengalaman gw pribadi aja.

Pahami konsep Ember dan cara kerja MVC ember.

Ember memiliki konsep bahwa setiap url yang diakses, dikelola oleh Ember Route. Kemudian Ember akan me-load data melalui Model, lalu memuatnya di Controller. Terakhir data akan di render ke View. Setiap interaksi yang terjadi di View akan ditangani oleh Controller. Ini konsep sederhana Ember. Lebih lengkapnya bisa liat di situsnya.
Ember menggunakan Handlebar sebagai template nya. Script HTML yang ada pada file index.html akan dibungkus oleh script seperti javascript, tapi dengan type handlebars. Over all semua code yang ada pada file index adalah script-script. Masing-masing script / template memiliki ID yang sesuai dengan nama route dan controllernya. Jika url yang diakses saat ini adalah #about maka template yang akan ditampilkan adalah template dengan ID "about". Ember miliki template default yang akan diakses setiap saat, yaitu template "application". PROBLEM di sini adalah saat lo mau menggunakan sintak jQuery document ready atau $(#apalah).click() dan sebagainya yang berhubungan dengan content atau view, TIDAK akan berfungsi. Meski lo taroh script jQuery di awal / di akhir script html. Masalahnya sintak jQuery udah jalan saat view nya belum dijalankan oleh Ember. So, kalo mau menggunakan sintak jQuery buat ngelola content atau view, pasang di file apps dot js.
Konsisten menggunakan versi ember, handlebars, dan ember data. Cerita singkat gw di atas masih menggunakan ember versi 1.1.2. Saat gw belajar itu kebanyakan masih menggunakan versi 1.0 dan sintak nya beda banget. Saat ini sudah versi 1.4, mungkin ada beberapa perubahan lagi sintak nya.
Develop lah menggunakan browser Chrome. Install extension Ember Debugger di Chrome.

Mungkin itu beberapa masukan dari gw kalo lo mau menggunakan Ember. Terus kapan saat nya lo butuh menggunakan Ember?

Framework yang bagus untuk membuat aplikasi mobile web. Ember dengan magic nya bisa memberikan interaksi yang bagus, transisi yang cepat, sehingga menambah user experience saat menggunakannya.
Ketika lo ingin membuat aplikasi web dan lo cuma punya API dari backend nya. API itu pun terserah, bisa dari berbagai jenis, bisa dari PHP, ASP, atau cari CMS sekalipun. Jika lo pengen memisahkan antara client site dengan server site, Ember bisa jadi solusi penghubung antara kedua hal tersebut.
Bikin slide presentasi di browser. Lo bisa gunain ember widgets dan animation buat menampilkan presentasi ke client atau siapapun dari browser dengan wow banget!
Lo bisa gunain ember saat lo mau mandi. *just kidding
XD

Oke, mungkin segitu aja dari gw. Cuma share pengalaman aja. Sesi berikutnya mungkin gw bakal bikinin tutorial tentang Ember js. So, stay tune!

Thanks.