¿Cuáles son las diferencias entre Moustache.js y Handlebars.js?

333

Las principales diferencias que he visto son:

  • Manillar añade #if, #unless, #with, y#each
  • Manillar agrega ayudantes
  • Las plantillas de manillar están compiladas (el bigote también puede estarlo)
  • Manillar soporta caminos
  • Permite el uso de {{this}}bloques en (que genera el valor de cadena del elemento actual)
  • Handlebars.SafeString() (y tal vez algunos otros métodos)
  • El manillar es de 2 a 7 veces más rápido
  • Moustache admite secciones invertidas (es decir if !x ...)

(Corríjame si me equivoco con lo anterior).

¿Hay otras diferencias importantes que me estoy perdiendo?

Chad Johnson
fuente
99
Aquí también hay una prueba de rendimiento que compara estos dos jsperf.com/dom-vs-innerhtml-based-templating/366 - hay mejores alternativas;)
Mikko Ohtamaa
1
... y creo que es #cada uno, no #lista.
Shadow Man
@ShadowCreeper Gracias. Publicación actualizada
Chad Johnson
1
He escrito sobre esto en profundidad y también muestro cómo puedes hacer algo similar para plantillas javascript súper básicas para contenido dinámico aquí: http://stephentvedt.com/2013/09/23/html-templating-comparison/
Stephen Tvedt
3
Me pregunto quién aceptó la última edición (2014-10-16). Debería haber sido una respuesta.
Walter Tross

Respuestas:

125

Lo has clavado prácticamente, sin embargo, las plantillas de bigote también se pueden compilar.

Al bigote le faltan ayudantes y los bloques más avanzados porque se esfuerza por no tener lógica. Los ayudantes personalizados de los manillares pueden ser muy útiles, pero a menudo terminan introduciendo lógica en sus plantillas.

Moustache tiene muchos compiladores diferentes (JavaScript, Ruby, Python, C, etc.). Los manillares comenzaron en JavaScript, ahora hay proyectos como django-handlebars , handlebars.java , handlebars-ruby , lightncandy (PHP) y handlebars-objc .

frontendbeauty
fuente
77
¡No olvides Scandlebars, la implementación Scala-Handlebars!
Code Whisperer
1
La implementación de Ruby requiere un intérprete de JavaScript, por lo que realmente no es un compilador de Ruby.
eltiare
72

Pros del bigote:

  • Elección muy popular con una comunidad grande y activa.
  • Soporte del lado del servidor en muchos idiomas, incluido Java.
  • Las plantillas sin lógica hacen un gran trabajo al forzarlo a separar la presentación de la lógica.
  • La sintaxis limpia conduce a plantillas que son fáciles de construir, leer y mantener.

Contras de bigote:

  • Un poco demasiado lógico: las tareas básicas (por ejemplo, etiquetar filas alternativas con diferentes clases de CSS) son difíciles.
  • La lógica de vista a menudo se devuelve al servidor o se implementa como una "lambda" (función invocable).
  • Para que las lambdas funcionen en el cliente y el servidor, debe escribirlas en JavaScript.

Manillares profesionales:

  • Las plantillas sin lógica hacen un gran trabajo al forzarlo a separar la presentación de la lógica.
  • La sintaxis limpia conduce a plantillas que son fáciles de construir, leer y mantener.
  • Plantillas compiladas en lugar de interpretadas.
  • Mejor soporte para caminos que el bigote (es decir, llegar profundamente a un objeto de contexto).
  • Mejor soporte para ayudantes globales que el bigote.

Contras de manillar:

  • Requiere JavaScript del lado del servidor para renderizar en el servidor.

Fuente: el lanzamiento de plantillas del lado del cliente: bigote, manillar, dust.js y más

Faraz Kelhini
fuente
37
Re Moustache con "Un poco demasiado sin lógica". Yo diría que las filas alternadas CSS deben hacerse con una pseudo clase CSS como tr:nth-child(even)y tr:nth-child(odd)o tr:nth-child(2n). Aunque eso es solo un ejemplo, creo que (la mayoría de las veces) si algo es difícil o incómodo con Moustache, entonces lo estás haciendo mal; Hay un lugar mejor para ello.
IAmNaN
3
Handlebars también tiene la implementación del sitio del servidor en java github.com/jknack/handlebars.java
UR6LAD
2
@IAmNaN es justo sobre nth-child ... a menos que esté escribiendo html para un correo electrónico, donde solo puede usar css en línea, ¡lo que hace que sea muy difícil usar nth selectors!
Dylan Watson
24

Una diferencia sutil pero significativa es la forma en que las dos bibliotecas abordan el alcance. El bigote volverá al ámbito principal si no puede encontrar una variable dentro del contexto actual; Los manillares devolverán una cadena en blanco.

Esto apenas se menciona en el archivo README de GitHub, donde hay una línea para ello:

El manillar se desvía ligeramente del bigote porque no realiza una búsqueda recursiva por defecto.

Sin embargo, como se señaló allí, hay una bandera para hacer que los manillares se comporten de la misma manera que el bigote, pero afecta el rendimiento.

Esto tiene un efecto en la forma en que puede usar #variables como condicionales.

Por ejemplo, en Moustache puedes hacer esto:

{{#variable}}<span class="text">{{variable}}</span>{{/variable}}

Básicamente significa "si la variable existe y es verdadera, imprime un lapso con la variable". Pero en Handlebars, deberías:

  • utilizar {{this}}en su lugar
  • use una ruta principal, es decir, {{../variable}}para volver al alcance relevante
  • definir un variablevalor secundario dentro del variableobjeto primario

Más detalles sobre esto, si los quieres, aquí .

Guypursey
fuente
23

NOTA: Esta respuesta está desactualizada. Era cierto en el momento en que se publicó, pero ya no lo es.

Moustache tiene intérpretes en muchos idiomas, mientras que Handlebars es solo Javascript.

KevBurnsJr
fuente
7

Una diferencia más sutil es el tratamiento de valores falsos en {{#property}}...{{/property}}bloques. La mayoría de las implementaciones de bigote simplemente obedecerán la falsedad de JS aquí, no representando el bloque si propertyes ''o '0'.

Manillar se hacen para el bloque ''y 0, pero no otros valores Falsy. Esto puede causar algunos problemas al migrar plantillas.

Jakub Wasilewski
fuente
5

Siento que uno de los inconvenientes mencionados para "Manillares" ya no es realmente válido.

Handlebars.java ahora nos permite compartir los mismos lenguajes de plantilla tanto para el cliente como para el servidor, lo que es una gran victoria para grandes proyectos con más de 1000 componentes que requieren renderizado en el servidor para SEO

Echa un vistazo a https://github.com/jknack/handlebars.java

midart
fuente
3

—Además de usar "esto" para el manillar y la variable anidada dentro del bloque variable para el bigote, también puedes usar el punto anidado en un bloque para el bigote:

    {{#variable}}<span class="text">{{.}}</span>{{/variable}}
Regina Serrambana
fuente