bemtvjs

Sebelum Anda bermain dengan BEMTV, pikirkan dua kali dan jika Anda menikmati terlalu banyak, jangan kaget!

Terjemahan:

• Portugu melakukan brasil

---

Mengapa BEMTV?

Saat ini di ekosistem JavaScript ada alat yang sangat baik untuk mengembangkan antarmuka pengguna. BEMTV menggunakan kembali banyak dari apa yang dibawa dan dibawa oleh alat -alat ini, namun, ini bukan salinannya, itu adalah sesuatu yang benar -benar baru.

Fitur utama

• Sintaks yang lebih bersih dari pustaka dan kerangka kerja UI lainnya.

• Tidak ada "alat peraga". Cara baru bagi komponen induk untuk meneruskan data ke komponen anak.

• Alih -alih sistem perutean umum atau berdasarkan file, BEMTV membawa sistem perutean inovatif baru yang mampu "mengubah" komponen menjadi rute secara otomatis sesuai dengan penggunaannya dalam aplikasi.

• Pemisahan logika yang terkait dengan peristiwa DOM dari template komponen.

• Pemisahan kode semi-otomatis.

• CSS-IN-JS dan CSS-IN-TEMPLATE.

• Desain komponen memungkinkan ekspor semua metode miliknya, yang memungkinkan penggunaan metode ini di bagian mana pun dari aplikasi.

• Ikatan dua arah yang mudah antara variabel komponen dan properti dan atribut elemen HTML.

• Kait.

• Fungsi transformasi yang memisahkan struktur data seperti array, set, peta dan objek dari markup mereka untuk templat.

• Bahasa markup brackethtml: alih -alih <div>Hey!</div> Lakukan ini: div[Hey!] .

• Gula sintaksis deklaratif melalui template komponen.

• Ini hanya JavaScript, tidak diperlukan jsx atau waktu build, cukup tambahkan ke index.html Anda dan bersenang-senang!

Tunjukkan beberapa kode!

Semua metode komponen dapat diekspor dan digunakan di bagian lain dari aplikasi:

 import { _ } from "bemtv" ;

export const { click$ , onMount , route , css , template } = _ `Home` ( ) ;

Ini memungkinkan Anda untuk memisahkan logika komponen menjadi beberapa fungsi yang dapat menggunakan siklus hidup komponen, menyatakan, memanipulasi elemen DOM, gaya, perutean, acara DOM ...

Menambahkan acara CSS dan DOM:

 import { _ } from "bemtv" ;

export const { click$ , css , template } = _ `Button` ( ) ;

click$ ( ( ) => console . log ( "Clicked!!!" ) ) ;

css `
  color: blue;
` ;

template `button[ I am a button! ]` ;

Properti DOM Bind Element dengan komponen:

 import { _ } from "bemtv" ;

const { $ , template } = _ `Input` ( {
  inputValue : 0 ,
} ) ;

template `input[type="number" $inputValue<value]` ;

Tunjukkan mundur saat komponen sedang diimpor:

 import { _ } from "bemtv" ;

const { template } = _ `App` ( ) ;

template `UserData[](Loading...)` ;

Membuat tautan rute:

 import { _ } from "bemtv" ;

const { template } = _ `App` ( ) ;

template `#AboutUs[ Link to about us ]` ;

BEMTV menggunakan sistem pembuatan rute otomatis yang inovatif, ini dimungkinkan karena komponen dapat berperilaku seperti rute/halaman.

Komponen Counter:

 import { _ } from "bemtv" ;

const { click$ , $ , template } = _ `Counter` ( { count : 0 } ) ;

click$ ( ( ) => $ . count ++ ) ;

template `button[Clicked: $count ]` ;

Ini hanya puncak gunung es, banyak fitur BEMTV benar -benar menunjukkan kekuatan mereka dengan latihan dan ketika dikombinasikan dengan orang lain!

Apa selanjutnya

BEMTV adalah proyek baru-baru ini dan tidak banyak diketahui, saya memiliki beberapa ide untuk melanjutkan pengembangan TI dan proyek lain di sekitarnya, seperti sintaks yang menyoroti ekstensi.

Saat ini saya bekerja penuh waktu di BEMTV dan tidak menerima kompensasi finansial, jika Anda suka BEMTV, silakan pertimbangkan untuk mendukung proyek, bantuan Anda akan menentukan apakah proyek dapat terus mencapai tingkat yang lebih tinggi.

Jika Anda memiliki waktu luang, datang dan menjadi bagian dari membangun BEMTV!

Semua bantuan dihargai!

Jangan lupa untuk memberikan bintang Anda pada proyek, karena ini mendorong saya untuk terus berkembang.