erb, haml 또는 slim : 어떤 것을 제안합니까? 그리고 왜? [닫은]


103

저는 Rails를 배우고 있으며 이러한 템플릿 엔진을 보았습니다. 나는 그들에 대한 경험이 없습니다 (단지 erb).

근데 초심자라서 정말 헷갈려요. 어떤 것을 제안하고 그 이유는 무엇입니까? Erb, Haml 또는 Slim? 다른 것보다 선호하는 이유를 알려주십시오. 다른 권장 사항이 있으면 알려주십시오.

편집 : 나는 여기서 우승자를 찾고 있지 않습니다. 나는 그들, 구문, 실행 속도 등에 대한 귀하의 의견을 듣고 싶습니다.


7
간단한 대답은 초보자로서 ERB를 사용하는 것입니다.
Scott Schulthess 2013-08-30


템플릿 엔진은 아니지만 내가 개발 한 dom gem 을 살펴볼 수 있습니다 . 그것은 당신이 루비처럼 보이는 HTML 코드를 작성할 수있게 해준다.
sawa

15
이 "건설적이지 않은"질문은 저에게 매우 도움이되었습니다. 어떤 이유로 든 모드가 적합하다고 생각하지 않더라도 물어봐 주셔서 감사합니다. 그것은 최고의 Google 히트작 중 하나였으며 여기에있는 많은 답변이 제 결정을 내리는 데 도움이되었습니다.
Andy Baird

2
여전히 'rails html erb'에 대한 # 1 Google 결과입니다
Orwellophile

답변:


67

ERB는 주로 일반 HTML에서 작업 할 웹 디자이너가 있고 햄 또는 슬림을 알지 못하는 경우에 좋습니다. 이런 식으로 그는 HTML을 작성할 수 있고 적절한 태그를 사용하여 루비 로직을 임베드 할 수 있습니다.

HTML과 루비 로직 모두에서 작업하거나 디자이너가 HAML과 같은 새로운 것을 배울 준비가되어 있다면 HAML을 선택하겠습니다. 루비 친화적이고 ERB보다 훨씬 더 읽기 쉽고 문자 수를 줄입니다.

예 (공식 HAML 사이트 에서 가져옴 ) :

ERB에서보기는 다음과 같습니다.

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= current_user.bio %></div>
  </div>
</div>

HAML에서는 다음과 같이 보입니다.

#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

훨씬 더 깨끗해!

HAML과 SLIM의 차이점은 SLIM으로 작업 한 적은 없지만 맛의 문제라고 생각합니다. 두 구문을 모두 살펴보고 어느 것이 더 잘 보이는지 결정하십시오. 이 둘 (HAML / SLIM) 사이에 확실한 승자가 있다고 생각하지 않습니다.


읽어보세요-최종 우승자에 대한 마지막 문장은 HAML과 SLIM에 관한 것입니다 (올바르게 편집 됨).
Erez Rabih

