Javascript ES6, librerías Javascript, procesos Repaint/redraw y reflow , Plantillas Javascript y Framework Front-End. Parte 2 Desarrollo front-end para Aplicaciones Móviles con frameworks Javascript

1. Mejoras Javascript ES6

ES6 supone un gran paso adelante en la evolución de Javascript.

1. En ES6

• Explica de forma breve cuando utilizaremos arrow functions.La utilizaremos para evitar la pérdida de ámbito por causa del comportamiento de this y para darnos un mecanismo para poder escribir funciones reducidas. Arrow functions dispone de una sintaxis más corta comparada con la expresión de función convencional y no vincula su propio this, arguments, super, o new.target. Estas funciones son funciones no relacionadas con métodos y no pueden ser usadas como constructores.
• Cita y explica brevemente 2 de las ventajas principales que aporta
  • Sintaxis más corta pudiendo ahorrarte bastante código y más fácil de interpretar.
  • Semántica: captura de la palabra clave this del contexto que lo rodea.

2.En ES6

• Explica qué diferencia existe entre la declaración de variables con let versus la declaración con var.Let tiene la misma misión que var pero con una mayor capacidad de definición de ámbito o scope, ya que los posibles ámbitos son para bloque, declaración o incluso expresión.
• Da un ejemplo en que quede claramente reflejada la diferencia.
  • Global: por ejemplo si definimo smedskip

         
               let me = 'go';// globally scoped
               var i = 'able';// globally scoped
               
        

    podremos actuar en ellas de forma global en el programa, pero, si intentamos acceder a través del objeto window nos sucedería lo siguiente:

         
               console.log(window.me);// undefined
               console.log(window.i); // 'able' 
        

  • Block:Let está únicamente visible en el bucle for mientras que var está visible en toda la función

         
               function funcionIteradoraLet() {}
                 //i no es visible aquí
                 for( let i = 0; i < 5; i++ ){
                //i esta visible aquí
                 }
                 //i no es visible aquí
               }
               function funcionIteradoraVar() {
                //i es visible aquí
                for( var i = 0; i < 5; i++ )
                    {} //i esta visible aquí }
                  //i es visible aquí
               }
               
        

3. En ES6

• Explica de forma breve el uso de const Const nos permite dar un valor inalterable a lo largo del código, es decir, declarar constantes que una vez toman un valor no pueden ser modificadas. Las constantes presentan un ámbito de bloque tal y como lo hacen las variables definidas usando la instrucción let, con la particularidad de que el valor de una constante no puede cambiarse a través de la reasignación, y no se puede redeclarar.
• En el ejemplo siguiente:

  const test = 'casa';test = 'arbol';console.log(test);

  Qué resultado obtendremos en la consola del navegador y explica porqué.
  En la ejecución de la segunda línea obtendremos un error porque modificamos una variable ya asignada como const (Uncaught TypeError: Assignment to constant variable. at anonymous :1:6).Por lo tanto, si ejecutamos por último la tercera línea obtendremos casa como resultado.
• En el ejemplo siguiente:

       
         const user ={} 'name': 'dani', 'age': '41'};
         user.age = '42';
         console.log(user.age)
         
      

  Qué resultado obtendremos en la consola del navegador y explica porqué.Cómo podríamos obtener el resultado del ejemplo anterior.
  Obtendremos como resultado 42 en el navegador. En este caso, no aplicamos una resignación de la let user sino aplicamos una modificación del objeto asignado a user y, por lo tanto, la restricción no salta. Nota: recordad que herramientas online como Babel os permiten probar código ES6

4. Cita y describe brevemente 4 nuevas palabras que hacen de ES6 un lenguaje que nos permite una real Programación Orientada a Objetos (POO).

ES6 nos ofrece palabras reservadas para el trabajo con clases y, por tanto, POO de una forma mucho más cómoda. Class, extend, constructor, super, static son parte de las nuevas palabras reservadas que nos facilitan el trabajo con patrones POO y nos dan acceso sencillo a constructores, herencia, métodos de instancia y de clase, getters y setters, etc.

• extends es usada en la declaración o expresión de clases, para crear una clase hija de otra.
• constructor El método constructor es un método especial para crear e inicializar un objeto creado a partir de una clase.
• super La palabra clave super es usada para llamar funciones de un objeto padre.Las expresiones super.prop y super[expr] son válidas en cualquier definición de método tanto para clases como para objetos literales.
• static La palabra clave static define un método estático para una clase.

3. Repaint/redraw y reflow

• Explica con tus palabras qué es el proceso de repaint/redraw y reflow.Repaint/redraw es como lo que pasa cuando cambias una propiedad de un elemento (generalmente de estilo) pero que no produce variaciones en el layout. Un ejemplo seria, cuando cambiamos de color el fondo.
  En otro sentido tenemos reflow es básicamente lo mismo pero que sí cambia propiedades del layout y obliga a otros elementos a tener que recolocarse. En este caso, un cambio del tamaño de la fuente de un texto o del tamaño de la pantalla los consideraría reflow.
• Dentro de las operaciones que implican una manipulación del DOM, y pensando en el uso de jQuery para realizar esas tareas, existe una característica delicada que es la modificación del árbol. Explica la forma adecuada de proceder cuando se tienen que llevar a cabo varias operaciones de este tipo sobre el DOM, y qué métodos nos ofrece jQuery para poder actuar correctamente.
  Cuando se tienen que llevar a cabo varias operaciones que implican una manipulación del DOM con jQuery el primer paso que se tiene que realizar es la inclusión de la versión deseada y su inicialización.
  Una vez hemos cumplido esta fase, para llevar a cabo una operación de manipulación del DOM el primer paso es el acceso al nodo deseado mediante un selector. Para realizar este proceso jQuery nos ofrece métodos como: getElementById(identificador) o getElementsByClassName( nombreClase ) que nos permiten acceder a un nodo por su ID o la clase asignada respectivamente.
  Una vez hemos encontrado el Nodo, el siguiente paso es realizar la transformación del árbol para aplicar los cambios visuales deseados. Algunos de los métodos que nos pueden ayudar para realizar esta tarea son: setAttribute (nombre, valor) o document.createElement(nombreEtiqueta) aplicables tanto para un repaint/redraw como un reflow.
  Ahora bien, tanto un proceso como el otro consumen una gran cantidad de recursos, por lo que es necesario aplicar una serie de buenas prácticas para reducir el coste computacional.
  Respecto al proceso de selección podremos aconsejar:
  • Reducir el número de elementos del DOM
  • Evitar búsquedas de clases o etiquetas aisladas.
  • Evitar trabajar sobre document.
  • Evitar añadir mucha jerarquía para las búsquedas descendientes.
  • Contextualizar etiquetas o clases con un selector previo restrictivo.
  • Cuando sea necesario realizar varias operaciones sobre un elemento es recomendable guardar una referencia del mismo al localizar.

  Respecto al proceso de manipulación tendremos que considerar que:
  • No todos los elementos tienen el mismo coste de rendimiento para un manipulación.
  • Los elementos posicionados con absolute o fixed no afectan en su reflow.
  • Las animaciones son aconsejables aplicarlas sobre elementos posicionados con absolute o fixed.
  • Modificar el árbol del DOM implica un reflow. Por lo tanto, para aquellas secuencias que se deba aplicar más de una modificación, es aconsejable utilizar un fragmento de DOM que no forme parte de él (por ejemplo, utilizando un objeto DocumentFragment de Javascript) y una vez completado, añadirlo al original. Otra opción para aquellos DOM que no sean formularios es crear un clon donde aplicar los cambios para posteriormente, cuando haya finalizado las modificaciones, sustituirlo por el original.
  • Cuando se van a aplicar varios cambios a un elemento que implican repaints, en ocasiones es más eficiente evitarlos usando display a none, para una vez aplicados todos, volver a poner display a su valor adecuado.
  • Si se van a aplicar varios cambios de estilo sobre un elemento, no se han de aplicar uno a uno, sino que se recomienda crear una clase que los contengan todos y aplicarla en una única acción.
  • Si se usan animaciones, aunque siempre es deseable que sean fluidas, se ha de encontrar un equilibrio entre fluidez y el intervalo en el que se actualiza.

5. Framework Front-End

• Define brevemente qué es un framework Front-End.
  Un framework front-end es una colección de HTML, CSS y JavaScript que contiene patrones de diseño que se pueden reutilizar a lo largo de proyectos.
  El framework puede cubrir todos los aspectos de los tres mencionados o estar enfocado solamente a alguno de ellos en particular.
