Hibiki HTML

Hibiki HTML ist ein neues Web-Framework zum Erstellen moderner Front-End-Anwendungen ohne Gerüste oder Einrichten eines JavaScript-Stacks, das vollständig skriptgesteuert und durch Back-End-Code gesteuert werden kann .

Hibiki HTML ist mit jeder Backend-Sprache oder jedem Backend-Framework,jedem CSS-Framework und jeder bestehenden Backend-Vorlagensprache kompatibel.

Für eine interaktive Komplettlösung schauen Sie sich bitte das interaktive HTML-Tutorial von Hibiki an .

Hibiki HTML-Ressourcen

Hibiki wurde in Console vorgestellt , einem großartigen Newsletter, um mehr über Open-Source-Projekte zu erfahren!

Getting Started

Die ersten Schritte sind einfach.Es gibt keinen JavaScript-Stack,der eingerichtet werden muss,keine Boilerplate/kein Gerüst und keine Build-Tools,die heruntergeladen und ausgeführt werden müssen.Fügen Sie einfach ein Skript-Tag oben auf Ihrer Seite oder Vorlage ein:

<script src="https://cdn.hibikihtml.com/hibiki/v0.3.4/hibiki-prod.min.js"></script>

Verpacken Sie einen beliebigen Teil Ihres Inhalts mit einem <template hibiki>-Tag und Sie haben Ihre erste Hibiki-HTML-App. Alle reinen HTML-Inhalte werden unverändert gerendert, und da Hibiki HTML den HTML-Parser des Browsers verwendet, folgt es den gleichen Regeln wie Standard-Browser-HTML.

Beachten Sie, dass alle diese Codebeispiele im Hibiki HTML Playground angezeigt und bearbeitet werden können .

<template hibiki>
  <h1 class="title">&#x1f338; Hibiki HTML</h1>
  <p>Hibiki HTML <i>is</i> HTML</p>
</template>