1
네, +1, Haml & Slim은 HTML에서 모든 쓰레기를 꺼내고 더 나은 문구를 원하고 완전히 굉장하지만 많은 HTML 전용 사람들은 단순히 그것에 대해 머리를 돌릴 수 없습니다 (또는 처음에는
핸드 코더를 사용하지 않거나

8
@ErezRabih 실제로 HAML과 SLIM 사이에는 큰 차이가 있습니다. Slim은 HAML보다 훨씬 빠릅니다. 또한 더 깨끗한 구문을 가지고 있으며 HTML 속성을 더 깔끔하게 작성할 수 있습니다 a href="foo"..
Mohamad 2013

87

햄보다 슬림을 사용하는 두 가지 큰 장점 :

  1. Slim은 현재 haml보다 약 8 배 빠릅니다.

  2. Slim은 HTTP 스트리밍을 지원하지만 HAML은 지원하지 않습니다.

  3. Slim은 더 자연스러운 구문을 가지고 있습니다. a href="foo.html"


3
Slim vs Haml의 속도에 대한 귀하의 진술에 대한 신뢰할 수있는 출처가 있습니까? 나는 이것에 대해 모든 곳에서 많이 읽었지만 Slim의 GitHub 페이지를 제외하고는 증명할만한 정보를 많이 찾지 못했습니다.
여호수아 Muheim

4
@JoshuaMuheim Slim에는 자신의 컴퓨터에서 수정 / 테스트 할 수있는 벤치 마크 코드가 함께 제공됩니다. github.com/stonean/slim#testing
Gerry

5
+1 Slim은 HTTP 스트리밍을 지원합니다. 결제 게이트웨이 및 Heroku에 문제가 있습니다. HTTP 스트리밍이이 문제를 해결하는 방법 인 것 같지만 응용 프로그램이 HAML로 실행되므로이 ​​솔루션은 더 이상 옵션이 아닙니다
Flov

1
@DamianNowak 나는 당신의 진술이 지나치게 일반화되었다고 생각합니다. 다른 요인을 고려할 때 속도가 반드시 결정 요인이 될 필요는 없다는 것을 의미합니다. 또한 라이브러리가 병목 현상이 될만큼 느리면 어떻게됩니까? 나는 개발자가 주목할 것이라고 확신합니다. 개발진은 포기해야합니까 어떤 속도에 무게를하거나 응, 매우 현명하지 않을까요?
Kelvin

16
많은 추가 작업이 필요한 경우 조기 최적화는 좋은 생각이 아니지만 중요한 성능 이점 때문에 단순히 유사한 라이브러리를 선택하는 것은 시기상조가 아닙니다.
Jamon Holmgren 2013

35

내 머리 꼭대기에서 이것이 내가 생각 해낸 것입니다.

ERB :

장점

  • 기본 제공
  • 공백에 의존하지 않음
  • Ruby 코드가 뿌려진 HTML로 가장 낮은 진입 장벽 (HTML에서 오는 경우)
  • 대부분의 IDE의 렉서는 기본적으로 읽습니다.
  • DHH는 그것을 선호합니다
  • 레거시 앱은 아마도 여전히 그것을 사용하고있을 것입니다.

단점

  • 더 자세한
  • 헬퍼 및 뷰의 content_for 태그는 빠르게 벗어날 수 있습니다.
  • content_for 태그는 erb가 블록의 마지막 줄만 반환하므로 중첩 태그를 더 어렵게 만듭니다. 따라서 문자열에 추가 한 다음 반환해야합니다.

HAML

장점

  • 더 간결합니다. 닫는 태그 없음, 작은 화면에 적합
  • 시각적으로 깔끔한 구조
  • 헬퍼 메소드에서 haml을 활용하기 위해 헬퍼 (haml_concat, haml_capture)가 내장되어 있습니다.
  • 클래스 체인
  • # for divs 또는. 클래스 체이닝의 경우, JS 태그의 경우 : javascript

단점

  • 공백에 의존하여 때때로 파악하기 어려운 오류가 발생합니다.
  • 복잡한 태그는 일반적으로 "해시"형식에 의존해야합니다. (실제로 이것은 누군가에게 유연성을 보여주는 훌륭한 예라고 생각하지만 고통 스러울 수 있습니다.)
  • 보석으로 추가됨
  • 디자이너가 조정하는 데 어려움이있을 수 있습니다.
  • 일반 공백 경고 외에도 ... 간단한 공백 오류 예. 들여 쓰기를위한 탭과 공백으로 인해 프로덕션에서 페이지 오류가 발생하여 정상적인 사양 / 테스트에서 포착하지 못할 수 있습니다. 도덕 : 뷰 테스트가 더 많이 필요할 것으로 예상하고 테스트가 뷰의 실제 렌더링을 테스트하고 있다고 확신하지 않는 한 미션 크리티컬 뷰에 haml을 사용하지 마십시오.
  • 느립니다 (erb보다)
    • 주의 : 이것은 우리가 말하는 루비 코드입니다. 만약 속도가 당신의 어플리케이션에서 블로킹 문제라면 루비에 대한 대안이 있습니다. 예 : haskell

나는 Haml이 erb보다 성능이 느리다는 것을 단점으로 덧붙일 것입니다.
bkunzi01

예. 확실히. 내가 추가 한 하나
engineerDave

1
HAML을 좋아하고 성능이 걱정된다면 Hamlit을 사용해보세요. 내 앱에서 ERB만큼 빠른 속도로 렌더링 속도가 크게 향상되었습니다. github.com/k0kubun/hamlit
Jorge Najera T

21

저에게 질문은 %모든 태그 |앞에 또는 모든 새 텍스트 블록 앞에 두겠습니까?

날씬한:

 tag(attr= "value")
  | text

Haml :

 %tag{attr: "value"}
   text

한 가지 더주의해야 할 사항 : haml은 새 줄 사이에 공백을 가정 하고 (haml에서 공백 제거 ) 슬림은 공백을 가정하지 않습니다 ( 여기여기 에 Slim에 공백 추가 ).


9
+1. 그러나 태그와 같은 줄의 텍스트에는 파이프가 필요하지 않습니다. 태그 안의 텍스트의 첫 줄이 태그와 같은 줄에 있지 않은 경우에만 필요합니다. 첫 번째 줄 이후의 모든 줄에는 들여 쓰기 때문에 파이프가 필요하지 않습니다.
Kelvin 2013

나는 국제화되지 않은 문자열을 작성하기가 더 어렵 기 때문에 슬림의 이러한 측면을 실제로 좋아합니다.
KonstantinK

모든 태그 |%대해 각 텍스트 블록에 대해 확실히 . 리터럴 텍스트 블록보다 훨씬 더 많은 태그가 있습니다. 날씬한 나에게 작지만 의미 론적 승리는 <>태그가 사용 된 원시 리터럴 html 앞에 명시 적 |. 나는 "모든 것을 당신이 명시 적으로 문자하지 않는 한 슬림 선호 |"당신이 가진 HAML 할 때까지 모든 문자는 "이상 %.
ahnbizcad

Slim은 HTML ( attr="value")처럼 보이지만 Haml은 Ruby ( {key: "value"}Hash처럼)처럼 보입니다 .
Franklin Yu

16

https://github.com/scalp42/hamlerbslim- 성능 측면에서 Slim과 Erb를 승자로 보여주는 독립적 인 벤치 마크입니다 (슬림은 HTML 출력 크기도 줄이는 경향이 있음).

내 개인적인 의견은 전반적으로 Slim과 Haml이 유지 관리 측면에서 시간 (== 돈)을 절약 할 수 있다는 것입니다. Haml / Slim에 정통한 사람들이 귀하의 견해를 돌보는 경우에만 가능합니다.

그런 사람들이 없다면 Erb는 확실히 갈 길입니다. 세계 최고의 의지에도 불구하고 HTML / Erb로 작업 할 수 있지만 Haml / Slim을 완벽하게 찾을 수있는 매우 저렴한 사람들이 많이 있기 때문입니다. 신비.

무엇보다도이 사람들에게 Slim을 사용하도록 훈련 시키거나 최소한 그들에게 노출 시키도록 훈련시키고 "얻는"사람들의 수를 유지하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.