Overview to Moon.js: Part 2

Halo, kembali lagi nih ke sesi Overview to Moon.js bagian kedua. Pada kesempatan kali ini, kami akan membagikan beberapa contoh bagaimana menggunakan fitur-fitur yang terdapat pada Moon.js. Sebelum kita lanjut ke isi, mungkin ada beberapa yang belum tau, apa itu Moon.js? Moon js adalah salah satu library JavaScript yang masih sangat baru. Jadi Moon ini mengkombinasikan aspek-aspek positif dari libraries yang populer. Moon juga sangat ringan dan sudah include optimisasi yang akan membuat render time lebih cepat. Untuk lebih lengkap mengenai informasi dasar dari Moon.js bisa berkunjung ke Overview to Moon.js Part 1.

- Menampilkan Data dari Instance

`el` itu menunjukan bahwa bagian tersebut untuk id tertentu. Contohnya `el: "#app1"` maka yang terdapat pada `data` bisa diakses oleh <div> dengan id="app1".

- Merubah Nilai

untuk merubah value pada `msg` bisa menggunakan:

app1.set('msg', 'Hello Moon Changed!'); 

- Membuat Method

Mirip dengan yang ada pada Vue.js, membuat method/function cukup mudah, hanya dengan

namaFunction: function(parameter)

Berikut salah satu contoh membuat method/function yang me-return sebuah nilai

Khusus untuk yang me-return sebuah nilai, bisa dikeluarkan nilainya pada html, contoh untuk menampilkan hasil dari function diatas adalah dengan

- Menggunakan Fitur If (Untuk menampilkan nilai tertentu, jika value suatu nilai bernilai true)

Maka tulisan "The Condition is True!" akan tampil. Jika kita lakukan:

app5.set('condition', false);

Maka tidak ada yang ditampilkan.

- Menggunakan Fitur Loop
Cukup gunakan `m-for` untuk melakukan looping di Moon

Oke sekian dulu sharing pada kesempatan kali ini, semoga bisa memberikan gambaran bagaimana menggunakan Moon.js yaa!

Overview to Moon.js

Overview
Moon js adalah salah satu library JavaScript yang masih sangat baru. Jadi Moon ini mengkombinasikan aspek-aspek positif dari libraries yang populer. Moon juga sangat ringan dan sudah include optimisasi yang akan membuat render time lebih cepat.

Sebagai perbandingan, berikut adalah hasil minified dari library populer, dibandingkan dengan Moon:
   - Preact - 3kb
   - Moon - 7kb
   - Mithril - 8kb
   - Vue - 25.86kb
   - React + React DOM - 43kb
   - Angular 2 - 111kb

Sedangkan performanya:
   - Moon - 102 repaints/sec
   - Mithril - 95 repaints/sec
   - Angular 2 - 62 repaints/sec
   - Vue - 50 repaints/sec
   - React - 49 repaints/sec
   - Angular - 47 repaints/sec

Seperti yang sudah disinggung diatas, Moon mengkombinasikan aspek-aspek positif, seperti mengambil kemampuan untuk menggunakan JSX dan menggunakan Virtual DOM (mengikuti dari React), memberikan directive yang mudah digunakan (diambil dari Angular), dan menggunakan templating engine (seperti Ember).

Menggunakan Moon sangat mirip seperti Vue, karena Moon berbasis dari Vue. Berikut adalah salah satu contoh dari Moon:

Jika ingin merubah warna, tinggal lakukan:

app1.set('color', 'yellow')

Moon, seperti Vue, juga memiliki built-in directives, yang penggunaannya sangat mirip dengan yang ada pada Vue. Berikut beberapa directives bawaan Moon:

- m-if="condition"

     Penggunaannya mirip dengan v-if, jika kondisi yang diberikan bernilai true, maka tag tersebut akan ditampilkan. Sebaliknya, jika kondisi bernilai false, maka tag tersebut tidak akan ditampilkan.

- m-for="item in list"

     Penggunaannya mirip dengan v-for, isi yang ada didalam list akan dikeluarkan oleh m-for.

- m-on:click

     Penggunaannya seperti on-click pada JavaScript biasa, akan menjalankan fungsi jika tag tersebut ditekan.

Oke sekian dulu Overview dari Moon js nya, semoga kebayang dengan Moon yaa!

references:

http://moonjs.ga