Pustaka Javascript : Templating Engine - Yo-yo

Ada banyak sekali templating engine dalam bahasa Javascript, beberapa yang terkenal dan mungkin kalian gunakan ialah Mustache, EJS, Handlebars, Jade, dsb. Kali ini, saya ingin berbagi pengalaman menggunakan salah satu templating engine anti-mainstream yaitu yo-yo.

Yo-yo merupakan templating engine yang memanfaatkan ES6 template literals. Pustaka ini menggunakan 2 pustaka yaitu bel dan morphdom sebagai dasar pengembangannya. Bel merupakan pustaka yang merupakan template literals ( string ) menjadi DOM sedangkan morphdom merupakan pustaka yang digunakan untuk melakukan pembaharuan DOM melalui dom-diffing terhadap DOM yang asli ( Tidak seperti virtual DOM yang digunakan oleh pustaka ReactJS yang dibuat oleh Facebook ).

Ada beberapa kelebihan pada templating engine ini, salah satunya ialah penggunaan morphdom untuk melakukan pembaharuan DOM yaitu hanya merupakan bagian yang berubah ( konsep yang sama dengan ReactJS ) yang berarti performa lebih baik dapat dicapai oleh aplikasi web yang dibuat. Selain itu, Yo-yo yang berbasis pada template literals membuat pengenmbang tidak perlu memikirkan banyak syntax baru ( contoh: RivetsJS harus menggunakan rv-x ), pengembang cukup menuliskan kode dalam bentuk javascript dan langsung otomatis dapat dimengerti oleh Yo-yo.

Cukup dengan teori, mari kita masuk ke contoh!

var yo = require('yo-yo') var el = list([ 'grizzly', 'polar', 'brown' ]) function list (items) { return yo`<ul> ${items.map(function (item) { return yo`<li>${item}</li>` })} </ul>` } document.body.appendChild(el)

Kode di atas merupakan salah satu contoh resmi dari https://github.com/maxogden/yo-yo. Pengembang dapat dengan mudah menyisipkan kode Javascript untuk memanipulasi DOM hanya dengan menggunakan syntax ${ code } . Mudah dan "vanilla".

Mari kita lanjutkan pembahasannya. Pada baris akhir, dengan menggunakan document.body.appendChild kita sudah menambahkan pada DOM sebuah Element. Ingat, kita menggunakan appendChild bukan innerHTML, yang artinya variabel el merupakan sebuah element dan bukanlah string. Performa yang diberikan appendChild akan jauh lebih baik dibanding innerHTML, banyak artikel di internet yang bisa anda baca jika memang tertarik.

Apakah ini lebih baik dari ReactJS? Saya rasa tidak. Pada https://github.com/shama/yo-yo-perf, temen-temen bisa melihat sendiri benchmarking-nya React vs Yo-yo. Tidak ada yang sempurna. Masing-masing memiliki kelebihan dan kekurangan, jadi yang terpenting ialah gunakan yang ternyaman bagi kalian. Gunakan dan buat sesuatu!

Oh ya, Evius ( www.evius.asia ) versi terbaru yang akan rilis pada awal bulan Februari nanti akan menggunakan Yo-yo sebagai templating enginenya, menggantikan RivetsJS yang digunakan pada versi sebelumnya. Performa yang lebih baik akan kami berikan kepada para pengguna tidak hanya pada web desktop, tetapi juga web mobile.