🌄 🤱🏾 👈 Memulai dengan Moon.js 👨🏽‍💻 🌖 💒

Hari ini kita akan berbicara tentang pustaka JavaScript berikutnya untuk mengembangkan antarmuka. Ada perasaan bahwa perpustakaan seperti itu semakin sering muncul. Pada artikel ini, kita akan melihat perpustakaan Moon.js dan mengungkapkan fitur-fiturnya yang perlu Anda ketahui untuk mulai bekerja dengannya. Secara khusus, kita akan berbicara tentang cara membuat proyek Moon.js baru, cara membuat elemen antarmuka, cara menangani acara. Dengan tutorial ini, Anda seharusnya dapat menggunakan Moon.js untuk mengembangkan aplikasi Anda sendiri.

Perpustakaan Moon.js

Moon.js adalah pustaka JavaScript minimalis untuk mengembangkan antarmuka yang cepat dan fungsional. Ini memiliki ukuran yang relatif kecil, yang memungkinkan untuk membuat aplikasi yang cukup kompak atas dasarnya. Pustaka yang memiliki kinerja sangat tinggi

Moon.js mengambil pendekatan berbasis komponen untuk desain antarmuka. Template digunakan untuk membuat komponen. Library ini sangat mirip dengan Vue.js.

Kekuatan Moon.js

Moon.js berukuran kompak (diperkecil dan dikompresi sekitar 2 KB). Ini lebih kecil dari ukuran library dan framework lain seperti React dan Angular.
Perpustakaan ini dibedakan oleh kecepatan tinggi antarmuka rendering.
Moon.js adalah pustaka yang didasarkan pada teknik pengembangan fungsional. Saat bekerja dengannya, pendekatan desain antarmuka digunakan, berdasarkan apa yang disebut "driver".

Awal pekerjaan

Perpustakaan Moon.js dapat dimasukkan ke dalam proyek dengan dua cara. Yang pertama adalah menginstalnya dari NPM. Yang kedua adalah menghubungkannya langsung ke halaman yang rencananya akan digunakan.

Jika Anda memutuskan untuk menggunakan versi NPM dari pustaka, maka Anda harus terlebih dahulu menginstal paket moon-cli, alat baris perintah:

$ npm i moon-cli -g

Dalam contoh ini, alat ini diinstal secara global, Anda dapat memanggilnya dari direktori mana pun.

Untuk membuat proyek berdasarkan Moon.js, Anda dapat menjalankan perintah berikut:

$ moon create moon-prj

Perintah ini membuat proyek baru di folder moon-prj. Setelah pembuatan proyek selesai, Anda akan memiliki dasar untuk aplikasi masa depan.

Opsi kedua untuk menggunakan Moon.js melibatkan menghubungkannya ke halaman tempat Anda berencana menggunakannya. Pustaka memiliki modul moon-browseryang memungkinkan Anda untuk menggunakan kemampuannya secara langsung di halaman yang terhubung dengannya.

Jadi, untuk menghubungkan pustaka ke halaman, kita perlu menyertakan dua tag berikut di halaman:

<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>

Seperti yang Anda lihat, skrip terkait diambil dari CDN unpkg. Tag pertama mengimpor pustaka utama. Yang kedua adalah perpustakaan moon-browser. Dia bertanggung jawab untuk menyusun template Moon.js, untuk mengubahnya menjadi bentuk yang cocok untuk ditampilkan oleh browser.

Sekarang, untuk menggunakan sintaks Moon.js pada halaman, Anda perlu memasukkannya ke dalam tag <script>, mengingat untuk menyetel atributnya typesebagai text/moon.

<!--      -->
<script src="./main-script.js" type="text/moon"></script>
<!--    ,    -->
<script type="text/moon">
    ...
</script>

Menghubungkan aplikasi Moon.js ke halaman

Moon.js, seperti pustaka dan kerangka kerja lain yang digunakan untuk membuat aplikasi satu halaman, terhubung ke elemen halaman tertentu. Biasanya sebuah elemen memainkan peran sebagai wadah untuk aplikasi Moon.js <div>:

<div id="root"></div>

Elemen serupa, yang merupakan elemen root dari aplikasi Moon.js, ditempatkan di kode file index.htmlyang merupakan titik masuk ke proyek.

Driver digunakan untuk menghubungkan aplikasi Moon.js ke elemen ini view(di bawah ini kita akan berbicara tentang driver lebih detail):

Moon.use({
    view: Moon.view.driver("#root")
})

Konstruksi ini memberi tahu perpustakaan bahwa ia harus menghubungkan aplikasi ke elemen dengan pengenal root. Jika perlu, Anda bisa menentukan elemen serupa ke pustaka menggunakan API browser yang dirancang untuk bekerja dengan DOM:

Moon.use({
    view: Moon.view.driver(document.getElementById("root"))
})

Sekarang mari kita bicara tentang bagaimana manipulasi data diatur di Moon.js dan cara membuat elemen antarmuka menggunakan pustaka ini.

Sintaks untuk mendeskripsikan elemen antarmuka

Untuk mendeskripsikan antarmuka Moon.js, digunakan bahasa pemrograman Moon View Language (MVL), yang dikembangkan secara khusus untuk mengatasi masalah ini. Ini menyerupai JSX. Bahasa ini digunakan untuk mendeskripsikan elemen dan menyesuaikan hubungannya. Berikut contohnya:

<script type="text/moon">
    function aView(data) {
        return (
            <div>Hi from Moon</div>
        )
    }
</script>

Sangat mudah untuk melihat bahwa bagian dari Moon.js, yang bertanggung jawab atas rendering elemen <div>, menggunakan struktur sintaks yang menyerupai HTML. Tetapi struktur ini digunakan dalam kode JavaScript. Browser tidak akan dapat menjalankan kode JavaScript seperti itu, tetapi tidak diharuskan, karena Moon.js mengkompilasi konstruksi tersebut ke dalam JavaScript biasa.

Bekerja dengan data

Moon.js menggunakan konsep driver untuk mengontrol presentasi visual elemen dan bekerja dengan data. Di sini kita akan melihat driver yang memungkinkan kita bekerja dengan data, dan di bagian selanjutnya kita akan berbicara tentang driver untuk bekerja dengan elemen antarmuka.

Pengandar data bertanggung jawab untuk menyimpan data aplikasi dan memungkinkan data digunakan di tempat yang diperlukan. Dengan kata lain, driver ini menyimpan status global aplikasi.

Anda dapat mengatur data awal untuk aplikasi Moon.js menggunakan API Moon.use:

Moon.use({
    data: Moon.data.driver
})

Anda dapat menulis data baru ke status dengan mengembalikannya dari fungsi yang sesuai:

Moon.run(({ data }) => {
    console.log(data) // undefined
    return {
        data: "Nnamdi"
    }
})

API Moon.runbertanggung jawab untuk meluncurkan aplikasi. Callback yang diteruskan ke API ini menerima referensi ke data global sebagai argumen data. Karena pada saat memanggil fungsi ini belum ada dataapa-apa di dalamnya, perintah console.logdari contoh ini akan keluar undefined.

Kami mengembalikan objek dari callback yang memiliki properti datadengan nilai Nnamdi. Objek ini akan merepresentasikan status baru aplikasi, yang datanya dapat digunakan oleh fungsi lain yang memanggil data.

Kami telah memeriksa mekanisme untuk bekerja dengan data di Moon.js. Sekarang mari kita bicara lebih detail tentang bekerja dengan elemen antarmuka.

Bekerja dengan elemen antarmuka

Moon.js memiliki driver viewuntuk membuat elemen dan memasangnya di DOM.

Kami telah memeriksa potongan kode yang diulang di bawah ini, di mana elemen <div>dasar Moon.js terhubung ke elemen:

Moon.use({
    view: Moon.view.driver("#root")
})

