cardboard js
1.0.0
Selamat datang di Karton. Kerangka kerja reaktif yang sangat ringan ( sekitar 18kb ), berkinerja baik , dan sangat sederhana . Ia menawarkan hampir semua yang Anda harapkan dari kerangka kerja yang lengkap. Seperti mengelola status, komponen, logika, dan lainnya. Namun yang menarik, Anda tidak perlu menulis HTML, CSS, atau JSX apa pun jika tidak mau. Lihat apa yang bisa dilakukannya .
Filosofinya mirip dengan VanJS, tetapi dengan lebih banyak fitur, dan API yang lebih luas.
!CATATAN! : Cardboard sedang dalam pengembangan, gunakan dengan hati-hati.
Anda dapat memeriksa pencapaian v1.0.0 untuk melihat status pengembangan - bantuan sangat kami hargai!
const Counter = ( ) => {
const count = state ( 0 ) ;
return button ( )
. text ( `Clicked $count times` , { count } )
. addStyle ( 'color' , 'gray' )
. stylesIf ( count , { color : 'black' } ) // If count > 0, it will make the color black
. clicked ( ( _ ) => count . value ++ ) ;
} ;
// Counter will be added to the body
tag ( '(body)' ) . append ( Counter ( ) ) ; npm install https://github.com/nombrekeff/cardboard-js
import { tag , init , allTags } from 'cardboard-js' ;
// Or
import { tag , init , allTags } from 'node_modules/cardboard-js/dist/cardboard.js' ;
const { div , p , span , b , script , button , style , a , hr } = allTags ;
const root = attach ( tag ( '(body)' ) ) ;
root . append ( div ( p ( 'Hello world!' ) ) ) ; Jika Anda ingin menambahkannya ke situs Anda dan mulai menggunakan Cardboard, Anda dapat mengimpor file bundel:
< script src =" node_modules/cardboard-js/dist/bundle/cardboard.bundle.js " > </ script >
< script >
const { div , p } = Carboard . allTags ;
</ script >Filosofinya adalah untuk dapat membuat aplikasi web yang berfungsi penuh dan berkinerja tanpa perlu menggunakan HTML, CSS, atau JSX. Hanya JS atau TS. Daripada menulis HTML lalu membuat JS yang berinteraksi dengan HTML , dan menambahkan CSS untuk menata halaman. Anda langsung menulis kode yang mewakili HTML , CSS , state , dan logika .
Anda juga tidak perlu memiliki proses build/kompilasi ( kecuali Anda menggunakan TS atau menginginkannya ). Mengingat kardus sangat ringan, Anda dapat menulis aplikasi Anda sebagai modul es6 ( lihat contoh ini untuk melihat contoh penyiapan ), jadi tidak diperlukan proses pembangunan apa pun, setidaknya untuk pengembangan.
Ini menawarkan solusi manajemen negara yang kuat dan siap pakai. Konsepnya mirip dengan bereaksi. Anda membuat status, lalu menggunakan status tersebut di aplikasi Anda, dan setiap kali status berubah, status tersebut otomatis diperbarui di mana pun Anda menggunakannya.
Berikut adalah daftar beberapa fitur yang ditawarkannya ( masih ada lebih banyak lagi ):
style , dan menulis CSS secara langsung sebagai objek JS.properties gaya, dll...)CATATAN: Ada juga alternatif sisi server untuk Cardboard yang juga saya tulis, bernama Hobo . Jika Anda memerlukan sesuatu yang mirip dengan Cardboard yang berfungsi di sisi server! Saya berencana membuat Cardboard juga berfungsi di sisi server di v2.0.0. Jadi, Anda dapat menantikannya, atau membantu!
Jika Anda tidak suka menulis HTML, CSS atau JSX, seperti saya. Atau membutuhkan kerangka kerja yang sederhana dan ringan yang dapat melakukan banyak hal yang dapat dilakukan oleh kerangka kerja yang lebih besar dengan ukuran yang lebih kecil namun tetap berperforma tinggi, Cardboard mungkin cocok untuk Anda! Cardboard dapat digunakan untuk membuat apa pun mulai dari halaman statis hingga aplikasi yang lebih canggih, seperti dasbor. Ia harus mampu melakukan banyak hal!
Tapi ini sempurna ketika Anda ingin membuat halaman yang sangat kecil di mana Anda memerlukan kerangka reaktif dan Anda perlu membuatnya dengan cepat.
Saya tidak akan berbohong, saya tidak menyangka akan menulis ini ketika saya pertama kali mulai menulis Cardboard. Itu seharusnya menjadi percobaan kecil untuk proyek saya yang lain (Hobo) yang saya pikir akan gagal.
Apa eksperimennya? Saya mendengar Anda bertanya. Ya, itu hanya untuk membuat Hobo berfungsi dengan DOM, alih-alih merender HTML sebagai string. Lucu sekali bagaimana keadaannya kadang-kadang! Kita tidak pernah tahu kapan kita akan membangun sesuatu yang bisa dibanggakan.
Anda bisa membaca artikel yang saya buat tentang cara membuat draf awal dari karton!
Saya tidak akan menceritakan kisah lengkapnya kepada Anda, tetapi ketahuilah bahwa Cardboard dimulai sebagai eksperimen yang dimaksudkan untuk gagal. Namun karena beberapa alasan, setiap bagian mulai cocok satu sama lain, hingga saat ini, Cardboard dapat dianggap fungsional. Belum selesai, masih banyak pekerjaan sebelum itu. Itu membawa kami kepada Anda. Saya, mudah-mudahan, meminta Anda untuk mempertimbangkan membantu. Ayo jadikan Cardboard sepadan dengan isinya ;)
Mengapa namanya? : Ceritanya lucu, sebenarnya tidak juga. Dinamakan Cardboard untuk tetap menggunakan merek Hobo. Namun Anda mungkin mengira dinamakan demikian karena, seperti karton, berguna, ringan, serbaguna, dan murah.
Halo! Saya selalu terbuka untuk bantuan dalam proyek, dan khususnya yang ini! Jika Anda menganggap proyek itu menarik, bermanfaat, menyenangkan, atau Anda merasakan emosi lain, dan emosi itu membuat Anda ingin mempertimbangkan untuk membantu, itu bagus sekali!
Anda dapat membantu dengan Wiki, menggunakan dan menguji proyek, melaporkan bug, memperbaiki bug, menambahkan fitur, dll... Ingatlah untuk meninggalkan masalah jika perubahannya besar atau mengubah beberapa konsep inti dari karton.
Lihatlah panduan ini:
