Framework JavaScript

¿Cuál es la diferencia entre una biblioteca (librería) y un Framework?

Librería vs. framework

En primer lugar, es necesario poner de relieve sus diferencias. A menudo, librería (biblioteca) y framework se usan erróneamente como sinónimos. Aun cuando la transmisión se lleva a cabo de manera fluida en muchos aspectos, existen diferencias sustanciales entre ambos.

Librería

En el ámbito de la programación, el término librería hace referencia a una librería de programas, independientementede si contiene clases o componentes o se trata de otro tipo de librería. Las librerías de programas siempre alojan subprogramas que facilitan la programación gracias a sus funciones de ayuda. A diferencia de un framework, una librería se desarrolla para ser usada de una manera determinada y posee, para ello, funciones que han sido ajustadas las unas a las otras. Un ejemplo de ello es la librería JavaScript D3.js, que permite la visualización de datos y con la cual se pueden realizar pequeñas tablas, diagramas o estadísticas e incluso representaciones gráficas complejas que incluyan animaciones y opciones para la interacción. Las librerías o bibliotecas siempre están vinculadas a un software que accede a las funciones correspondientes de una librería de programas cuando las necesita. Como consecuencia, dichas bibliotecas solo funcionan en el entorno de un programa y no pueden ejecutarse de manera independiente.

Framework

Un framework, que en inglés significa infraestructura o armazón, no es un programa autónomo, sino más bien un tipo especial de biblioteca de clases. Los frameworks representan la arquitectura de software (el marco) de una aplicación y determinan fundamentalmente el proceso de desarrollo. Los frameworks poseen unos modelos concretos de desarrollo que, a su vez, cuentan con diversas funciones (a menudo en forma de varias librerías) y sirven para desarrollar aplicaciones nuevas e independientes. Un ejemplo de ello es el Zend Framework para PHP, que puede utilizarse en los software para tiendas online de Magento y también de la herramienta de analítica web Piwik.

Las bibliotecas más usadas en JavaScript

11 mayo, 2015 por: Jorge Durán

Portada » Web » Las bibliotecas más usadas en JavaScript

El popular lenguaje de programación, que esta viviendo un gran crecimiento con desarrollos como Node.js tiene un gran cantidad de bibliotecas, con la que ampliar su funcionalidad y soportar nuevos usos (o adaptaciones a los mismos). Hoy os queremos informar de las más usadas y lo que nos aportan.

Como podemos ver jQuery es la más usada, pero también encontramos otras muy populares como Modernizr, Fancy Box o Carousel.

jQuery la biblioteca más importante de JavaScript

jQuery es hoy en día un elemento que acompaña a JavaScript en la mayoría de las ocasiones, por lo que su primer puesto no es una novedad. Una manera de ver el alcance que tiene esta biblioteca, es ver como gran cantidad de las respuestas de desarrollo web que hay en StackOverflow, son resultas siempre mediante jQuery.

Como opinión personal creo que jQuery es uno de los máximos exponentes de menos es más es decir, no añade gran cantidad de novedades a JavaScript, pero nos permite hacer algunas cosas que en JavaScript requieren de un número elevado de líneas de una manera muy simple. Es usada principalmente para modificar o seleccionar elementos DOM y las hojas de estilo CSS, además de para gestionar eventos y realizar animaciones.

jQuery UI una biblioteca de jQuery

jQuery UI es una biblioteca de jQuery (sí jQuery en si mismo se está convirtiendo en una plataforma enorme, con sus propias bibliotecas), que nos permite como su nombre indica crear elementos para la interfaz de usuario y además añadirles animaciones a los mismos. Esto puede ser una descripción muy limitada, así que os animo a que entréis en la web y veáis los ejemplos de los distintos elementos que ofrecen. Por ejemplo el selector de fechas, que seguramente lo hayáis visto en multitud de web pertenece a esta biblioteca.

Modernizr ¿está tu navegador preparado?

