Memperkenalkan arsitektur Elm ke MoonBit: menggunakan prinsip sederhana untuk membangun aplikasi web yang kuat

Elm adalah bahasa pemrograman fungsional yang dirancang untuk membuat aplikasi web front-end. Ini dikompilasi ke JavaScript dan menekankan kesederhanaan, kinerja, dan ketahanan.

Fungsi murni berarti fungsi tersebut tidak memiliki efek samping, sehingga membuat kode lebih mudah dipahami dan di-debug. Melalui pemeriksaan tipe statis yang kuat, Elm memastikan bahwa aplikasi tidak memunculkan pengecualian runtime, sehingga memberikan keandalan. Arsitektur Elm menerapkan aliran data satu arah, membuat pengelolaan negara dapat diprediksi dan mudah.

Terinspirasi oleh Elm, kami mengembangkan kerangka Web front-end yang disebut Rabbit-TEA menggunakan MoonBit.

Munculnya pemrograman fungsional juga mendorong evolusi React dari paradigma berbasis kelas menjadi React Hooks. Sudah ada beberapa framework fungsional di JavaScript, jadi mengapa kita membutuhkan MoonBit?

Meskipun sudah ada beberapa kerangka kerja dan perpustakaan di ekosistem JavaScript yang mendukung gaya fungsional, JavaScript sendiri tidak memiliki fitur seperti pencocokan pola, yang membuat pengalaman coding kurang ideal. Berikut perbandingan MoonBit dan JavaScript secara berdampingan:

let x = match y 
  a => value1
  b => value2
  c => value3

f(x)

var x = null;
if (y == a)  x = value1 
else if (y == b)  x = value2 
else  x = value3 
// x 可能会在这里被意外修改！
return f(x);

// 或者
const x = y == a ? value1 : (y == b ? value2 : value3);
return f(x);

Berikut adalah contoh lain dari MoonBit. fungsi validate_utf8 Periksa masukannya bytes Apa urutan UTF-8 yang benar:

fn validate_utf8(bytes : Bytes) -> Bool 
  loop bytes  [0xE0..=0xEF, 0x80..=0xBF, 0x80..=0xBF, ..xs]
    

MoonBit adalah bahasa yang berorientasi pada ekspresi, dan variabel tidak dapat diubah secara default. Ini mendukung pencocokan pola, sebuah fitur yang telah lama populer dalam bahasa pemrograman fungsional, memastikan produksi kode JavaScript yang efisien. Selain itu, kompiler MoonBit mendukung beberapa backend, termasuk JavaScript, WebAssembly, dan backend asli.

Arsitektur TEA sangat sederhana. Ini terdiri dari Model, Tampilan, dan Pembaruan:

• Model: Status Aplikasi, termasuk struktur data yang tidak dapat diubah.
• Lihat: Tampilan Aplikasi, yang menjelaskan cara menampilkan Model sebagai HTML dan pesan apa yang dipicu oleh operasi pengguna.
• Pembaruan: Logika aplikasi, menangani pesan yang dipicu pengguna, dan mengonversi Model lama ke Model baru.

Di bawah ini adalah program counter selengkapnya:

typealias Model = Int
let model = 0

enum Msg 
  Increment
  Decrement


fn update(msg : Msg, model : Model) -> (Command[Msg], Model) 
  match msg 
    Increment => (none(), model + 1)
    Decrement => (none(), model - 1)
  


fn view(model : Model) -> Html[Msg] 
  div([
    h1([text(model.to_string())]),
    button(click=Msg::Increment, [text("+")]), // button1
    button(click=Msg::Decrement, [text("-")]), // button2
  ])


fn main 
  @tea.startup(model~, update~, view~)

Selain mendefinisikan Model, Update dan View, program ini juga mendefinisikan Msg jenis.Msg Jenis yang sama dengan acara. Saat pengguna mengklik tombol tambah, runtime akan dipicu update fungsi pengiriman Increment berita dan terkini model. tinggal update Pada fungsi ini tidak akan diubah secara langsung. modeldaripada menciptakan nilai-nilai baru berdasarkan nilai-nilai lama model dan kembali. Semua fungsi tidak memiliki efek samping. Akhirnya, baru model akan lulus view Fungsi yang dirender sebagai HTML.

update Fungsi ini juga mengembalikan a Cmd Tipe yang menunjukkan operasi yang belum dilakukan. Kami akan membahasnya nanti.

EDSL adalah bahasa khusus domain yang tertanam. Ini adalah DSL yang dirancang menggunakan struktur tata bahasa bahasa pemrograman yang ada dan tidak memerlukan langkah pra-pemrosesan dan kompilasi tambahan.

Rabbit-TEA menggunakan sintaksis argumen MoonBit gula untuk mendefinisikan serangkaian fungsi tambahan. Fungsi HTML ini mencoba yang terbaik untuk memberi tahu pengguna tentang peran parameter melalui tipe, menghindari penyalahgunaan yang tidak jelas dan membingungkan. String jenis. Mereka digunakan seperti:

fn view() -> Html[Msg] 
  div([
    h1([text("hello MoonBit")]),
    p([text("build robust app")]),
    a(href="moonbitlang.com", target=Blank, [text("try it")]),
  ])

dengan label <a> Misalnya definisi tipe fungsi tambahan adalah sebagai berikut. Kecuali saja childrens Parameter, semua parameter lainnya diberi label sebagai argumen. Argumen label dapat dinyatakan opsional atau disetel ke nilai default jika perlu.

pub(all) enum Target 
  Self
  Blank


pub fn a[M](
  style~ : Array[String] = [],
  id? : String,
  class? : String,
  href~ : String,
  target~ : Target = Self,
  childrens : Array[Html[M]]
) -> Html[M]

Di masa depan, kami akan mempertimbangkan untuk memperkenalkan sintaks lengkap yang mirip dengan JSX di MoonBit agar kode tampilan lebih mudah dibaca.

Arsitektur TEA menggunakan pencocokan pola dan tipe gabungan yang ditandai. Pesan yang ditentukan pengguna dapat membawa data tambahan sebagaimana mestinya, yang menjadikannya update Keamanan dan fleksibilitas lebih saat memproses pesan.

Misalnya untuk a input elemen, jika Anda ingin memproses nilai saat pengguna memasukkannya dan menampilkan hasilnya di elemen lain p tengah. kita bisa Msg Tambahkan pita ke jenisnya String konstruktor data enum,GotInputChange.GotInputChange ketik dan input tengah change Semua tipe parameter (String) -> Msg. Pengeditan pengguna input Ketika nilaiinput Nilainya akan dimasukkan ke dalam GotInputChange dan mengirimkannya ke update Pemrosesan fungsional.

enum Msg 
  GotInputChange(String)


fn update(msg : Msg, model : String) -> (Cmd[Msg], String) 
  match msg 
    GotInputChange(value) => 
      ...
      (none(), value)
    
  


fn view(model : String) -> Html[Msg] 
  div([
    p([text(model)])
    input(input_type=Text, value=model, change=Msg::GotInputChange),
  ])

Simak ulasan lengkap MoonBit selanjutnya Msg Saat menambahkan konstruktor enum baru, IDE akan meminta pola pencocokan menangani kasus baru untuk mengurangi kesalahan runtime.

Rabbit-TEA, seperti Elm, menggunakan tipe Cmd untuk mengelola efek samping fungsi, yaitu operasi yang mengubah keadaan eksternal dan berinteraksi dengan sistem eksternal. Misalnya, meminta browser untuk mencatat Riwayat URL, menggulir tampilan browser, mengirim permintaan JSON ke server, dan memproses data kembali. Semua operasi ini dienkapsulasi sebagai Cmd. Cmd menjelaskan tindakan yang tidak dilakukan. Hanya ketika dikembalikan oleh fungsi Update akan dipicu oleh runtime Rabbit-TEA.

Contoh di bawah menunjukkan bahwa ketika pengguna mengklik kartu yang sesuai, antarmuka pertama-tama berubah ke status pemuatan, dan kemudian konten kartu dimuat melalui permintaan http.
@http.get Cmd dikembalikan, dan parameter pertama adalah URL yang diminta, dan parameter kedua menyatakan format data yang diinginkan dan cara memproses respons.

enum Msg 
  GotCardText(Result[String, String])
  ClickCard(Int)


pub fn update(msg : Msg, model : Model) -> (Cmd[Msg], Model) 
  match msg 
    ClickCard(id) => (@http.get("/api/card/\id", expect=Text(GotCardText)), Loading)
    GotCardText(Ok(text)) => (none(), Editing(text))
    GotCardText(Err(_)) => (none(), NotFound)
  

Ini akan terpicu ketika server merespons permintaan tersebut GotCardText Berita ini. itu membawa a Result[String,String] ketik, yang meminta kita untuk mendiskusikan klasifikasi respons: ketika teks kartu berhasil dikembalikan, kami memperbaruinya model jeli view Menampilkan konten kepada pengguna; ketika permintaan gagal, kami langsung melakukannya NotFound kaca.

Cmd Pola ini mendorong pengguna untuk menghindari efek samping dan pembaruan Model dalam suatu fungsi, sehingga mencegah pembaruan dan tampilan dari dua sumber data Model secara bersamaan, sehingga memastikan konsistensi status program.

Cmd yang disebutkan di atas tidak diproses secara khusus oleh framework, tetapi diimplementasikan berdasarkan antarmuka Cmd. Anda juga dapat menentukan Cmd Anda sendiri untuk membuat Rabbit-TEA berinteraksi dengan dunia JS eksternal. MoonBit memungkinkan penulisan kode JS sebaris dan mengikat definisi fungsi. Ini sangat sederhana:

extern "js" fn set_timeout(f : () -> Unit, ms : Int) = "(f,ms) => setTimeout(f, ms)"

set_timeout Fungsi terikat pada JS setTimeout. Parameter f menunjukkan tindakan yang akan dipicu,ms Mewakili waktu menunggu sebelum memicu. Kami mendefinisikan suatu fungsi delay. Ia menerima parameter