Get best of the week

HTML avanzado

En este artículo, me gustaría contar un poco sobre la biblioteca, cuya primera versión creé a fines del año pasado. El punto es muy simple: expandir las capacidades del lenguaje HTML para que pueda escribir cosas simples y rutinarias sin JavaScript: enviar el formulario en formato json, cargar archivos de plantilla HTML en una página específica (esencialmente un sistema modular para HTML a través de solicitudes http / s), turbinas ( hola a los usuarios de RoR), una plantilla simple basada en las respuestas de las solicitudes de ajax y un poco más.


imagen


La biblioteca se llama EHTML o HTML extendido. Se basa en la notoria idea de los componentes web . Está disponible en el github , hay documentación bastante bien estructurada con ejemplos. En este artículo simplemente describiré las ideas principales, tal vez sea para alguien.


Conexión a la biblioteca


Para comenzar, para usarlo, no necesita herramientas npm o cli para crear un proyecto, todo lo que se necesita es la página HTML donde incluya el script de la biblioteca:


<head>
  <script src="/../js/ehtml.bundle.min.js" type="text/javascript"></script>
</head>

Sistema modular


Comencemos con uno simple: compilar una página HTML de muchos otros:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <script src="/../js/ehtml.bundle.min.js" type="text/javascript"></script>
  </head>

  <body class="main">
    <div class="articles">
      <e-html data-src="/../html/first.html"></e-html>
      <e-html data-src="/../html/second.html"></e-html>
      <e-html data-src="/../html/third.html"></e-html>
    </div>
  </body>
</html>

Para hacer esto, utilizamos un elemento personalizado e-htmlque tiene un solo atributo data-src, donde indicamos dónde se distribuye la parte HTML de la página. Es decir, si por ejemplo first.htmlse ve así:


<div class="article">
  <!-- some content of the first article -->
</div>

entonces, en última instancia, nuestra página se representará de la siguiente manera:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <script src="/../js/ehtml.bundle.min.js" type="text/javascript"></script>
  </head>

  <body class="main">
    <div class="articles">
      <div class="article">
        <!-- content of the first article -->
      </div>
      <div class="article">
        <!-- content of the second article -->
      </div>
      <div class="article">
        <!-- content of the third article -->
      </div>
    </div>
  </body>
</html>

Es decir, las etiquetas e-htmlserán reemplazadas por el contenido del archivo HTML que especificamos en el data-srcatributo.


<template/>. . e-wrapper, . <template/> is="e-wrapper" - . :


<!-- /../html/wrapper.html -->
<div class="base">
  <p>
    Header content
  </p>
  <p id="dynamic-content">
    <span>Default content</span>
  </p>
  <p>
    Footer content
  </p>
</div>

, :


<body class="main">
  <template 
    is="e-wrapper" 
    data-src="/../html/wrapper.html" 
    data-where-to-place="#dynamic-content" 
    data-how-to-place="instead">
    <p>
      Variation of content
    </p>
  </template>
</body>

, :


<div class="base">
  <p>
    Header content
  </p>
  <p>
    Variation of content
  </p>
  <p>
    Footer content
  </p>
</div>

data-src HTML , . data-where-to-place , e-wrapper . data-how-to-place . : instead( , data-where-to-place), before( ) after ( ). , e-html e-wrapper html . http , , — .


ajax


, json :


/../album/{title}
title = 'Humbug'
{
  "title": "Humbug",
  "artist": "Arctic Monkeys",
  "type": "studio album",
  "releaseDate": "19 August 2009",
  "genre": "psychedelic rock, hard rock, stoner rock, desert rock",
  "length": "39:20",
  "label": "Domino",
  "producer": "James Ford, Joshua Homme"
}

is="e-json", HTML:


<template is="e-json" data-src="/../album/Humbug" data-object-name="albumResponse">
  <div data-text="Title: ${albumResponse.body.title}"></div>
  <div data-text="Artist: ${albumResponse.body.artist}"></div>
  <div data-text="Type: ${albumResponse.body.type}"></div>
  <div data-text="Release date: ${albumResponse.body.releaseDate}"></div>
  <div data-text="Genre: ${albumResponse.body.genre}"></div>
  <div data-text="Length: ${albumResponse.body.length}"></div>
  <div data-text="Label: ${albumResponse.body.label}"></div>
  <div data-text="Producer: ${albumResponse.body.producer}"></div>
</template>

data-src , json , data-object-name — , http : body, headers statusCode. data-text , e-json .


. , :


title = 'Humbug'
{
  "title": "Humbug",
  "artist": "Arctic Monkeys",
  "songs": [
    { "title": "My Propeller", "length": "3:27" },
    { "title": "Crying Lightning", "length": "3:43" },
    { "title": "Dangerous Animals", "length": "3:30" },
    { "title": "Secret Door", "length": "3:43" },
    { "title": "Potion Approaching", "length": "3:32" },
    { "title": "Fire and the Thud", "length": "3:57" },
    { "title": "Cornerstone", "length": "3:18" },
    { "title": "Dance Little Liar", "length": "4:43" },
    { "title": "Pretty Visitors", "length": "3:40" },
    { "title": "The Jeweller's Hands", "length": "5:42" }
  ]
}

e-for-each :


<template is="e-json" data-src="/../album/Humbug" data-object-name="albumResponse">
    <div data-text="Title: ${albumResponse.body.title}"></div>
    <div data-text="Artist: ${albumResponse.body.artist}"></div>

    <div><b data-text="${albumResponse.body.songs.length} songs:"></b></div>
    <template 
      is="e-for-each"
      data-list-to-iterate="${albumResponse.body.songs}"
      data-item-name="song">
      <div class="song-box">
        <div data-text="No. ${song.index}/${album.songs.length}"></div>
        <div data-text="Title: ${song.title}"></div>
        <div data-text="Length: ${song.length}"></div>
      </div>
    </template>
</template>

data-list-to-iterate , . data-item-name , e-for-each .


e-for-each e-if :


<template is="e-json" data-src="/../album/Humbug" data-object-name="albumResponse">
    <div data-text="Title: ${albumResponse.body.title}"></div>
    <div data-text="Artist: ${albumResponse.body.artist}"></div>

    <div><b data-text="${albumResponse.body.songs.length} songs:"></b></div>
    <template is="e-for-each" 
      data-list-to-iterate="${albumResponse.body.songs}" 
      data-item-name="song">
      <template 
         is="e-if"
         data-condition-to-display="${(song.length.split(':')[0] * 60 + song.length.split(':')[1] * 1) <= 210}"
      >
        <div class="song-box">
          <div data-text="No. ${song.index}/${album.songs.length}"></div>
          <div data-text="Title: ${song.title}"></div>
          <div data-text="Length: ${song.length}"></div>
        </div>
      </template>
    </template>
</template>

data-condition-to-display e-if , .



— . json , e-form, .


, / :


/artist/{name}/albums/add 
name = 'Arctic Monkeys'
POST
Example of expected request body: {
  "title": "Humbug",
  "type": "studio album",
  "releaseDate": "19 August 2009",
  "genre": ["psychedelic rock", "hard rock", "stoner rock", "desert rock"],
  "length": "39:20",
  "label": "Domino",
  "producer": "James Ford, Joshua Homme"
}

, :


<e-form>

  Title:
  <input type="text" name="title">

  Type:
  <input type="radio" name="type" value="studio album" checked>
  <label for="one">One</label>

  <input type="radio" name="type" value="live album" checked>
  <label for="one">One</label>

  Release date:
  <input type="date" name="releaseDate">

  Genre:
  <input type="checkbox" name="genre" value="psychedelic rock">
  <input type="checkbox" name="genre" value="hard rock">
  <input type="checkbox" name="genre" value="stoner rock">
  <input type="checkbox" name="genre" value="desert rock">

  Total length:
  <input type="time" name="totalLength">

  Producer:
  <input type="text" name="producer">

  <button
    id="send"
    data-request-url="/artist/Arctic_Monkeys/albums/add"
    data-request-method="POST"
    data-request-headers="{}"
    data-ajax-icon="#ajax-icon"
    data-response-name="savedAlbum"
    onclick="this.form.submit(this)"
    data-actions-on-response="
      logToConsole('response: ', '${savedAlbum}');
    "
  />

  <img id="ajax-icon" src="/../images/ajax-loader.gif"/>

</e-form>

, , , . , , . ajax , . , — . , . .



Si está interesado en la idea e incluso quiere probar la biblioteca en acción o simplemente aprender algo más, entonces la biblioteca README tiene información completa sobre los elementos compatibles. También puede ver un video donde escribo una aplicación de blog simple usando exclusivamente EHTML.


Estaré encantado de responder preguntas si surgen. Y gracias por tu atención!


Enlace a nabos .

More articles:


All Articles