Modernizr es una librería que se encarga de informarnos de las características que soporta nuestro navegador, para poder entregar al usuario una web que se adapte al mismo. Esto es un problema actualmente bastante grave ya que no todos los navegadores implementan las últimas características de los estándares de HTML5 y CSS3, lo que implica que aquél botón muy bonito con un efecto que hemos tardado una tarde en hacer, quizás en Internet Explorer 6 se va a ver como una interrogación. Así elementos que son básicos en nuestra web quizás no funcionen porque el usuario no utiliza un navegador actualizado, o simplemente porque ese navegador no soporta esa característica, pero con esta biblioteca lo podemos controlar y así intentar que se pueda usar desde todos los navegador y por todos los usuarios.

FancyBox y Carousel bibliotecas para las imágenes

Normalmente cuando visitamos una web, si esta tiene gran cantidad de fotografías nos gusta poder ver una galería, o que las mismas se amplíen para poderlas ver en más detalle. Esto es lo que proponen estás dos bibliotecas, la primera de ellas realiza el efecto de ampliar una foto, mientras que la segunda crea una galería por la que nos podemos desplazar para ver la imagen siguiente.

¿Cuáles son los Framework JavaScript más utilizados?

Frameworks JS más utilizados

El número de librerías JavaScript es notablemente mayor que el de frameworks. Estos últimos sirven, sobre todo, para aplicaciones web complejas y son muy efectivos en caso de que los desarrolladores intervengan en la conceptualización y especificación del framework correspondiente.

AngularJS

El framework creado por Google tiene, con diferencia, la mayor comunidad entre los frameworks JavaScript. AngularJS se utiliza para crear aplicaciones web de una sola página (aplicaciones web que constan de un solo documento HTML), al igual hace su principal competidor, este es, la biblioteca de Facebook React. A causa del patrónMVVM (Model-View-ViewModel), se pueden desarrollar aplicaciones web especializadas en la interacción con los usuarios. Los proveedores de este framework JS, no obstante, definen a AngularJS más bien, en parte en broma, como un modelo MVW o Model-View-Whatever, es decir, modelo-vista-lo que sea. La renderización de la aplicación se lleva a cabo, en este caso, del lado del cliente. El framework está basado en jQuery Lite, una versión reducida de jQuery.

Ventajas	Inconvenientes
Comunidad muy ampliaextensa	Hoy ya reemplazado por Angular
Forma pParte del conjunto de sistemas MEAN Stack	Notables dificultades iniciales

Angular

Angular, a menudo también llamado Angular 2, es el sucesor de AngularJS. Este framework de JavaScript está orientado principalmente al desarrollo de aplicaciones web de una sola página, aunque Google ha realizado cambios muy importantes en la segunda versión. La mayor diferencia es, en este sentido, que ya no se utiliza JavaScript para programar, sino TypeScript. Dado que el lenguaje de scripts de Microsoft se basa en JavaScript y es compatible con él, no se dan restricciones directas en el desarrollo de JS. Asimismo, Angular se adapta de tal manera que el desarrollo de aplicaciones en diversas plataformas (escritorio, móvil, tablet) no supone ningún problema.

Ventajas	Inconvenientes
Más posibilidades gracias a TypeScript	Migración de AngularJS a Angular complicada
Desarrollo cross-plattform	Dificultades mucho mayores que en el caso de su predecesor

Ember.js

Ember.js también es un framework del lado del cliente con el que se pueden crear aplicaciones web de una sola página y aplicaciones de escritorio. Uno de sus rasgos distintivos con respecto a AngularJS es que los creadores de Ember.js han incluido a la comunidad de una manera más intensiva en el proceso de desarrollo del framework y que los cambios importantes realizados en el framework se discuten en dicha comunidad antes de ser ejecutados. Ember.js se comercializa como un framework con el que se pueden desarrollar aplicaciones web ambiciosas, por lo que está orientado, en primer lugar, a desarrolladores que ya tienen cierta experiencia en la creación de aplicaciones web.

Ventajas	Inconvenientes
Desarrollado por una comunidad open source	Muy complejo para principiantesinexpertos
También apto para aplicaciones de escritorio

Vue.js

