cardboard js
1.0.0
Bienvenidos a Cartón. Un marco reactivo extremadamente ligero ( alrededor de 18 kb ), eficaz y muy simple . Ofrece casi todo lo que esperarías de un marco completo. Como gestionar el estado, los componentes, la lógica y el resto. Pero con un giro adicional, no necesitas escribir HTML, CSS o JSX si no lo deseas. Vea lo que puede hacer .
Es similar en filosofía a VanJS, si eso te suena, pero con muchas más características y una API más extensa.
!¡NOTA! : El cartón está en desarrollo, utilícelo con precaución.
Puede consultar el hito v1.0.0 para obtener una vista del estado de desarrollo. ¡Se agradece mucho la ayuda!
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!' ) ) ) ; Si desea agregarlo a su sitio y comenzar a usar Cardboard, puede importar el archivo del paquete:
< script src =" node_modules/cardboard-js/dist/bundle/cardboard.bundle.js " > </ script >
< script >
const { div , p } = Carboard . allTags ;
</ script >La filosofía es poder crear aplicaciones web totalmente funcionales y de alto rendimiento sin la necesidad de utilizar HTML, CSS o JSX. Solo JS o TS. En lugar de escribir HTML y luego crear JS que interactúe con HTML y agregar CSS para diseñar la página. Usted escribe directamente código que representa HTML , CSS , estado y lógica .
Tampoco necesita tener un proceso de compilación/compilación ( a menos que use TS o lo desee ). Dado que el cartón es tan liviano, puede escribir su aplicación como un módulo es6 ( consulte este ejemplo para ver una configuración de ejemplo ), por lo que no hay necesidad de ningún proceso de compilación, al menos para el desarrollo.
Ofrece una sólida solución de gestión estatal lista para usar. El concepto es similar al de reaccionar. Usted crea un estado, luego lo usa en su aplicación y, cada vez que el estado cambia, se actualiza automáticamente dondequiera que lo haya usado.
Aquí hay una lista de algunas de las características que ofrece ( aunque hay más ):
style y escribir el CSS directamente como un objeto JS.properties de estilo, etc.)NOTA: También hay una alternativa del lado del servidor a Cardboard que también escribí, llamada Hobo . ¡En caso de que necesites algo similar a Cardboard que funcione en el lado del servidor! Estoy planeando hacer que Cardboard funcione también en el lado del servidor en la versión 2.0.0. ¡Así que puedes esperar eso o ayudar!
Si no te gusta escribir HTML, CSS o JSX, como yo. O necesita un marco simple y liviano que pueda hacer la mayoría de las cosas que los marcos más grandes pueden hacer con un espacio más pequeño y al mismo tiempo tener un gran rendimiento, Cardboard podría ser para usted. Cardboard se puede utilizar para crear cualquier cosa, desde una página estática hasta aplicaciones más avanzadas, como paneles de control. ¡Debería poder hacer la mayoría de las cosas!
Pero es perfecto para cuando quieres crear una página muy pequeña donde necesitas un marco reactivo y necesitas crearlo rápidamente.
No voy a mentir, no esperaba escribir esto cuando comencé a escribir Cardboard. Se suponía que sería un pequeño experimento para otro proyecto mío (Hobo) que pensé que fracasaría.
¿Cuál fue el experimento? Te escucho preguntar. Bueno, fue solo para hacer que Hobo funcionara con DOM, en lugar de representar HTML como una cadena. ¡Es curioso cómo suceden las cosas a veces! Nunca sabemos cuándo vamos a construir algo de lo que estar orgullosos.
¡Puedes leer un artículo que hice sobre cómo hice el borrador inicial de cartón!
No les contaré la historia completa, pero sepan que Cardboard comenzó como un experimento destinado a fracasar. Pero por alguna razón, cada pieza empezó a encajar perfectamente entre sí, hasta el día de hoy, donde el cartón puede considerarse funcional. Sin embargo, aún no está terminado, todavía queda mucho trabajo antes de ese punto. Eso nos lleva a usted. Con suerte, les pido que consideren ayudar. Hagamos que Cardboard valga su contenido ;)
¿Por qué el nombre? : Historia divertida, bueno, no tanto. Se llama Cardboard para mantener la marca Hobo. Pero se podría pensar que se llama así porque, al igual que el cartón, es útil, ligero, versátil y económico.
Bueno, hola! ¡Siempre estoy abierto a recibir ayuda en proyectos, y este en particular! Si encuentra el proyecto interesante, útil, divertido o siente algún otro tipo de emoción, y esa emoción lo inclina a considerar ayudar, ¡sería genial!
Puedes ayudar con la Wiki, usar y probar el proyecto, reportar errores, corregir errores, agregar funciones, etc... Solo recuerda dejar un problema si el cambio es grande o cambia algún concepto central del cartón.
Echa un vistazo a estas guías:
