Roseview は、シンプルさを好みながらも重要な機能には妥協(xié)したくない人向けに設(shè)計されています。大規(guī)模なセットアップを必要とする重いフレームワークと格闘するのにうんざりしている場合は、Roseview を使用して、手間を最小限に抑えてエレガントな UI を構(gòu)築することができます。

RoseView を選ぶ理由

迅速な開発のための最小限のセットアップ

利用可能な cli ツールを使用してインストールするだけです。

npx create-rose-app your-project-name

直感的なコンポーネント システム

Roseview のコンポーネント システムを使用すると、再利用可能なモジュール式 UI 要素を非常に簡単に構(gòu)築できます。 htmlElement クラスを使用すると、強力でありながら操作が簡単なコンポーネントを作成できます。深くネストされた構(gòu)造に入る必要はありません。作成、スタイル設(shè)定、レンダリングするだけです。
これにより、コンポーネント內(nèi)にスタイルを直接適用できるようになり、各コンポーネントがスコープ付きでカプセル化されたスタイルを持つことが保証されます。

import { htmlElement } from 'roseview';

const button = function(parent){
let btn = new htmlElement(parent, 'button', {
  textContent: 'Click Me!',
  onclick: () => alert('Button Clicked')
});

// You can use in Emotion like style
btn.css({
  background: '#FF6347',
  color: '#FFFFFF',
  padding: '10px 20px',
  borderRadius: '5px'
});

// Or in this manner
btn.css`
background: #FF6347;
color: #FFFFFF;
`
return btn;
}

軽量のハッシュベースのルーティング

ルーティングに対するこのシンプルなアプローチにより、重い依存関係を追加したり、冗長なコードを記述したりせずに、ページ ナビゲーションを管理できます。

import { HashRouter } from "roseview";
import { createApp } from "roseview";

import homePage from "./pages/index.js";
import aboutPage from "./pages/about.js";

const routes = [
    { path: "index", component: homePage },
    { path: "about", component: aboutPage },
];
const router = HashRouter(routes);

window.app = createApp(homePage).use(router).mount("#app");

事後対応狀態(tài)管理

createSignal、createReactiveSignal、showIF を使用すると、UI が変更されたときに自動的に更新するリアクティブ変數(shù)を設(shè)定して、ユーザーにスムーズで応答性の高いエクスペリエンスを作成できます。

import { createSignal, htmlLayout, htmlElement } from 'roseview';

const [count, setCount] = createSignal(0);

let homePage = new htmlLayout("linear", "top, scrolly, fillxy");
const button = new htmlElement(homePage, 'button', {
  textContent: `Clicked ${count()} times`,
  onclick: () => setCount(count() + 1)
});

export default homePage;

モジュール式で拡張可能なアーキテクチャ

Roseview は、必要に応じて拡張できるように構(gòu)築されています。すぐに使える重要な機能が提供されますが、プラグインや追加のライブラリを使用して拡張することを妨げるものではありません。カスタム アニメーションの統(tǒng)合、データ視覚化ライブラリの追加、高度な API の組み込みのいずれを行う場合でも、Roseview を使用すると機能を柔軟に拡張できます。

ゼロ學習曲線

誰でも簡単に手に取って構(gòu)築を始めることができます。 React、Vue、またはバニラ JavaScript のいずれを使用している場合でも、構(gòu)文は自然であり、生産性を迅速に高めるのに役立ちます。

Roseview は、UI 開発を親しみやすく、強力かつ迅速に行います。バラは赤く、ローズビューは痩せています。クリーンなコードで美しい UI を構(gòu)築します。

以上がRoseview の紹介: 必要なものがすべて揃っており、不要なものは何もない軽量 UI フレームワークの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。