Contenido

¿Cuando usar un framework CSS?

7 ago

+ 8

Esta mañana he leido un artículo sobre los “Cuando usar un framework CSS“, y ya que no he escrito nada sobre el tema, aprovecho ahora :D

¿Que es un framework CSS?

Es una librería preparada para mejorar la estandarización de nuestras páginas de una forma fácil y cómoda. En ella solemos encontrar soluciones estandards y hacks necesarios para conseguir un diseño igual en los diferentes navegadores. Generalmente se componen de varios ficheros (.css) separados en partes de una página y que nos permite cargar únicamente lo que necesitemos.

¿Cuando usar un framework CSS?

Generalmente todos los frameworks, de todo tipo, se usan para estandarizar el código y por ello usarlo en alguno de estos escenarios es primordial:

  • Un gran equipo de trabajo.
  • Necesidad de llevar un control del código estandar
  • Quieres ahorrarte tener que hacer hacks en tu proyecto personal.

Aspectos positivos de usar un framework CSS

  • Soporte multi navegador.
  • Proyectos públicos con una gran comunidad detrás.
  • Gran porcentaje de código que nunca usarías.
  • Posibilidad de aprender el código que lo compone.

Aspectos negativos de usar un framework CSS

  • Gran porcentaje de código que nunca usarías (quizas nunca lo uses).
  • Curva de aprendizaje del Framework
  • Solucionar algún problema no es tan simple como con nuestro código.
  • Puede no ser semánticamente correcto.

Resumen

Al igual que pasa con los frameworks JS, el usarlo conseguimos hacer las cosas más rápidas y de una forma más eficiente, pero perdemos el contacto con el lenguaje. Al disponer de una capa que nos suaviza el impacto directo con el lenguaje tendemos a olvidar los conocimientos que ya disponíamos sobre él, y en un futuro podemos tener problemas si decidimos cambiar de framework.

Por otro lado, para desarrollos en equipo y en proyectos muy dinámicos es recomendable para tener un estandar que permita una fácil adaptación por parte de cualquier integrante del equipo.

DOMAssistant, otro framework para trabajar con Javascript

3 mar

+ 1

Si has probado algunos frameworks en Javascript y no te acaban de convencer, echalé un vistazo a DOMAssistant, cubrirá todas tus necesidades sin ocupar espacio con efectos visuales que nunca usarás. [Documentación][Descargar]

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