Comunidad de diseo web y desarrollo en internet

Usa módulos del lado cliente con Browserify


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

Instalacin



Para empezar tenemos que instalar Browserify de manera global:

Código :

npm install -g browserify

Como un pequeo ejemplo, generaremos un archivo suma.js con el siguiente cdigo:

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 operacin.

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 libreras 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 mdulos 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 estn disponibles en nuestro archivomain.js y si quisiramos utilizarlos en nuestro archivo suma.js o en cualquier otro archivo tendramos 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 pequeo ejemplo consumiendo un API, creamos un archivo PaisesController.js con el siguiente cdigo:

Código :

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


Tambin crearemos un archivo para las vistas que se llamara PaisesView.js con el siguiente cdigo:

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 podrn observar, se utiliza la librera bluebird para implementar promesas, pera un no la tenemos en nuestros mdulos, 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 pases 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 aplicacin 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 cdigo, este es el repositorio: Github del Ejemplo

Sabes SQL? No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y ms con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

Ests registrado en Cristalab y quieres
publicar tu URL y avatar?

No ests registrado an pero quieres hacerlo antes de publicar tu comentario?

Registrate