Gleam

Writing web applications using HTML is too low level. Whenever you write a page directly in HTML you are losing some of the meaning of the page.

Gleam aims to make it easier to write pages in a higher level by separating the creation of a page's meaning from it's representation as HTML. of a page's meaning from it's representation as HTML.

A short example

Below is a snippet of the source for the features page.

page(title: "Features") {
  section(title: "Features") {
    subsection(title: "Macros") {
      p "Macros allow for the re-use of basic building blocks"
      
      example "
        node h3 with string
        ...
      "
    }
  }
}

In the above, what look like function calls in other languages are calls to macros in Gleam.

Each macro is a light-weight definition by the user, for example:

node example with string

This defines the macro example as a node macro that can have a string as its value - Gleam is statically typed.

A page consists of a series of macro invocations. Each of these invocations will result in one or more nodes being created. These nodes are joined together to form a node tree.

The node tree can then be transformed however you want. In the case of this site the node tree is turned into HTML using a set of snippets:

<div class="section"><h3>%title%</h3>%_inner%</div>

This separates the HTML from the node tree and gives two big benefits:

• HTML can be created independently by a designer
• Front-end developers can concentrate on the semantic meaning of a page

Separation of Concerns

This style of creating views is an example of separation of concerns. The meaning of the page is now separated more distinctly from it's representation.

Amongst other things, this makes it far easier to create multiple versions of a single page. Making it easier to perform design changes and provide accessible versions of pages.

Get Started

Head to the quick start guide to get started.