Guía básica de Webpack 2

Los empaquetadores, comúnmente llamados en términos anglosajones, bundlers, son ya una herramienta imprescindible en cualquier entorno web moderno que se precie. Con la reciente ganancia de popularidad de Javascript, gracias a Nodejs, estas herramientas han proliferado en forma de utilidad de consola. Nodejs permite crear con gran agilidad este tipo de herramientas, e incluso escribir los propios módulos.
Grunt y Gulp, fueron los que sentaron las bases de lo que son actualmente herramientas como webpack. Tenían por función la ejecución tareas de cualquier tipo, con plugins para ampliar la funcionalidad. Actualmente, están proliferando diferentes soluciones al problema mas específico de agrupar recursos, como puede ser rollup o jspm entre otros. Todos ellos están escritos en Nodejs.

Nodejs, de ahora en adelante, node, ha supuesto un cambio en la forma de desarrollo de la web por lo que el lado del servidor corresponde. De la propia de definición de su página oficial: usa un node ha supuesto un cambio en la forma de desarrollo de la web por lo que el lado del servidor corresponde. De la propia de definición de su página oficial: usa un  modelo de operaciones Entrada/Salida sin bloqueo y orientado a eventos, que lo hace liviano y eficiente y programación funcional. Cuenta con una comunidad muy activa que desarrolla todo tipo de funcionalidades en forma de paquetes que reside en npm. La equivalencia podría ser packagist, en este caso, respecto de paquetes de php.  La proliferación de páginas SPA, con el uso intensivo de red o RTA combinado ha propiciado la amplia expansión y evolución. Además de poder unificar la lógica en  cliente y servidor, y usar el mismo lenguaje de programación para ambos.

¿Qué es Webpack?

Webpack como se define en web oficial: is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a Webpack como se define en web oficial: is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a  dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles – often only one – to be loaded  by the browser. O lo que es lo mismo, se encarga de generar gráficos de dependencias y empaquetarlos para que la aplicación sea capaz de funcionar correctamente.

La herramienta, nos permite ampliar su funcionalidad a través de una amplia lista de loaders que nos permiten aplicar transformaciones a los archivos que le pasemos.  Entre sus categorías, cuenta con funcionalidades básicas(xml, script, raw), empaquetadores(minificar, modernizr, web-components), específicos(imágenes, svg, base64, etc),  transpilers(coffescript, es6, typescript), plantillas(handlebars, jade, mustache), estilos(less, sass, stylus), traducciones(po, po2mo) o auxiliares(documentación, tests). También cuenta con una sección de plugins, mas limitada, que nos permite extender la funcionalidad mas allá de una simple transformación, pudiendo ejecutar lógica adicional, como es el caso de HotModuleReplacementPlugin, el cual nos permite regenerar los assets generados en función de cambios en los archivos originales.

Beneficios

  • Es una herramienta que nos permite automatizar tareas repetitivas.
  • Modularizar las diferentes secciones de nuestro proyecto.
  • Posibilidad de elección en función del tipo de asset(minificación de imágenes, etc).
  • Tiene una comunidad muy activa, y cuenta con un gran apoyo por parte de empresas como egghead.io, rollbar, etc.
  • Aunque en su primera versión era uno de los principales inconvenientes, en su segunda versión cuenta con una documentación de calidad.
  • Optimiza la velocidad de carga de la web.

Desventajas

  • En proyectos en los que la gestión de los assets no represente un problema, o el proyecto sea pequeño.
  • La separación entre las secciones sea difusa o difícilmente modularizable.
  • La curva de aprendizaje es elevada, necesita mucha configuración y es compleja al principio.

Objetivos del artículo

  • Usar código en ES2015 y transcribirlo a javascript legible para el navegador.
  • Loaders de css.
  • Extraer el css en archivos css.
  • Servidor de webpack Hot-Reloading.

Instalación de la herramienta

Para instalar webpack, debemos tener primero node instalado en el equipo. Puedes encontrar la información sobre cómo instalarlo en el enlace de la página oficial. Ahora que ya tenemos lo tenemos instalado, podemos continuar con la instalación de Webpack desde el terminal. A través del siguiente comando, le indicamos a npm, el gestor de paquetes de node, que queremos instalar en la carpeta actual, y guardarlo como dependencia del entorno de desarrollo:

Con la ejecución de este comando, ya tenemos el entorno preparado para proceder con Webpack.

Utilización

Javascript con ES2015

En primer lugar, vamos a instalar un transpiler para ES2015, aprovechando la implementación de babel, un loader capaz de llevar a cabo tal tarea con la ayuda de webpack.

Esto nos instalará en la carpeta donde lo ejecutemos babel-loader. Ahora creamos un archivo javascript con un ejemplo sencillo de un fragmento de código escrito en ES2015:

Este código javascript, ahora mismo no es funcional en el navegador, porque no entiende las nuevas características que hemos utilizado. Para que webpack empaquete nuestro código y lo reescriba en un estándar compatible con los navegadores, vamos a usar una configuración específica para que antes ejecute el loader de babel con el siguiente archivo de configuración:

En el siguiente enlace, está explicada toda la configuración usada aquí, pero explicaremos brevemente cada apartado. Entry, es el archivo de entrada, output, son todas las opciones referentes a la salida de los recursos, en este caso, usamos el sistema umd, con el nombre bundle.js y lo escribiremos en el directorio /web/js/dist. Por último, le damos la configuración necesaria para que use el loader de babel y nos escriba javascript válido en el  navegador. Si abrimos el archivo(en función de la versión de webpack y de sus loaders puede cambiar el contenido), podemos ver como las primeras lineas,  son las que nos introduce la lógica de webpack. A partir de la línea 86, podemos ver nuestro código, con las porciones de ES2015 reescrito:

Ahora, ya tenemos todos los elementos necesarios para ejecutar webpack, para que genere la salida que estamos buscando, nuestro archivo app.js compilado, con el nombre de bundle.js:

El ejecutable, se encargará de buscar el archivo de configuración(que debe estar donde lo ejecutamos),e interpretarlo para realizar las tareas convenientes.

CSS en javascript

El siguiente paso será usar un loader para parsear el css. Webpack hace uso del concepto de Web Components. Es por ello que su fin es el de empaquetar todos los recursos necesarios para el correcto funcionamiento en un archivo javascript, para su posterior reutilización. Sin entrar en detalles del porque, en el siguiente enlace, se exponen algunos de los motivos por los cuales, existe el concepto de CSS en javascript.

Para poder usar el loader de css, necesitamos instalarlo de la siguiente forma, como hemos hecho anteriormente con el loader de babel:

Acto seguido, cambiamos la configuración de webpack, para que quede así:

Con esta nueva regla, y el nuevo archivo de entrada, le estamos diciendo a webpack que queremos que lea y parsee el css que contiene el archivo style.css. Ahora, si abres el  fuente generado, podrás ver como ha incluido mucha mas lógica encargada de hacer la integración entre el fuente generado y el proyecto, además de los estilos css que contenía el archivo que creamos anteriormente. Podemos seguir ampliando nuestro set de herramientas para ser integradas con webpack, con sass, compresores de imágenes y un largo etcétera. Te aconsejamos que mires la documentación de webpack, para tener una visión mas profunda de el ecosistema.

Extracción del css

Para finalizar, con la sección de loaders y plugins, vamos a explicar como se pueden extraer los archivos css. Puesto que ya hemos visto como incluir el css en el archivo final bundle.js, haremos uso de un plugin que nos permite extraerlo y exportarlo a un archivo css común. Esta vez, lo que haremos no es instalar un loader, como lo hicimos previamente, puesto que necesitamos algo más que transformar las líneas. Ahora vamos a necesitar lógica para evaluar que hacer con los estilos que le indicamos a webpack que cargue, instalando un plugin.  En primer lugar, instalaremos el plugin:

Cambiando la configuración, de la siguiente forma, ya podremos incluir el archivo como app.bundle.css, tras la ejecución de webpack, como habíamos hecho anteriormente. Ahora podrás ver como en la carpeta /dist, se ha generado un nuevo archivo de css.

Servidor Web de recursos

Como no podía ser menos, el uso de estas herramientas, se vuelve lento y pesado. Cuando estamos trabajando contínuamente en los mismo recursos, vas a tener que ejecutar en el terminal la herramienta debido a los cambios efectuados y la necesidad de volver a generar el compilado. Antes este problema, con webpack, podemos usar un pequeño servidor que viene integrado, el cual nos compilará los nuevos cambios a través de watchers.

Con el siguiente comando, arrancaremos el servidor local de assets de webpack, que podremos incluir en nuestro proyecto.

En la configuración, añadiremos las siguientes líneas. Por una parte, el path público al que acceda el navegador para solicitar el bundle.js, nombre descrito en el archivo de configuración. Por otra parte, añadiremos en el array de plugins el encargado de comunicar los cambios al navegador. Con la última opción, –hot, le estamos indicando a webpack que queremos que haga uso del hot reloading, el cual, nos refrescará la web automáticamente, cada vez que se lleve a cabo un cambio.

Por último, este pequeño fragmento de código a nuestro app.js para que acepte las conexiones entrantes de hot reloading:

Conclusiones

Webpack es una herramienta muy potente que nos permite empaquetar todo tipo de recursos ya sean estáticos o dinámicos de una forma eficiente a través de sus gráficos de  dependencias. Tener todos los recursos en un mismo archivo de javascript, permite disminuir los tiempos de carga de la web, evitando peticiones innecesarias. Es cierto que al tratarse de javascript, tendremos un retardo en la carga de toda la lógica, pero si gestionamos de forma óptima los recursos, podemos evitar que los tiempos sea superiores respecto a las múltiples peticiones que puede realizar una página hacia el servidor. Así mismo, nos permite regenerar todos los recursos a través de su funcionalidad nombrada anteriormente, para evitar el paso por la consola en tiempo de desarrollo. En este artículo se ha intentado dar una visión básica y funcional de como usar esta herramienta. Asimismo, si estás interesado en la web oficial de webpack, tienes una sección completa de guías.

Las diferencias entre Java y JavaScript ¿Son lo mismo?

java-y-javascript

 

Hay muchas personas que saben la diferencia que hay entre Java y JavaScript, pero muchos otros no lo tienen tan claro y suelen confundirlo diciendo que es lo mismo o que uno es un subelemento del otro. Eso es una idea equivocada, a pesar de que puedan tener algunas similitudes y sus nombres sean parecidos, por ello vamos a argumentar las claras diferencias que existen entre los dos, primero comentando brevemente a que se dedica cada uno.

 

Java:

Java es un lenguaje de programación con un propósito general, tanto para aplicaciones de los ordenadores como para aplicaciones web. Fue desarrollado por James Gosling por la empresa Sun Microsystems en 1991, con el objetivo inicial de crear receptores de televisión y dispositivos embebidos, pero acabó expandiéndose de forma más amplia para funcionar en todas partes.

La intención de Java ahora es que los programadores de aplicaciones escriban una vez su código y puedan utilizarlo en cualquier dispositivo. Implementándose en varios dispositivos y navegadores donde Java te permite jugar, cargar fotografías, chatear en línea, realizar visitas virtuales y utilizar servicios en las páginas web.

 

JavaScript:

JavaScript fue creado a mediados de los años ’90 por Brendan Eich de la empresa de Netscape con el objetivo de dotar de interactividad a las páginas web que visualizamos en nuestros navegadores. JavaScript es un lenguaje de programación específico que solo se implementa en las aplicaciones web.

 

• ¿Por qué sus nombres se parecen?:

Java y JavaScript pueden hacer pensar que son parecidos, quizás porque los dos son lenguajes de programación, aunque ya uno puede saber mucho de Java y no tener idea de programar en JavaScript, y a la inversa.

Sus nombres se parecen ya que en un principio JavaScript tenía el nombre de LiveScript, al ver que Java estaba teniendo mucha popularidad decidió cambiar su nombre por la influencia que este suponía, haciendo que sus nombres se pareciesen.

 

• Diferencias entre los dos lenguajes:

java-≠-javascript

1.- El control de Java lo tiene Oracle, empresa privada que hace con el lo que quiere. JavaScript lo lleva ECMAScript que es una organización sin ánimo de lucro.

2.- Java permite hacer de todo con un gran control ya que es un lenguaje potente y robusto, quizás algo pesado también. JavaScript no permite hacer todo lo que permiten otros lenguajes, es más ligero que Java y más ágil, siendo menos robusto.

3.- JavaScript tiene clausulas pero Java no las incorporo hasta la aparición de su versión 8.

4.- Java necesita un kit de desarrollo y máquina virtual para poder trabajar con el, en cambio JavaScript solo necesita un editor de texto donde escribir el código y un navegador para ver los resultados.

5.- Java tiene variables definidas que no se pueden cambiar, JavaScript puede ser cambiante, dándole flexibilidad.

6.- Java es más complejo con un lenguaje con más capacidades. JavaScript tiene menos capacidades y es más sencillo.

7.- Antes de que compruebes el contenido de tu programa en Java, es compilado para advertirte si hay algún error en la ejecución, en cambio JavaScript no sabes si hay un error hasta que no ejecutas el programa. Depurando Java en dos fases y JavaScript en una.

8.- Java es un lenguaje orientado a objetos puro, pero JavaScript está basado en prototipos.

Pueden existir más diferencias, pero esas son algunas de las principales que deberíamos conocer y no confundir un lenguaje con otro, porque aunque tengan algunas similitudes, hay que insistir en que no son iguales.

 

• En resumen…

JavaScript no es un elemento de Java, tampoco comparten nada en su programación, quizás la sintaxis que comparten con otros lenguajes de C. Java no es más difícil que JavaScript, este puede tener áreas más complejas. Tampoco puedes saber programar Java si sabes de JavaScript y al revés…

 

No sigáis confundiéndolos 😉

¿Tienes alguna incidencia?

Cuéntanos qué ocurre
y nos pondremos con ello lo antes posible.

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.
Sucríbete a
nuestra newsletter

para estar al día en el mundo online

¡Cuéntanos tus ideas!
+34 96 653 19 14
+info@acceseo.com
He leído y acepto la política de privacidad

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.