Chapter 8 - Creating a Beautiful User Experience

Las APIs y las herramientas de las lineas de comandos son muy utiles para los desarrolladores y sistemas para comunicarse.Pero si quieres que los no-desarrolladores utilicen estos servicios necesitaras un entorno mas sencillo y mas agradable.

Vamos a aprender a hacer una front-end web para las APIs desarrolladas en los capitulos anteriores. Para esto vamos a instalar y configurar webpack,un bundle muy popular para hacer interfaces web accesibles.Para esto vamos a ver los principios del desarrollo front-end: -Node.js Core En los capitulos anteriores hemos utilizado modulos con dependencias de estado y de desarrollo.En este vamos a ver las dependencias de pares para relacionar los frameworks con los plugins. -Patterns El framework del modelo plus plugin es muy popular en el desarrollo front-end de Javascript.Tambien con Javascript moderno vamos a poder pasar codigo de un lenguaje a otro.Vamos a utilizar TypeScript para ello. -JavaScriptism En el capitulo anterior hemos utilizado funciones asincronas utilizando bloques de tipo try-catch para manejar los resultados de las promesas.En este vamos a utilizar los metodos promesa nativas del navegador tipo fetch para hacer peticiones asincronas al servidor.Vamos a trabajar con otras APIs del DOM para manejar la interaccion con el usuario y la navegacion. -Supporting Code Desarrollar una interfaz de usuario desde cero puede ser complicado, para ello nos centraremos en herramientas de soporte.Utilizamos la framework de Twitter Bootstrap para estilos por defecto.Para renderizar contenido HTML utilizaremos una libreria llamada Handlebars.

Cada framework de front-end tiene sus beneficios,y sus funcionalidades estan en un estado continuo de cambio.

Vamos a implementar una interfaz web de usuario sobre las APIs desarrolladas en Node.js.Luego para la parte de las frameworks utilizaremos tecnicas comunes a distintas librerias y frameworks.

Getting started with webpack

La aplicacion anteriormente creada B4 se basa solo de APIs tipo RESTful. Vamos a configurar un builder de front-end llamado webpack,cogiendo todo el codigo de front-end y las dependencias y crea un bundle con varios "deliverables".

Si por ejemplo tenemos un fichero JS con dos librerias de dependencia,en vez de mandar los tres ficheros al browser del cliente,webpack se encarga de combinar todos los trabajos en un solo fichero JS.

Creamos el directorio b4-app.Este va a ser nuestro directorio npm. Para ello haremos : "npm init" dentro del directorio.

Tambien se pueden crear paginas/aplicaciones web sin hacer un bundling pero hay una variedad de motivos por el cual se deberia hacer.(transpiling-que es pasar el codigo fuente a otro lenguage similar, y una reduccion de la latencia.)

En un entorno de produccion,vamos a realizar las actividades de bundling antes de hacer el deploy,pero durante el desarrollo es mas conveniente hacer bundling a demanda.

Para esto,utilizaremos un plugin de webpack llamado webpack dev server. Normalmente cuando un modulo depende de otro,dentro de package.json se anadira como un submodulo pero de las dependencias de peer los modulos de dependencias estan al mismo nivel que los de que dependen.

Instalamos el modulo:

npm install --save-exact --save-dev webpack-dev-server@2.9.1

Tambien nos podrian saltar errores de que hay algunas peer-dependencies que faltan. Vamos a anadir un script para iniciar el webpack-dev-server.

    "start": "webpack-dev-server"

Y iniciamos webpack dev server con npm:

npm start

pero nos salta el error de que no se encuentra el modulo webpack. La razon de las dependencias de peer es soportar un modelo plugin. Un plugin anade funcionalidad a un framework.

Por lo tanto webpack-dev-server es un plugin a un proyecto webpack. Sin explicitamente definir las dependencias de peer en npm,vamos a tener a webpack-dev-server depender de un framework.

Utilizar plugins para las librerias es un patron comun en el desarrollo front-end de las interfaces.

Instalamos el modulo webpack para las dependencias de peer.

