Imba: Bahasa yang kompatibel dengan JavaScript untuk kerja cepat dengan DOM

Imba adalah bahasa pemrograman open source yang dibuat oleh Scrimba khusus untuk mengembangkan aplikasi web. Ini mengkompilasi dalam JavaScript dan mampu bekerja dalam ekosistem JS yang ada. Kita berbicara, misalnya, tentang Node.js, tentang npm, tentang Webpack.

Kekuatan utama dari Imba adalah bahwa bahasa ini akan memungkinkan Anda untuk membuat aplikasi yang jauh lebih cepat daripada yang didasarkan pada perpustakaan yang menggunakan teknologi DOM Virtual, seperti React dan Vue. Keuntungan kinerja aplikasi dicapai melalui cara Imba bekerja dengan pembaruan DOM. Detail tentang ini dapat ditemukan di sini .



Penulis materi ini, salah satu pendiri proyek Scrimba, mengatakan bahwa ia telah menggunakan Imba selama beberapa tahun. Menurutnya, menulis dalam bahasa ini adalah kesenangan yang nyata, karena, dibandingkan dengan JavaScript, memiliki sintaks yang lebih bersih, yang meningkatkan keterbacaan kode.

Materi ini adalah panduan untuk Imba untuk pemula, yang pengembangannya akan memungkinkan Anda untuk mulai membuat aplikasi sederhana. Pertama, dasar-dasar bahasa akan terungkap di sini, kemudian pengembangan antarmuka pengguna dengan bantuannya akan dipertimbangkan. Ini akan segera menampilkan pengaturan lingkungan pengembangan untuk pemrograman di Imba.

Tentang proyek yang menggunakan Imba

Sebelum kita masuk ke kode, saya ingin menarik perhatian Anda pada kenyataan bahwa Imba bukanlah sesuatu seperti bahasa asing lain yang dikompilasi dalam JS dan digunakan secara eksklusif dalam proyek-proyek amatir. Itu juga digunakan dalam aplikasi serius dari perusahaan besar.

Salah satu contoh penerapannya adalah platform yang mendukung pelelangan ikan di Islandia. Di negara ini, perdagangan ikan menyumbang sekitar 1,6% dari PDB, yaitu sekitar $ 390 juta.


Lelang Ikan Islandia

Contoh lain adalah platform pelatihan Scrimba.com , di mana Imba digunakan pada bagian klien dan server proyek. Kegunaan platform ini, yang didasarkan pada aplikasi yang kompleks, sangat tergantung pada kemampuan Imba untuk dengan cepat menyinkronkan perubahan DOM.


Platform Scrimba.com

Hasilnya, kita dapat mengatakan bahwa bahasa yang akan Anda temui hari ini cocok untuk mengembangkan proyek dari berbagai skala.

Sintaks

Sintaks Imba sangat mirip dengan JavaScript, tetapi bahasa lain seperti Ruby dan Python juga memiliki efek. Mungkin fitur sintaksis Imba akan dianggap sebagai contoh. Di bawah ini adalah fungsi JS sederhana yang mengembalikan jumlah terbesar dari dua angka yang diteruskan, atau, jika angka-angka ini sama, false .

 function findGreatest(num1, num2) { if (num1 > num2) {   return num1 } else if (num2 > num1){   return num2 } else {   return false } } 

Sekarang tuliskan hal yang sama di Imba.

 def findGreatest num1, num2   if num1 > num2       num1   elif num2 > num1       num2   else       false 

Mungkin membandingkan dua contoh ini, Anda dapat langsung melihat perbedaan antara Imba dan JavaScript. Yaitu, mereka adalah sebagai berikut:

1. function berubah menjadi def . Fungsi kata kunci digantikan oleh kata kunci def .
2. Kurangnya tanda kurung. Parameter fungsi tidak tertutup dalam tanda kurung. Di Imba, sebenarnya, tanda kurung jarang dibutuhkan, meskipun Anda dapat menggunakannya jika Anda mau.
3. Lekukan Lekukan memainkan peran yang sangat penting dalam Imba. Ini berarti bahwa kurung kurawal tidak diperlukan di sini.
4. Kata kunci return . Di Imba, mengembalikan nilai dari fungsi dilakukan secara implisit, artinya, tidak perlu kata kunci return . Imba secara otomatis mengembalikan ekspresi fungsi terakhir.

