Contenido

Javascript MVC, optimizando la forma de desarrollar en Javascript

12 dic

+ 6

El patrón de desarrollo MVC llega al Javascript, permitiendonos hacer más claro nuestro código, modular nuestras aplicaciones, disponer de multiples vistas, facilitar la distribución de trabajo y lo más importante, facilitar el crecimiento de las aplicaciones.

Descripción del patrón MVC

A grandes rasgos, los patrones MVC son una forma de separar los datos de la aplicación consiguiendo que la interfaz del usuario (Vista y Controlador) quede completamente independiente de la lógica de negocio (Modelo).

mvc.JPG

Este patrón ha dado lugar a una serie de frameworks MVC que en lenguajes como Java, Ruby, PHP,..han contribuido a la elaboración de aplicaciones complejas en tiempo record. De ahi que este tipo de frameworks estén extendiendose por la red de una forma incluso alarmante, la comunidad Java ya hace tiempo que se queja de la gran cantidad de frameworks disponibles.

Adaptandoló a Javascript

Las aplicaciones web cada vez más, son más ricas en cuanto a funcionalidades. Delegar estas funcionalidades al cliente es la forma de conseguir que el grueso de la aplicación se vea distribuida entre los usuarios de la web, aligerando el servidor de peticiones y procedimientos que dependían del usuario, por este motivo la integración de este patrón al Javascript se empieza a hacer necesario. Principalmente por que en ciertas aplicaciones, las aplicaciones javascript crecen de tal forma que es imposible mantener y tambien por que tras la aparición de nuevos navegadores, nos estamos viendo obligados a tirar por el camino de condicionar la salidad nuestros scripts.

Javascript MVC, es la primera aproximación que veo (quizas ya haya habido alguna, no lo puedo saber a ciencia cierta). Y la verdad es que pese a que la curva de aprendizaje pueda parecer más pronunciada, conseguimos hacer que la línea de mantenimiento y de desarrollo de la aplicación parezca una montaña rusa. Eso si, la cantidad de ficheros se incrementa considerablemente debido a la separación comentada más arriba.

Veamos un ejemplo,

Modelo

Resource.model("Comment",{
  created_ago: function(){
    var now = new Date()
    var seconds = ( now - this.created_at) / 1000
    var min = parseInt(seconds/ 60)
    var hours   = parseInt(seconds/ (60*60))
    var days    = parseInt(seconds /(60*60*24))
    var mon  = parseInt(days / 30)
    var years   = parseInt(days / 365)

    if(seconds < 30) return 'seconds ago'
    if(minutes < 1)  return 'less than a minute ago'
    if(min < 60 )    return min.toString()+' miniutes ago'
    if(hours < 24  ) return hours.toString() + ' hours ago'
    if(days < 30)    return days.toString() + ' days ago'
    if(mon < 12)     return mon.toString() + ' months ago'
    return years.toString()+' years ago'
  },
  action_verb: function(){
    var verbs = ['said', 'announced', 'articulated',
                 'related','voiced','penned', 'noted',
                 'wrote','scrawled','declared']
    return verbs[parseInt(Math.random()*verbs.length)]
  }
) 

Controlador 

CommentController  = Class.create(JMVC.Controller, {
  prepare_list: function(params){
    Comment.find('all', {},
      this.continue_to({put_first_argument_in: 'comments'}));
  },
  list: function(params){
    this.comment = new Comment({email: '',
                                name: '',
                                website: ''})
  }
})

Vista

<h4>Comments</h4>
<% comments.each(function(comment){ %>
  <div class='bubble'>
    <blockquote>
      <%=comment.comment%>
    </blockquote>
    <cite>
      <span>
        <a href='<%=comment.website%>'>
          <%=comment.name%>
        </a>
      </span>
      <strong>
        <%=comment.action_verb()%>
      </strong>
      <%=comment.created_ago()%>
    </cite>
  </div>
<%})%>
<div id='commentit_new_comment'>
  <%= render({partial: 'create'}) %>
</div>

Más Info

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.