Skip to content

Mootools dengan Sly Selector Engine

3 May 2009

Sedikit review ke belakang, bulan desember tahun lalu santer sekali berita mengenai sizzle, selector engine yang dibuat oleh John Resig (author library JQuery) yang katanya sizzle ini merupakan selector engine yang tercepat. Engine ini ditawarkan oleh John untuk diimplementasikan di codebase library/framework js lainnya.
Salah satunya mootools.  Tampaknya performa selector engine internal mootools kalah oleh sizzle dan sizzle adalah puncak performa dari engine selector yang ada.

Namun sebulan yang lalu, harald kirschner mengeluarkan sebuah selector engine yang super cepat yaitu Sly dengan ukuran file yang cukup kecil, hanya 3kb setelah diminified dan gzipped. Hal ini mengubah fakta bahwa sizzle adalah puncak dari selector engine yang ada saat ini.

Bisa jadi ini hanya sebuah permulaan dari ‘perang’ selector engine. Beberapa waktu kedepan mungkin akan ada lagi engine baru atau revisi engine yang lebih dashyat.

Bagaimana dengan mootools ? Akankah developer mootools mengganti internal selector enginenya dengan Sly ? Belum ada kabar mengenai hal ini. Namun bagi pengguna mootools yang ingin mengimplementasikan engine ini, ada artikel menarik dari gerrick cheung. Berikut caranya :

Window.implement({
$Sly: function(selector){
return new Sly(selector);
}
});

// Untuk menselect semua anchor di halaman
$Sly('a').search();

// Untuk menselect anchor pertama di halaman
$Sly('a').find();

Agar sama dengan sintak selector mootools, maka bisa dilakukan sedikit modifikasi yaitu $Sly: function(selector)  diganti dengan $: function(selector). Sehingga untuk menselect anchor menjadi $(‘a’).search();

Sangat cantik dan menarik bukan ?

Namun, perlu diingat bahwa secepat-cepatnya selector engine, toh hanya buat seleksi saja, dan bisa dikatakan hampir tidak ada web aplikasi yang membutuhkan 1000 kali select dalam 1 detik. Selisihnya hanya dalam hitungan mili atau micro second.

Kesimpulannya kembali ke pengguna, perlukah third party selector ? jika perlu Sly salah satunya, tinggal diimplementasikan saja seperi cara diatas.

Anyway. thanks harald for such a great engine !

4 Comments leave one →
  1. 24 May 2009 6:27 pm

    Justru selector adalah komponen terpenting (IMO), karena jika untuk memilih suatu elemen diperlukan waktu yang panjang (walaupun berbeda beberapa ms), maka fungsi yang akan dijalankan setelah elemen tersebut ditemukan juga akan lambat.

    Mungkin kita tidak bisa melihat perbedaannya pada website yang menggunakan selector hanya untuk mempercantik penampilan, tetapi bagaimana dengan aplikasi web (misalnya ajaXplorer) yang harus memilih banyak elemen ketika kita membuka satu halaman? Di sini kecepatan selector akan terlihat manfaatnya…😉

  2. cevarief permalink*
    25 May 2009 1:28 pm

    Selector memang penting, tapi kita rasional aja, bikin web apa sih dalam satu page sampe penting sekali perbedaan micro atau mili second tsb, toh ambil contoh standar select sekian ratus element div aja hitungannya hanya 3 ms. Setelah itu selesai tinggal manipulasi DOM nya. Sama juga untuk aplikasi web explorer, saya kira gak terlalu kerasa ya.
    That’s why saya serahin lagi ke Anda, kalau memang perlu dan butuh selector untuk puluhan ribuan elemen ya mungkin saja selisih waktunya bisa signifkan, tapi kalau cuma beberapa micro atau mili doang sih mending pake selector builtin saja😀. Cobain deh compare perbandingannya di http://mootools.net/slickspeed/.

  3. 23 June 2009 5:31 pm

    Numpang tanya lagi dooong T_T Gimana sih caranya pake yui?? Map baru banget neh soal mootools T_T thx b4

  4. cevarief permalink*
    23 June 2009 6:49 pm

    Maaf mbak, saya belum pernah pake YUI. Salah satu cara paling mudah kalau mengenai how to seperti mungkin cari screencast/videonya lalu tonton. Biasanya jauh lebih cepat untuk ngerti.
    Saya sendiri untuk framework/library UI Javascript lebih suka extjs😀
    JavaScript aslinya sendiri sudah familiar kan ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: