node.js - setup - nodejs
¿De qué sirve Jade o Handlebars cuando escribo aplicaciones AngularJs? (10)
Soy nuevo (ish) para todas las aplicaciones de pila completa de JavaScript, y soy completamente nuevo en Angular, así que esperaba que alguien pudiera dejar las cosas claras para mí aquí.
¿Por qué necesitaría usar un marco de plantillas como Jade o Handlebars cuando escribo aplicaciones del lado del cliente usando AngularJS?
Debo decir que nunca he usado ninguno de estos frameworks de plantillas. Entonces no estoy completamente familiarizado con las ventajas. Pero cuando veo Handlebars, por ejemplo, hace muchas de las mismas cosas que haría en Angular, como bucles, etc.
Por lo que puedo decir, tendría más sentido crear las plantillas en Angular usando el HTML apropiado y luego hacer todas las plantillas del lado del cliente, y combinar esto con un primer enfoque de API usando node y mongo por ejemplo.
La razón de esta confusión es que muchos de los ejemplos que encuentro en GitHub hacen uso de Jade, y parece contra intuitivo para mí.
Por favor, ilumíname y acéptame. Me encantaría aprender algunas mejores prácticas de personas que saben mucho más que yo.
Gracias
- No necesita usar manubrios con AngularJS ya que tiene su propio motor de plantillas.
- La razón por la que usan Jade, porque es solo un procesador de servidor que se compilará en html y anglosJS lo publicará posteriormente en la interfaz.
Entonces TL; DR, en el servidor, puedes usar cualquier lenguaje [jade, haml, ...] para generar solo la estructura html para tu aplicación, no tiene nada que ver con angularJS, ya que renderizará y trabajará con HTML en tiempo de ejecución en frontend.
No tiene que usar Jade en el servidor, y sugiero no usarlo, ya que confundirá a los nuevos desarrolladores. En los proyectos que ves utilizan Jade solo porque es más limpio y están acostumbrados, y si se usa con angularJS, solo se trata de generar html sin ninguna lógica.
Antes que nada, siempre necesitas algún tipo de plantilla en el lado del servidor.
Las plantillas puras del lado del cliente tienen enormes desventajas en un tiempo de carga, por lo que a menudo se mitigan al representar algunos elementos estáticos en el servidor. De esta forma, cuando el usuario carga parcialmente una página, ya verá algunos elementos en la página.
Y bueno, las plantillas son útiles en este caso, aunque en ocasiones la gente usa generador html estático como Jekyll.
Hay otra razón para usar Jade que no se menciona aquí anteriormente.
Espacio en blanco
Si está escribiendo HTML mantenido por el ser humano con sangrías y saltos de línea, cada salto de línea dará como resultado un nodo de texto en blanco. En algunos casos, puede alterar el formato de los elementos en línea y hacer que el código de JavaScript sea más extraño.
Puede leer más detalles aquí: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM
Si está escribiendo código de Jade, se compila en HTML de una línea que no tiene este problema.
Cuando se trabaja en equipo, el front-end probablemente prefiera diseñar sus páginas como html estático. Traducir ese html estático en plantillas dinámicas es una fuente de errores, y agregar jade agrega dicho paso de traducción.
Como muchos otros, ¡estoy a favor de la simplicidad!
He leído todas las respuestas anteriores y estaba un poco sorprendido de que nadie haya mencionado un aspecto que hace que usar jade para generar plantillas AngularJS sea muy útil.
Como ya se dijo, en producción, la diferencia de escenarios realistas entre tipear html en bruto y jade es realmente notable, pero lo más importante que nunca debemos olvidar es que a veces necesitamos plantillas angulares modificadas y reinicializadas dinámicamente.
Para decirlo de manera simple, a sometimes necesitamos cambiar html a través de innerHTML y forzar a AngularJS a recompilar los contenidos. Y este es exactamente el tipo de tarea cuando generar tales vistas a través de jade puede tener beneficios.
Además, AngularJS funciona bien con los modelos, cuya estructura es, por definición, bien conocida. En realidad, sucede que en realidad no conocemos la estructura exacta (imagine, por ejemplo, el renderizador JSON). AngularJS será bastante torpe aquí (incluso si estuviera construyendo una aplicación angular), mientras que jade hará el trabajo.
Honestamente, no entiendo por qué a las personas les importa la diferencia entre esto:
<html ng-app>
<!-- Body tag augmented with ngController directive -->
<body ng-controller="MyController">
<input ng-model="foo" value="bar">
<!-- Button tag with ng-click directive, and string expression ''buttonText'' wrapped in "{{ }}" markup -->
<button ng-click="changeFoo()">{{buttonText}}</button>
<script src="angular.js">
</body>
</html>
y esto:
html(ng-app="ng-app")
// Body tag augmented with ngController directive
body(ng-controller="MyController")
input(ng-model="foo", value="bar")
// Button tag with ng-click directive, and string expression ''buttonText'' wrapped in "{{ }}" markup
button(ng-click="changeFoo()") {{buttonText}}
script(src="angular.js")
Excepto que encuentro uno un poco más legible por humanos. Ligeramente No entiendo por qué las personas son tan fervientes sobre el tema. Es todo bikeshedding. La diferencia es insignificante y cualquier programador competente podría traducir fácilmente uno en el otro después de cinco segundos en Google. Usa lo que quieras y deja que los demás peleen por nada. Elija sus batallas y participe en debates sobre las cosas que realmente importan, como los reactores atómicos;)
Jade definitivamente está mucho más cerca de html que Haml. Entonces el cambio de contexto es realmente muy mínimo. Sin embargo, no está completamente ausente. Puede que no le importe a un desarrollador en absoluto. Pero cuando su diseñador viene y le pregunta cómo hacer que una etiqueta anidada funcione correctamente, está resolviendo un problema innecesario que creó en primer lugar.
HTML aún se puede escribir de forma muy legible y los parciales se pueden usar para hacerlo más comprensible. 500 líneas de cualquier cosa son difíciles de leer, ya sea Jade o HTML.
Aquí hay una plantilla de Jade
.product-container
.input-group.msB.col-md-5.no-padding
.fnt-light-navyblue.mtB(for=''name'')
strong Name the sticker
input.full-input(type=''text'', placeholder=''Awesome Batman Sticker'')
.clear
.form-group.mmT
label.form-label.fnt-light-navyblue
strong Choose size
.selector-group(ng-repeat="size in sizes", ng-class="{ ''msT'': !$first}")
- raw
span.radio
input.radio(name=''choose_sticker_size'',
ng-model="selectedSize",
type=''radio'',
value=''{{size}}'',
id="sticker-{{size}}")
span.fake-radio
label(for=''sticker-{{size}}'') {{size}} inch
- endraw
// end form-group
.clear
Y el HTML equivalente
<div class="product-container">
<div class="input-group msB col-md-5 no-padding">
<div for="name" class="fnt-light-navyblue mtB">
<strong>Name the product</strong>
</div>
<input type="text" placeholder="Awesome Batman Sticker" class="full-input" />
</div>
<div class="clear"></div>
<div class="form-group mmT">
<label class="form-label fnt-light-navyblue">
<strong>Choose size</strong>
</label>
<div
class="selector-group"
ng-class="{ ''msT'': !$first}"
ng-repeat="size in sizes">
{% raw %}
<span class="radio">
<input
id="sticker-{{size}}"
class="radio"
name="choose_sticker_size"
ng-model="selectedSize"
type="radio"
value="{{ size }}" />
<span class="fake-radio"></span>
</span>
<label for="sticker-{{size}}">{{size}}</label>
{% endraw %}
</div>
</div><!-- end form-group -->
<div class="clear"></div>
</div>
Cuando se escribe de forma legible, no veo que el HTML esté muy desfavorecido para garantizar un cambio. Efectivamente, los soportes angulares son una monstruosidad. Pero preferiría tenerlos, que tener que lidiar con las dudas del diseñador si la indirección que introduje está rompiendo el html. (Puede que no, pero demostrar que no es un esfuerzo digno)
La respuesta aceptada es algo unilateral y olvida el hecho de que cualquier configuración de precompilador para HTML tiene un gran uso para CUALQUIER tipo de proyecto HTML: Composición y flexibilidad de marcado resultante.
¿Trabajando solo en una aplicación angular? Dale una oportunidad a Jade.
Jade mejora su capacidad de modularización de HTML, disminuye la cantidad de tiempo que pasó en la depuración de HTML y también fomenta la construcción de inventarios de marcado.
Durante el tiempo de diseño, puede haber una gran cantidad de iteraciones en las partes de HTML. Si el resultado de HTML se basa en un conjunto de archivos de jade, es fácil para el equipo actuar con flexibilidad ante los requisitos cambiantes. Además, cambiar el marcado a través de la recomposición de jade incluye es significativamente más sólido que volver a escribir HTML puro.
Dicho esto, reconozco la aversión general hacia la mezcla angular con jade en la etapa de producción o desarrollo. Introducir otro conjunto requerido de conocimiento de sintaxis es una mala idea para la mayoría de los equipos y el uso de jade podría ocultar la gestión ineficiente del proyecto al abstraer un trabajo que estaría prohibido por los principios DRY (por ejemplo, ser perezoso en la preparación de marcado)
Los que inclinan incuestionablemente a Jade en un entorno angular no comprenden que la lógica de visualización pertenece al cliente y la lógica de negocios en el servidor, tal como comentó el OP.
No lo hagas a menos que tengas una muy buena razón para hacerlo. En ingeniería, un sistema con menos partes móviles es un sistema más confiable, y un sistema donde se respetan los límites de la interfaz (cliente / servidor) es más sostenible a largo plazo, por lo que es preferible la arquitectura más simple y la división del trabajo más limpia. Si tiene razones imperiosas, haga lo que debe, pero caveat emptor .
Recientemente repasé un código en el que la creación de plantillas angulares rectas habría hecho un trabajo mucho mejor que mezclar en Jade, simplemente manteniendo la simplicidad.
Además de la extensión de la plantilla, Jade no aporta nada que valga la pena a la mesa que Angular no suministre. Seamos honestos: utilizando el principio de sonido de "favorecer la composición sobre la herencia" (es decir, parciales), nunca deberías necesitar extensibilidad de la plantilla. Jade es apenas "más fácil de analizar" que HTML. Son trivialmente diferentes, mientras que Jade agrega otro nivel de indirección, es mejor evitarlo.
Existe un caso válido y especializado para la creación de plantillas en el lado del servidor: optimización, recordando que la optimización prematura generalmente es una mala cosa. Donde el rendimiento realmente está en juego, y usted tiene la capacidad de servidor de sobra para manejar esto, las plantillas del lado del servidor pueden ayudar. Esto se aplica a productos como Twitter y Basecamp, donde el costo de hacer mucho trabajo en el servidor se ve compensado por las ganancias de solicitudes reducidas al servidor.
En cuanto a los manillares, no hay necesidad de reemplazar las increíbles plantillas del lado del cliente de AngularJS.
Puede incluir plantillas angulares mediante Jade.
script(type="text/ng-template", id="admin")
include partials/admin
Para las plantillas de caché, percibo esto mucho menos frágil que incluir las plantillas escapadas en los archivos javascript.
Ver: https://docs.angularjs.org/api/ng/service/$templateCache
Uso Jade para generar plantillas consumidas por AngularJS porque odio escribir HTML sin formato. Se ve algo así como:
.control-group(
ng-form
name=''emailGroup''
ng-class=''{"ng-error": emailGroup.$invalid}''
)
label.control-label Email
.controls
input(
type=''email''
ng-model=''user.email''
required
placeholder=''[email protected]''
focus-on=''focusEmail''
)
... que creo que es mucho más limpio que HTML simple.