I love to explore various options for design when doing my deliberate practice. Sometimes I realize that these options are useless in nature, yet try them anyway – because discovering new things is fun! And because you never know what you’ll learn down the line.<\/p>\n\n\n\n
While recording a series of videos “Alex learns htmx<\/a>“, I realized that I could use the state monad to manage state in a web application. At this point, you probably have a bunch of questions: What is a monad? What is the state monad? How would you do that? Why is it useless? <\/p>\n\n\n\n Well, let’s see.<\/p>\n\n\n\n A monad is a design pattern from functional programming. The state monad in particular has the following components:<\/p>\n\n\n\n The monad itself is a transformation that takes the duo In my case, I was playing with a to do list that has a list of items: The interesting thing about this pattern, and the reason why it’s used in functional programming, is that it prevents mutation even when we change things<\/strong>. The current state of the system is used as input for a pure function that returns the new state of the system. It is quite a beautiful idea.<\/p>\n\n\n\n How did I use it for a web application? Well, the state is already in the html code, since it needs to be displayed. We just need to pass it to a server-side pure function. In htmx this works beautifully simple through a few html attributes. See below an example of a Jinja2 server-side template that builds the htmx fragment<\/em>:<\/p>\n\n\n\n[data structure version n, change function]<\/code> and returns a duo [data structure version n+1, change function]<\/code>. (For the knowledgeable reader: I know there’s more about monads than this, don’t @ me)<\/sub><\/p>\n\n\n\n[\"Milk\", \"Sugar\", \"Bread\"]<\/code>. If I want to add a new item to the list, I can simply have a function addNewItem<\/code> that receives the current list and returns a list that contains all the initial items plus a new one [\"Milk\", \"Sugar\", \"Bread\", \"New Item\"]<\/code>. If I want to rename an item, I can use a function renameItem<\/code> that receives the item to rename \"New Item\"<\/code> and the new value and returns the new value. And so on.<\/p>\n\n\n\n<h1 id=\"list-header-1\">First List<\/h1>\n<ol id='list-1'>\n{% for item in toDoListItems %}\n<li hx-get=\"\/lists\/1\/{{ loop.index }}\/edit\" hx-trigger=\"click\" hx-target=\"#container-list-1\" hx-include=\"input\">{{item}}<\/li>\n <input name=\"items[]\" type=\"hidden\" value=\"{{item}}\"><\/input>\n{% endfor %}\n<\/ol>\n<button id=\"add-item-list-1\" hx-post=\"\/lists\/1\/\" hx-trigger=\"click\" hx-target=\"#container-list-1\" hx-include=\"input\">Add Item<\/button><\/em><\/code><\/pre>\n\n\n\n