blog/output/feeds/programming.atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"><title>LEdoian's Blog - programming</title><link href="https://blog.ledoian.cz/" rel="alternate"></link><link href="https://blog.ledoian.cz/feeds/programming.atom.xml" rel="self"></link><id>https://blog.ledoian.cz/</id><updated>2024-09-09T16:28:00+02:00</updated><entry><title>Using Gleam in HTML with as little JavaScript knowledge as possible</title><link href="https://blog.ledoian.cz/using-gleam-in-html-low-js.html" rel="alternate"></link><published>2024-09-09T16:28:00+02:00</published><updated>2024-09-09T16:28:00+02:00</updated><author><name>LEdoian</name></author><id>tag:blog.ledoian.cz,2024-09-09:/using-gleam-in-html-low-js.html</id><summary type="html">&lt;p&gt;I've been looking at the &lt;a class="reference external" href="https://gleam.run"&gt;Gleam language&lt;/a&gt; recently. Among other features, it can be compiled to JavaScript, and thus presumably used on web frontend. I wanted to try that. This is a short tutorial on how to do that with little idea how JavaScript is supposed to work.&lt;/p&gt;
&lt;p&gt;My initial …&lt;/p&gt;</summary><content type="html">&lt;p&gt;I've been looking at the &lt;a class="reference external" href="https://gleam.run"&gt;Gleam language&lt;/a&gt; recently. Among other features, it can be compiled to JavaScript, and thus presumably used on web frontend. I wanted to try that. This is a short tutorial on how to do that with little idea how JavaScript is supposed to work.&lt;/p&gt;
&lt;p&gt;My initial JS knowledge: &lt;tt class="docutils literal"&gt;alert(3)&lt;/tt&gt;, &lt;tt class="docutils literal"&gt;onclick&lt;/tt&gt; and some basic selectors, i.e. the little stuff that is useful to add minor interactivity to HTML pages and implement trivial ViolentMonkey scripts. Namely: I have no knowledge about modules and whatnot, and this post is just a result of my trial-and-error attempt at embedding my Gleam. I succeeded, but still have no idea what I am doing :-)&lt;/p&gt;
&lt;div class="section" id="my-code"&gt;
&lt;h2&gt;My code&lt;/h2&gt;
&lt;p&gt;Let's start with some trivial code, in &lt;tt class="docutils literal"&gt;src/lol.gleam&lt;/tt&gt; (in a project initialised with &lt;tt class="docutils literal"&gt;gleam new lol&lt;/tt&gt; and the &lt;tt class="docutils literal"&gt;repeatedly&lt;/tt&gt; package added with &lt;tt class="docutils literal"&gt;gleam add repeatedly&lt;/tt&gt;):&lt;/p&gt;
&lt;pre class="literal-block"&gt;
import gleam/io
import repeatedly

pub fn say_hello() {
        repeatedly.call(2000, Nil, fn(_state, _call) {io.println(get_greeting())})
}

pub fn get_greeting() {
        &amp;quot;Hello World!&amp;quot;
}

pub fn main() {
        io.println(&amp;quot;3, 2, 1, go!&amp;quot;)
}
&lt;/pre&gt;
&lt;p&gt;This snippet has many of the basic stuff I might need in future: it does some io, it uses another package &lt;a class="footnote-reference" href="#stdlib-package" id="footnote-reference-1"&gt;[1]&lt;/a&gt;, it returns data I will want to show. At first I am mostly interested in multiplatform stuff (i.e. running also on the BEAM backend), so I don't want to use any DOM frameworks at first, though I will mention some of the ways later in the post.&lt;/p&gt;
&lt;p&gt;So, build this for JavaScript: &lt;tt class="docutils literal"&gt;gleam build &lt;span class="pre"&gt;--target&lt;/span&gt; javascript&lt;/tt&gt;, and &lt;em&gt;stuff happens&lt;/em&gt;. It is not very clear what to do now, but &lt;tt class="docutils literal"&gt;&lt;span class="pre"&gt;grep``ping&lt;/span&gt; through the ``build/&lt;/tt&gt; directory shows that the built code lives in &lt;tt class="docutils literal"&gt;build/dev/javascript/lol/lol.mjs&lt;/tt&gt;.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="section" id="embedding-the-code"&gt;
&lt;h2&gt;Embedding the code&lt;/h2&gt;
&lt;p&gt;Here comes the fun part: the code is in JavaScript &lt;em&gt;module&lt;/em&gt;, not plain code. That comes with several surprises:
- It can only be imported from other modules, not by “plain” code in global scope
- Due to CORS, imports only work with network schemes, not with the &lt;tt class="docutils literal"&gt;&lt;span class="pre"&gt;file://&lt;/span&gt;&lt;/tt&gt; one
- Due to scoping, I have not found a way of using the functions from devtools console&lt;/p&gt;
&lt;p&gt;Big wins for the platform /s, but we have to live with that, so let's try to write the respective HTML for this. I put that in &lt;tt class="docutils literal"&gt;main.html&lt;/tt&gt; in the project root, but it does not probably matter. The code:&lt;/p&gt;
&lt;pre class="literal-block"&gt;
&amp;lt;!doctype html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
        &amp;lt;meta charset=utf-8&amp;gt; &amp;lt;!-- firefox complains otherwise --&amp;gt;
        &amp;lt;title&amp;gt;Buh&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
        &amp;lt;!-- some random elements to work with --&amp;gt;
        &amp;lt;button id=butt&amp;gt;Klik mee&amp;lt;/button&amp;gt;
        &amp;lt;p id=uwu&amp;gt;

        &amp;lt;!-- the “binding” to our Gleam code. This probably needs to be at the end of the page, since it needs to be able to use the selectors. --&amp;gt;
        &amp;lt;script type=module&amp;gt; //It has to be a module to allow imports
                import * as lol from &amp;quot;./build/dev/javascript/lol/lol.mjs&amp;quot;;

                // Set the text of one element to the computed stuff:
                let par = document.getElementById('uwu');
                par.innerText = lol.get_greeting();

                // Let's have an interactive button (I love the come-from pattern, but using `onclick` would be even trickier…)
                let butt = document.getElementById('butt');
                butt.addEventListener('click', lol.say_hello);

                // Apparently, the `main` function does not get run automatically, so call that explicitly.
                lol.main();
        &amp;lt;/script&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/pre&gt;