(Spielplatz-Link - https://playground.hibikihtml.com/?codeid=readme-gs )

Ab v0.3.3 können Sie Ihren Hibiki-Code auch in ein <script type="text/hibiki-html">-Tag einschließen und optional auf Ihren Hibiki-Quellcode und Ihre Anfangsdaten als Remote-URLs verweisen:

<!-- Standardweise mit Template-Tag -->
<template hibiki> ... Hibiki HTML code here </template>

<!-- Inline-Code, eingeschlossen in script-Tag (vor Crawler-Indizierung geschützt) -->
<script type="text/hibiki-html"> ... Hibiki HTML code here ... </script>

<!-- Code von Remote-URL laden -->
<script type="text/hibiki-html" src="/url/to/hibiki/src.html"></script>

<!-- Code und Daten von Remote-URLs laden (Daten müssen vom Typ „application/json“ sein) -->
<script type="text/hibiki-html" src="/url/to/hibiki/src.html" datasrc="/url/to/data.json"></script>

Daten/Rendering dynamischer Inhalte

Hibiki HTML-Anwendungen haben ein eingebautes Frontend-Datenmodell. Sie können es mit jedem JSON-Objekt mit dem Tag <hibiki-data> initialisieren . Verwenden Sie zum Rendern von Text das <h-text> -Tag oder die Inline - {{ ... }} -Syntax. Attribute und Stileigenschaften werden dynamisch ausgewertet, wenn sie mit einem * beginnen .

<template hibiki>
  <hibiki-data>
    {"color": "blue", "name": "Mike"}
  </hibiki-data>
  <p>
    {{ $.name }}'s favorite color is 
    <span style="font-weight: bold; color: *$.color">{{ $.color }}</span>
  </p>
</template>

(Spielplatz-Link – https://playground.hibikihtml.com/?codeid=readme-data-1 )

Hibiki HTML unterstützt eine vollständige Ausdruckssprache, einschließlich aller standardmäßigen bedingten und arithmetischen Operatoren. class.[class-name]="true/false expression" ein-/ausgeschaltet werden .

<template hibiki>
  <hibiki-data>
    {"numlights": 4, "selected": true, "index": 5, "isprimary": true}
  </hibiki-data>
  <div class="box" style="font-weight: *($.selected ? 'bold' : 'normal')">
    Bold Text (if selected)
  </div>
  <div class="box">Index: <h-text bind="$.index + 1"></h-text></div>
  <div class="box">
    There are {{$.numlights}} light{{$.numlights > 1 ? 's' : ''}}
  </div>
  <div class="box">
    <button class="button" class.is-primary="*$.isprimary">Primary Button</button>
  </div>
</template>

(Spielplatz-Link - https://playground.hibikihtml.com/?codeid=readme-data-2 )

Sie können Elemente mit dem if -Attribut bedingt einschließen. Schleifen werden vom foreach - Attribut behandelt. Sie können Arrays oder Objekte durchlaufen. Das Attribut foreach verwendet eine spezielle Syntax von @item in $.array , wobei jede Iteration @item einem Element des Arrays oder Objekts zugewiesen wird. Wenn Sie eine zweite Variable angeben, wird der Array-Index oder Elementschlüssel erfasst: (@item, @key) in $.object oder (@item, @idx) in $.array .

<template hibiki>
  <hibiki-data>
    {"fruits": [{"name": "apple", "emoji": "&#127822;"},
                {"name": "banana", "emoji": "&#127820;"}, 
                {"name": "blueberry", "emoji": "&#129744;"}], 
     "selected": "banana"}
  </hibiki-data>
  <div class="content box">
    <ul>
      <li foreach="@fruit in $.fruits">
        {{ @fruit.name }} {{ @fruit.emoji }}
        <span if="@fruit.name == $.selected">(selected)</span>
      </li>
    </ul>
  </div>
</template>

(Spielplatz-Link - https://playground.hibikihtml.com/?codeid=readme-data-3 )

Handlers

Um Daten zu aktualisieren (und Inhalte dynamisch zu ändern), unterstützt Hibiki HTML Handler . Grundlegende Handler reagieren auf Ereignisse wie click , mount , submit , change usw.

<template hibiki>
  <hibiki-data>{"color": "blue"}</hibiki-data>
  <div class="box" style="background-color: *$.color; color: white">
    The color is {{$.color}}
  </div>
  <button class="button" click.handler="$.color = 'green'">Change Color</button>
</template>

(Spielplatz-Link – https://playground.hibikihtml.com/?codeid=readme-handlers-1 )

Sie können Remote-AJAX-Aufrufe für JSON-Daten mit einem Remote-Handler durchführen. In diesem Beispiel gibt der Aufruf von https://testapi.hibikihtml.com/api/get-color-1 die JSON-Antwort {"color": "purple"} zurück . Wir weisen es einer Kontextvariablen @resp zu und weisen dann $.color = @resp.color .

<template hibiki>
  <hibiki-data>{"color": "blue"}</hibiki-data>
  <div class="box" style="background-color: *$.color; color: white">
    The color is {{$.color}}
  </div>
  <button class="button" click.handler="$.color = 'green'">Change Color</button>
  <button class="button"
    click.handler="@resp = GET https://testapi.hibikihtml.com/api/get-color-1; $.color = @resp.color;">
    GET /api/get-color-1
  </button>
</template>

(Spielplatz-Link – https://playground.hibikihtml.com/?codeid=readme-handlers-2 )

Sie können GET-, POST-, PUT-, PATCH- oder DELETE-Anforderungen stellen, indem Sie das Verb vor der URL ändern. Sie können Abfrageargumente (oder JSON-Datenkörper) übergeben, indem Sie Argumente an Ihren Handler übergeben, indem Sie (arg1=val1, arg2=val2...) (komplexe Argumente werden JSON-codiert), und Sie können lokale Handler mit der define-handler -Tag zur Vereinfachung und Wiederverwendung.

<template hibiki>
  <hibiki-data>{"color": "blue"}</hibiki-data>
  <define-handler name="//@local/get-color">
    @resp = GET https://testapi.hibikihtml.com/api/get-color-1(name="Michelle");
    $.color = @resp.color;
  </define-handler>
  <div class="box" style="background-color: *$.color; color: white">
    The color is {{$.color}}
  </div>
  <button class="button" click.handler="$.color = 'green'">Change Color</button>
  <button class="button" click.handler="//@local/get-color">
    Get Michelle's Color
  </button>
</template>

(Spielplatz-Link – https://playground.hibikihtml.com/?codeid=readme-handlers-3 )

Eine Verbindung zu einer bestehenden API? Keine Sorge,die Hibiki-HTML-Handler unterstützen erweiterte Optionen wie CORS,CSRF,Parameterkodierungen,BLOB-Ergebnisse und mehrteilige Dateiuploads.

Hibiki Actions

Die Magie von Hibiki HTML besteht darin, dass jeder Handler wirklich nur eine Reihe von Aktionen ist. Hibiki-Aktionen sind Primitive wie setdata , if , callhandler , fireevent , invalidate , html usw. Jede Aktion, die Sie in einen Handler schreiben können, hat auch eine JSON-Darstellung.

Das bedeutet, dass wir einen Backend- Handler schreiben können, der eine JSON-Antwort zurückgibt, die das Frontend schreibt und aktualisiert! Hier ist eine beispielhafte JSON-Antwort, die der Ausführung $.color = 'DeepSkyBlue' im Frontend entspricht:

{"hibikiactions": [
    {"actiontype": "setdata", "setpath": "$.color", "data": "DeepSkyBlue"}
]}

Ich habe https://testapi.hibikihtml.com/api/set-color-action eingerichtet , um genau das zurückzugeben. Wenn wir nun unseren Klick-Handler diese URL aufrufen lassen, sehen wir, dass sich die Farbe automatisch ändert.

<template hibiki>
  <hibiki-data>{"color": "red"}</hibiki-data>
  <div class="box" style="background-color: *$.color; color: white">
    The color is {{$.color}}
  </div>
  <button class="button" click.handler="$.color = 'green'">Change Color</button>
  <button class="button" click.handler="GET https://testapi.hibikihtml.com/api/set-color-action;">
    Backend Set Color Action
  </button>
</template>

(Spielplatz-Link – https://playground.hibikihtml.com/?codeid=readme-actions-1 )

Backend-Handler sind sehr leistungsfähig. Sie können Rückgabewerte festlegen, Daten und BLOBs (wie Bilder) in einer Anfrage zurückgeben, Frontend- und Backend-Daten mit Ausdrücken mischen, Aktionen bedingt ausführen und vieles mehr. Sie können auch Backend-Handler verwenden, um mehrseitige Hibiki-HTML-Anwendungen zu erstellen, indem Sie eine neue HTML-Vorlage zum Rendern zurückgeben.

Komponenten und Bibliotheken

Hibiki HTML macht es einfach,Komponenten zu verwenden,zu teilen und zu bündeln,damit sie leicht wiederverwendet werden können.Das Ökosystem steht noch am Anfang,aber Sie können native Hibiki HTML-Komponenten schreiben,JavaScript von Drittanbietern (D3,CodeMirror usw.)verknüpfen und ReactJS-Komponenten importieren.

<template hibiki>
  <define-component name="colorbox">
    <div class="box" style="background-color: *$args.color; color: white">
      The color is {{$args.color}}
    </div>
  </define-component>
  
  <local-colorbox color="green"></local-colorbox>
  <local-colorbox color="blue"></local-colorbox>
  <local-colorbox color="purple"></local-colorbox>
</template>

(Spielplatz-Link – https://playground.hibikihtml.com/?codeid=readme-comps-1 )

Bulma UI-Komponenten-Bibliothek

Ich habe einen Hibiki-Wrapper für die hervorragende Bulma UI Library veröffentlicht . Es kann einfach in jede Hibiki-Vorlage eingefügt werden, indem Folgendes hinzugefügt wird:

<import-library lib="hibiki/bulma@v0.1.0" prefix="b"></import-library>

Die Dokumentation für die Hibiki+Bulma-Bibliothek finden Sie unter https://libs.hibikihtml.com/test-bulma.html . Es enthält viele interaktive Steuerelemente, darunter Registerkarten, Menüs, Karten, Dropdowns, Formularsteuerelemente und eine Datentabelle, die Sortierung und Paginierung unterstützt.

Interactive Tutorial

Möchten Sie mehr erfahren? Sehen Sie sich das interaktive Tutorial an .


Open Source

Der Quellcode für Hibiki HTML ist auf GitHub verfügbar unter: https://github.com/dashborg/hibiki . Es ist unter der Mozilla Public License v2.0 lizenziert – https://mozilla.org/MPL/2.0/ .

Mozilla hat eine ausgezeichnete FAQ , aber im Grunde erlaubt Ihnen diese Lizenz, Hibiki HTML in jedem Projekt (persönlich, kommerziell oder Open-Source) zu verwenden. Die einzige Einschränkung besteht darin, dass Sie den Quellcode dieser Änderungen zur Verfügung stellen müssen, wenn Sie eine der Hibiki-HTML-Quelldateien ändern.

Credits

Hibiki HTML ist eine Open-Source-Version der Frontend-Sprache, die ursprünglich für das interne Tools-Framework von Dashborg entwickelt und entwickelt wurde. Der HTML-Kern von Hibiki ist in TypeScript unter Verwendung von React , MobX und Nearley aufgebaut . Der Hibiki-HTML-Playground ist in Hibiki-HTML erstellt und verwendet ebenfalls CodeMirror und Bulma .

Unterstützung und Hilfe

Hibiki HTML befindet sich in aktiver Entwicklung.Bitte kontaktieren Sie mich per E-Mail [mike (at)hibikihtml.com]oder auf Discord,wenn Sie eine Frage haben,einen Fehler melden möchten,Hilfe benötigen oder etwas beitragen möchten.

Ich bin gespannt darauf,wie Hibiki HTML in der realen Welt funktioniert.Wenn Sie eine Anwendung haben,für die Sie Hibiki HTML einsetzen möchten,wenden Sie sich bitte an mich.Ich helfe Ihnen gerne,entwickle zusätzliche Funktionen/Komponenten oder führe Teamschulungen durch.

Treten Sie dem Hibiki HTML Discord Server bei