cardboard js
1.0.0
카드보드에 오신 것을 환영합니다. 매우 가볍고 ( 약 18kb ) 성능이 뛰어나며 매우 간단한 반응형 프레임워크입니다. 이는 완전한 프레임워크에서 기대할 수 있는 거의 모든 것을 제공합니다. 상태, 구성 요소, 논리 등을 관리하는 것과 같습니다. 하지만 원하지 않는 경우에는 HTML, CSS 또는 JSX를 작성할 필요가 없습니다 . 그것이 무엇을 할 수 있는지 알아보세요.
철학적으로는 VanJS와 비슷하지만, 더 많은 기능과 더 광범위한 API가 있습니다.
!메모! : Cardboard는 개발 중이므로 주의해서 사용하세요.
개발 상태를 보려면 v1.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을 작성한 다음 HTML 과 상호 작용하는 JS를 만들고 CSS를 추가하여 페이지 스타일을 지정하는 대신. HTML , CSS , 상태 및 논리를 모두 나타내는 코드를 직접 작성합니다.
또한 빌드/컴파일 프로세스가 필요하지 않습니다( TS를 사용하거나 원하지 않는 한 ). 판지가 매우 가볍기 때문에 앱을 es6 모듈로 작성할 수 있으므로( 예제 설정을 보려면 이 예를 확인하세요 ) 적어도 개발을 위한 빌드 프로세스가 필요하지 않습니다.
이는 기본적으로 강력한 상태 관리 솔루션을 제공합니다. 개념은 반응과 유사합니다. 상태를 생성한 다음 앱에서 해당 상태를 사용하고, 상태가 변경될 때마다 사용했던 위치가 자동으로 업데이트됩니다.
다음은 제공되는 일부 기능 목록입니다( 하지만 더 많은 기능이 있습니다 ).
style 태그를 생성하고 CSS를 JS 객체로 직접 작성할 수 있습니다.properties 등).참고: 내가 작성한 Cardboard 에 대한 서버 측 대안인 Hobo 도 있습니다. 서버 측에서 작동하는 Cardboard와 유사한 것이 필요한 경우! v2.0.0에서는 Cardboard가 서버 측에서도 작동하도록 할 계획입니다. 그러니 당신은 그것을 기대하거나 도움을 줄 수 있습니다!
나처럼 HTML, CSS, JSX 작성을 좋아하지 않는다면. 또는 성능이 뛰어나면서도 더 작은 공간에서 더 큰 프레임워크가 수행할 수 있는 대부분의 작업을 수행할 수 있는 간단하고 가벼운 프레임워크가 필요한 경우 Cardboard가 적합할 수 있습니다! Cardboard를 사용하면 정적 페이지부터 대시보드와 같은 고급 앱까지 무엇이든 만들 수 있습니다. 대부분의 일을 할 수 있어야 합니다!
하지만 반응형 프레임워크가 필요하고 이를 빠르게 생성해야 하는 매우 작은 페이지를 생성하려는 경우에 적합합니다.
거짓말하지 않겠습니다. 제가 처음 Cardboard를 쓰기 시작했을 때 이 글을 쓰게 될 줄은 몰랐습니다. 그것은 내가 실패할 것이라고 생각했던 또 다른 프로젝트(Hobo)에 대한 작은 실험이 될 예정이었습니다.
어떤 실험이었나? 당신이 묻는 소리가 들립니다. 글쎄요, HTML을 문자열로 렌더링하는 대신 Hobo가 DOM과 작동하도록 만드는 것이었습니다. 가끔 일이 어떻게 진행되는지 재밌습니다! 우리는 언제 자랑스러워할 만한 것을 만들게 될지 결코 알 수 없습니다.
내가 판지의 초기 초안을 만든 방법에 대해 작성한 기사를 읽을 수 있습니다!
전체 내용을 말씀드릴 수는 없지만 Cardboard가 실패할 실험으로 시작되었다는 점은 알고 있습니다. 그러나 어떤 이유에서인지 Cardboard가 기능적인 것으로 간주될 수 있는 오늘날까지 모든 제품은 서로 완벽하게 어울리기 시작했습니다. 아직 끝나지 않았지만 그 시점까지는 여전히 많은 작업이 필요합니다. 그것은 우리를 당신에게로 데려갑니다. 도움을 주시길 바랍니다. Cardboard를 콘텐츠 가치 있게 만들어 봅시다 ;)
이름이 왜요? : 재미있는 이야기지만, 별로 그렇지는 않습니다. Hobo의 브랜드를 이어가기 위해 Cardboard라는 이름을 붙였습니다. 하지만 판지처럼 유용하고, 가볍고, 다재다능하고, 저렴하기 때문에 그런 이름이 붙었다고 생각할 수도 있습니다.
글쎄, 안녕하세요! 저는 항상 프로젝트에 대한 도움을 받을 준비가 되어 있으며, 특히 이번 프로젝트는 더욱 그렇습니다! 프로젝트가 흥미롭고, 유용하고, 재미 있다고 생각하거나 다른 종류의 감정을 느끼고 그 감정으로 인해 도움을 주고 싶은 마음이 든다면 정말 좋을 것입니다!
Wiki 작업, 프로젝트 사용 및 테스트, 버그 보고, 버그 수정, 기능 추가 등을 도울 수 있습니다. 변경 사항이 크거나 Cardboard의 일부 핵심 개념이 변경되는 경우 문제를 남겨 두는 것을 잊지 마세요.
다음 가이드를 살펴보세요.
