Aprendiendo Javascript II – Una plantilla para el futuro... – Reescribiendo las cosas
Aprendiendo Javascript II – Una plantilla para el futuro... – Reescribiendo las cosas
0 0
aprendiendo_javascript_2
On Github ogranada / aprendiendo_javascript_2
Aprendiendo Javascript II
Una plantilla para el futuro...
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.
* Es posible compararlo con un esclavo, por que hace todo lo que uno le dice.¿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>
<meta charset="UTF-8">
<title>{{titulo}}</title>
</head>
<body>
Hola {{usuario}}, ¿A que se dedica?:
<ul>{% for tarea in tareas %}
<li>{{tarea}}</li>
{% endfor %}</ul>
</body>
</html>