&lt;p&gt;Shoutout to &lt;a class="reference external" href="https://stackoverflow.com/questions/53630310/use-functions-defined-in-es6-module-directly-in-html"&gt;the person who asked the same question on StackOverflow&lt;/a&gt;. From this point on, we only need a HTTP server; luckily, Python has one in stdlib, so just calling &lt;tt class="docutils literal"&gt;python3 &lt;span class="pre"&gt;-m&lt;/span&gt; http.server 12312&lt;/tt&gt; in the project root lets us load &lt;tt class="docutils literal"&gt;&lt;span class="pre"&gt;http://localhost:12312/main.html&lt;/span&gt;&lt;/tt&gt; and see our page.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="section" id="next-steps-alternatives-et-cetera"&gt;
&lt;h2&gt;Next steps, alternatives et cetera&lt;/h2&gt;
&lt;p&gt;When developing web frontend in Gleam, the more common way is using a framework like &lt;a class="reference external" href="https://hexdocs.pm/lustre/index.html"&gt;Lustre&lt;/a&gt; or at least a DOM library (there are &lt;a class="reference external" href="https://packages.gleam.run/?search=dom"&gt;several&lt;/a&gt;, I have no idea how mature those are). I did not go this route yet, because I am more interested in using backend-agnostic Gleam code from JavaScript and don't mind writing the trivial bindings in JavaScript. &lt;a class="footnote-reference" href="#netzpevnik-gleam" id="footnote-reference-2"&gt;[2]&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Also, a common thing to do is using a minifier+bundler like &lt;a class="reference external" href="https://hexdocs.pm/esgleam/index.html"&gt;esgleam&lt;/a&gt; (it uses &lt;a class="reference external" href="https://esbuild.github.io/"&gt;esbuild&lt;/a&gt; under the hood), so that the whole project is in one file. I don't think I need that now (having the JS be readable is more important to me atm and I don't want to complicate things further), but there is at least &lt;a class="reference external" href="https://erikarow.land/notes/esgleam-embed"&gt;one tutorial&lt;/a&gt; on how to do that.&lt;/p&gt;
&lt;p&gt;Also, during writing of this article I realised Gleam can run all the JS code from itself, so I could have a &lt;tt class="docutils literal"&gt;js_main&lt;/tt&gt; function that would bind the HTML from Gleam itself. But this is probably more readable and separated anyway.&lt;/p&gt;
&lt;hr class="docutils" /&gt;
&lt;table class="docutils footnote" frame="void" id="stdlib-package" rules="none"&gt;
&lt;colgroup&gt;&lt;col class="label" /&gt;&lt;col /&gt;&lt;/colgroup&gt;
&lt;tbody valign="top"&gt;
&lt;tr&gt;&lt;td class="label"&gt;&lt;a class="fn-backref" href="#footnote-reference-1"&gt;[1]&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Well, as far as I understand it, Gleam's stdlib is actually just another package anyway.&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;table class="docutils footnote" frame="void" id="netzpevnik-gleam" rules="none"&gt;
&lt;colgroup&gt;&lt;col class="label" /&gt;&lt;col /&gt;&lt;/colgroup&gt;
&lt;tbody valign="top"&gt;
&lt;tr&gt;&lt;td class="label"&gt;&lt;a class="fn-backref" href="#footnote-reference-2"&gt;[2]&lt;/a&gt;&lt;/td&gt;&lt;td&gt;I will probably use some kind of framework eventually as a part of &lt;a class="reference external" href="https://gitea.ledoian.cz/LEdoian/netzpevnik"&gt;netzpevnik&lt;/a&gt;, but I am exploring the technologies that will be involved, so I want to keep stuff simple.&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
</content><category term="programming"></category><category term="gleam"></category><category term="software"></category><category term="web"></category></entry></feed>