Usa módulos del lado cliente con Browserify


Browserify te permite implementar módulos en el lado del cliente muy familiar a lo que hace Node.js. Puedes exportar módulos o requerir de ellos en diversos archivos. Ademas nos permite utilizar módulos del core de Node.js y demás módulos que se encuentra en NPM.

Instalación

Para empezar tenemos que instalar Browserify de manera global:

Código :

npm install -g browserify

Como un pequeño ejemplo, generaremos un archivo suma.js con el siguiente código:

Código :

var suma = function(a,b){  
  return a + b
}
module.exports = suma

Despues crearemos un archivo main.js, que contendrá lo siguiente:

Código :

var suma = require('./suma.js');
console.log(suma(2,3));

En nuestra consola, nos dirigimos a la carpeta de el proyecto en la cual tenemos nuestros archivos y escribiremos lo siguiente

Código :

 browserify main.js > bundle.js

Este comando creara un archivo bundle.js incluyendo el contenido de suma.js y main.js listo para usarse.

Lo que tenemos que hacer es agregar bundel.js a nuestro archivo index.html

Código :

<html>
<head>
<title></title>
<script charset="utf-8" src="bundle.js"></script>
</head>
<body>
</body>
</html>

Abrimos la consola de nuestro navegador y veremos el resultado de la operación.

Agregando como dependencias: Jquery, Underscore y Backbone

Si queremos agregar alguna dependencia como Jquery, Underscore, o Backbone, lo que tenemos que hacer es ir a nuestra terminal e instarlos usando NPM:

Código :

npm install jquery backbone underscore --save

Esto nos deberá de generar una carpeta node_modules donde se encontraran las librerías que bajamos, si queremos agregarlas en el archivo

Código :

main.js

haremos lo siguiente

Código :

var $ = require('jquery');
var _ = require("underscore")
var Backbone = require('backbone');
Backbone.$ = $;

Lo que hace browserify es buscar los módulos en la carpeta de node_modules igual que lo hace Node.js.

Ahora ya tenemos jquery, underscore y backbone en nuestro archivo, solo que tenemos un inconveniente, de esta forma solo están disponibles en nuestro archivomain.js y si quisiéramos utilizarlos en nuestro archivo suma.js o en cualquier otro archivo tendríamos que escribir siempre las mismas 4 lineas para poder hacer uso de ello :shock: , para resolverlo podemos hacer lo siguiente:

Código :

window.$ = require('jquery');
window._ = require("underscore")
window.Backbone = require('backbone');
Backbone.$ = $;

Ahora tenemos accesos a ellas de manera global y si queremos hacer uso de ellas en algun otro archivo solo tendremos que escribir $, _ o BacKbone

Para probarlo haremos un pequeño ejemplo consumiendo un API, creamos un archivo PaisesController.js con el siguiente código:

Código :

module.exports  = Backbone.Collection.extend({
  url: 'http://restcountries.eu/rest/v1/all'
  });

También crearemos un archivo para las vistas que se llamara PaisesView.js con el siguiente código:

Código :

  module.exports = Backbone.View.extend({
    tagName:'p',
    initialize:function() {
      this.template = _.template($("#paisTemplate").html());
      },
      
      render: function() {
        var data = this.model,
        html = this.template(data);
        this.$el.html(html);
      }
      });
      

Y nuestro archivo main.js lucirá así:

Código :

      window.$ = require('jquery');
      window._ = require("underscore")
      window.Backbone = require('backbone');
      window.bluebird = require("bluebird");
      Backbone.$ = $;
      
      var PaisesController = require("./PaisesController.js");
      var PaisesView = require("./PaisesView.js");
      var paises = new PaisesController();
      
      
      paises.fetch()
      .then(function(data){
        data.forEach(function(pais){
          var view = new PaisesView({model:pais})
          view.render();
          view.$el.appendTo("#paises");
          });
          });
          

Como podrán observar, se utiliza la librería bluebird para implementar promesas, pera un no la tenemos en nuestros módulos, para eso haremos lo siguiente en nuestra consola:

Código :

npm install bluebird --save

Ahora modifiquemos nnuestro archivo {b]index.html{/b]

Código :

<html>
            <head>
            <meta charset="UTF-8">
            <title></title>
            </head>
            <body>
            <div id="paises">
            
            </div>
            <script charset="utf-8" src="bundle.js"></script>
            <script type="text/template" id="paisTemplate">
            Pais:<%=name%>, Capital:<%=capital%>
            </script>
            </body>
            </html>

Esto nos presentara una lista de países con su capital.

Ahora para que nuestro archivo bundle.js este listo, tendremos que poner en nuestra consola el comando de browserify:

Código :

browserify main.js > bundle.js
            

Usando Grunt para automatizar Browserify

Cada vez que hagamos un cambio en nuestros archivos tendremos que correr este archivo manualmente :? .Pero no se preocupen, podemos resolverlo utilizando grunt, para eso tendremos que tener instalado grun y ademas instalar: grunt-contrib-watch y grunt-browserify:

Código :

npm install -g grunt-cli

Código :

npm install grunt-contrib-watch --save-dev
            npm install grunt-browserify --save-dev

Y nuestro archivo Gruntfile.js se vera así:

Código :

module.exports = function (grunt) {
              grunt.initConfig({
                watch:{
                  scripts:{
                    files:['./main.js'],
                    tasks: ['browserify'],
                  }
                  },
                  browserify:{
                    client: {
                      src: ['./main.js'],
                      dest: './bundle.js',
                    }
                  }
                  });
                  
                  grunt.loadNpmTasks('grunt-contrib-watch');
                  grunt.loadNpmTasks('grunt-browserify');
                  
                  grunt.registerTask('default',['watch']);
                  }

Ahora solo tendremos que correr en nuestra terminal:

Código :

grunt -v

Y listo, grunt hará el trabajo por nosotros cada vez que hagamos un cambio . :cool:

Bien ahora ya tenemos una aplicación funcionando usando browserify ,jquery , underscore backbone y bluebird y ademas un archivo de grunt corriendo nuestra tarea, espero les sea de ayuda :D

Si quieres consultar el código, este es el repositorio: Github del Ejemplo

Enviar comentario

via Cristalab http://ift.tt/1AJfo5I

Advertisements

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: