Build It With Nitrogen Book Club

The very first time I’ve seen a line of Elixir I was in awe. Coming from Ruby the syntax was familiar.
But I wanted to know what was this “Erlang” beast, scaring so many people.
Erlang’s syntax was in fact not so “atrocious” and even quite nice.
And after watching this talk from Todd Resudek, I was convinced that to better appreciate the BEAM ecosystem, you need to grasp Erlang.

And so I’ve bought this book, it’s pretty thick but, I’m very eager to read how they dealt with all HTML, forms, string, etc. that the web represents.

I’ll use this book club to tell you how’s the journey and what are my thoughts about it.


Corresponding tweet for this thread:

Share link for this tweet.


The Nitrogen library is so fun. ^.^


Chapter 1 - Frying Pan to Fire

I really like the way the book is written. It’s like a story. It’s very different from all the other books of the same category.

Installing Nitrogen is not like installing rails nor phoenix, you need to clone the nitrogen repo under nitrogen/nitrogen.

After that, by cd into the nitrogen folder, it will generate a fresh new app with make.

make rel_inets PROJECT=devtalk

By inspecting the Makefile I can see that you’re not forced to use one specific web server like Erlang’s basic one.
You can choose between – all with different versions like slim:

  • Cowboy
  • Inets
  • Mochiweb
  • Webmachine
  • Yaws

To be honest I only knew the existence of Cowboy and Inets. Probably gonna check the others.

By cd into devtalk and running bin/nitrogen console the server starts running on 8080.

The code which interests me is under the site folder.

By crack opening the templates/bare.html as suggested by the book, I can see this:

It seems to be the Nitrogen's “secret sauce”. Like sharding for MongoDB web-scale…

I really like the little notes like this one:

Most of the Erlang community prefers Emacs,
but the authors are oddballs and prefer Vim.

I agree a 100 percent :laughing:

It’s important to note that since Nitrogen 3, it uses Rebar3.
Also that ViM and Emacs got an extension to handle a special indentation for Nitrogen.

It goes from this:

Elements = #panel { body=[
                         #span { text="Hello, World"}

to this:

Elements = #panel {body=[
    #span{text="Hello, World!"}

Which is in fact probably quite helpful in a big file.
The syntax reminds me of Elm, and its special way to define HTML in this style.

This first chapter is a little ice breaker, nothing too technical, but it lays the foundation of the book. I kinda like it.


Ooo exciting stuff @Maartz!! I’m looking forward to following your journey with this book and Nitrogen!

I’ll be interested in hearing your thoughts how things differ from Elixir/Phoenix-land as well if you post any :nerd_face:


Yaws is the old do-everything web server, not terribly fast, but extremely functional with near everything built-in, kind of the rails of the erlang world, been around for decades, lol.

Mochiweb was kind of the predecessor to Cowboy, it had more functionality than cowboy, but its overall design affected how cowboy came about. Webmachine I think (if I recall right) was made by the same author as nitrogen, but it can be backed by multiple other web servers, lol.

Nitrogen actually has a lot of similar capablities as to Elixir’s Drab and LiveView, though a bit more ‘direct-call’ efficient (like drab).

They are just erlang records is all, similar pattern to other libraries in other languages that even predate nitrogens old age. ^.^


2. If you can’t run. Dance.

So this chapter is about building a “real” application, as I understand. A job board called nitroBoard. That sounds good.

The difference between slim and non slim versions, slim ones do not include ERTS. It’s related to slim release. Didn’t knew that.

So the specs are clear, I need two pages. One for lobby display, one for visitor appointments.

I was wondering, for dev purpose if Nitrogen was able to do some hot reload, it can! In the bin/nitrogen console shell, I just need to type sync:go(). to get automatic reload. I got a big chunk of lines in the console which tells me that the process is running.

Let’s open index.erl under nb/site/src, it’s a plain old Erlang module.

So is it what you called Erlang records ?

These [#h1 {text="Welcome to Nitrogen},] stuff ?

With some modifications, a bit verbose I’d argue, you can do nice stuff. It really makes me feel like Elm, even if Nitrogen is older :sweat_smile:

As far as I get through the book, it explains what is an arity, what is a module and thus, I reckon it doesn’t expect a particular knowledge of Erlang.

Ah page 34, the rendering is explained, it goes throught these steps:

  1. User hits a URL
  2. URL is mapped to a module
  3. Nitrogen calls module:main
  4. module:mail() typically returns a #template{} element
  5. The #template{} is sent to Nitrogen’s rendering engine
  6. The template includes raw HTML mixed with callouts back into the page module ( in the form of [[[page:some_function()]]]
  7. Those functions return other Nitrogen elements
  8. Those elements are also run through Nitrogen’s rendering engine, converting all elements into HTML and JS
  9. This process continues until all elements have been converted
  10. Nitrogen sends the rendered output to the browser

I quote the book

Lists are big business in Erlang.

The routing is handled by naming.

Root page is mapped to index.erl inside src.
Nitrogen replaces / with _.
routes/to/a/module becomes routes_to_a_module

Well, as you said @OvermindDL1, a Nitrogen element is no more than an Erlang record that renders HTML.

So, when compiled a record is just a plain vanilla Erlang tuple. But the record definition provides the compiler with enough information to enable the programmer to address fields in the tuple by name.

By the authors themselves, using an Erlang records to solve this problem is a hack.

#label { text="Hello world" } is <label> Hello world </label>

Nitrogen provides basic properties like id, actions, show_if`, etc.

Well that’s all for today folks! :wave:


Yep, all that #... stuff is erlang records, which are actually just tuples with the first element being the record atom name, lol. They are just a compile-time name=>tuple-position mapping, very efficient. :slight_smile:

I wouldn’t call it a hack at all, most languages have libraries that output to the web and use structured data to do so like that. ^.^


Did you mean module:main() typically returns... ?


Oh yes… :sweat_smile: typo. And I’m moving so the book is already in a box. Thanks.


As one of the authors of the book and the maintainer of Nitrogen, I just wanted to pop in here and say thanks for the comments so far. It sounds like you’re really grokking things, which tells me we’re at least doing an okay job at explaining things!

Thanks for this! We really appreciate it!. Lloyd, my co-author, is a novelist with a programming background, so he really put in the work to make sure the book stayed engaging.

Any questions, of course, feel free to ask here, or on the Erlang Forum (of which I know most of you are also members).


Welcome Jesse :023:

We have a Nitrogen portal here btw:

You should start a thread about it - saying what it is, how it differs from other frameworks etc :003:


Speaking about Erlang, there is also

1 Like