• Cita y describe brevemente 3 de sus ventajas.
  • Menos código y desarrollo más rápido: Una vez superada la curva de aprendizaje, podés crear una aplicación o sitio web rápidamente, aprovechando del código incluido para no tener que escribir cada línea de código que el proyecto requeriría si empezaras de cero.
  • Opciones por defecto inteligentes: los frameworks front-end están basados en mejores prácticas. Los bugs más comunes y la compatibilidad con navegadores están resueltos. Son dogmáticos en la medida en que funcionan como el autor piensa que deberían funcionar en vez de tratar de complacer a todo el mundo, pero te evitan tener que re-inventar la rueda y te permiten enfocarte en los problemas reales concernientes a tu proyecto.
  • Adecuados para el trabajo en equipo: Un framework front-end bien documentado facilita que nuevas personas comiencen a trabajar en un proyecto.
• ¿El uso de un framework puede responder a todas las posibles aplicaciones que queramos crear? En caso de no ser así cita una desventaja que pueda tener el uso de frameworks.Para proyectos sencillos puede que no sea la opción más adecuada ya que el archivo final terminará pesando más de la cuenta y no se usarán todas las funciones que tiene para ofrecer dicho framework. Es decir, podrías tener un archivo más ligero si lo haces si comienzas el proceso sin ninguna framework.
• Dentro de los frameworks Front-End se puede diferenciar dos tipologías generales. Cita 3 frameworks en la actualidad para cada una de las tipologías.
  • Visuales (HTML, CSS y componentes interactivos)
    • Bootstrap 3. El principal y más popular referente en esta tipología de frameworks front end, creado originalmente por parte del equipo de twitter y con un amplio abanico de posibilidades gracias a la inclusión de un cómodo y configurable sistema de rejilla, soporte para LESS, Sass, componentes visuales con jQuery, filosofía mobile first… además de soporte prácticamente completo para IE8 (gracias a la librería Respond.js 174 que es un polyfill para dar soporte a Media Queries para Responsive Web Design).
    • ZURB Foundation: Este framework dispone también de características completas como sistema de build system basado en Gulp, sistema de rejilla para Responsive Web Design, hojas de estilos basadas en el preprocesador Sass, filosofía mobile first, buen conjunto de componentes interactivos (algunos de ellos únicos) y especial preocupación por el marcado semántico y soporte para accesibilidad a través de A11Y 176.
    • 960 Grid System y unsemantic. Uno de los primeros frameworks existentes que se centraba de forma específica en la creación de un sistema de rejilla en columnas mediante HTML y CSS, ampliando mediante la librería adapt.js el mismo a los requerimientos del Responsive Web Design. Ideal para comprender desde la simplicidad cómo construir un sistema de rejilla en HTML y CSS
  • Frameworks JavaScript
    • AngularJS. Tiene como principal característica que permite extender el vocabulario HTML de nuestra aplicación mediante directivas, para lograr de esta forma convertirse en un framework muy expresivo, legible y rápido de desarrollar.
      Como casi todas sus alternativas soluciona con su base la gestión de vistas, controladores, modelos, enrutamiento, eventos, acceso y manipulación del DOM, validación avanzada de formularios, doble data-binding, inyección de dependencias, comunicación con servidor, etc.
    • Backbone: Backbone aporta una estructura a las aplicaciones web a través de modelos basados en claves y valores, además de eventos personalizados, API para el trabajo con colecciones, vistas con manejo de eventos y conexión a APIs externas mediante una interfaz RESTful en JSON. Su única dependencia es la librería underscore.js.
      Su principal objetivo es ser ligero, y eso hace que algunas características que otros frameworks más pesados incluyen hayan sido dejadas de lado en Backbone (como por ejemplo el UI data-binding, no integrar un motor de plantillas, etc.)
    • Ember: es un framework MVC lanzado en 2011. Ember promueve la convención sobre la configuración, característica que se lleva al extremo con su capacidad de generar código de forma implícita gracias a convenciones en la nomenclatura de sus componentes. Esta característica a la vez puede ser un inconveniente ya que refleja la rigidez con la que se ha construido en algunos escenarios.
      Es un framework que ha centrado parte de sus esfuerzos en obtener un buen rendimiento y cuenta con herramientas que ayudan al desarrollo como Ember Inspector 181 para la depuración y Fastboot 182 para poder correr sobre nodejs como sistema de renderizado HTML en el lado de servidor (actualmente muy limitado).