npm install --save-dev --save-exact webpack@3.6.0

Para utilizar webpack necesitamos configurarlo en: webpack.config.js.

Creamos el webpack.config.js:

'use strict';
module.exports = {
    entry: './entry.js',
};

Con esto exportamos una configuracion minima, que solo contiene una propiedad entry. Con esto fijamos el fichero root,donde todas las dependencias se resuelven.

Al hacer:

npm start

,nos sale lo siguiente:

Por defecto, webpack-dev-server escucha en el puerto 8080. Al visitar en la web el : localhost:8081(en nuestro caso nos asigna por defecto el puerto 8081) no sale esto:

Actualmente, nuestro webpack.config.js contiene una sola entrada sin output. Lo siguiente que veremos es como utilizar un plugin generador de HTML para generar una aplicacion de Hello World.

Generating Your First webpack Bundle

Tenemos la estructura basica del proyecto pero no hace nada actualmente.Para esto haremos que el proyecto genere el un fichero index.html y producir un bundler de JS que lo acompane.

Primero,para general el HTML vamos a instalar el modulo html-webpack-plugin:

npm install --save-dev --save-exact html-webpack-plugin@2.30.1

Anadimos lo siguiente al webpack.config.js:

'use strict';

const path = require('path');
const distDir = path.resolve(__dirname,'dist');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './entry.js',

    output: {
        filename: 'bundle.js',
        path: distDir,
    },
    devServer: {
        contentBase: distDir,
        port: 60800,
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Better Book Bundle Builder',
        }),
    ],
};

lo primero que hacemos es importar el modulo path para sacar la direccion que va a tener nuestra distribucion,retornando de esta manera una ruta absoluta. Tambien utilizamos el modulo de htmlwebpackplugin para la porcion de plugins de nuestro webpack config.Tambien se le anade un objeto de salida output para especificar el directorio y el nombre que va a tener el fichero de salida JS. El modulo de webpack-dev-server no escribe directamente en el directorio de salida sino sirve contenido como el archivo bundle.js directamente de la memoria a la peticion. Si ejecutamos webpack si se escribiria directamente el contenido al directorio output.

El objeto devServer contiene datos de configuracion necesarios para el webpack-dev-server,utilizando el mismo directorio y sobreescribiendo el puerto tcp. Por ultimo anadimos un objeto plugin al build creando una nueva instancia de este modulo pasandole un atributo titulo.Esto se mostrara en la etiqueta title de la pagina html.

Para lograr que se vea algo en la pagina html anadimos lo siguiente al fichero de entrada:

'use strict';
document.body.innerHTML = `
    <h1>B4 - Book Bundler</h1>
    <p>${new Date()}</p>
    `;

Con esto insertamos una cabecera con el nombre B4 - Book Bundler y un parrafo con la hora actual.

Corremos de nuevo el webpack dev server y accedemos al localhost:60800.

Sprucing Up Your UI with Bootstrap

Bootstrap es una framework para desarrollar interfaces web.Te da un cierto diseno inicial.

Para esto necesitamos algunos plugins de dependencia.Necesitamos el style-loader y el css-loader.Para cargar otros recursos estaticos,imagenes,fuentes,etc,necesitamos el url-loader y el file-loader.

Instalamos todos estos modulos:

npm install --save-dev --save-exact \
    style-loader@0.19.0 \
    css-loader@0.28.7 \
    url-loader@0.6.2 \
    file-loader@1.1.5

Para que webpack pueda utilizar estos plugins los anadimos al config explicando que ficheros son manejados por estos plugins.

Anadimos al webpack.config.js:

module: {
    rules: [{
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
    },{
      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
      loader: 'url-loader?limit=100000',
    }],
  },

Primero le decimos a webpack que los ficheros .css van a ser manejados utilizando el css-loader y el style-loader.El primero lee los ficheros css y tambien resuelve cualquier referencia hacia @import y las llamadas a url().Pero despues de resolverlo css-loader no hace nada y aqui interviene el style-loader que mete una etiqueta