Hypertag: an Indented Language for easy HTML Generation & Web Templating
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 115 | |
| Author | ||
| Contributors | ||
| License | CC Attribution - NonCommercial - ShareAlike 4.0 International: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/58798 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
EuroPython 202145 / 115
1
3
19
25
31
34
36
38
41
42
44
46
48
52
60
61
62
65
69
73
76
82
83
84
92
94
96
103
110
113
00:00
GoogolCodeAttribute grammarHypercubePoint cloudSingle-precision floating-point formatCodeResultantWebsitePasswordImplementationDrop (liquid)Type theoryComplex (psychology)Multiplication signBlock (periodic table)Information security1 (number)Right angleProgrammer (hardware)AreaLine (geometry)Musical ensembleVector spaceSound effectSymbol tableWritingWordContext awarenessCondition numberInformationMarginal distributionProgrammschleifeSpacetimeMereologyLoop (music)Goodness of fitDifferent (Kate Ryan album)Flow separationTouchscreenNetwork topologyOperator (mathematics)AngleExpression2 (number)Statement (computer science)Doubling the cubeSign (mathematics)Form (programming)MultiplicationBootingData structureSocial classRaw image formatCartesian coordinate systemReal numberBoilerplate (text)Formal languageContent (media)LogicPerformance appraisalObject (grammar)Template (C++)CASE <Informatik>CalculusTable (information)HypertextDifferenz <Mathematik>Internet service providerObject modelPairwise comparisonCellular automatonField (computer science)Electronic visual displayElectronic mailing listProteinWeb pageMedical imagingGoogolException handlingProgramming languageSoftware testingMacro (computer science)Message passingFunctional (mathematics)Electric generatorWeb 2.0VolumenvisualisierungEscape characterWeb-DesignerControl flowData dictionaryArtistic renderingExterior algebraFlash memoryElement (mathematics)Web applicationAtomic numberTask (computing)Combinational logicDefault (computer science)Variable (mathematics)Online helpUniform boundedness principleAsynchronous Transfer ModeBitParameter (computer programming)Term (mathematics)Extension (kinesiology)Streaming mediaPosition operatorPhysical systemDisk read-and-write headHyperlinkStandard deviationRow (database)Modul <Datentyp>Arithmetic meanStack (abstract data type)System callGame controllerModule (mathematics)Keyboard shortcutComputer fileMeeting/Interview
00:50
HypercubeElectric generatorImplementationWeb applicationWeb 2.0Formal languageCodeParsingPresentation of a groupWordWeb-DesignerModul <Datentyp>Complex (psychology)WritingProgrammer (hardware)InformationResultantAreaMultiplication sign
03:56
Modul <Datentyp>Gamma functionBoilerplate (text)Content (media)HypercubeWebsiteType theorySymbol tableFormal languageRaw image formatTemplate (C++)Block (periodic table)Performance appraisalEscape characterWeb 2.0Pairwise comparisonElectronic mailing listCellular automatonDifferent (Kate Ryan album)MereologyCodeHypertextLine (geometry)ExpressionPlastikkarteNetwork topologyProgrammer (hardware)Poisson-KlammerAttribute grammarBoilerplate (text)Content (media)LogicSource code
13:52
Content (media)HypercubeLevel (video gaming)Attribute grammarFlow separationComputer-generated imageryWeb pageRight angleInternet service providerMereologyStatement (computer science)Default (computer science)Different (Kate Ryan album)Symbol tableFunctional (mathematics)Control flowData structureCodeHypertextSocial classData dictionaryElement (mathematics)Attribute grammarVertex (graph theory)Table (information)Message passingVolumenvisualisierungException handlingArtistic renderingExterior algebraParameter (computer programming)Position operatorBlock (periodic table)Row (database)Cartesian coordinate systemExpressionCondition numberType theoryForm (programming)Operator (mathematics)Arithmetic meanBitCombinational logicComputer programmingBoilerplate (text)MultiplicationContent (media)Doubling the cubeFormal languageGame controllerTerm (mathematics)Complex (psychology)Sign (mathematics)Reduction of order2 (number)Standard deviationModul <Datentyp>Flow separationTemplate (C++)Pairwise comparisonHypercube
23:40
HypercubeColor managementGamma functionWeb pageRadio-frequency identificationData structureExtension (kinesiology)Element (mathematics)1 (number)Disk read-and-write headHyperlinkObject modelFunctional (mathematics)System administratorInformationMedical imagingTable (information)Different (Kate Ryan album)Line (geometry)CodeAtomic numberSingle-precision floating-point formatContent (media)Formal languageElectronic mailing listAttribute grammarFunction (mathematics)Game controllerNetwork topologyMultiplication signModule (mathematics)Web 2.0Artistic renderingWave packetSymbol tableHypertextBlock (periodic table)ExpressionFluid staticsComputer fileCASE <Informatik>
33:29
HypercubeFront and back ends
Transcript: English(auto-generated)
00:06
OK, so that was a very good talk. It's good. So the next talk, we have, actually, Marcin will be with us. Hello, do I pronounce your name correctly, Marcin? Marcin, exactly.
00:21
Yes, that's good. So where are you calling in from? From Poland, Warsaw. Wow, good, good. So yeah, actually, yeah, we want to know more about your talk. So when you're ready, you can start sharing your screen. So yeah, hyper tag is very, very interesting.
00:41
I've never heard about that. I want to learn more about it. So yeah, right. OK, I see that you're ready to go. So I'll let you take us away. Thank you. Thank you for this introduction. And hello, everyone.
01:00
I want to talk about hyper tag. It's a new language for web conflating and document generation. I'm sure all of you know very well what web conflating is. I want to show you a possibly better way to do web conflating and document generation.
01:22
In the beginning, I would like to tell you a few words about myself, about the motivation behind developing a new language for web conflating. And then I'll present hyper tag. Taking into account two most important aspects.
01:40
One is how to write clean code for document generation for HTML generation. And the other key aspect is how to make this code as modular as possible, which is very important for building large complex web applications.
02:02
And I will conclude with a final remark. I will not be able to present all the details of the language because there are too many of them. But I invite you to see the website hyper tag.io, where all the information is very horribly
02:25
documented. So let's go. I'm a Python programmer. I've been programming Python for many years. My profession is data science.
02:40
I'm a data scientist. I've been working in this area for 20 years. So I'm not really a professional web developer. However, I built over time two large web applications and large websites, one was tuned IT in 2009 and the other one, which exists today,
03:01
is Tech Realty, which I built in 2014. And these two complex web applications gain some insight and experience regarding of web conflating and HTML document generation. Also, I designed and implemented
03:23
a few other languages before, related to my work in data science and in web scraping. So hyper tag, which is designed and implemented by Microsoft, it's not the first language that I developed.
03:43
And I can say that hyper tag is a result of many years of experience in both web development and language design and parser implementation. So here is a screenshot of the paper website.
04:04
And now what was the goal? There are mainly two goals. There are two goals. When designing this new language, a Google satisfies existing templating languages.
04:21
And I need something that satisfies two goals. One is to have clean templating code as clean as possible, easy to read, easy to maintain. And another thing is to have modular code
04:41
where you can have code reuse and you don't have to repeat yourself. So let's start with the first thing, how to achieve clean code in web conflating. If you take a look at existing, most popular templating languages for iPhone, which
05:01
is Jinja and Django template engine, the template language, they are both quite similar. We can see in a simple example that this code is very convoluted. It contains a lot of boilerplate code,
05:21
a lot of special symbols. It's hard to read. This example prints a list of user names. It's not any complex thing to do. This example is taken from Jinja documentation.
05:42
And you can see here that less than half of these cells does anything useful. And the rest is just a special symbol. And what's worse, this cell is intermit. Actually, you can see here two different languages.
06:03
One is HTML. And the other one is template syntax. And these two different languages are mixed together such that when you read this code, you have to switch between analyzing HTML code
06:24
and analyzing template syntax every few characters. I call it spaghetti code, which is not very helpful for readability of this code and not very helpful for reducing the amount of code
06:41
that you have to type. It doesn't look very well. And if you think for a while, we will discover that this approach to weapon painting actually is very old. It has origins in the days of PHP. PHP was the first language that took a similar approach,
07:05
namely injecting of some foreign template syntax into the raw HTML document and mixing these two languages together.
07:21
So we all know that PHP is somehow updated today. And Python-capability languages are still using this not very good approach to write a template. The question is, of course, can we do something better?
07:43
Here is the same example written in hypertext. As you can see, this code is much cleaner. It's much, much more code to write and much easier to read. The question is how to achieve this kind of readability.
08:00
And the idea is to use indentation for structuring your template code. Actually, there are three different ideas that have been combined together. The first one is to come up with a single language
08:22
for both the templating structure and for the contents of the document. So instead of using these two original languages as before, we also have just one language that covers the entire document, including
08:41
the templating logic. And when we do this, we can also use the idea of using indentation instead of closing tags so that we can just avoid closing tags and get shorter, more readable code.
09:04
In Python world, we know very well how indentation helps, how much it helps in achieving more readable code. And it's kind of irony that this idea of using
09:20
indentation for web development, for web templating, it was first applied in the work of Ruby in some template languages for Ruby. While in Python world, we still use mainly these templating languages based on the idea
09:42
derived from the base PHP. And the third thing that's important here is a different way of using special symbols in the language. As you can see here, it's a comparison
10:00
of the same code written in HTML, in raw HTML, and type text. You can see that HTML uses special symbols, the angled brackets, very intensely, which decreases the ability and is quite annoying for programmers
10:22
to type these angled brackets every single character. But we can switch and change this instead of using special characters to mark parts inside text. We can assume that our document is a tree of cards.
10:41
And only in some places, we have text notes. And we use special characters to delineate these text notes inside a larger tree of different parts and different types of blocks. So this is the idea. And as you can see, by forgetting about closing
11:00
syntax, using indentation that can achieve much more readability, much better readability. So that was a very simple example. Now I would like to show you a few more examples of hypertext syntax.
11:24
So the first one is, in my syntax, we can take space. We can write more complex code if you want by putting several parts on the same line, if we separate them by special simple column.
11:42
And we can also put the textual content on the same line as the part. We can write more syntax like here. We can just put the vertical bars that indicate the text block, just put them
12:03
on each subsequent line. Or we can just use this special symbol on the first line and drop the subsequent one. This vertical bar, the second one, is optional here.
12:20
We can omit it. We also have auto-escaping. So there are actually three types of text blocks. A plain text block starts with a vertical bar. And this text block is automatically
12:43
escaped, HTML escaped. So this understand will be converted to an HTML entity automatically. You don't have to care about it. But if you want to embed, inject some raw HTML inside your text, you can overdo it
13:01
if you put a slash at the beginning of this text block instead of a vertical bar, which signifies a raw HTML text text block. There's also a third type, a text blocking block, which avoids evaluation of expressions.
13:24
Here in this block, expressions can be embedded. And so the third blocking block, if you don't want to run the expression evaluation. Now, the next thing is tags and attributes of tags. You can write attributes similar to what
13:42
you would do in raw HTML. That can also embed expressions both on the attribute list and inside text blocks. And here's one of the ways to embed expressions
14:00
by using single braces, curly braces. There's also another maybe syntax with the use of the dollar sign. And here, expressions can take arbitrary form. So the type tag is very flexible in how
14:20
we can write our expressions. You can use actually all operators and all the syntax that you know from Python, which is quite rare, I think, for conflating languages. And of course, we can have different control structures. Here's an example of a loop.
14:43
And here, we can see conditional block, try-out block, loops, for loops, while loops, and conditional blocks. They work similar to what they did in Python,
15:00
although, of course, syntax is a little bit different. Here, we have some content, some body. This can be text content, or you can just provide any structured content that you want.
15:21
And regarding the try-out, it works a little bit different than in Python, because we don't really care about the exact type, the exact class of exception that is raised during renderings of, again, diesel documents. Usually, there is only one reason
15:41
why a given piece of code fails, and we just want to provide some alternative path of execution of rendering. So here, we assume that cars is a dictionary of cars and their prices, but not every maker
16:04
is present in the dictionary. So if there is a price for a given car, we want to print it, but if a given name is missing, we want to provide another native message.
16:20
And we try blocks and do it very easily and in a clean way. I maybe will add one more thing. Previous slide, as you can see here, with the use of this syntax, where we used indentation and where we use the vertical bars for marking text box,
16:48
in many cases, it's possible to maintain a vertical separation between text and text content, which is a very, very useful and enhancing
17:00
the readability of the code even in the father, because you can put text on the left and text on the right. And when you take a look at the code, you instantly see which parts of the code provide styling and provide HTML structure at which part of the code are just role tags that
17:21
will be displayed to the user. And I will show also the comparison at the end of this part of the talk. Again, we have some example template code
17:43
written in hypertext compared to the same code written in Django and Jinja template languages. So you can notice how much difference there is between these languages. In Django and Jinja, we have to use
18:02
a lot of boilerplate code. We have to use closing tags. We have to use closing statements for control statements. And we have to use double braces in multiple places. All these things reduce readability of the code.
18:23
Hyper tag is just five special symbols that need to be added to the actual content of the document. And although we can not use config, in Django and Jinja, we cannot write len of item.
18:40
This is a very simple thing that we may want to do. And in Python, we would just write len of item. In Django and Jinja, it's more confusing because you have to use a filter and not just apply the standard len function, which also adds to the complexity of the language
19:02
and difficulty of using it. I have to mention, although, that this idea of using indentation to enhance readability of templating code, it's not so new. It was already used in the work of Ruby in languages
19:22
like Scream and Karma. And it's also present in books in JavaScript. Hyper tag was inspired by these languages. And I tried to take the best things from these languages in terms of syntax, in terms of readability.
19:40
I think hyper tag is somehow maybe even cleaner and more useful than these original approaches. And now, I want to go to the second part of the talk and present you the more advanced features of hyper tag
20:04
that are related to building modular code. It's when you build a large application and you write a lot of code, it's very important to be able to somehow complete this code in pieces and be able to reuse
20:21
these different pieces in different combinations with each other. That's what modularity means. Modularity means, in some places, separation of content that you can create such small pieces of your code. In a typical programming language, we talk about functions and classes.
20:42
But in weapon painting, it's a different story. We need some other kinds of tools, of language structures that will allow us to separate content and to build these reusable pieces of code. Because after that, when we have the separation,
21:01
we can reuse our code. And this is something contrary to code duplication. So whenever we see code duplication, it means that we miss code reuse. And when we start with raw HTML, we can see that HTML is very notorious for code duplication.
21:26
There are no means in HTML to duplicate code. So here, majority of the code is duplicated. If we go to hypertype, this example is a little bit shorter and a little bit more readable.
21:42
But we still have duplicate code. These elements are duplicated. And the question is how to deal with that. The idea, could we, for example, define our own custom tags? Just like we have table as a standard tag,
22:03
could we have table row as our custom tag? That would replace all these repetitions from the duplicated code. And we could just provide the values of attributes to these custom tags. And we start with the rest to generate the HTML that we need.
22:21
We could do even better if we allow for positional attributes in custom tags, which is very similar to how arguments and functions, Python functions, work. We can have keyword arguments or positional arguments. So in such case, if we had such support in the language,
22:42
we could make this code a lot shorter and more readable. And in hypertype, we can do this. We can define custom tags. The way to do this is to use so-called hypertype definition blocks. These custom tags, we call here just hypertype
23:00
with lowercase h. And we can define such custom tags by using the special symbol person character, which introduces a new name, a new tag, and defines its attributes. And attributes can pass a default value, like function in Python.
23:21
And it has its body that will be sophisticated for this hypertype name in every place in popular. So we just reduce the duplication. We just have one copy of this part of code. And we insert attributes, which are variables.
23:41
We inject them in appropriate places in the HEM code, the body. So that's the way to do this in hypertype. And now we can reduce this initial code that we saw in HTML and abuse just to these four lines of hypertype code.
24:00
Now the question is, does a standard tag can have a body in the place of operand? And the question is, can we all provide body to this custom tag? And the answer is, yes, we can do this. However, we have to change the definition of our hypertype to be able to recognize that a body was provided.
24:27
So here, we want to extend this initial example. We printed a table with two columns, one of the car names, the second column of the price.
24:41
Now we want to add the third column to the table, which contains rich text, which contains structured information, not just a single value, atomic value. But we want to put some funny quotes. We want to add styling to this funny quote. We want to put images, add images to this information. So we end up with rich text that cannot be passed by a single
25:06
attribute. So that's the place where the ability to provide body to a custom tag plays a role. And to handle that, we need to define a special body
25:21
attribute, which is done with the symbol S, the S sign, which marks that the first attribute is a so-called body attribute. It will carry the document tree of the actual body that was passed to the hypertype in the place of occurrence.
25:42
And typically, we would just want to inject the face of the body in some place in our formal body. However, this is not the only thing we can do. Because hypertype is somehow special compared to other
26:03
translating languages because it allows here in this place, the body is represented as a DOM tree, a document object model tree, and this body can be manipulated. So we can not only paste it and change it,
26:23
but we can analyze it, modify it before pasting. And here's an example how this can be done. This is somehow exceptional, I think, and not possible in any other template extension. I know this example is about building
26:43
a table of contents for documents, a typical use case when writing especially static documents. Maybe not so common for web pages, but when you build and you write a static HTML document, you often want to have a table of contents at the beginning. And so you can do it manually, but in such case,
27:03
it's very hard to maintain these documents if you add heading, if you add chapters. It's more difficult to remember to change the TLC at the beginning of the document as a field tree. In HyperTAC, you can write very short code that will build this TLC automatically.
27:23
And here you can see how to do this. We need to define a HyperTAC called TLC here that takes any document as its actual body. And then we assume that all H2 headings that we
27:41
are looking for want to put in the table of contents. So we are looking in this document for H2 headings. And we print each of these headings inside a list item, HTML element. We take the text of these headings,
28:03
and we wrap it up within a hyperlink that points to this heading inside the document. So we have to pull the ID attribute of this heading and paste it into the HTML tab.
28:23
So this is enough to build a list of headings in document with hyperlinks. We may need one more tab, because usually we want to have both the TLC and the original document.
28:47
So we need one more tab to concatenate these two things together, like here. And now after defining this tab, we can take any document, just an arbitrary document,
29:03
and tag it with add TLC. And it's enough to get the table of contents automatically. Here you can see the output of this example. After rendering, we have the table of contents,
29:23
and we have the original document. And you can see that headings are copied from here to here. And we have correct hyperlinks that point to these headings in the document.
29:43
I have to mention that this kind of admin functionality is to some extent also available in other languages. So if you're interested, you can compare, you can check how these things work in Marco, Jin, Ja, Po. These are languages that provide
30:01
all of some language features, some language structures that allow you to build these reusable pieces of code. It's only available in more advanced test-making engines. And the simplest ones don't provide that. However, even if you go to Marco or Jin, Ja, Po,
30:23
you will see that the syntax it provides quite convoluted. Often it doesn't fit very well in the syntax of other elements of the language. In HyperStack, these custom tags behave exactly the same
30:40
as standard tags. So we can use them in all the same context, in all the same places where we can use standard tags. There's no difference in syntax. And the most important difference is that HyperStack implements two-space rendering. So when you define this HyperStack which
31:06
takes a body attribute, here this body is not rendered yet. It's partially rendered. It's only partially rendered. All the expressions here in this actual body are evaluated, and all control blocks have been executed.
31:24
But otherwise, this body still preserves its tree structure. You can analyze the tag structure of this body, and you can analyze it and manipulate it, which is not really possible in any other training language.
31:42
So this is something very unique for HyperStack. And of course, we should add these aspects related to readable and clean code. So in Markkable and in Jinja, this code is not readable as much as it is in HyperStack.
32:02
Markkable and Jinja use this traditional approach of ingesting foreign syntax into HTML documents. The last thing I'll mention is about importing things. It's when you can define the custom tags.
32:22
Of course, you'd like to reuse this hypertext in different files and different documents. And it's possible with import syntax in HyperStack. This import syntax is similar to what we have in Python.
32:41
You can use same keyword from import. Here, the import path has the same structure as Python import path. You can import from other packages, from other modules. You can use absolute import and the latest import, like here. You can use renaming, like in Python, with your path.
33:05
And what's important is this. So thank you so much, Marcin. It's a really good talk, but I think it's very informative and we are running out of time. So what I suggest happening is that you can carry on in the breakout room, which you can run the GC there
33:20
to continue the talk and maybe answer some questions. There are already some questions in the chat which you can go and answer as well. Thank you so much. Thank you very much. Thank you.