Aprendiendo Javascript II

Una plantilla para el futuro...

@oagranada

fotografia

Tema

Con cual se ve mejor...
Default - Sky - Beige - Simple - Serif - Night
Moon - Solarized

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>.

Ignorar cosas dificulta la vida diaria

Durante muchos años el hombre dejo de hacer muchas cosas por no poder transportar materia prima de un lugar a otro. De la misma manera el hombre actual ha dejado de hacer cosas interesantes en el navegador por no conocer las herramientas.

Reescribiendo las cosas

Muchas de las plataformas existentes generan todo el código html en el servidor, aumentando la cantidad de datos a enviar, provocando mayor carga en el servidor y haciendo más lenta la interacción con el usuario.

Down arrow

¿Y como si no así?

Hay tecnicas avanzadas de reescritura del dom mediante sistemas de platillas front-end, como underscore, swig, mustache, twig y muchos más.

¿Y como funciona?

Se descargan librerias a la maquina cliente que preprocesan plantillas, que a su vez son alimentadas con datos relevantes, como objetos javascript para así generar el contenido necesario.

Ventajas

Usar plantillas renderizadas en el cliente tiene varias ventajas, algunas son:

  • Reducción de la carga de trabajo para el servidor.
  • Reducción de la cantidad de datos que deben ser transferidos del servidor al cliente
  • Mejora en la velocidad de generación de contenido en los navegadores.
  • Sencillez a la hora de programar.

Entrando en Materia

un template basico


						
						<!DOCTYPE html>
						<html lang="en">
						<head>
							
							{{titulo}}
						</head>
						<body>
							Hola {{usuario}}, ¿A que se dedica?:
							<ul>{% for tarea in tareas %}
								<li>{{tarea}}</li>
							{% endfor %}</ul>
						</body>
						</html>

Demo

Preguntas

Gracias

@oagranada

fotografia