Ini bukan untuk mengatakan bahwa fitur sintaks yang dijelaskan di atas adalah aspek paling penting dari Imba, tetapi mereka membuat kode lebih ringkas daripada kode serupa yang ditulis dalam JavaScript. Keuntungan ini akan menjadi lebih nyata ketika kita maju melalui materi.

Desain Antarmuka Pengguna

Mari kita bicara tentang membuat antarmuka pengguna menggunakan Imba. Bahkan, bahasa ini dibuat hanya untuk ini. Secara khusus, ini berarti bahwa simpul DOM tertanam dalam bahasa dalam bentuk yang disebut "objek kelas satu".

Jika Anda memiliki pengalaman dengan React development, Anda dapat mempertimbangkan fitur Imba ini seolah-olah Imba memiliki versi JSX sendiri yang disertakan dalam bahasa tersebut.

Pertimbangkan kode berikut ini, di mana React library digunakan untuk membuat tombol dan untuk menampilkan pesan ke konsol ketika Anda mengklik tombol ini.

 class App extends React.Component { logOut() {   console.log('button clicked!') } render() {   return (     <div className="container">       <button onClick={this.logOut}>click me!</button>     </div>   ) } } 

Jika Anda menulis ulang ini di Imba, Anda mendapatkan yang berikut ini.

 tag App   def logOut e       log 'button clicked!'   def render       <self.container>           <button :tap.logOut> 'Click me!' Imba.mount <App> 

Mari kita bandingkan dua cuplikan kode ini. Yaitu, kami memperhatikan tiga fitur berikut:

1. Tag sebaris. Perhatikan bahwa konstruksi class App extends React.Component dikonversi ke bentuk yang lebih sederhana - tag App . Kata kunci tag dibangun ke dalam bahasa. Tag DOM juga built-in.
2. Kurangnya tag penutup. Karena perataan garis menentukan struktur program, Anda tidak perlu menutup tag (misalnya, menggunakan </button> ). Ini mempercepat input teks program dan mengurangi ukurannya.
3. Sintaks kelas sederhana. Imba menyederhanakan bekerja dengan kelas HTML. Yaitu, alih-alih konstruksi className="container" rumit className="container" cukup untuk menambahkan .container ke tag itu sendiri.

Anda mungkin juga memperhatikan fitur-fitur penangan acara di Imba. Yaitu, kami menghubungkan handler yang terkait ke tombol menggunakan konstruk :tap.logOut , digunakan sebagai ganti onClick={this.logOut} . Ini hanyalah salah satu dari beberapa cara untuk menangani acara yang datang dari pengguna. Detail tentang ini dapat ditemukan di sini .

Bekerja dengan data

Sekarang mari kita bicara tentang bekerja dengan data di Imba. Contoh berikut menunjukkan aplikasi Bereaksi, dalam keadaan komponen App yang mana ada variabel count sama dengan 0. Nilai variabel ini berkurang atau meningkat dengan mengklik tombol yang sesuai.

 class App extends React.Component { state = {   count: 0 } increase = () => {   this.setState({     count: this.state.count + 1   }) } decrease = () => {   this.setState({     count: this.state.count - 1   }) } render() {   return (     <div className="container">       <button onClick={this.increase}>Increase!</button>       <button onClick={this.decrease}>Decrease!</button>       <p>{this.state.count}</p>     </div>   ) } } 

Begini cara yang sama akan terlihat pada Imba.

 tag App   prop count default: 0   def increase       count += 1   def decrease       count -= 1   def render       <self.container>           <button :tap.increase> 'Increase!'           <button :tap.decrease> 'Decrease!'           <p> count Imba.mount <App> 

Hal pertama yang menarik perhatian Anda ketika membandingkan dua contoh ini adalah perbedaan dalam jumlah kode.

Contoh Imba sekitar dua kali lebih pendek - baik dalam hal jumlah baris dan jumlah kode.

Meskipun perbandingan jumlah baris kode ketika membandingkan bahasa pemrograman tidak begitu penting, namun demikian mempengaruhi keterbacaan kode, yang, pada skala basis kode tertentu, sudah memainkan peran. Lebih sedikit kode pada Imba berarti keterbacaan yang lebih baik dibandingkan dengan Bereaksi.

Akses mandiri tersirat

Anda mungkin telah memperhatikan bahwa dalam contoh di atas, kami mengakses variabel instan objek secara langsung, hanya menyebutkan jumlah namanya. Dalam Bereaksi, hal yang sama dilakukan dengan menggunakan konstruk this.state.count .

Dalam contoh kita di Imba, kita juga bisa menggunakan konstruksi bentuk self.count , bagaimanapun, self diakses di sini secara implisit, jadi self opsional. Imba, ketika merujuk pada count , mengetahui apakah variabel seperti itu ada dalam ruang lingkup atau dalam contoh Aplikasi itu sendiri.

Mutabilitas

Perbedaan besar lainnya antara dua contoh sebelumnya adalah bagaimana mereka menerapkan perubahan negara. Dalam contoh yang ditulis dalam Imba, status bisa berubah, yang memungkinkan Anda untuk mengubah nilai variabel count secara langsung.

Bereaksi mengambil pendekatan yang berbeda, di mana nilai this.state dianggap tidak berubah, akibatnya satu-satunya cara untuk mengubahnya adalah dengan menggunakan this.setState .

Jika Anda lebih suka bekerja dengan keadaan tidak berubah, Anda dapat menggunakan perpustakaan yang sesuai dengan Imba. Bahasa Imba dalam pengertian ini tidak terkait dengan solusi khusus apa pun. Kami, dalam proyek Scrimba, menggunakan keadaan yang bisa berubah, karena kami percaya bahwa kami tidak memerlukan biaya berlebihan dari sumber daya sistem yang diperlukan untuk memastikan kekebalan.

Menyiapkan lingkungan pengembangan

Sekarang setelah Anda membiasakan diri dengan dasar-dasar Imba, saatnya untuk bereksperimen. Untuk melakukan ini, Anda harus mengkonfigurasi lingkungan pengembangan. Untuk melakukan ini, cukup jalankan perintah berikut.

 git clone https://github.com/somebee/hello-world-imba.git cd hello-world-imba npm install npm run dev 

Setelah itu, buka browser di http://localhost:8080/ dan Anda akan melihat halaman utama proyek. Untuk memodifikasi aplikasi - edit file, yang dapat ditemukan di src/client.imba .

Jika pemasangan lokal Imba tidak sesuai dengan Anda, Anda dapat menggunakan kotak pasir online interaktif proyek Scrimba.

Kinerja Imba

Mari kita bicara tentang kinerja aplikasi yang ditulis dalam Imba. Alasan Imba memungkinkan Anda membuat aplikasi web yang sangat cepat adalah karena bahasa ini tidak menggunakan konsep DOM Virtual, yang telah menjadi sangat populer dengan React. Imba menggunakan teknologi DOM Memoized. Ini lebih sederhana daripada Virtual DOM, dan menggunakan lebih sedikit mekanisme perantara untuk bekerja dengan DOM.

Dalam tolok ukur ini , yang dapat Anda luncurkan di rumah hanya dengan mengklik tombol RUN BENCHMARK di halamannya, kami membandingkan jumlah operasi DOM yang dapat dilakukan dalam sedetik selama modifikasi daftar TODO menggunakan Imba, React, dan Vue.

Dalam tes, yang hasilnya ditunjukkan di bawah, ternyata Imba 20-30 kali lebih cepat daripada Bereaksi dan Vue. Pada komputer yang berbeda, hasil tes akan bervariasi.


Imba, React, dan Vue Performance Measurements

Seperti yang Anda lihat, menggunakan Imba berarti kemampuan untuk bekerja sangat cepat dengan DOM.

Ringkasan

Dalam artikel ini, kami hanya membahas dasar-dasar Imba. Jika Anda tertarik dengan bahasa ini, lihat dokumentasinya . Secara khusus, akan berguna untuk menguasai konsepnya menggunakan getter dan setter dan mekanisme panggilan implisit. Berikut adalah daftar sumber daya bermanfaat yang terkait dengan Imba. Perlu dicatat bahwa pada awalnya bahasa ini mungkin tampak sulit, akan butuh waktu untuk menguasainya, tetapi, seperti yang diketahui semua orang, Anda tidak dapat dengan mudah mengeluarkan ikan dari kolam.

Pembaca yang budiman! Apakah Anda berencana untuk menggunakan bahasa Imba dalam proyek Anda?