Vue.js es, asimismo, un framework de JavaScript para el desarrollo de aplicaciones web de una sola página que recuerda a Angular y React. Los desarrolladores de este proyecto relativamente reciente han diseñado Vue.js de tal manera que iniciarse con él sea relativamente sencillo. Así es posible, por ejemplo, integrar plantillas en HTML. Asimismo, Vue.js es mucho más flexible que otros frameworks que normalmente prescriben de una forma un tanto rígida cómo utilizar el framework.

Ventajas	Inconvenientes
Rápido de aprenderSe aprende rápido a usarlo	Menos complejo
Soporta HTML y CSS	Comunidad relativamente pequeña
Posibilidades flexibles de desarrollo flexible

Meteor

Meteor, también conocido como MeteorRJ, es un framework JS especialmente apto para el desarrollo cross-platform que permite a los desarrolladores crear aplicaciones web y móviles con el mismo código. Otra ventaja es que los cambios en el código pueden enviarse directamente a los clientes gracias a un Distributed Data Protocol (DDP) propio. Para este framework gratuito, los proveedores de Meteor también ofrecen Galaxy, una plataforma de pago. Los desarrolladores pueden utilizar el servicio en la nube para publicar y alojar sus proyectos. El framework de JavaScript funciona con Node.js, por lo que para el desarrollo con Meteor resulta aconsejable tener conocimientos sobre el entorno de desarrollo. Con Meteor se pueden crear tanto backend como frontend de una pieza sin modificar el lenguaje, un concepto revolucionario que todavía no se ha impuesto.

Ventajas	Inconvenientes
Desarrollo cross-plattform	Solo funciona con MongoDB y no con otras bases de datos Datenbanktypen
Plataforma de hosting Galaxy	Es necesario modificar el backend
Se puede combinar con Angular, React y otros frameworks/bibliotecas	Problemas de rendimiento y con los buscadores

Frameworks JavaScript: resumen general

	AngularJS	Angular	Ember.js	Vue.js	Meteor
Año de publicación	2009	2016	2011	2014	2012
Mantenimiento	GooglevGoogle	Ember Core Team	Evan YouvMeteor Development Group
Licencia	MITvMITvMIT	MIT	MIT
Colaboradores en GitHub	1. 600 aprox.	570 aprox.	700 aprox.	700 aprox.	370 aprox.
Arquitectura	MVVM/MVW	MVC	MVVM	MVVM	MVVM
Particularidades	Se puede utilizar con aplicaciones móviles y de escritorio	Se puede utilizar con aplicaciones móviles y de escritorio	Se puede utilizar con aplicaciones de escritorio	Integración sencillaEs fácil aprender a usarlo	Combina backend y frontend

Herramientas de utilidad en diversos sectores

Los frameworks y las librerías JavaScript pueden simplificar el trabajo de manera considerable. Las herramientas anteriormente detalladas tan solo constituyen una pequeña parte de las que están disponibles en el mercado. Tanto GitHub como www.javascripting.com son idóneos para obtener librerías, plugins y frameworks JavaScript adicionales. En dichas páginas web se pueden encontrar extensiones de JavaScript apropiadas para cada objetivo.

¿Qué es jQuery?

JQuery es una librería de JavaScript (JavaScript es un lenguaje de programación muy usado en desarrollo web). Esta librería de código abierto, simplifica la tarea de programar en JavaScript y permite agregar interactividad a un sitio web sin tener conocimientos del lenguaje.

Basados en esta librería, existe una infinita cantidad de plugins (gratis y pagos) creados por desarrolladores de todo el mundo. Estos plugins resuelven situaciones concretas dentro del maquetado de un sitio, por ejemplo: un menú responsive, una galería de fotos, un carrousel de imágenes, un slide, un header que cambia de tamaño, el deslizamiento del scroll al hacer clic en un botón (anclas HTML), la transición entre páginas y miles de efectos más.

Cada plugin tiene un sitio web desde donde se pueden descargar sus archivos, con demos, instrucciones para su implementación, opciones de configuración e información de las licencias. En la web hay cientos de blogs que recopilan y analizan los plugins según sus funcionalidades, reuniendo en un sólo post los links a varios plugins de función similar, lo que facilita mucho la búsqueda.

