wui_builder

Une bibliothèque de fléchettes pour créer des interfaces utilisateur pour le Web, inspirées de ReactJS

Pour la création de déclaratifs déclaratifs, les interfaces utilisateur Web basées sur des composants dans DART.

Fournit une riche bibliothèque d'éléments virtuels typés pour SVG et HTML standard.

Prend en charge la définition des composants personnalisés avec une interface similaire à React. Toutes les mêmes méthodes de cycle de vie sont prises en charge.

Construit avec un rendu asynchrone à l'esprit dès le début.

Entièrement conforme à Dart 2, en mode Strong et au DDC.

Documentation et exemples

Consultez la documentation sur les pages GitHub pour un regard approfondi sur le cadre

Qu'est-ce qui rend ce cadre DOM virtuel différent?

Il est écrit en fléchette. Plus:

Éléments DOM virtuels générés

Le générateur est la caractéristique la plus unique de wui_builder. Le générateur génère Virtual Dom Element Builder pour chaque type d'élément défini dans les packages DART HTML et SVG. Chaque constructeur d'élément DOM virtuel fournit les mêmes setters tapés que son élément HTML / SVG correspondant. Cela facilite l'écriture de composés résilients.

Planification de mise à jour configurable

Ensuite, WUI_BUILDER prend en charge le rendu itératif pour éviter de bloquer le fil principal sur les grandes mises à jour. Les mises à jour itératives uniquement les processus sur les rappels inactifs, ce qui signifie que le travail et la mise en page de rendu seront divisés sur plusieurs images. Wui_builder donne le pouvoir au développeur de décider quand les composants doivent être rendus. Il permet au développeur de décider si un composant met à jour de manière syncrone, sur la trame d'animation ou sur le rappel inactif. Idéalement, un composant sera soit:

• Rendez-vous sur le cadre d'animation pour les mises à jour de haute priorité qui doivent se terminer. Les mises à jour des composants Mulitiple peuvent être rendues par lots sur les trames d'animation.
• Rendez-vous sur des rappels inactifs pour les mises à jour de faible priorité qui peuvent être divisées entre les trames.

Cependant, les mises à jour syncronous sont également autorisées à fonctionner à la demande, sans attendre un cadre d'animation ou un rappel inactif.

Lot de mise à jour intelligente

Enfin, WUI_BUILDER empêche les mises à jour peu accessibles lorsque plusieurs mises à jour du même composant sont en file d'attente avant que tout ne puisse traiter. Par exemple, disons que j'ai un composant qui met à jour sur le cadre d'animation à l'aide de SetStateOnanimationFrame. Si SetStateOnanimationFrame est appelé deux fois entre les cadres, le processus de mise à jour ne sera exécuté qu'une seule fois tout en permettant à l'exécution des deux fonctions de setter d'état.

Remarque, RequestIdleCallback n'est pas actuellement pris en charge par tous les navigateurs et wui_builder n'inclut pas de polyfill pour le moment. Le rendu synchrone fonctionne toujours sur tous les navigateurs. Voir un tableau de compatibilité ici.

Syntaxe

 class HelloWorldProps {
    final String text;
    HelloWorldProps ( this .text);
}

class HelloWorld extends PComponent < HelloWorldProps > {
    HelloWorld ( String text) : super ( HelloWorldProps (text));

    @override
    VNode render () => VDivElement ()
        ..text = props.text;
}

// instantiate the component, pass it an instance of HelloWorldProps
final component = HelloWorld ( 'Hello world' );

// render the virtual element into a container
render (component, querySelector ( '#container' ));

Consultez la documentation sur les pages GitHub pour des exemples plus approfondis.