cardboard jsダウンロード - cardboard jsソースコードのダウンロード

cardboard js

ウェブサイトデータ

1.0.0

ダウンロード

? Carboard.js

テストメイン

段ボールへようこそ。非常に軽量(約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 ( ) ) ;

?はじめに - 入門ガイドです。

? Wiki - 人間のドキュメントと例用。

?ドキュメント - 技術文書用。

設定

インストール

 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 をサイトに追加して Cardboard の使用を開始したい場合は、バンドルファイルをインポートできます。

 < script src =" node_modules/cardboard-js/dist/bundle/cardboard.bundle.js " > </ script >
< script >
const { div , p } = Carboard . allTags ;
</ script >

それは何をするのですか？

その理念は、HTML、CSS、または JSX を使用せずに、完全に機能し、パフォーマンスの高い Web アプリを作成できるようにすることです。 JS または TS だけです。 HTML を記述してからHTMLと対話する JS を作成し、 CSS を追加してページのスタイルを設定する代わりに。 HTML 、 CSS 、状態、ロジックの両方を表すコードを直接記述します。

また、ビルド/コンパイルプロセスも必要ありません ( TS を使用するか、使用したい場合を除く)。 Cardboard は非常に軽量であるため、アプリを es6 モジュールとして作成できます (セットアップ例を確認するには、この例を確認してください)。そのため、少なくとも開発にはビルドプロセスが必要ありません。

すぐに使える堅牢な状態管理ソリューションを提供します。概念は反応に似ています。状態を作成し、その状態をアプリで使用すると、状態が変更されるたびに、使用した場所に関係なく自動的に更新されます。

これが提供する機能の一部のリストです (さらに多くの機能があります):

HTML は不要: もう、気の利いた小さな山括弧を書く必要はありません。 Cardboard を使用すると、任意の HTML を作成できます。
状態: すぐに使用できる反応状態。
操作: 状態に基づいて、任意の要素の HTML プロパティを手動で操作します。つまり、クラスの追加、要素の表示/非表示、スタイルの削除、イベントのリッスンなど...
ロジック: 非常に人間工学的かつシンプルな方法でロジックを追加します。
テキストテンプレート: 状態を操作する際のテキストとテンプレートの操作が簡単です。
コンポーネント: 他のフレームワークと同様に、再利用可能なコンポーネントを作成できます。
トゥイーン: すぐに使える非常にシンプルなトゥイーン。
ルーティング: シングルページアプリを簡単に作成できます。
JS 内の CSS : styleタグを作成し、CSS を JS オブジェクトとして直接記述することができます。
Typed : Cardboard は 100% 型指定されることを目指しています。つまり、提案可能なプロパティ、メソッドなどを提案します (スタイルpropertiesなど)。
ATAP : 可能な限りテスト済み!

注: Cardboardに代わるサーバー側の代替手段として、私が書いたHoboというものもあります。サーバー側で動作する Cardboard のようなものが必要な場合に備えて! v2.0.0 では、Cardboard をサーバーサイドでも動作させる予定です。だから、それを楽しみにしていてもいいし、手伝ってもいいよ！

これは誰のためのものですか？

私のように、HTML、CSS、または JSX を書くのが好きではない場合は、または、大きなフレームワークで実行できるほとんどのことをより小さなフットプリントで実行でき、かつ非常にパフォーマンスが高い、シンプルで軽量のフレームワークが必要な場合は、Cardboard が最適かもしれません。 Cardboard を使用すると、静的なページからダッシュボードなどのより高度なアプリまで、あらゆるものを構築できます。大抵のことはできるはずです！

ただし、リアクティブなフレームワークが必要で、迅速に作成する必要がある非常に小さなページを作成する場合には最適です。

バックストーリー

嘘をつくつもりはありませんが、最初に Cardboard を書き始めたときは、これを書くことになるとは予想していませんでした。それは私 (ほぼ) の別のプロジェクトのためのちょっとした実験のはずでしたが、失敗すると思われました。
実験とは何でしたか？という質問が聞こえます。それは、HTML を文字列としてレンダリングするのではなく、Hobo を DOM で動作させるためだけでした。時々物事がどのように展開するかは面白いです！いつ誇りに思えるものを構築できるかはわかりません。

ダンボールの初稿をどのように作成したかについては、記事をご覧ください。

詳しい話はしませんが、Cardboard は失敗することを前提とした実験として始まったことは知っておいてください。しかし、何らかの理由で、すべてのピースが互いに完璧にフィットするようになり、今日では Cardboard が機能的であるとみなされるようになりました。まだ終わっていませんが、その時点までにはまだ多くの作業が残っています。それが私たちをあなたに連れて行きます。できれば、ご協力をご検討いただけますようお願いいたします。 Cardboard の中身を価値あるものにしましょう ;)

なぜ名前が？ : 面白い話ですが、実はそうではありません。 Hobo のブランドを維持するために Cardboard と名付けられました。しかし、段ボールのように便利で、軽く、多用途で、安価であるため、その名前が付けられたと考えることもできます。