UT2 DESARROLLO DE APPS MEDIANTE LENGUAJES DE SCRIPT

Frameworks de JavaScript

eugeniaperez.es

es muy importante que el programador esté al día de las nuevas tecnologías...

No significa ser un experto, sino conocer de su existencia...

En la empresa valorarán que conozcas un montón de tecnologías...

¡sé proactivo!

¡Nadie te va a regalar nada!

EL OBJETIVO DE ESTA CLASE ES CONOCER LA EXISTENCIA DE TECNOLOGÍAS NOVEDOSAS PARA TRABAJAR EN EL ENTORNO CLIENTE

UT 2: lenguajes de scripting

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

UT 2: lenguajes de scripting

Frameworks de JavaScript

Dada la gran variedad de librerías existentes, podríamos clasificarlas en varios grupos 
en función de su cometido principal:

• Manipulación del DOM: jQuery, Dojo, Extjs, etc.
• Creación de gráficos: D3.js, Raphael, Three.js, etc.
• Creación de interfaces gráficas de usuario: Bootstrap, Dojo Widgets, jQuery UI.
• Renderización de plantillas: Handlebars, Mustache, etc.
• Pruebas unitarias: Jasmine, QUnit, etc.
• Frameworks MV*: AngularJS, Ember.js, Knockout, etc.

eugeniaperez.es

UT 2: lenguajes de scripting

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

UT 2: lenguajes de scripting

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

UT 2: lenguajes de scripting

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:

• jQuery
• Handlebars
• Knockout
• AngularJS

eugeniaperez.es

descarga los proyectos del aula:

• jquery_example
• handlebars_example
• knockout_example
• angular_example

ejemplo con jquery

UT 2: lenguajes de scripting

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

UT 2: lenguajes de scripting

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

UT 2: lenguajes de scripting

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>

UT 2: lenguajes de scripting

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

UT 2: lenguajes de scripting

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

UT 2: lenguajes de scripting

Frameworks de JavaScript

eugeniaperez.es

ejemplo con handlebars

UT 2: lenguajes de scripting

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

UT 2: lenguajes de scripting

Frameworks de JavaScript

1. Crear una plantilla HTML, que normalmente irá entre dos etiquetas <script>. Entre llaves dobles {{variable}} ubicaremos aquellos tags que van a ser sustituidos por valores específicos:

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>

UT 2: lenguajes de scripting

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:

http://handlebarsjs.com/installation.html ​

Utilizamos jQuery

en combinación

de Handlebars

UT 2: lenguajes de scripting

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.

UT 2: lenguajes de scripting

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
    };
};

UT 2: lenguajes de scripting

Frameworks de JavaScript

eugeniaperez.es

¿Ventajas...?

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

ejemplo con knockout

UT 2: lenguajes de scripting

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

UT 2: lenguajes de scripting

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

UT 2: lenguajes de scripting

Frameworks de JavaScript

Lo primero es importar la librería:

Puedes descargar Knockout a través del siguiente enlace:

http://knockoutjs.com/downloads/index.html

eugeniaperez.es

<script src="js/knockout-3.3.0.js" type="text/javascript"></script>
<script src="js/data.js" type="text/javascript"></script> 

UT 2: lenguajes de scripting

Frameworks de JavaScript

1. Construimos la plantilla HTML:

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

UT 2: lenguajes de scripting

Frameworks de JavaScript

1. Construimos la plantilla HTML:

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"

UT 2: lenguajes de scripting

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:

UT 2: lenguajes de scripting

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>

UT 2: lenguajes de scripting

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

UT 2: lenguajes de scripting

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?

UT 2: lenguajes de scripting

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

UT 2: lenguajes de scripting

Frameworks de JavaScript

eugeniaperez.es

Con Knockout hacemos que los elementos

sean "observables"

UT 2: lenguajes de scripting

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());

UT 2: lenguajes de scripting

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

ejemplo con angularjs

UT 2: lenguajes de scripting

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:

• Filtros para presentar la información en pantalla.
• Módulos para realizar llamadas asíncronas a APIs REST.
• Binding bidireccional.
• Enrutamiento en cliente para poder cambiar de página sin recargar el navegador y poder así construir Single Page Apps.
• Gestión de eventos.
• Integración con Bootstrap.

UT 2: lenguajes de scripting

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

UT 2: lenguajes de scripting

Frameworks de JavaScript

eugeniaperez.es

UT 2: lenguajes de scripting

Frameworks de JavaScript

eugeniaperez.es

Para comprender el funcionamiento de Angular es necesario familiarizarse con los siguientes términos:

• Scope: Es el responsable de detectar los cambios en el modelo y proporciona el contexto a las plantillas.
• Controlador: Es el código con la lógica que comunica el modelo con la vista.

UT 2: lenguajes de scripting

Frameworks de JavaScript

eugeniaperez.es

•  Modelo: Son los datos, que junto con la plantilla producen las vistas.

• Vistas: Lo que el usuario visualiza. Parte de una plantilla, se funde con el modelo y se renderiza en el árbol DOM.

UT 2: lenguajes de scripting

Frameworks de JavaScript

eugeniaperez.es

UT 2: lenguajes de scripting

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/

UT 2: lenguajes de scripting

Frameworks de JavaScript

eugeniaperez.es

1. Insertar el atributo ng-app en el elemento <html>. El valor que se le asigne debe ser el mismo que le demos al módulo de Angular definido para la aplicación.

<html ng-app="demo">

UT 2: lenguajes de scripting

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:

UT 2: lenguajes de scripting

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();
});

UT 2: lenguajes de scripting

Frameworks de JavaScript

eugeniaperez.es

3. Introducir en el scope de Angular los datos que utilizaremos desde las plantillas:

$scope.data = getInfo();

UT 2: lenguajes de scripting

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>

UT 2: lenguajes de scripting

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>

JQUERY: mUY UTILIZADA EN LA EMPRESA

A veces en combinación de otras...

hANDLEBARS: LIBRERÍA JS DE PLANTILLAS

KNOCKOUT: FRAMEWORK JS MVVM

ANGULARJS: FRAMEWORK JS MVC

conocer tecnologías de este tipo marca la diferencia entre un programador "normal" y UN PROGRAMADOR que demuestra estar al día y en constante formación...