handlebars.js - hbs - mustache js

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

Question

Las principales diferencias que he visto son:

• Los manillares agregan #if , #unless , #with y #each
• Manillares añade ayudantes.
• Se compilan las plantillas de los manillares (el bigote también puede ser)
• Manillares soportan paths
• Permite el uso de {{this}} en bloques (que genera el valor de cadena del elemento actual)
• Handlebars.SafeString() (y quizás algunos otros métodos)
• Los manillares son 2 a 7 veces más rápidos
• El bigote soporta secciones invertidas (es decir, if !x ... )

(Por favor corríjame si me equivoco con lo anterior.)

¿Hay alguna otra diferencia importante que me esté perdiendo?

Answer 1

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

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

Answer 2

Lo has clavado bastante, 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 la lógica en sus plantillas.

El bigote 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 .

Answer 3

Otra diferencia entre ellos es el tamaño del archivo:

• Mustache.js tiene 9kb,
• Handlebars.js tiene 86kb, o 18kb si usa plantillas precompiladas .

Para ver los beneficios de rendimiento de Handlebars.js debemos usar plantillas precompiladas.

Fuente: Una descripción general de los motores de plantillas de JavaScript

Answer 4

Siento que una de las desventajas mencionadas para "Manillares" ya no es válida.

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

Echa un vistazo a handlebars.java

Answer 5

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

Los manillares representarán el bloque para '''' y 0 , pero no otros valores falsos. Esto puede causar algunos problemas al migrar plantillas.

Answer 6

Una diferencia sutil pero significativa está en 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:

Los manillares se desvían ligeramente del bigote porque no realiza una búsqueda recursiva de forma predeterminada.

Sin embargo, como se indica 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 Bigote puedes hacer esto:

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

Básicamente significa "si la variable existe y es veraz, imprima un espacio con la variable". Pero en Handlebars, deberías:

• usa {{this}} lugar
• use una ruta principal, es decir, {{../variable}} para volver al ámbito relevante
• definir un valor de variable hijo dentro del objeto variable principal

Más detalles sobre esto, si los quieres, here .

Answer 7

NOTA: Esta respuesta está desactualizada. Era cierto en el momento de su publicación, pero ya no lo es.

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

Answer 8

Pros del bigote:

• Opció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 obligarte a separar la presentación de la lógica.
• La sintaxis limpia lleva a plantillas que son fáciles de construir, leer y mantener.

Contras del bigote:

• Un poco sin lógica: las tareas básicas (por ejemplo, etiquetar filas alternativas con diferentes clases de CSS) son difíciles.
• La lógica de visualización a menudo se reenvía al servidor o se implementa como una "lambda" (función que se puede llamar).
• 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 obligarte a separar la presentación de la lógica.
• La sintaxis limpia lleva a plantillas que son fáciles de construir, leer y mantener.
• Plantillas compiladas en lugar de interpretadas.
• Mejor soporte para las rutas que el bigote (es decir, llegar a lo profundo de un objeto de contexto).
• Mejor soporte para los ayudantes globales que el bigote.

Manillares contras:

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

Fuente: la reducción de plantillas del lado del cliente: bigote, manillares, dust.js y más