cardboard js
1.0.0
Bienvenue chez Carton. Un framework réactif extrêmement léger ( environ 18 Ko ), performant et très simple . Il offre presque tout ce que vous attendez d’un framework complet. Comme gérer l’état, les composants, la logique et le reste. Mais avec une particularité, vous n'avez pas besoin d'écrire du HTML, du CSS ou du JSX si vous ne le souhaitez pas. Voyez ce que cela peut faire .
Sa philosophie est similaire à celle de VanJS, si cela vous dit quelque chose, mais avec beaucoup plus de fonctionnalités et une API plus étendue.
!NOTE! : Le carton est en développement, utilisez-le avec prudence.
Vous pouvez consulter le jalon v1.0.0 pour avoir une vue sur l'état de développement - l'aide est très appréciée !
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 vous souhaitez l'ajouter à votre site et commencer à utiliser Cardboard, vous pouvez importer le fichier bundle :
< script src =" node_modules/cardboard-js/dist/bundle/cardboard.bundle.js " > </ script >
< script >
const { div , p } = Carboard . allTags ;
</ script >La philosophie est de pouvoir créer des applications Web entièrement fonctionnelles et performantes sans avoir besoin d'utiliser HTML, CSS ou JSX. Juste JS ou TS. Au lieu d'écrire du HTML , puis de créer du JS qui interagit avec le HTML et d'ajouter du CSS pour styliser la page. Vous écrivez directement du code qui représente à la fois le HTML , le CSS , l'état et la logique .
Vous n'avez pas non plus besoin d'un processus de construction/compilation ( sauf si vous utilisez TS ou si vous le souhaitez ). Étant donné que le carton est si léger, vous pouvez écrire votre application en tant que module es6 ( consultez cet exemple pour voir un exemple de configuration ), aucun processus de construction n'est donc nécessaire, du moins pour le développement.
Il offre une solution robuste de gestion d’état prête à l’emploi. Le concept est similaire à réagir. Vous créez un état, puis utilisez l'état dans votre application, et chaque fois que l'état change, il est automatiquement mis à jour partout où vous l'avez utilisé.
Voici une liste de certaines des fonctionnalités qu'il offre ( il y en a d'autres cependant ) :
style et écrire le CSS directement en tant qu'objet JS.properties de style, etc...)REMARQUE : Il existe également une alternative côté serveur à Cardboard que j'ai également écrite, appelée Hobo . Au cas où vous auriez besoin de quelque chose de similaire à Cardboard qui fonctionne côté serveur ! Je prévois de faire fonctionner Cardboard également côté serveur dans la v2.0.0. Alors vous pouvez vous attendre à cela ou aider !
Si vous n'aimez pas écrire du HTML, CSS ou JSX, comme moi. Ou vous avez besoin d'un framework simple et léger capable de faire la plupart des choses que des frameworks plus grands peuvent faire avec un encombrement réduit tout en étant très performant, Cardboard pourrait être fait pour vous ! Cardboard peut être utilisé pour créer n'importe quoi, depuis une page statique jusqu'à des applications plus avancées, comme des tableaux de bord. Il devrait être capable de faire la plupart des choses !
Mais c'est parfait lorsque vous souhaitez créer une très petite page où vous avez besoin d'un framework réactif et que vous devez le créer rapidement.
Je ne vais pas mentir, je ne m'attendais pas à écrire ceci lorsque j'ai commencé à écrire Cardboard. C'était censé être une petite expérience pour un autre de mes projets (Hobo) dont je pensais qu'il échouerait.
Quelle a été l’expérience ? Je vous entends demander. Eh bien, c'était juste pour faire fonctionner Hobo avec le DOM, au lieu de rendre le HTML sous forme de chaîne. C'est drôle comment les choses se passent parfois ! Nous ne savons jamais quand nous allons construire quelque chose dont nous serons fiers.
Vous pouvez lire un article que j’ai fait sur la façon dont j’ai réalisé la première ébauche de carton !
Je ne vais pas vous raconter toute l’histoire mais sachez que Cardboard a commencé comme une expérience vouée à l’échec. Mais pour une raison quelconque, chaque pièce a commencé à s'adapter parfaitement les unes aux autres, jusqu'à aujourd'hui, où le carton peut être considéré comme fonctionnel. Ce n'est pas terminé cependant, il y a encore beaucoup de travail avant cela. Cela nous amène à vous. J'espère que je vous demanderai d'envisager de m'aider. Faisons en sorte que Cardboard vaille son contenu ;)
Pourquoi ce nom ? : Histoire drôle, enfin pas vraiment. Il s'appelle Cardboard pour conserver la marque Hobo. Mais on pourrait penser qu'il porte ce nom, car, comme le carton, il est utile, léger, polyvalent et bon marché.
Eh bien, bonjour ! Je suis toujours ouvert à toute aide sur des projets, et celui-ci en particulier ! Si vous trouvez le projet intéressant, utile, amusant, ou si vous ressentez un autre type d'émotion, et que cette émotion vous incite à envisager peut-être d'aider, ce serait génial !
Vous pouvez aider avec le wiki, utiliser et tester le projet, signaler des bugs, corriger des bugs, ajouter des fonctionnalités, etc... N'oubliez pas de laisser un problème si le changement est important ou modifie un concept de base du carton.
Jetez un œil à ces guides :
