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
No comments:
Post a Comment