cardboard js
1.0.0
Добро пожаловать в Картон. Чрезвычайно легкий ( около 18 КБ ), производительный и очень простой реактивный фреймворк. Он предлагает почти все, что вы ожидаете от полноценной платформы. Например, управление состоянием, компонентами, логикой и всем остальным. Но с одной стороны, вам не нужно писать HTML, CSS или JSX, если вы этого не хотите. Посмотрите , что он может сделать .
По своей философии он похож на VanJS, если это вам важно, но с гораздо большим количеством функций и более обширным API.
!ПРИМЕЧАНИЕ! : Картон находится в разработке, используйте его с осторожностью.
Вы можете просмотреть этап разработки версии 1.0.0, чтобы получить представление о состоянии разработки — помощь будет очень признательна!
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!' ) ) ) ; Если вы хотите добавить его на свой сайт и начать использовать Cardboard, вы можете импортировать файл пакета:
< script src =" node_modules/cardboard-js/dist/bundle/cardboard.bundle.js " > </ script >
< script >
const { div , p } = Carboard . allTags ;
</ script >Философия заключается в том, чтобы иметь возможность создавать полнофункциональные и производительные веб-приложения без необходимости использования HTML, CSS или JSX. Просто JS или TS. Вместо написания HTML , а затем создания JS, который взаимодействует с HTML , и добавления CSS для стилизации страницы. Вы напрямую пишете код, который представляет как HTML , CSS , состояние , так и логику .
Вам также не нужен процесс сборки/компиляции ( если вы не используете TS или не хотите этого ). Учитывая, что картон настолько легкий, вы можете написать свое приложение в виде модуля es6 ( проверьте этот пример, чтобы увидеть пример настройки ), поэтому нет необходимости в каком-либо процессе сборки, по крайней мере, для разработки.
Он предлагает надежное решение для управления состоянием « из коробки». Концепция аналогична реакции. Вы создаете состояние, затем используете его в своем приложении, и всякий раз, когда состояние меняется, оно автоматически обновляется везде, где вы его использовали.
Вот список некоторых функций, которые он предлагает ( хотя их больше ):
style и писать CSS непосредственно как объект JS.properties стиля и т. д.).ПРИМЕЧАНИЕ. Существует также написанная мною серверная альтернатива Cardboard под названием Hobo . Если вам нужно что-то похожее на Cardboard, работающее на стороне сервера! Я планирую заставить Cardboard работать и на стороне сервера в версии 2.0.0. Так что вы можете с нетерпением ждать этого или помочь!
Если вам не нравится писать HTML, CSS или JSX, как и мне. Или вам нужен простой и легкий фреймворк, который может делать большинство вещей, которые могут делать более крупные фреймворки, занимая при этом меньше места, но при этом очень производительный, Cardboard может подойти вам! Cardboard можно использовать для создания чего угодно: от статической страницы до более продвинутых приложений, таких как информационные панели. Он должен уметь делать большинство вещей!
Но он идеально подходит, когда вы хотите создать очень маленькую страницу, где вам нужна реактивная структура и вам нужно создать ее быстро.
Не буду врать, я не ожидал, что напишу это, когда впервые начал писать «Картон». Это должен был быть небольшой эксперимент для другого моего проекта (Бродяга), который, как я думал, провалится.
В чем заключался эксперимент? Я слышу, как ты спрашиваешь. Ну, это было просто для того, чтобы Hobo работал с DOM, а не отображал HTML как строку. Забавно, как иногда все развивается! Мы никогда не знаем, когда построим что-то, чем можно будет гордиться.
Вы можете прочитать мою статью о том, как я сделал первоначальный набросок из картона!
Я не буду рассказывать вам всю историю, но знайте, что Cardboard начался как эксперимент, который должен был провалиться. Но по какой-то причине каждая деталь стала идеально сочетаться друг с другом, вплоть до сегодняшнего дня, когда картон можно было считать функциональным. Хотя это еще не закончено, до этого момента еще много работы. Это приведет нас к вам. Надеюсь, я попрошу вас подумать о помощи. Давайте сделаем Cardboard достойным своего содержимого ;)
Почему такое имя? : Забавная история, ну не совсем. Он назван Cardboard, чтобы сохранить бренд Hobo. Но можно подумать, что он так назван, потому что, как и картон, он полезен, легок, универсален и дешев.
Ну, здравствуйте! Я всегда открыт для помощи по проектам, и по этому в частности! Если вы находите проект интересным, полезным, веселым или испытываете какие-то другие эмоции, и эти эмоции склоняют вас, возможно, подумать о помощи, это было бы здорово!
Вы можете помочь с Wiki, использовать и тестировать проект, сообщать об ошибках, исправлять ошибки, добавлять функции и т. д. Просто не забудьте оставить проблему, если изменение большое или меняет какую-то основную концепцию картона.
Взгляните на эти руководства:
