In this article I would like to tell a little about the library, the first version of which I created at the end of last year. The point is very simple - to expand the capabilities of the HTML language so that you can write simple and routine things without JavaScript: submitting the form in json format, loading HTML template files to a specific page (essentially a modular system for HTML via http / s requests), turbines ( hi to RoR users), a simple template based on the responses of ajax requests and a little more.
The library is called EHTML or Extended HTML. It is based on the notorious idea of web components . It is available on the github , there is pretty well structured documentation with examples. In this article I will simply describe the main ideas, maybe it will go to someone.
Library connection
To begin with, to use it, neither npm nor cli tools are needed to create a project, all that is required is the HTML page where you include the library script :
<head>
<script src="/../js/ehtml.bundle.min.js" type="text/javascript"></script>
</head>
Modular system
Let's start with a simple one - compiling an HTML page from many others:
<!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>
To do this, we use a custom element e-htmlthat has a single attribute data-src, where we indicate where the HTML part of the page is distributed. That is, if for example first.htmlit looks something like this:
<div class="article">
</div>
then ultimately our page will be rendered as follows:
<!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">
</div>
<div class="article">
</div>
<div class="article">
</div>
</div>
</body>
</html>
That is, the tags e-htmlwill be replaced by the content from the HTML file that we specified in the data-srcattribute.
<template/>. . e-wrapper, . <template/> is="e-wrapper" - . :
<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 , . , — . , . .
If you are interested in the idea and even want to try the library in action or just learn something more, then the README library has comprehensive information about the supported elements. You can also watch a video where I write a simple blog application exclusively using EHTML.
I will be glad to answer questions if such arise. And thank you for your attention!
Link to turnips .