Frameworks de JavaScript
eugeniaperez.es
No significa ser un experto, sino conocer de su existencia...
En la empresa valorarán que conozcas un montón de tecnologías...
¡Nadie te va a regalar nada!
Frameworks de JavaScript
JavaScript es un lenguaje de programación alrededor del cual se han desarrollado y siguen apareciendo múltiples librerías que nos permiten extender sus posibilidades y desarrollar aplicaciones de una manera más productiva.
Listado de algunas de las librerías más famosas, aunque existen muchas más:
https://en.wikipedia.org/wiki/List_of_JavaScript_libraries
eugeniaperez.es
Frameworks de JavaScript
Dada la gran variedad de librerías existentes, podríamos clasificarlas en varios grupos
en función de su cometido principal:
eugeniaperez.es
Frameworks de JavaScript
Actualmente jQuery es el claro dominador del mercado.
jQuery es una librería que ya lleva bastante tiempo disponible (2006), y aunque sigue siendo muy utilizada, es muy común que se utilice en combinación con otras librerías que tienen funcionalidades.
eugeniaperez.es
Frameworks de JavaScript
A continuación veremos cómo se usarían
algunas de las librerías más utilizadas
del listado anterior para solucionar el
mismo ejemplo.
eugeniaperez.es
Frameworks de JavaScript
Vamos a ver cómo mostrar en la vista un objeto creado en JavaScript. Esto lo haremos con 4 tecnologías distintas:
eugeniaperez.es
Frameworks de JavaScript
Veamos a continuación un ejemplo en el que simplemente intentaremos llenar de información una página con un marcado HTML bastante sencillo. Los datos a mostrar procederán de un fichero JS (data.js) que simplemente retornará un objeto JSON a través de una función:
eugeniaperez.es
function Cuatrovientos() {
};
Cuatrovientos.prototype.getInfo = function () {
return {
"name": "Pamplona",
"province": "Navarra",
"population": 200000,
"altitude": 449
};
};
data.js
Frameworks de JavaScript
JSON, acrónimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos entre la parte del cliente y el servidor.
eugeniaperez.es
Frameworks de JavaScript
A continuación, veamos cómo mostrar estos datos en un documento HTML utilizando jQuery para manipular el DOM:
eugeniaperez.es
<div class="entry">
<h1></h1>
<div class="body">
<ul>
<li id="province"><strong>Provincia: </strong></li>
<li id="population"><strong>Población: </strong></li>
<li id="altitude"><strong>Altitud </strong></li>
</ul>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"
type="text/javascript"></script>
<script src="js/data.js" type="text/javascript"></script>
<script type="text/javascript">
var dataSource = new Cuatrovientos();
var data = dataSource.getInfo();
$(".entry h1").html(data.name);
$("#province strong").after(data.province);
$("#population strong").after(data.population);
$("#altitude strong").after(data.altitude);
</script>
Frameworks de JavaScript
Como se puede ver es necesario seleccionar cada elemento del archivo HTML en el que queremos mostrar información, e inyectar la información a mostrar.
Además, para llevar a cabo esta tarea hemos tenido que introducir elementos en el HTML que si no, hubieran sido innecesarios, como por ejemplo los atributos ID de cada uno de los list item de la lista.
eugeniaperez.es
Frameworks de JavaScript
Este método nos obliga a ir mapeando uno a uno todos los atributos del objeto a mostrar con su correspondiente elemento del DOM destino.
Además, manipular el DOM es una operación muy costosa en cuanto a rendimiento y estamos haciendo un uso intensivo de ella. Por tanto, a continuación veremos algunas librerías que nos liberan de esta tediosa tarea.
eugeniaperez.es
Frameworks de JavaScript
eugeniaperez.es
Frameworks de JavaScript
Existen varias librerías en este ámbito, siendo probablemente Handlebars y Mustache las más populares, si bien Handlebars es superior en cuanto a las posibilidades que nos ofrecen sus helpers para dotar de cierta capacidad de dinamismo a las plantillas. Ejemplos son los bloques if-else, each, with, etc.
Para trabajar con handlebars debemos seguir una serie de pasos:
eugeniaperez.es
Frameworks de JavaScript
eugeniaperez.es
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{name}}</h1>
<div class="body">
<ul>
<li><strong>Provincia: </strong> {{province}}</li>
<li><strong>Población: </strong> {{population}}</li>
<li><strong>Altitud </strong> {{altitude}}</li>
</ul>
</div>
</div>
</script>
Frameworks de JavaScript
2. A continuación, compilamos la plantilla. Para ello debemos seleccionar el fragmento de código HTML de la plantilla e invocar a la función Handlebars.compile():
eugeniaperez.es
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/handlebars-v4.0.2.js" type="text/javascript"></script>
<script src="js/data.js" type="text/javascript"></script>
<script type="text/javascript">
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
...
</script>
Necesitamos descargar la librería:
Utilizamos jQuery
en combinación
de Handlebars
Frameworks de JavaScript
3. Una vez hemos compilado la plantilla, ya podemos proceder a pasarle el objeto con los datos a mostrar. Fíjate que el nombre de cada propiedad del objeto se corresponde con los valores referidos en la plantilla entre llaves dobles (title y body). Por último se "inyecta" el código html:
eugeniaperez.es
<script type="text/javascript">
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var dataSource = new Cuatrovientos();
var data = dataSource.getInfo();
$("body").html(template(data))
</script>
Los nombres de datos de la plantilla
y del objeto array, deben coincidir
Finalmente se "inyecta" el código HTML en el body.
Frameworks de JavaScript
eugeniaperez.es
Los nombres de datos de la plantilla y del objeto array, deben coincidir
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{name}}</h1>
<div class="body">
<ul>
<li><strong>Provincia: </strong> {{province}}</li>
<li><strong>Población: </strong> {{population}}</li>
<li><strong>Altitud </strong> {{altitude}}</li>
</ul>
</div>
</div>
</script>
function Cuatrovientos() {
};
Cuatrovientos.prototype.getInfo = function () {
return {
"name": "Pamplona",
"province": "Navarra",
"population": 200000,
"altitude": 449
};
};
Frameworks de JavaScript
eugeniaperez.es
Nos evitamos la definición de IDs en el código innecesarios y la constante manipulación del DOM, con lo que el coste de esta operación significa...
Frameworks de JavaScript
La utilización de una librería para crear plantillas ya es un paso adelante respecto a la manipulación constante del DOM.
No obstante, aún nos obliga a escribir código para la compilación y renderizado de la plantilla.
En caso de que queramos ir un paso más allá, contamos con librerías y frameworks JavaScript que hacen más fácil el paso de información a las vistas.
eugeniaperez.es
Frameworks de JavaScript
Una de estas librerías es Knockout, que se define como un framework MVVM (Model-View View-Model).
El significado de estas siglas es que permite al desarrollador pasar datos fácilmente de los modelos (en nuestro ejemplo un objeto JSON) a las vistas (archivo HTML) y viceversa.
Para ello seguiremos los siguientes pasos:
eugeniaperez.es
Frameworks de JavaScript
Lo primero es importar la librería:
Puedes descargar Knockout a través del siguiente enlace:
eugeniaperez.es
<script src="js/knockout-3.3.0.js" type="text/javascript"></script>
<script src="js/data.js" type="text/javascript"></script>
Frameworks de JavaScript
En Handlebars se creaba con código HTML, estaba insertada dentro de etiquetas <script>.
En Knockout las plantillas están completamente integradas en el documento HTML.
Para mostrar los datos simplemente tenemos que incluir el atributo data-bind="text: value" en el elemento HTML en el que queremos insertar información.
eugeniaperez.es
Frameworks de JavaScript
eugeniaperez.es
<div class="entry">
<h1 data-bind="text: name"></h1>
<div class="body">
<ul>
<li><strong>Provincia: </strong> <span data-bind="text: province"></span></li>
<li><strong>Población: </strong> <span data-bind="text: population"></span></li>
<li><strong>Altitud </strong> <span data-bind="text: altitude"></span></li>
</ul>
</div>
<input type="text" data-bind="value: province" />
</div>
Incluimos el atributo data-bind="text: value"
Frameworks de JavaScript
2. Creamos nuestro ViewModel. Es decir, el objeto JSON que vamos a pasarle a nuestra plantilla para mostrar la información (utilizamos el mismo que en ejemplos anteriores):
eugeniaperez.es
function Cuatrovientos() {
};
Cuatrovientos.prototype.getInfo = function () {
return {
"name": "Pamplona",
"province": "Navarra",
"population": 200000,
"altitude": 449
};
};
ko.applyBindings(new Cuatrovientos().getInfo());
Le decimos a Knockout que coja nuestro objeto y
lo ponga a disposición de la plantilla:
Frameworks de JavaScript
Ya no hace falta más. Al igual que ocurría con Handlebars, el nombre del text del atributo data-bind y las claves de los elementos del objeto JSON deben coincidir.
eugeniaperez.es
function Cuatrovientos() {
};
Cuatrovientos.prototype.getInfo = function () {
return {
"name": "Pamplona",
"province": "Navarra",
"population": 200000,
"altitude": 449
};
};
ko.applyBindings(new Cuatrovientos().getInfo());
<li><strong>Provincia: </strong> <span data-bind="text: province"></span></li>
<li><strong>Población: </strong> <span data-bind="text: population"></span></li>
<li><strong>Altitud </strong> <span data-bind="text: altitude"></span></li>
Frameworks de JavaScript
¿Ventajas...?
Como se puede ver, desaparece cualquier fragmento de código JavaScript para realizar manipulación del DOM.
El código es mucho más limpio y compacto. Así se demuestra el funcionamiento de Knockout desde la perspectiva del Model-View (del modelo a la vista).
eugeniaperez.es
Frameworks de JavaScript
... Así se demuestra el funcionamiento de Knockout desde la perspectiva del Model-View (del modelo a la vista).
No obstante, esta librería también se define como View-Model...
eugeniaperez.es
¿Qué quiere decir esto?
Frameworks de JavaScript
Knockout es capaz de observar las variables que estamos mostrando en la vista, detectar cambios en su valor y reflejar estos cambios en nuestros datos.
Es decir, supongamos que la variable province además de ser mostrada en la lista, también se muestre en una caja de texto. Podemos indicarle a Knockout que queremos que, cuando el usuario modifique el valor de esa caja de texto, también se haga lo propio con el valor de la variable province.
eugeniaperez.es
Frameworks de JavaScript
eugeniaperez.es
Con Knockout hacemos que los elementos
sean "observables"
Frameworks de JavaScript
Esto se consigue mediante la función ko.observable, conseguimos que Knockout active el binding en ambas direcciones:
eugeniaperez.es
function Cuatrovientos() {
};
Cuatrovientos.prototype.getInfo = function () {
return {
"name": "Pamplona",
"province": ko.observable("Navarra"),
"population": 200000,
"altitude": 449
};
};
ko.applyBindings(new Cuatrovientos().getInfo());
Frameworks de JavaScript
Este proceso es costoso, de ahí que la librería no lo active para todas las variables por defecto y recaiga en el programador la tarea de elegir cuáles necesitan este comportamiento.
eugeniaperez.es
Frameworks de JavaScript
Hemos visto cómo Knockout va un paso más allá que las librerías que se limitan a ofrecer gestión de plantillas. De la misma forma, AngularJS es capaz de hacer lo que hace Knockout, y muchas cosas más. Por ejemplo:
Frameworks de JavaScript
Estamos ante un framework con gran cantidad de módulos, pero nos centraremos en su capacidad de binding bidireccional y en la gestión de plantillas.
El binding en ambas direcciones se comporta de una manera similar a como lo hacía Knockout con la diferencia de que Angular utiliza el enfoque inverso: siempre activado, y si no lo necesitamos lo podemos desactivar para acelerar el rendimiento de la aplicación.
eugeniaperez.es
Frameworks de JavaScript
eugeniaperez.es
Frameworks de JavaScript
eugeniaperez.es
Para comprender el funcionamiento de Angular es necesario familiarizarse con los siguientes términos:
Frameworks de JavaScript
eugeniaperez.es
Frameworks de JavaScript
eugeniaperez.es
Frameworks de JavaScript
eugeniaperez.es
Para utilizar AngularJS en una aplicación se deben acometer al menos los siguientes pasos:
Descargar el núcleo de Angular a través del siguiente enlace: https://angularjs.org/
Frameworks de JavaScript
eugeniaperez.es
<html ng-app="demo">
Frameworks de JavaScript
eugeniaperez.es
2. Crear el módulo principal de la aplicación. De él colgarán todos los submódulos de la misma, como controladores, servicios, factorías, etc.
En el siguiente fragmento creamos un controlador con el código que hemos estado utilizando hasta ahora para crear nuestro objeto de datos:
Frameworks de JavaScript
eugeniaperez.es
Creamos un controlador con el código que hemos estado utilizando hasta ahora para crear nuestro objeto de datos:
angular.module('demo', [])
.controller('DemoController', function($scope) {
var getInfo = function() {
return {
"name": "Pamplona",
"province": "Navarra",
"population": 200000,
"altitude": 449
};
};
$scope.data = getInfo();
});
Frameworks de JavaScript
eugeniaperez.es
3. Introducir en el scope de Angular los datos que utilizaremos desde las plantillas:
$scope.data = getInfo();
Frameworks de JavaScript
eugeniaperez.es
4. Asignar el controlador a un elemento del DOM, dentro del cual podremos mostrar los datos introducidos en el scope desde ese controlador:
<div class="entry" ng-controller="DemoController">
<h1>{{data.name}}</h1>
</div>
Frameworks de JavaScript
eugeniaperez.es
HTML completo:
<html ng-app="demo">
<head>...</head>
<body>
<div class="entry" ng-controller="DemoController">
<h1>{{data.name}}</h1>
<div class="body">
<ul>
<li><strong>Provincia: </strong> <span>{{data.province}}</span></li>
<li><strong>Población: </strong> <span>{{data.population}}</span></li>
<li><strong>Altitud </strong> <span>{{data.altitude}}</span></li>
</ul>
</div>
<input type="text" ng-model="data.province" />
</div>
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/data.js" type="text/javascript"></script>
</body>
</html>
A veces en combinación de otras...