Cómo se instala un plugin

Luego de realizar la búsqueda y comparar los diferentes demos, elegimos el plugin que queremos instalar en nuestro sitio y descargamos los archivos que lo componen. Dependiendo de la complejidad, algunos plugins están compuestos por un sólo archivo .js como por ejemplo el deslizamiento del scroll y otros se componen de un grupo de archivos relacionados entre sí: html, css, js e imágenes con es el caso de una galería de fotos.

Cada plugin tiene sus instrucciones de instalación propias, escritas por su autor, pero vamos enumerar los puntos que hay que tener en cuenta durante el proceso:

1) Librería JQuery

Todos los plugins de JQuery necesitan la librería de JQuery para funcionar. La librería es un archivo .js que se puede descargar desde el sitio oficial: https://jquery.com/ colocar en una carpeta js y luego vincular con una etiqueta <script>, por ejemplo:

<script src="js/jquery-3.2.1.min.js"></script>

Ese vínculo conviene colocarlo dentro del body y hacia el final del HTML para no demorar la carga de los contenidos. Si descargamos el archivo y lo vinculamos de esa manera, debemos subir el archivo a nuestro hosting.

Otra forma de vincular la librería es utilizando el servidor de Google. De esta manera no necesitamos descargarla ni subirla a nuestro servidor. En ese caso, el código es el mismo pero con ruta absoluta:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

La página donde Google ofrece los vínculos a diferentes recursos es la siguiente: https://developers.google.com/speed/libraries/#jquery

Los archivos .min son archivos que están optimizados (con el código comprimido) y no son editables, se usan en producción cuando se considera que no es necesario hacerle modificaciones. La ventaja es que son más livianos y por lo tanto cargan más rápido.

2) Archivo .js del plugin

Este es el archivo principal del plugin y se obtiene descargando del sitio. Habitualmente el nombre del archivo coincide con el nombre del plugin, por ejemplo:

<script src="js/responsiveslides.min.js"></script>

Hay que tener en cuenta que si copiamos este código de las instrucciones de instalación tenemos que chequear las rutas de los archivos, especialmente el nombre de las carpetas.

3) Estructura HTML

En algunos casos las instrucciones del plugin sugieren una estructura determinada en HTML, por ejemplo que una galería de fotos esté resuelta con listas o con divs o que un elemento sea identificado con class o con ID. Si en el momento de instalar el plugin ya tenemos escrito nuestro HTML, es conveniente adaptarlo a la estructura que sugiere el plugin para asegurarnos de que funcione y no tener que modificar otros elementos como reglas CSS.

4) Función

La función es un bloque de código JavaScript que contiene instrucciones que necesita el plugin para ejecutarse. Se escribe dentro del body entre las etiquetas <script></script>. Puede ir inmediatamente debajo de la estructura HTML del plugin o antes de que cierre la etiqueta body. Si es posible es mejor colocarla hacia el final del documento para que la descarga de la página sea más rápida.

<script>
$(document).ready(function() {

$("#owl").owlCarousel({
autoPlay: 3000,
items : 3,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});

});
</script>

5) Reglas CSS

La mayoría de los plugins tienen sus propias reglas CSS. Si son pocas líneas conviene incorporarlas a nuestra hoja de estilos, pero si son muchas, entonces mejor guardar el archivo .css descargado en nuestra carpeta css y colocar el vínculo desde el head. El vínculo a la hoja de estilos normalmente está indicado en las instrucciones del plugin, pero es necesario chequear la ruta para que coincida con la ubicación que le dimos en nuestro proyecto.

6) Imágenes

Algunos plugins incorporan imágenes de íconos que son llamados desde el código CSS. En este caso, y si el código es extenso, es conveniente mantener la relación de la ubicación entre el CSS y las imágenes para no romper las rutas. Es más seguro que la carpeta imágenes del plugin quede junto con los CSS que moverla a nuestra carpeta imágenes.

