Hoplon syntax
Getting familiar with Hoplon
Generating a Hoplon project
Generate a new Hoplon project. Run the following command on a terminal:
boot -d boot/new new -t hoplon -n hoplon-syntaxRunning the project in development mode
Change your directory to the project:
cd hoplon-syntaxAnd run:
boot devAfter the code is compiled open your browser and go to http://localhost:8000. You should see "Hello Hoplon!" in blue.
Hoplon HTML syntax
To write HTML in Hoplon we use following the syntax:
(element:attribute1"value" ... :attributeN"value"
element contents)Elements are the first thing in a form. A form is an expression between parentheses. Attribute names are represented by keywords, which starts with a colon :.
This way of writing HTML is called Hlisp. It a syntax to write HTML in a LISP way.
For comparison, the HTML syntax would be:
<tagnameattribute1="value"...attributeN="value">
element contents
</tagname>Another valid syntax in Hoplon is using a map to group attributes:
(element{:attribute1"value" ... :attributeN"value"}
element contents)A map (hash map) is represented by key value pair inside curly braces {}.
On src/index.cljs.hlfile inside the project directory, you should see the code below:
(page"index.html")(html(head(link:href"app.css":rel"stylesheet":type"text/css"))(body(h1"Hello, Hoplon!")))If you are familiar with HTML this file should look a bit off but you will recognize some of the words.
The equivalent HTML is the code below:
<!DOCTYPE html><html><head><linkhref="app.css"rel="stylesheet"type="text/css"></head><body><h1>Hello, Html!</h1></body></html>Notice that using Hoplon there are no closing tags e.g. </h1>. The parentheses delimit what is would be between the opening and closing tags.
Looking at a smaller sample:
<body><h1>Hello, Html!</h1></body>Is equivalent to:
(body(h1"Hello, Hoplon!"))Here we have a body element containing a h1 element containing the text "Hello, Hoplon!".
HTML attributes
You saw some Hoplon attributes before:
(link:href"app.css":rel"stylesheet":type"text/css")Here we have a link element with the following attributes:
:hrefwith value"app.css":relwith value"stylesheet":typewith value"text/css"
Same thing using HTML:
<linkhref="app.css"rel="stylesheet"type="text/css">HTML elements
Let's see a table with translations from HTML to Hoplon ones. Almost every HTML element translates directly to Hoplon with opening and closing tags becoming parentheses. This is just for reference, you don't need to remember everything that is in the table. There are just a few tags that are used all the time.
Convertion table from HTML to Hoplon
| HTML tag | Hoplon element |
|---|---|
<html></html> | (html) |
<body></body> | (body) |
<head></head> | (head) |
<a></a> | (a) |
<abbr></abbr> | (abbr) |
<address></address> | (address) |
<area> | (area) |
<article></article> | (article) |
<aside></aside> | (aside) |
<audio></audio> | (audio) |
<b></b> | (b) |
<base> | (base) |
<bdi></bdi> | (bdi) |
<bdo></bdo> | (bdo) |
<blockquote></blockquote> | (blockquote) |
<br> | (br) |
<button></button> | (button) |
<canvas></canvas> | (canvas) |
<caption></caption> | (caption) |
<cite></cite> | (cite) |
<code></code> | (code) |
<col> | (col) |
<colgroup></colgroup> | (colgroup) |
<data></data> | (data) |
<datalist></datalist> | (datalist) |
<dd></dd> | (dd) |
<del></del> | (del) |
<details></details> | (details) |
<dfn></dfn> | (dfn) |
<dialog></dialog> | (dialog) |
<div></div> | (div) |
<dl></dl> | (dl) |
<dt></dt> | (dt) |
<em></em> | (em) |
<embed> | (embed) |
<fieldset></fieldset> | (fieldset) |
<figcaption></figcaption> | (figcaption) |
<figure></figure> | (figure) |
<footer></footer> | (footer) |
<form></form> | (form) |
<h1></h1> | (h1) |
<h2></h2> | (h2) |
<h3></h3> | (h3) |
<h4></h4> | (h4) |
<h5></h5> | (h5) |
<h6></h6> | (h6) |
<header></header> | (header) |
<hgroup></hgroup> | (hgroup) |
<hr> | (hr) |
<i></i> | (i) |
<iframe></iframe> | (iframe) |
<img> | (img) |
<input> | (input) |
<ins></ins> | (ins) |
<kbd></kbd> | (kbd) |
<keygen> | (keygen) |
<label></label> | (label) |
<legend></legend> | (legend) |
<li></li> | (li) |
<link> | (link) |
<main></main> | (main) |
<map></map> | (html-map) |
<mark></mark> | (mark) |
<menu></menu> | (menu) |
<menuitem></menuitem> | (menuitem) |
<meta> | (html-meta) |
<meter></meter> | (meter) |
<multicol></multicol> | (multicol) |
<nav></nav> | (nav) |
<noframes></noframes> | (noframes) |
<noscript></noscript> | (noscript) |
<object></object> | (html-object) |
<ol></ol> | (ol) |
<optgroup></optgroup> | (optgroup) |
<option></option> | (option) |
<output></output> | (output) |
<p></p> | (p) |
<param> | (param) |
<picture></picture> | (picture) |
<pre></pre> | (pre) |
<progress></progress> | (progress) |
<q></q> | (q) |
<rp></rp> | (rp) |
<rt></rt> | (rt) |
<rtc></rtc> | (rtc) |
<ruby></ruby> | (ruby) |
<s></s> | (s) |
<samp></samp> | (samp) |
<script></script> | (script) |
<section></section> | (section) |
<select></select> | (select) |
<shadow></shadow> | (shadow) |
<small></small> | (small) |
<source> | (source) |
<span></span> | (span) |
<strong></strong> | (strong) |
<style></style> | (style) |
<sub></sub> | (sub) |
<summary></summary> | (summary) |
<sup></sup> | (sup) |
<table></table> | (table) |
<tbody></tbody> | (tbody) |
<td></td> | (td) |
<template></template> | (template) |
<textarea></textarea> | (textarea) |
<tfoot></tfoot> | (tfoot) |
<th></th> | (th) |
<thead></thead> | (thead) |
<time></time> | (html-time) |
<title></title> | (title) |
<tr></tr> | (tr) |
<track> | (track) |
<u></u> | (u) |
<ul></ul> | (ul) |
<var></var> | (html-var) |
<video></video> | (video) |
<wbr> | (wbr) |
<<!-- -->> | ($comment) |
This is a big table and almost every HTML tag is the Hoplon element. Here are only the exceptions to this rule.
Convertion exceptions from HTML to Hoplon
| HTML tag | Hoplon element |
|---|---|
<map></map> | (html-map) |
<meta> | (html-meta) |
<object></object> | (html-object) |
<time></time> | (html-time) |
<var></var> | (html-var) |
<<!-- -->> | ($comment) |
Exceptions exist because HTML elements may be ClojureScript core functions or to avoid confusion with Javacript.
Next steps
We will see what happens when we make mistakes, understand errors and warnings on error recovery.