Vuejs una alternativa a React y Angular

Vuejs es uno de los frameworks Javascript relativamente nuevos que se esta convirtiendo en una alternativa a los enfoques de Angular2 y React. Combina dentro de sus características conceptos tanto de Angular como de React para construir un framework realmente limpio. Podemos echar un vistazo a google trends y ver cuanto esta creciendo  comparado con Angular y React.

 

vue js

La linea amarilla representa a Vuejs mientras que la azul a Angular y la roja a React . Podemos ver como aunque ha empezado muy tarde esta creciendo rapidamente.

Usando Vuejs

Vamos a crear un par de ejemplos con Vue. Para ello nos vamos a declarar una lista de personas con su nombre y configurar Vue.js para que la imprima por pantalla.

<html>
<head>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>
<body>
 <div id="app">
 <p v-for="persona in personas">
 {{ persona.nombre }}
 </p>
 </div>
</body>
<script type="text/javascript">

var app = new Vue({
 el: '#app',
 data:{

 personas: [
 { nombre: 'pedro' },
 { nombre: 'juan' },
 { nombre: 'ana' }
 ]
 }

})
</script>
</html>

En este ejemplo se usa la directiva v-for para imprimir una lista de párrafos.

vuejslista

Esta lista se carga a través del atributo data de la aplicación de Vue . Como se puede observar la sintaxis a nivel de directivas es similar a Angular. Vamos a modificar el código para añadir una etiqueta de texto y un evento que nos permitan crear nuevos valores en la lista.

<html>
<head>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>
<body>
 <div id="app">
 <p v-for="persona in personas">
 {{ persona.nombre }}
 </p>
 <input type="text" v-model="persona.nombre"/ />
 <input type="button" value="nuevo" v-on:click="nuevo" />
 </div>
</body>
<script type="text/javascript">

var app = new Vue({
 el: '#app',
 data:{

 personas: [
 { nombre: 'pedro' },
 { nombre: 'juan' },
 { nombre: 'ana' }
 ]
 ,
 persona: {nombre:""}
 }
 , methods: {

 nuevo: function (event) {
 this.personas.push(this.persona);
 this.persona="";

 }
 }

})
</script>
</html>

Cada vez que pulsamos al botón se añade un nuevo elemento:

vuelistaadd

Si por algo destaca Vuejs es  por su sencillez de cara al desarrollador. Algo que por ejemplo Angular 2 no ha tenido tanto en cuenta.  Por lo que he podido ver hasta ahora Vue mezcla conceptos de Angular y de React . Por ejemplo, genera un VirtualDOM al estilo de React e incluye su propio modelo de componentes. Es uno de los frameworks más interesantes en estos momentos.

Otros artículos relacionados: Sublime React y el uso de JSX ,RxJS y la programación reactiva. , Angular 2 y el futuro de las arquitecturas web

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

About Cecilio Álvarez Caules

Cecilio Álvarez Caules Sun Certified Enterprise Architech (J2EE/JEE).

14 Responses to Vuejs una alternativa a React y Angular

  1. David 5 Julio, 2017 at 10:00 #

    Hola esto de los trends de google son una lotería, yo prefiero ver esta pagina http://bestof.js.org/tags/framework/trending/last-3-months que se basa en las descargar de los repositorios de github.

    • Cecilio Álvarez Caules 5 Julio, 2017 at 10:26 #

      gracias por el aporte 🙂 , la hecho un vistazo

  2. David 13 Marzo, 2017 at 9:26 #

    Muy buen post, la verdad creo que vue.js tal y como están los tiempos merece una oportunidad se agradece mucho su sencillez y la sensación de tener el control absoluto de lo que haces.

    • Cecilio Álvarez Caules 13 Marzo, 2017 at 11:50 #

      me alegro que te sea útil 🙂

  3. Germán 16 Diciembre, 2016 at 22:13 #

    Estimado Cecilio, dando un vistazo a google trends, me dan tendencias distintas al gráfico publicado. Si bien crecio vuejs, está actualmente muy por debajo de angular y react, como resultado de mi análisis.
    Saludos!

    • Germán 16 Diciembre, 2016 at 22:16 #

      Te agrego el link https://www.google.com.ar/trends/explore?q=Angular,React,Vuejs

      • Cecilio Álvarez Caules 17 Diciembre, 2016 at 7:39 #

        gracias 🙂

      • Camiloserna 3 Abril, 2017 at 15:59 #

        Eso de google trends es super relativo, como todos los puso sin el js posterior, a excepción de vue, que lo puso como vuejs, si dejamos sólo vue, el panorama es totalmente distinto.

        https://trends.google.com.ar/trends/explore?q=Angular,React,Vue

        Vue los supera totalmente… si está raro eso, tampoco debería ser tanto.

        • Cecilio Álvarez Caules 4 Abril, 2017 at 7:26 #

          Ahi ya pones a competir palabras muy muy generales y claro es difícil aclararse 🙂

    • Cecilio Álvarez Caules 17 Diciembre, 2016 at 7:40 #

      que palabras has escrito exactamente ? es que a veces es dificil encajarlas del todo. Yo he puesto angularjs , reactjs y vuejs. Es que si pones por ejemplo solo Angular es muy genérico.

  4. Rodrigo 9 Diciembre, 2016 at 18:03 #

    El código de añadir nuevo elemento es el mismo de listar, creo que se te han entreverado al subir el artículo.
    Saludos

    • Cecilio Álvarez Caules 9 Diciembre, 2016 at 20:16 #

      creo que ahora está 🙂

  5. Juanmi 9 Diciembre, 2016 at 17:40 #

    O mi tablet no está mostrando bien la página o el código html de los 2 ejemplos es el mismo :s

    • Cecilio Álvarez Caules 9 Diciembre, 2016 at 20:03 #

      Muchas gracias 🙂 lo acabo de corregir a ver si ahora 😉

Deja un comentario