cardboard js
1.0.0
Willkommen bei Cardboard. Ein extrem leichtes ( ca. 18 KB ), leistungsstarkes und sehr einfaches reaktives Framework. Es bietet fast alles, was Sie von einem vollständigen Framework erwarten. Wie die Verwaltung von Status, Komponenten, Logik und dem Rest. Aber mit einer Besonderheit müssen Sie kein HTML, CSS oder JSX schreiben, wenn Sie dies nicht möchten. Sehen Sie , was es kann .
Die Philosophie ähnelt VanJS, wenn Ihnen das bekannt vorkommt, aber mit viel mehr Funktionen und einer umfangreicheren API.
!NOTIZ! : Karton befindet sich in der Entwicklung, verwenden Sie ihn mit Vorsicht.
Sie können den Meilenstein v1.0.0 überprüfen, um einen Überblick über den Entwicklungsstand zu erhalten – Hilfe wird sehr geschätzt!
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!' ) ) ) ; Wenn Sie es zu Ihrer Website hinzufügen und Cardboard verwenden möchten, können Sie die Bundle-Datei importieren:
< script src =" node_modules/cardboard-js/dist/bundle/cardboard.bundle.js " > </ script >
< script >
const { div , p } = Carboard . allTags ;
</ script >Die Philosophie besteht darin, voll funktionsfähige und leistungsstarke Web-Apps erstellen zu können, ohne HTML, CSS oder JSX verwenden zu müssen. Nur JS oder TS. Anstatt HTML zu schreiben und dann JS zu erstellen, das mit dem HTML interagiert, und CSS hinzuzufügen, um die Seite zu gestalten. Sie schreiben direkt Code, der sowohl HTML , CSS , Status als auch Logik darstellt.
Sie benötigen auch keinen Build-/Kompilierungsprozess ( es sei denn, Sie verwenden TS oder möchten dies tun ). Da Cardboard so leicht ist, können Sie Ihre App als es6-Modul schreiben ( sehen Sie sich dieses Beispiel an, um ein Beispiel-Setup zu sehen ), sodass zumindest für die Entwicklung kein Build-Prozess erforderlich ist.
Es bietet eine robuste, sofort einsatzbereite Zustandsverwaltungslösung . Das Konzept ähnelt der Reaktion. Sie erstellen einen Status, verwenden den Status dann in Ihrer App, und wenn sich der Status ändert, wird er automatisch an der Stelle aktualisiert, an der Sie ihn verwendet haben.
Hier ist eine Liste einiger der angebotenen Funktionen ( es gibt jedoch noch mehr ):
style Tags erstellen und das CSS direkt als JS-Objekt schreiben.properties usw.).HINWEIS: Es gibt auch eine serverseitige Alternative zu Cardboard, die ich ebenfalls geschrieben habe, namens Hobo . Falls Sie etwas Ähnliches wie Cardboard benötigen, das serverseitig funktioniert! Ich plane, Cardboard in Version 2.0.0 auch serverseitig zum Laufen zu bringen. Freuen Sie sich also darauf oder helfen Sie mit!
Wenn Sie nicht gerne HTML, CSS oder JSX schreiben, wie ich. Oder benötigen Sie ein einfaches und leichtes Framework, das die meisten Dinge kann, die größere Frameworks bei geringerem Platzbedarf leisten können, und gleichzeitig sehr leistungsfähig ist? Cardboard könnte das Richtige für Sie sein! Mit Cardboard können Sie alles erstellen, von einer statischen Seite bis hin zu komplexeren Apps wie Dashboards. Es sollte die meisten Dinge können!
Aber es ist perfekt, wenn Sie eine sehr kleine Seite erstellen möchten, für die Sie ein reaktives Framework benötigen und es schnell erstellen muss.
Ich werde nicht lügen, ich hatte nicht damit gerechnet, dass ich das schreiben würde, als ich anfing, Cardboard zu schreiben. Es sollte ein kleines Experiment für ein anderes meiner Projekte (Hobo) sein, von dem ich dachte, dass es scheitern würde.
Was war das Experiment? Ich höre dich fragen. Nun, es ging nur darum, Hobo mit dem DOM arbeiten zu lassen, anstatt HTML als String darzustellen. Es ist lustig, wie sich die Dinge manchmal entwickeln! Wir wissen nie, wann wir etwas bauen werden, auf das wir stolz sein können.
Sie können einen Artikel darüber lesen, wie ich den ersten Kartonentwurf erstellt habe!
Ich werde Ihnen nicht die ganze Geschichte erzählen, aber ich weiß, dass Cardboard als Experiment begann, das zum Scheitern verurteilt war. Aber aus irgendeinem Grund passten alle Teile perfekt zueinander, bis Karton heute als funktionell angesehen werden kann. Allerdings ist es noch nicht fertig, bis dahin liegt noch viel Arbeit vor uns. Das bringt uns zu Ihnen. Ich bitte Sie hoffentlich, darüber nachzudenken, mitzuhelfen. Machen wir Pappe zu einem wertvollen Inhalt ;)
Warum der Name? : Lustige Geschichte, na ja, nicht wirklich. Der Name Cardboard soll an die Marke Hobo erinnern. Aber man könnte meinen, dass es so heißt, weil es wie Pappe nützlich, leicht, vielseitig und günstig ist.
Na, hallo! Ich bin immer offen für Hilfe bei Projekten, insbesondere bei diesem! Wenn Sie das Projekt interessant, nützlich oder unterhaltsam finden oder Sie eine andere Art von Gefühl verspüren und dieses Gefühl Sie dazu veranlasst, vielleicht darüber nachzudenken, mitzuhelfen, wäre das großartig!
Sie können beim Wiki helfen, das Projekt verwenden und testen, Fehler melden, Fehler beheben, Funktionen hinzufügen usw. Denken Sie daran, ein Problem zu hinterlassen, wenn die Änderung groß ist oder ein Kernkonzept von Cardboard ändert.
Schauen Sie sich diese Leitfäden an:
