HAML vs Pug: What are the differences?
What is HAML? HTML Abstraction Markup Language - A Markup Haiku. Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document, without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ERB, and ASP. However, Haml avoids the need for explicitly coding HTML into the template, because it is actually an abstract description of the HTML, with some code to generate dynamic content.
HAML can be classified as a tool in the "Languages" category, while Pug is grouped under "Templating Languages & Extensions".
"Clean and simple" is the top reason why over 66 developers like HAML, while over 118 developers mention "Elegant html" as the leading cause for choosing Pug.
HAML and Pug are both open source tools. It seems that Pug with 18.3K GitHub stars and 1.9K forks on GitHub has more adoption than HAML with 3.43K GitHub stars and 544 GitHub forks.
According to the StackShare community, Pug has a broader approval, being mentioned in 173 company stacks & 118 developers stacks; compared to HAML, which is listed in 113 company stacks and 40 developer stacks.
What is HAML?
What is Pug?
Need advice about which tool to choose?Ask the StackShare community!
Sign up to add, upvote and see more prosMake informed product decisions
What are the cons of using Pug?
Sign up to get full access to all the companiesMake informed product decisions
When we rebooted our front-end stack earlier this year, we wanted to have a consolidated and friendly developer experience. Up to that point we were using Sass and BEM. There was a mix of HAML views, React components and Angular. Since our ongoing development was going to be exclusively in React, we wanted to shift to an inline styling library so the "wall of classnames" could be eliminated. The ever-shifting landscape of inline CSS libraries for React is sometimes difficult to navigate.
We decided to go with Glamorous for a few reasons:
As you may or may not know, Glamorous has ceased active development and been mostly superseded by Emotion. We are planning to migrate to either Emotion or @styled-components in the near future, and I'll write another Stack Decision when we get there!
Personally, I really like HAML. Not having to use open and close tags is a huge time saver. As a result, writing markup with HAML is much more pleasant. HAML essentially forces you to be very strict about spacing, organization, and structure. It also makes the markup easier to read. Protip: I use this pretty frequently: htmltohaml.com
We use Jade when writing HTML, which is much easier to read and maintain. We compile it to HTML before deploying it though, and don't use Jade's client-side rendering features.
We use Jade for constructing our modular UI. We also rely on Jade interpolation to pass reactive and static values from our Express server.
front-end 수업 때 들은 jade 입니다. html을 효과적으로 다룰 수 있고로 열고 닫을때 혼돈이 없어 좋아합니다. 현재 프로젝트에 gulp와 함께 붙이려는 계획을 갖고 있지만, 아직 연습이 더 필요하다고 생각됩니다.