When developing web applications, marking menu items, tabs, or other parts of the user interface, as active is a common need. In the , doing this quickly might lead you to something like this: Phoenix Framework <.link
  href={~p"/stores/#{@store}/products"}
  class={"tab" <> if @active == :products, do: " tab-active", else: ""}
>
  Products
</.link> In this approach, we use ternary expressions and string concatenation to conditionally define CSS classes. It works, but as conditional logic increases, it can become challenging to read and maintain. Introducing Short-circuit Evaluation In Elixir, and are often used interchangeably. However, there’s a slight difference. Lazy evaluation is usually associated with more complex data structures, while short-circuit is . And that’s what we’re going to use. lazy evaluation short-circuit evaluation more common in boolean expressions Let’s look at some examples using : iex list = ["plataformatec", nil, "sourcelevel", false, "dashbit"]
#=> ["plataformatec", nil, "sourcelevel", false, "dashbit"]

# Using short-circuit evaluation on the list
list = ["plataformatec", nil && "sourcelevel", false && "dashbit"]
#=> ["plataformatec", nil, false] In the second definition of the list, we are using a short-circuit operation, where the last value of the expression prevails when the previous one is true; otherwise, the previous value is retained. In simple terms, it’s like telling : “Stop thinking as soon as you know the answer.” Elixir Applying Short-circuit to the CSS Class List In , an approach using lazy evaluation for the class syntax was discussed. , it was clarified that if the list item is or , it will be removed. Phoenix Framework issue #276 In this comment false nil We can apply this solution to our example: <.link
  href={~p"/stores/#{@store}/products"}
  class={["tab", @active == :products && "tab-active"]}
>
  Products
</.link> If is , the string will be added to the list (resulting in ), otherwise, it will be omitted (resulting in just ). This approach is cleaner, more readable, and efficient: @active :products "tab-active" tab tab-active tab : The lazy evaluation syntax is more concise, resulting in cleaner code. Code Conciseness : Lazy evaluation halts evaluation as soon as the result is known, avoiding unnecessary evaluations. Efficiency : The class list is easy to understand and maintain, improving code readability. Readability : The simplified syntax makes code maintenance easier over time. Ease of Maintenance When developing applications in Elixir, it’s not just about using the functional paradigm, but also about writing concise and easily understandable code. This approach not only simplifies our code but also makes maintenance more straightforward and direct. 😎✨ Also published here Photo by Elena Mozhvilo on Unsplash

Too Long; Didn't Read

Making security fun one episode at a time

How to Define an Active Menu Item in a Phoenix Framework Through Short-Circuit Evaluation

Too Long; Didn't Read

Weverton Timoteo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Define an Active Menu Item in a Phoenix Framework Through Short-Circuit Evaluation

Too Long; Didn't Read

Weverton Timoteo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES