Gleam’s New Interactive Language Tour – Gleam
Printed 19 Jan, 2024 by Louis Pilfold
Gleam is a kind protected and scalable language for the Erlang digital machine and
JavaScript runtimes. In the present day Gleam’s new language tour has been launched, a solution to
try to to study Gleam with out having to put in something in your laptop.
Test it out, it seems like this:
The language tour guides you thru the language, from the fundamentals to essentially the most
superior options, introducing every idea in a manner that builds on what has
come earlier than. Gleam is a small and constant language, designed to be as simple to
study and predictable as doable, so the tour manages to cowl the complete
language whereas nonetheless being a comparatively quick learn. When you’ve accomplished the
tour you’ll know every thing you could know to put in writing your individual Gleam applications,
or contribute to current ones.
The examples and any code you write are compiled and execute fully
inside the browser, somewhat sending the code to a construct server for processing.
This coupled with Gleam’s quick compilation pace implies that the tour is
super-snappy. You’ll be able to experiment and take a look at issues with out getting slowed down
ready for the outcomes to come back again.
We’re tremendous proud of how this work has turned out, and we’re hoping that this
will make it simpler than ever for individuals to go from “Gleam sounds attention-grabbing”
to “I can write code in Gleam!”.
Sound good? Discover it at https://tour.gleam.run/ ✨
How does it work?
Gleam’s compiler is written in Rust, and all enter/output is
supplied to it through dependency injection. Which means it’s doable to
substitute the command-line interface that reads and writes to information with an
in-memory one which might be compiled to WebAssembly and run within the
browser.
Gleam compiles to both Erlang or JavaScript, so within the language tour
JavaScript is used because the goal, and this compiled code might be executed
straight within the browser. Executing the code is a bit of tough as Gleam outputs
esmodules, which can’t run utilizing JavaScript’s eval operate.
As an alternative the compiled code is base64 encoded and dynamically imported as a knowledge
URL, after which the important operate might be known as.
const encoded = btoa(unescape(encodeURIComponent(code)));
const module = await import("information:textual content/javascript;base64," + encoded);
module.important();
The opposite tough half is that we’d like the code to have the ability to import and use
modules from the usual library. Compiled Gleam code makes use of relative paths to
import different Gleam modules. These paths get edited barely within the tour to level
to the place we’ve a precompiled copy of the usual library, which the browser can
obtain as wanted. One other method right here would have been to incorporate a
JavaScript bundler within the browser, however this extra light-weight method works effectively
for our wants.
The compiler is quick, nevertheless it’s necessary that the web site and the browser
stay responsive even on slower {hardware}, or if compilation is sluggish for some
different sudden purpose. To keep away from this downside compilation and execution is completed
in a unique thread to the browser’s UI utilizing JavaScript Web Workers.
The CodeFlask library is used to offer the code editor and syntax
highlighting. This was chosen because it’s a light-weight and simple to make use of textual content
editor that has simply the options we’d like, and no extra.
The web site is a static website that’s deployed to GitHub Pages. Reasonably
than utilizing any particular static website generator it’s constructed utilizing a small Gleam
program that may be discovered here.
All of the thanks
Due to John Doneth for his work getting the
compiler to work inside the browser, and to
Enderchief for taking this additional nonetheless.
Due to Hayleigh Thompson for her
JavaScript witchcraft, together with however not restricted to serving to us work out what
our choices are for executing esmodules within the browser.
Due to Hazel Bachrach for testing the tour
and suggesting use of a second thread, to maintain the expertise good for folk on
all units.
Due to Dillon Mulroy, Giacomo Cavalieri, inoas, and jimpjorps
for giving suggestions on the content material of the tour, in addition to unpicking my many
typos and grammatical errors.
This has been a protracted venture, so I’m positive I’ve missed some necessary individuals. I’m
very grateful for everybody’s assist, thanks.
Assist Gleam improvement
In case you like Gleam take into account turning into a sponsor or asking your employer to
sponsor Gleam development. I work full time
on Gleam and your variety sponsorship is how I pay my payments.
Thanks for studying! Completely satisfied hacking! 💜