En realción a las rutas y en algunos casos si el plugin tiene mucha cantidad de archivos (todos relacionados entre sí) conviene mantener la carpeta intacta y colocarla por ejemplo dentro de nuestra carpeta js aunque dentro de ella haya archicos css o imágenes. Además, en el caso de querer remover el plugin de nuestra página, sería mucho más simple encontrar los archivos.

NOTA: no necesariamente todos los plugins tienen todos estos elementos, algunos más simples no requieren imágenes, otros tampoco tienen CSS.

¿Qué es AJAX?

AJAX es el acrónimo de Asynchronous Javascript and XML, es decir: Javascript y XML Asincrono. Este acrónimo fue utilizado por primera vez por Jesse James Garret en 2005, en su publicación Ajax: a New Approach to Web Applications si bien los componentes en que se basan y los recursos técnicos de que hace uso ya existían desde muchos años antes.

Normalmente, AJAX se define como una técnica para el desarrollo de páginas (sitios) web que implementan aplicaciones interactivas. No obstante, analicemos un poco cada una de las palabras que la forman:

• Javascript es un lenguaje de programación conocido por ser interpretado por los navegadores de páginas web.
• XML es un lenguaje de descripción de datos pensado fundamentalmente para el intercambio de datos entre aplicaciones, más que entre personas.
• Asíncrono: en el contexto de las comunicaciones (y la visualización de una página web no deja de ser una acto de comunicación entre un servidor y un cliente) significa que el emisor emite un mensaje y continúa son su trabajo, dado que no sabe (ni necesita saberlo) cuándo le llegará el mensaje al receptor.

Es decir, que podemos refinar un poco nuestra definición indicando que AJAX es una técnica que permite, mediante programas escritos en Javascript, que un servidor y un navegador intercambien información, posiblemente en XML, de forma asíncrona.

