Hibiki HTML

Hibiki HTML es un nuevo marco web para crear aplicaciones front-end modernas, sin andamios ni configurar una pila de JavaScript, que se puede programar y controlar completamente mediante código back-end .

Hibiki HTML es compatible con cualquier lenguaje o framework de backend,cualquier framework de CSS y cualquier lenguaje de plantilla de backend existente.

Para obtener un recorrido interactivo, consulte el Tutorial interactivo HTML de Hibiki .

Recursos HTML de Hibiki

Hibiki apareció en Console , ¡un excelente boletín informativo para aprender sobre proyectos de código abierto!

Getting Started

Empezar es fácil.No hay que configurar una pila de JavaScript,ni una placa de calderas o un andamiaje,ni herramientas de compilación que descargar y ejecutar.Solo tienes que añadir una etiqueta de script en la parte superior de tu página o plantilla:

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

Envuelva cualquier parte de su contenido con una etiqueta <template hibiki> y tendrá su primera aplicación HTML de Hibiki. Todo el contenido HTML sin formato se representa tal cual, y debido a que Hibiki HTML usa el analizador HTML del navegador, sigue las mismas reglas que el HTML estándar del navegador.

Tenga en cuenta que todos estos ejemplos de código se pueden ver y editar en Hibiki HTML Playground .

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

(Enlace de juegos: https://playground.hibikihtml.com/?codeid=readme-gs )

A partir de la v0.3.3, también puede incluir su código Hibiki en una etiqueta <script type="text/hibiki-html"> y, opcionalmente, hacer referencia a su código src de Hibiki y a los datos iniciales como URL remotas:

<!-- forma estándar con etiqueta de plantilla -->
<template hibiki> ... Hibiki HTML code here </template>

<!-- código en línea, envuelto en una etiqueta de secuencia de comandos (protegido contra la indexación del rastreador) -->
<script type="text/hibiki-html"> ... Hibiki HTML code here ... </script>

<!-- cargar código desde URL remota -->
<script type="text/hibiki-html" src="/url/to/hibiki/src.html"></script>

<!-- cargar código y datos desde URL remotas (los datos deben ser del tipo 'aplicación/json') -->
<script type="text/hibiki-html" src="/url/to/hibiki/src.html" datasrc="/url/to/data.json"></script>

Datos/Renderización de contenidos dinámicos

Las aplicaciones HTML de Hibiki tienen un modelo de datos de interfaz incorporado. Puede inicializarlo con cualquier objeto JSON utilizando la <hibiki-data> . Para representar texto, use la etiqueta <h-text> o la sintaxis {{ ... }} Los atributos y las propiedades de estilo se evalúan dinámicamente si comienzan con un * .

<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>

(Enlace de juegos: https://playground.hibikihtml.com/?codeid=readme-data-1 )

Hibiki HTML admite un lenguaje de expresión completo, incluidos todos los operadores condicionales y aritméticos estándar. Se pueden activar/desactivar clases adicionales usando la sintaxis de atributo abreviada class.[class-name]="true/false expression" .

<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>

(Enlace de juegos: https://playground.hibikihtml.com/?codeid=readme-data-2 )

Puede incluir elementos condicionalmente usando el atributo if .El bucle es manejado por el atributo foreach .Puede recorrer matrices u objetos. El atributo foreach usa una sintaxis especial de @item in $.array , donde cada iteración @item se asignará a un elemento de la matriz u objeto. Si proporciona una segunda variable, capturará el índice de la matriz o la clave del elemento: (@item, @key) in $.object o (@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>

(Enlace de juegos: https://playground.hibikihtml.com/?codeid=readme-data-3 )

Handlers

Para actualizar datos (y cambiar dinámicamente el contenido), Hibiki HTML admite controladores . Los controladores básicos responden a eventos como hacer clic , montar , enviar , cambiar , etc.

<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>

(Enlace de juegos: https://playground.hibikihtml.com/?codeid=readme-handlers-1 )

Puede realizar llamadas AJAX remotas para datos JSON mediante un controlador remoto. En este ejemplo, la llamada a https://testapi.hibikihtml.com/api/get-color-1 devolverá la respuesta JSON {"color": "purple"} . Lo asignamos a una variable de contexto @resp y luego asignamos $.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>

(Enlace de juegos: https://playground.hibikihtml.com/?codeid=readme-handlers-2 )

Puede realizar solicitudes GET, POST, PUT, PATCH o DELETE cambiando el verbo delante de la URL. Puede pasar argumentos de consulta (o cuerpos de datos JSON) pasando argumentos a su controlador usando (arg1=val1, arg2=val2...) (los argumentos complejos se codificarán en JSON), y puede definir controladores locales usando define-handler etiqueta del controlador para mayor comodidad y reutilización.

<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>

(Enlace de juegos: https://playground.hibikihtml.com/?codeid=readme-handlers-3 )

¿Conectarse a una API existente? No te preocupes,los manejadores HTML de Hibiki soportan opciones avanzadas como CORS,CSRF,codificación de parámetros,resultados BLOB y carga de archivos multiparte.

Hibiki Actions

La magia de Hibiki HTML es que cada controlador es en realidad solo una serie de acciones. Las acciones de Hibiki son primitivas como setdata , if , callhandler , fireevent , invalidate , html , etc. Cada acción que puede escribir en un controlador también tiene una representación JSON.

¡Esto significa que podemos escribir un controlador de back -end que devuelve una respuesta JSON que genera secuencias de comandos y actualiza la interfaz! Aquí hay un ejemplo de respuesta JSON que es equivalente a ejecutar $.color = 'DeepSkyBlue' en la interfaz:

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

Configuré https://testapi.hibikihtml.com/api/set-color-action para devolver solo eso. Ahora, si hacemos que nuestro controlador de clics llame a esa URL, veremos que el color cambia automáticamente.

<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>

(Enlace de juegos: https://playground.hibikihtml.com/?codeid=readme-actions-1 )

Los controladores de back-end son muy poderosos. Puede establecer valores de retorno, devolver datos y BLOB (como imágenes) en una solicitud, mezclar datos de frontend y backend con expresiones, ejecutar acciones condicionalmente y más. También puede usar controladores de back-end para crear aplicaciones HTML de Hibiki de varias páginas devolviendo una nueva plantilla HTML para que se procese.

Componentes y bibliotecas

Hibiki HTML facilita el uso,la compartición y la agrupación de componentes para una fácil reutilización.El ecosistema acaba de empezar,pero puedes escribir componentes nativos de Hibiki HTML,enlazar con JavaScript de terceros (D3,CodeMirror,etc.)e importar componentes de ReactJS.

<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>

(Enlace de juegos: https://playground.hibikihtml.com/?codeid=readme-comps-1 )

Biblioteca de componentes de interfaz de usuario Bulma

Lancé un envoltorio de Hibiki para la excelente biblioteca de interfaz de usuario de Bulma . Se puede incluir fácilmente en cualquier plantilla de Hibiki agregando:

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

La documentación de la biblioteca Hibiki+Bulma se puede encontrar en https://libs.hibikihtml.com/test-bulma.html . Incluye muchos controles interactivos que incluyen pestañas, menús, tarjetas, menús desplegables, controles de formulario y una tabla de datos que admite clasificación y paginación.

Interactive Tutorial

¿Querer aprender más? Consulte el tutorial interactivo .


Open Source

El código fuente de Hibiki HTML está disponible en GitHub en: https://github.com/dashborg/hibiki . Tiene la licencia Mozilla Public License v2.0 -- https://mozilla.org/MPL/2.0/ .

Mozilla tiene excelentes preguntas frecuentes , pero básicamente esta licencia le permite usar Hibiki HTML en cualquier proyecto (personal, comercial o de código abierto). La única restricción es que si modifica alguno de los archivos fuente HTML de Hibiki , debe hacer que el código fuente de esos cambios esté disponible.

Credits

Hibiki HTML es una versión de código abierto del lenguaje de interfaz creado y diseñado originalmente para el marco de herramientas internas de Dashborg . El núcleo HTML de Hibiki está construido en TypeScript , usando React , MobX y Nearley . El patio de juegos HTML de Hibiki está construido en HTML de Hibiki, y también usa CodeMirror y Bulma .

Apoyo y ayuda

Hibiki HTML está en desarrollo activo.Por favor,ponte en contacto conmigo por correo electrónico [mike (at)hibikihtml.com]o en Discord si tienes una pregunta,para informar de un error,necesitas ayuda o te gustaría contribuir.

Estoy emocionado de ver Hibiki HTML trabajando en el mundo real.Si usted tiene una aplicación que usted está pensando en usar Hibiki HTML para,por favor,llegar a cabo.Estoy feliz de ayudar,construir funcionalidades/componentes adicionales,o hacer entrenamiento en equipo.

Únete al servidor Discord de Hibiki HTML