[RUBY] When making a personal app, I was wondering whether to make it using haml

Introduction

When I started learning programming with ruby, rails, I often heard these opinions around me. "When it comes time to develop an app individually, I'm wondering whether to make it with haml or erb." "I'm searching for how to write in haml, but I can't find it at all." "Do you really use haml when you run on your own?"

I made an app with both notations and looked back on how to decide whether to use haml or erb. I'm not explaining which one is better.

Judgment material

I hope you can see it while referring to the "Differences in notation" below.

--Code amount haml has an overwhelmingly smaller amount of description. Writing less time can be shortened. Once you get used to it, you can write fast and easy-to-read code.

--Structural understanding In haml, how to write the composition of elements is clearly decided. After all, haml indents the parent-child element. An error will occur if there is only one half-width space off. On the other hand, if you write the selector name according to the writing style, you can nest the selectors in SCSS and match each other's structure. It's easy to find the selector later. If you have the notation in mind, it will be easier to understand when you look at the code written by others. However, it may be difficult to read if the members do not follow the writing style properly.

• Javascript Javascript can handle elements only in HTML notation, so you can use elements as they are in erb, but not in haml. If it is haml, the haml notation will be converted to the html notation before writing, and it will take a lot of time to convert. It is unlikely that Javascript will not be used at all in recent Web development, so I think it will be one of the judgment factors.

--Amount of information in search results HTML is the basis. You can often see haml and erb by searching for development using rails, but the amount of information is less than that of html. Therefore, at the beginning, you have to check how to write in HAML what you write in HTML, and even if you check it, it often does not come out. Converting <script> </ script> is annoying. In addition, I'm wondering how to write erb in haml. (There is a conversion site, but if you don't understand the meaning and convert it, you won't be able to write by yourself ...) Also, when I used Vue.js to learn other languages, all the searched articles were written in HTML. The formula is also HTML.

Difference in notation

If you create the following

code

haml

.outer
  .outer__inner
    %p.text
      = link_to root_path, class: "text-link" do
        Hello New World!

erb

<div class="outer">
  <div class="outer__inner">
    <p class="text">
      <%= link_to root_path, class: "text-link" do %>
        Hello New World!
      <% end %>
    </p>
  </div>
</div>

styling

haml

.outer {
  height: 150px;
  width: 500px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px;
  &__inner {
    height: 100px;
    width: 400px;
    background-color: lightyellow;
    display: flex;
    justify-content: center;
    align-items: center;
    .text {
      height: 50px;
      width: 200px;
      background-color: lightpink;
      text-align: center;
      line-height: 50px;
    }
  }
}

erb

.outer {
  height: 150px;
  width: 500px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px;
}
.outer__inner {
  height: 100px;
  width: 400px;
  background-color: lightyellow;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text {
  height: 50px;
  width: 200px;
  background-color: lightpink;
  text-align: center;
  line-height: 50px;
}

Styling does not always make this difference. However, using haml makes it easier to match each other's structures by using scss. You can also write in CSS.