bemtvjs

Bevor Sie mit BEMTV spielen, denken Sie zweimal nach und wenn Sie zu viel Spaß machen, wundern Sie sich nicht!

Übersetzungen:

• Português machen Brasil

---

Warum BEMTV?

Derzeit gibt es im JavaScript -Ökosystem hervorragende Tools für die Entwicklung der Benutzeroberfläche. BEMTV wiederverwendet viel von dem, was diese Werkzeuge mitgebracht haben, und bringt jedoch keine Kopie, sondern etwas völlig Neues.

Schlüsselmerkmale

• Reiniger -Syntax als andere UI -Bibliotheken und Frameworks.

• Keine "Requisiten". Eine neue Möglichkeit für übergeordnete Komponenten, Daten an untergeordnete Komponenten weiterzugeben.

• Anstelle eines gemeinsamen Routing -Systems oder basierend auf Dateien bringt BEMTV ein neues innovatives Routing -System mit, das in der Lage ist, eine Komponente nach ihrer Verwendung in der Anwendung automatisch in eine Route zu verwandeln.

• Trennung der Logik in Bezug auf DOM -Ereignisse aus der Komponentenvorlage.

• Halbautomatische Codespaltung.

• CSS-in-JS und CSS-in-Template.

• Das Design der Komponenten ermöglicht den Export aller zu ihm gehörenden Methoden, wodurch die Verwendung dieser Methoden in jedem Teil der Anwendung verwendet wird.

• Einfache Zwei-Wege-Bindung zwischen Komponentenvariablen und Eigenschaften und Attributen von HTML-Elementen.

• Haken.

• Transformationsfunktionen, die Datenstrukturen wie Array, Set, Map und Object von ihrem Markup für die Vorlage trennen.

• Brackethtml Markup Sprache: statt <div>Hey!</div> tun: div[Hey!] .

• Deklarativer syntaktischer Zucker durch die Komponentenvorlage.

• Es ist nur JavaScript, kein JSX oder Build-Time benötigt. Fügen Sie es einfach zu Ihrem index.html und haben Sie Spaß!

Zeig mir einen Code!

Alle Komponentenmethoden können in anderen Teilen der Anwendung exportiert und verwendet werden:

 import { _ } from "bemtv" ;

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

Auf diese Weise können Sie die Komponentenlogik in verschiedene Funktionen unterteilen, die den Lebenszyklus, den Zustand der Komponente verwenden können, DOM -Elemente, Styling, Routing, DOM -Ereignisse ...

Hinzufügen von CSS- und DOM -Ereignissen:

 import { _ } from "bemtv" ;

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

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

css `
  color: blue;
` ;

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

Binden Sie die DOM -Eigenschaft des Elements mit der Komponente::

 import { _ } from "bemtv" ;

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

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

Zeigen Sie einen Fallback, während die Komponente importiert wird:

 import { _ } from "bemtv" ;

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

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

Erstellen eines Routenlinks:

 import { _ } from "bemtv" ;

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

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

BEMTV verwendet ein innovatives automatisches Routenerstellungssystem, dies ist möglich, da sich die Komponenten wie Routen/Seiten verhalten können.

Gegenkomponente:

 import { _ } from "bemtv" ;

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

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

template `button[Clicked: $count ]` ;

Dies ist nur die Spitze des Eisbergs, viele von BEMTVs Merkmalen zeigen wirklich ihre Kraft mit Übung und in Kombination mit anderen!

Was kommt als nächstes

BEMTV ist ein aktuelles und wenig bekanntes Projekt. Ich habe mehrere Ideen, um die Entwicklung von IT und anderen Projekten umzusetzen, wie z.

Ich arbeite derzeit Vollzeit bei BEMTV und erhalte keine finanzielle Entschädigung. Wenn Sie BEMTV mögen, sollten Sie das Projekt in Betracht ziehen. Ihre Hilfe wird feststellen, ob das Projekt weiterhin höhere Höhen erreichen kann.

Wenn Sie etwas Freizeit haben, kommen Sie und seien Sie Teil des BEMTV!

Alle Hilfe wird geschätzt!

Vergessen Sie nicht, Ihren Stern dem Projekt zu geben, da dies mich dazu ermutigt, sich weiter zu entwickeln.