Di sinilah elemen dipasang. Fungsi sekarang dapat mengembalikan elemen yang mampu menggantikan elemen lama. Mereka dapat direpresentasikan dalam bentuk objek yang berisi properti viewtempat data terkait ditulis. Pustaka mengambil nilai properti viewdari objek yang dikembalikan oleh fungsi dan menuliskannya ke elemen yang terhubung ke elemen dengan pengenal root.

Moon.js menggunakan konsep DOM virtual dan algoritme yang kuat untuk membandingkan versi antarmuka lama dan baru. Hal ini memungkinkan perpustakaan untuk membuat keputusan tentang kapan harus memperbarui DOM dan bagian mana dari DOM yang perlu diperbarui.

function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));

Di sini callback yang diteruskan Moon.runmengeluarkan tombol ke DOM. Ini terjadi karena fakta bahwa fungsi mengembalikan objek dengan properti view. Nilai yang ditetapkan ke properti ini masuk ke DOM.

Tombol tersebut memiliki penangan kejadian click, yang diwakili oleh sebuah fungsi handleClick. Fungsi ini mengembalikan objek kosong, memanggilnya tidak mengubah DOM.

Membuat elemen

Moon.js memberi pengembang sekumpulan besar fungsi pembantu untuk membuat elemen antarmuka. Hasilnya, ternyata elemen tidak dapat dibuat menggunakan bahasa deskripsi antarmuka Moon.js, tetapi fungsi yang sesuai:

const { div, text, node, p } = Moon.view.m

Fungsi ekspor Moon.js yang namanya cocok dengan nama elemen yang mereka buat. Jadi, fungsinya divmemungkinkan Anda membuat item <div>. Fungsi ini textmembuat node teks. Fungsinya nodememungkinkan Anda membuat elemen kustom. Fungsinya pmenciptakan elemen <p>. Seperti yang Anda lihat, nama-nama fungsi ini dengan jelas menunjukkan tujuannya.

Mari buat sebuah elemen <div>:

const Div = div({});

Anda dapat menetapkan atribut ke elemen dengan meneruskan objek dengan properti ke fungsi yang sesuai:

const Div = div({
    class: "DivClass"
});

Di sini kami telah menjelaskan elemen <div>, di atribut classyang nilainya harus ditulis DivClass.

Berikut cara membuat elemen teks:

const Text = text({ data: "A text node" });

Properti dataobjek yang diteruskan ke fungsi textberisi teks untuk elemen tersebut.

Mari buat elemen khusus:

const CustomEl = node("custom-el");

Untuk menetapkan atribut apa pun ke elemen ini, Anda dapat melakukan hal berikut:

CustomEl({ "attr": "attr-value"})

Perkembangan

Anda bisa melampirkan penangan kejadian ke elemen menggunakan konstruksi yang menggunakan simbol @:

function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));

Hasilnya, tombol dengan teks akan ditampilkan di halaman Click Me, dengan mengklik di mana fungsi tersebut akan dipanggil handleClick.

Komponen

Di Moon.js, fungsi adalah komponen. Ini berarti bahwa fungsi dapat disebutkan dalam deskripsi elemen antarmuka. Apa fungsi yang dikembalikan akan dimasukkan ke dalam elemen.

Misalkan kita memiliki fungsi seperti ini:

function aView({ data }) {
    return <div>A View</div>
}

Fungsi ini ,, aViewmengembalikan elemen yang dapat dirender:

Moon.run(() => {
    view: <div><aView /></div>
})

Nama fungsi digunakan dalam contoh ini sebagai nama elemen. Sebagai hasil dari mengeksekusi kode ini, ternyata fungsi yang dikembalikan akan ditempatkan pada tag <div>. Jika semua ini ada di DOM, akan ada markup seperti ini:

<div>
    <div>A View</div>
</div>

Pengembangan aplikasi berdasarkan Moon.js

Untuk mengumpulkan semua yang baru saja kita bicarakan, mari buat aplikasi TODO sederhana di Moon.js. Di sini kita akan menggunakan contoh yang sesuai , yang disiapkan oleh pengembang Moon.js.

Saya ingin mengingatkan Anda bahwa disarankan, saat menguasai pustaka dan kerangka kerja baru, untuk membuat aplikasi kecil dengan bantuan mereka. Hal ini memungkinkan Anda untuk mempercepat pembelajaran dan membantu Anda memahami fitur alat yang dipelajari. Pada awalnya, kita berbicara tentang fondasinya, tetapi seiring waktu, pemahaman tentang mekanisme yang lebih kompleks muncul.

Seperti inilah tampilan halaman aplikasi ini.

Halaman Aplikasi Halaman ini memiliki judul, field, tombol, dan daftar yang harus dilakukan, yang dapat diisi ulang dengan memasukkan deskripsinya di lapangan dan mengklik tombol.

Mari kita mulai dengan membuat fileindex.html. Di sini kami menghubungkan Moon.js langsung ke halaman:

<html>
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>
<!--  ,    -->
<script type="text/moon">
    function viewTodos({data, view}) {
        return (
            <div>
                <input type="text" value=data.todo @input=updateTodo/>
                <button @click=createTodo>Create</button>
                <ul children=(data.todos.map(todo =>
                    <li>{todo}</li>
                ))/>
            </div>
        )
    }
    function updateTodo({ data, view }) {
        const dataNew = { ...data, todo: view.target.value };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    function createTodo({ data }) {
        const dataNew = {
            todo: "",
            todos: [...data.todos, data.todo]
        };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    <!--   data  view -->
    Moon.use({
        data: Moon.data.driver,
        view: Moon.view.driver("#root")
    })
    <!--   -->
    Moon.run(() => {
        data: [],
        view: <viewTodos data=[]>
    })
</script>
</html>

Fungsi ini viewTodosmenampilkan item yang diperlukan untuk memasukkan informasi tentang kasus baru dan menampilkannya dalam daftar. Argumennya adalah datadan view.

Fungsi tersebut createTodomembuat kasus baru dan mengembalikannya ke properti dataobjek yang dikembalikannya.

Fungsi tersebut updateTodomenulis kasus baru ke status aplikasi.

Perhatikan event handler @clickdan @inputyang ada di fungsinya viewTodos. Acara @inputdipanggil saat Anda memasukkan teks yang menjelaskan kasus di bidang yang sesuai. Saat acara ini diproses, sebuah fungsi dipanggil updateTodo. Argumenviewdalam fungsi ini mewakili peristiwa yang terjadi. Dengan menggunakannya, kami mengakses DOM dan mendapatkan data yang dimasukkan di lapangan. Data ini kemudian memasuki status sebagai properti todo.

Acara @clickdipanggil setelah mengklik tombol. Ini mencatat daftar tugas baru. Fungsi tersebut digunakan untuk menyelesaikan masalah ini createTodo. Fungsi ini mengakses properti negara tododan menulis data baru ke properti todos, setelah itu, dalam properti viewobjek yang dikembalikan padanya, ia mengembalikan elemen yang <viewTodos>diwakili oleh fungsi yang sesuai, di atribut datayang nilainya ditulis dataNew.

Ini akan merender ulang viewTodosdan memperbarui DOM. Tugas baru akan ditambahkan ke daftar tugas yang ditampilkan di halaman.

Jalankan aplikasi ini di browser Anda dan lakukan eksperimen dengannya.

Hasil

Kami telah membahas dasar-dasar Moon.js. Yaitu, kami berbicara tentang fakta bahwa Anda dapat menggunakan pustaka dengan menginstalnya dari NPM dan menghubungkannya ke halaman secara langsung. Selanjutnya, kita membahas mekanisme internal perpustakaan: bekerja dengan data, menangani peristiwa, mengembangkan komponen.

Moon.js tampaknya menjadi perpustakaan yang bagus. Dan, meskipun bukan untuk membicarakan kelebihan lainnya, saya suka karena ukurannya yang ringkas.

Sudahkah Anda menggunakan Moon.js?

Memulai dengan Moon.js