bemtvjs Téléchargement - bemtvjs Téléchargement du code source

bemtvjs

Composants tiers

v0.9.0 - No “props” | Breaking Changes

Télécharger

Logo BEMTV

Avant de jouer avec BEMTV, réfléchissez à deux fois et si vous aimez trop, ne soyez pas surpris!

Traductions:

Português fait le Brasil

Pourquoi bemtv?

Actuellement dans l'écosystème JavaScript, il existe d'excellents outils pour développer l'interface utilisateur. BEMTV réutilise une grande partie de ce que ces outils ont apporté et apporte, cependant, ce n'est pas une copie, c'est quelque chose de totalement nouveau.

Caractéristiques clés

Syntaxe propre que les autres bibliothèques et cadres d'interface utilisateur.
Pas de «accessoires». Une nouvelle façon pour le composant parent de transmettre des données aux composants enfants.
Au lieu d'un système de routage commun ou basé sur des fichiers, BEMTV apporte un nouveau système de routage innovant capable de «transformer» un composant en une route automatiquement en fonction de son utilisation dans l'application.
Séparation de la logique liée aux événements DOM du modèle de composant.
Splignant du code semi-automatique.
CSS-in-JS et CSS-in-template.
La conception des composants permet l'exportation de toutes les méthodes qui lui appartiennent, ce qui permet d'utiliser ces méthodes dans n'importe quelle partie de l'application.
Liaison bidirectionnelle facile entre les variables des composants et les propriétés et attributs des éléments HTML.
Crochets.
Fonctions de transformation qui séparent les structures de données comme le tableau, le définition, la carte et l'objet de leur balisage pour le modèle.
Brackethtml Language de balisage: au lieu de <div>Hey!</div> Faites ceci: div[Hey!] .
Sucres syntaxiques déclaratifs via le modèle de composant.
C'est juste JavaScript, pas de JSX ou de construction nécessaire, ajoutez-le simplement à votre index.html et amusez-vous!

Montrez-moi du code!

Toutes les méthodes de composants peuvent être exportées et utilisées dans d'autres parties de l'application:

 import { _ } from "bemtv" ;

export const { click$ , onMount , route , css , template } = _ `Home` ( ) ;

Cela vous permet de séparer la logique des composants en plusieurs fonctions qui peuvent utiliser le cycle de vie du composant, l'état, la manipulation des éléments DOM, le style, le routage, les événements DOM ...

Ajout d'événements CSS et DOM:

 import { _ } from "bemtv" ;

export const { click$ , css , template } = _ `Button` ( ) ;

click$ ( ( ) => console . log ( "Clicked!!!" ) ) ;

css `
  color: blue;
` ;

template `button[ I am a button! ]` ;

Bind la propriété DOM de l'élément avec les composants:

 import { _ } from "bemtv" ;

const { $ , template } = _ `Input` ( {
  inputValue : 0 ,
} ) ;

template `input[type="number" $inputValue<value]` ;

Affichez une repli pendant que le composant est importé:

 import { _ } from "bemtv" ;

const { template } = _ `App` ( ) ;

template `UserData[](Loading...)` ;

Création d'un lien d'itinéraire:

 import { _ } from "bemtv" ;

const { template } = _ `App` ( ) ;

template `#AboutUs[ Link to about us ]` ;

BEMTV utilise un système innovant de création de routes automatiques, cela est possible car les composants peuvent se comporter comme des itinéraires / pages.

Composant de compteur:

 import { _ } from "bemtv" ;

const { click$ , $ , template } = _ `Counter` ( { count : 0 } ) ;

click$ ( ( ) => $ . count ++ ) ;

template `button[Clicked: $count ]` ;

Ce n'est que la pointe de l'iceberg, de nombreuses fonctionnalités de BEMTV montrent vraiment leur pouvoir avec la pratique et lorsqu'ils sont combinés avec d'autres!

Quelle est la prochaine étape

BEMTV est un projet récent et peu connu, j'ai plusieurs idées pour poursuivre le développement de l'informatique et d'autres projets qui l'entourent, comme une syntaxe mettant en évidence l'extension.

Je travaille actuellement à plein temps chez BEMTV et je ne reçois aucune compensation financière, si vous aimez BEMTV, veuillez envisager de soutenir le projet, votre aide déterminera si le projet peut continuer à atteindre des sommets plus élevés.

Si vous avez du temps libre, venez faire partie de la construction de BEMTV!

Toute aide est appréciée!