Como veremos en el tema 4, la información intercambiada entre cliente y servidor puede hacerse en múltiples formatos: texto, HTML, JSON y, por supuesto, XML. Además (como veremos en el tema 3, la comunicación puede ser también síncrona, de modo que el cliente espere a que le llegue la información del servidor. En todo caso, los programas que realizamos para lograr este tipo de conexiones se hacen con el lenguaje Javascript.

¿Para qué sirve AJAX?

En esencia, AJAX permite que una página web que ya ha sido cargada solicite nueva información al servidor. Dicho así, no supondría en realidad ningún invento novedoso. Una página web que contiene un enlace permite que se solicite al servidor nueva información cada vez que se pincha dicho enlace. Una página web que contiene un formulario envía información al servidor y recibe de él nueva información, normalmente la respuesta ante los datos que se han enviado. En ambos casos hay una conexión entre el cliente y el servidor.

¿Cuál es la diferencia cuando usamos AJAX? La diferencia es que con AJAX no es necesario recargar toda la página web, como ocurre cuando pinchamos en un enlace o cuando pulsamos el botón submit de un formulario. Con AJAX es posible realizar una conexión a un servidor desde dentro de una página web usando un programa Javascript. Dicho servidor enviará una respuesta; esta respuesta se almacenará en una variable del programa Javascript y, una vez almacenada en la variable, podremos hacer con ella lo que deseemos.

Compración de Modelos de Aplicación Web clásico y basado en Ajax (imagen original de Adaptive Path)
Por ejemplo, podemos pedirle al servidor que nos indique qué hora tiene y mostrar dicha hora en el cliente, en una capa dedicada sólo para visualizar este dato. De esta forma, el usuario podría ver la hora correcta que hay en el servidor (posiblemente sincronizada por NTP) y esta sería la misma para todos los usuarios conectados a dicho servidor, sin tener en cuenta la hora que tengan en su ordenador (posiblemente errónea o susceptible de ser modificada por el usuario). Si actualizamos la hora cada minuto, sin usar AJAX, tendremos que recargar toda la página cada 60 segundos. Sin embargo, con AJAX, simplemente actualizaremos la capa que hemos dedicado a imprimir la hora sin necesidad de alterar el resto de la página.

¿Qué es JSON?

JavaScript Object Notation (JSON) es un formato basado en texto estándar para representar datos estructurados en la sintaxis de objetos de JavaScript. Es comúnmente utilizado para transmitir datos en aplicaciones web (por ejemplo: enviar algunos datos desde el servidor al cliente, así estos datos pueden ser mostrados en páginas web, o vice versa). Se enfrentará a menudo con él, así que este artículo le entrega todo lo que necesita saber para trabajar con JSON utilizando JavaScript, incluyendo el análisis JSON para acceder a los datos en su interior, y cómo crear JSON.

¿Qué es realmente JSON?

JSON es un formato de datos basado en texto que sigue la sintaxis de objeto de JavaScript, popularizado por Douglas Crockford. Aunque es muy parecido a la sintaxis de objeto literal de JavaScript, puede ser utilizado independientemente de JavaScript, y muchos ambientes de programación poseen la capacidad de leer (analizar; parse) y generar JSON.

Los JSON son cadenas - útiles cuando se quiere transmitir datos a través de una red. Debe ser convertido a un objeto nativo de JavaScript cuando se requiera acceder a sus datos. Ésto no es un problema, dado que JavaScript posee un objeto global JSON que tiene los métodos disponibles para convertir entre ellos.

Nota: Convertir una cadena a un objeto nativo se denomina parsing, mientras que convertir un objeto nativo a una cadena para que pueda ser transferido a través de la red se denomina stringification.

Un objeto JSON puede ser almacenado en su propio archivo, que es básicamente sólo un archivo de texto con una extension .json, y una MIME type de application/json.

Estructura del JSON

Como se describió previamente, un JSON es una cadena cuyo formato recuerda al de los objetos literales JavaScript. Es posible incluir los mismos tipos de datos básicos dentro de un JSON que en un objeto estándar de JavaScript - cadenas, números, arreglos, booleanos, y otros literales de objeto. Esto permite construir una jerarquía de datos, como ésta:

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

Si se carga este objeto en un programa de JavaScript, traducido (parsed) en una variable llamada superHeroes por ejemplo, se podría acceder a los datos que contiene utilizando la misma notación de punto/corchete que se revisó en el artículo JavaScript object basics. Por ejemplo:

superHeroes.homeTown
superHeroes['active']

Para acceder a los datos que se encuentran más abajo en la jerarquía, simplemente se debe concatenar los nombres de las propiedades y los índices de arreglo requeridos. Por ejemplo, para acceder al tercer superpoder del segundo héroe registrado en la lista de miembros, se debería hacer esto: 

superHeroes['members'][1]['powers'][2]

1. Primero el nombre de la variable — superHeroes.
2. Dentro de esta variable para acceder a la propiedad members utilizamos ["members"].
3. members contiene un arreglo poblado por objetos. Para acceder al segundo objeto dentro de este arreglo se utiliza [1].
4. Dentro de este objeto, para acceder a la propiedad powers utilizamos ["powers"].
5. Dentro de la propiedad powers existe un arreglo que contiene los superpoderes del héroe seleccionado. Para acceder al tercer superpoder se utiliza [2].

Nota: El JSON previamente visto se encuentra disponible dentro de una variable en el ejemplo JSONTest.html (vea el código fuente). Intente cargarlo y luego acceder a los datos contenidos en la variable por medio de la consola JavaScript de su navegador.

Arreglos como JSON

Anteriormente se mencionó que el texto JSON básicamente se parece a un objeto JavaScript, y esto es en gran parte cierto. La razón de esto es que un arreglo es también un JSON válido, por ejemplo:

[
  {
    "name": "Molecule Man",
    "age": 29,
    "secretIdentity": "Dan Jukes",
    "powers": [
      "Radiation resistance",
      "Turning tiny",
      "Radiation blast"
    ]
  },
  {
    "name": "Madame Uppercut",
    "age": 39,
    "secretIdentity": "Jane Wilson",
    "powers": [
      "Million tonne punch",
      "Damage resistance",
      "Superhuman reflexes"
    ]
  }
]

Éste es un JSON perfectamente válido. Para acceder a esta version traducida se debe comenzar con un índice de arreglo, por ejemplo[0]["powers"][0].