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

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Augmentastic || Augmented Reality

Lesser-Known Git Commands to Elevate Your Version Control

SourceLevel - PRs Metrics and automated Code Review

SourceLevel · All-in-one Data & Analytics for Engineering Teams

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

7 Git Practices to Start Using in Your Next Commit

17 Stories To Learn About Elixir

3 Things I Learned in 1 Year Working with Functional Programming

A free introduction to Elixir, OTP, Ecto, and Phoenix

A Hitchhiker’s Tour of the BEAM

A Look at Using Elixir Streams, Elasticsearch & AWS S3

7 Git Practices to Start Using in Your Next Commit

17 Stories To Learn About Elixir

3 Things I Learned in 1 Year Working with Functional Programming

A free introduction to Elixir, OTP, Ecto, and Phoenix

A Hitchhiker’s Tour of the BEAM

A Look at Using Elixir Streams, Elasticsearch & AWS S3

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps