CategoríaFRONTEND

Modificando Eventos con Vuejs

En algunos casos tenemos comportamientos en nuestra aplicaciones de eventos que se propagan de un hijo a un padre o queriamos dejar de escuchar,  nuestro querido jquery nos brindaba .off  para dejar de escuchar un evento  o event.stopPropagation() para evitar propagarlo.

Podemos realizar lo mismo en vuejs de una forma más limpia e integrada vue, en este ejemplo el evento click de contenedor player se propaga al padre.


Vuejs  nos brinda una forma elegante de evitar la propagación usando evento.stop , evitar el envio de un formulario con event.prevent  o que solo se ejecute una vez event.once.

He modificado el ejemplo anterior, haciendo uso de .once para solo permitir hacer click una vez en el team,  .prevent para evitar  el submit del form y .stop para que no propague el evento click al padre.

Como han visto es una forma muy elegante, simple de modificar el comportamiento de los eventos, si deseas saber mas sobre gestionar eventos en Vuejs
https://vuejs.org/v2/guide/events.html 

Hola Vue-Cli

Cuando queremos desarrollar una aplicación con Vue con toda la potencia de ES6, ademas detener un entorno de desarrollo listo, con de diferentes templates o configuraciones predefinidas dependiendo del nivel de complejidad de nuestra aplicación, entonces tenemos que mirar vue-cli.

Vue CLI

Vue  CLI nos brinda templates con es6, webserver, hot reload, bundle, sass, testing y mas. Depende de nuestro proyecto,  podemos elegir entre los diferentes templates:

  • simple 
  • webpack simple 
  • webpack
  • browserify
  • browserify simple.

Instalando Vue CLI

Para instalar vue-cli tenemos que tener nodejs instalado, e igual que cualquier otro paquete de nodejs usamos el siguiente comando para tenerlo disponible de forma global.

npm install -g vue-cli

Al finalizar instalación, podemos ver los templates que vue-cli disponibles con el comando vue list.

vue list muestra todo los templates disponibles.

En este demo utilizare webpack-simple, que me brinda webpack + vue-loader preconfigurado.

Para crear el proyecto escribimos el comando vue init webpack-simple holavue, este nos pedirá descripción del proyecto, el autor y si queremos usar Sass.

Ahora solo tenemos que entrar al directorio creado, ejecutar npm install, al finalizar npm run dev este iniciara webpack transpilando el código, detectando los cambios y el servidor web con la siguiente página de inicio.

npm run dev

 

Vue Project Template

Un vue proyect consta de un grupo de archivos y directorios:

.babelrc: define la configuración de babel para transpilar el código de es6 a es5.

.gitignore: específica a git que ignore los directorios y archivos innecesarios.

index.html: Página de inicio que hace referencia a una main.js que es la instancia principal de vue. package.json para los paquetes de nodejs.

webpack.config.js  Configura los loaders, webpack, compilación, minificación y varios temas mas.

main.js: Es punto de entrada y contiene una instancia de vue escrita en es6, sin un template y utilizando render, para sobrescribir la propiedad template, pasandole el componente App.vue.

import Vue from 'vue'
import App from './App.vue'

new Vue(
{
el: '#app',
 render: h => h(App)
})

Root Component y Single File Components .Vue

App.vue Es el componente root, esta formado de <template>, <script> y <style>. Este sera el component principal y de donde colgarán los demás componentes que crearemos.

Los archivos .vue o Single File Components nos permiten definir el template, nuestro código javascript y estilo css en un solo archivo, todo esto gracias a webpack y  vue-loader.

Una App.vue se compone de un template el cual representará los elementos que queremos en el DOM y  script donde definimos nuestro componente de Vue y  style escribimos los estilos del componente.

<template>
</template>
<script>
export default {
}
</script>
<style>
<style>

Ya con nuestra estructura por defecto creada con vue-cli podemos empezar a crear mas componentes, registrarlos y consumirlos desde nuestro RootComponent,  por ejemplo podemos crear un directorio components y dentro crear un archivo player.vue.

En template definimos una variable {{playmode}} que expondremos en data, (retornando en una función) y  el método changeMode() que cambiará el modo del juego.

<template>
<div>
  <h2>Lebron James is {{playmode}}</h2>
  <button @click="changeMode">Play!</button>
</div>
</template>
<script>
  export default {
      data: function(){
          return {
              playmode: 'with the ball'
          }
      },
      methods:{
          changeMode(){
              this.playmode = 'shooting';
          }
      }
  }
</script>
<style>
</style>

Usando el componente

Para utilizar nuestro componente, podemos registrarlo globalmente en Main.js, primero importamos con una alias el componente player y registramos o Vue.component especificando el selector o tag y el y la variable o el objeto que referencia el componente.

import Vue from 'vue'
import App from './App.vue'
import Player from './components/player.vue'
Vue.component('my-player',Player)
new Vue({
el: '#app',
render: h => h(App)
})

Ahora podemos llamar el tag <player></player> desde nuestro App.vue 

Registrando Multiple components

Pero si quisiéramos registrar varios componentes, suponiendo que tenemos un componente header, footer y team, podemos usar la propiedad components de nuestro root elements e importarlos:

<script>
  import TopArea  from './components/top-area.vue';
  import FooterArea from './components/footer-area.vue';
  import Team from './components/team.vue';
  import Player from './components/player.vue';
  export default {
      components: {
          'top-area': TopArea,
          'footer-area': FooterArea,
          'team': Team,
          'player': Player
      },
      data: function(){
          return {
              title: 'root component'
          }
      },
}
</script>

Scope Style

Una de las cosa que más me ha gustado de .vue es tener scope de el css, por defecto cualquier estilo que agregamos al style en cada componente se crea a nivel “global” por tanto afecta a todos los componentes ejemplo.

Todos los componentes que he creado tienen una clase .container si le pusiera un tamaño o color pues aplicaría y afectaría a todos, como puedo controlar eso ?

Agregando scoped a los estilos del componente, esto permite que el estilo solo se aplique al componente actual.

<style scoped>
   h2{
       color: red;
   }
   .container{
       border:1px solid;
       background: #cacaca;
   }
</style>

Deploy to Production

Vue  nos permite realizar un build listo para optimizar nuestro código y publicarlo en producción,  con el comando “npm run build” , esto crea la carpeta dist donde tendremos nuestro código minificado y optimizado listo.

npm run build

Hasta aquí una pequeña introducción a vue-cli , si deseas saber más puedes pasarte por la página oficial.

https://github.com/vuejs/vue-cli
https://github.com/vuejs-templates

Como crear componentes con Vue ?

Vue nos permite crear componentes para hacer nuestra aplicación más desacoplada y reutilizable, en este post quiero explicar un poco sobre como crear componentes en Vue, cómo compartir data entre ellos y cómo registrarlo de forma local o global.

Porque usar componentes ?

Si tenemos una funcionalidad que quisiéramos reutilizar en otras aplicaciones o instancias, Vue nos permite crear componentes que pueden ser utilizados en la misma aplicación o en diversas, de una forma fácil y rápida.

Mi ejemplo se basa en la funcionalidad contador, que la sacaremos de estar incrustada en la aplicación a ser un componente.

Creando un Vue.Component ?

Un Vue.Component es igual que una  instancia de Vue pero con más opciones, para crear un componente utilizamos Vue.component y como primer argumento especificamos el tag del componente, ejemplo ‘my-counter’, y como segundo argumento un json object muy similar a una instancia de Vue.

Para este ejemplo voy a copiar la funcionalidad del counter de nuestra app1, pero con un cambio, como sabemos, component extiende instancia de Vue, la propiedad data del component va a interferir con nuestra instancia de data en Vue,  por eso convertimos el data del componente a una función evitar conflictos.

Ahora con agregar el nombre del tag en nuestra aplicación debe visualizar el contador, y podemos en las dos  instancias de Vue utilizar el componente <my-counter></my-counter>

Compartiendo data entre componentes

Cada instancia de components tienen el control sobre su scope de data, pero si quisiéramos compartir data entre componentes ?

Para este caso entonces podemos crear un objeto data y asignarlo a nuestro componente, Vue detectara el cambio en cada instancia de el componente y reflejara el cambio aunque sean dos aplicaciones diferentes.

Registrando componentes

Vuejs nos permite registrar los componentes de dos formas locales y globales,  en el ejemplo anterior el componente lo registramos de forma global,  eso quiere decir que cualquier app que llame el tag puede utilizar el componente, solo llamando el nombre .

Pero si quisiera llamar el componente con otro tag en mi aplicación o que mi componente solo se muestre en las apps que lo tenga registrado, entonces necesitamos un registrarlo de forma local.

Para registrar un componente de forma local,  tenemos que guardar nuestro componente en una variable y no utilizar Vue.component,  sino lo definimos como un objeto json y en nuestra aplicación utilizamos el atributo ‘components’ que es donde especificamos el tag con el cual queremos usar el componente en nuestra aplicación y como valor la variable donde hemos almacenado el componente, he aquí un ejemplo.

Pasando información a los componentes

Cada instancia de un componente en Vuejs tiene su propio ámbito aislado. Esto significa que no puede  hacer referencia directa a los datos de los padres, pero podemos  transmitir información a los componentes secundarios utilizando Props.

Un prop es un atributo personalizado para pasar información de la app al componente o de un componente padre a componente hijo, para lograr esto debemos declarar implícitamente las props que espera recibir en nuestro componente.

En este ejemplo tengo una app my-gallery que mostrara un listado de imágenes de “personas famosas de react”, para mostrar la imagen creare un componente gal-image el cual tiene una prop que se llama imageUrl, la cual permitirá que la app my-gallery le envíe la imagen a visualizar.

Utilizaré directiva v-for para iterar en el array de imágenes, como los atributos son sensibles a mayúscula y minúscula pasar el parámetro tenemos que usar kebab-case, en este caso mi propiedad se llama imageUrl pero la asigno como image-url.

Para enviar la url de la imagen a el componente no puedo usar  {{miobjeto.mipropiead}} , sino tenemos que hacer un bind a la propiedad usando v-bind o :image-url.

He aqui un ejemplo.

See the Pen vue example with components by Dany Paredes (@danywalls) on CodePen.

Happy Vue!

Conociendo el Vue Object

Es muy fácil iniciar con Vuejs pero nos hemos preguntado si es posible comunicar apps de vue entre si ? o puedo controlar el ciclo de vida de la aplicación o puedo acceder a los elementos que no fueron definidos en Vue

Vuejs es una especie de middleware entre el las propiedades expuestas en data, métodos, watch o computed y nos permite tener acceso a ellas, podemos comunicar diferentes instancias.

Ciclo de Vida

La vida de una app de Vue inicia con new Vue() , luego se lanzan una serie de eventos como beforeCreate(), created(), beforeMount, updated, beforeUpdated, beforeDestroy y Destroyed.

Cada uno de ellos nos permiten realizar o acceder a ciertas áreas de la aplicación, comentare algunos que he usado.

beforeCreate:
Este inicia la creación de la instancia y registra los eventos.

created:
Compila el template o el elemento del DOM relacionado en “el”.

beforeMount:
Vue remplaza ‘el’ con el template compilado.

mount:
En este momento es donde el DOM es mostrado en el navegador.

destroyed
Este es lanzado cuando destruimos nuestra instancia de Vue usando this.$destroy();

Comunicándo instancias.

Vue nos sirve de proxy entre las propiedades y metodos definidos en la instancia, por tanto podemos acceder a las propiedades de otra instancia o ejecutar métodos.  Esto es realmente útil cuando tenemos aplicaciones que deben compartir información entre ellos.

Accediendo a el DOM

Cuando queremos acceder a elementos del DOM y sus propiedades para esto utilizamos ref para que Vue guarde una referencia de todos los elementos que nos interesa acceder.

Iniciando la instancia

En algunos casos tenemos que esperar que el DOM sea generado por nuestra aplicación , porque el área se carga a partir de cierta acción.

Components

Vue al igual que React, Angular o Aurelia; tiene la capacidad de permitir crear componentes para ser utilizado en diferentes instancias, los componentes nos permite registrar un tag  que tenga comportamiento y este pueda ser replicado en diferentes instancias de Vue.

Happy Vue

Directivas de Vuejs

Vue nos ofrece un listado de directivas para facilitar el desarrollo de SPA o componentes, las cuales nos permiten realizar binding, controlar visualización, escuchar eventos y varios aspectos. En este post trato de mencionar alguna de ellas.

v-bind

En el post anterior para mostrar una propiedad en data usamos {{message}} , pero si queremos realizar el bind en un atributo de un elemento sería diferente no podemos usar:

<input type="button" value="{{message}}/>

Para realizar el binding sobre un atributo de un elemento html, entonces usamos la directiva v-bind: especificando el atributo y asignando la propiedad, en el ejemplo asigno la propiedad mensaje al atributo value.

<div id="app">
<h1>{{message}}</h1>
<input type="button" v-bind:value="message"/>
</div>

v-on:

Esta directiva nos permite escuchar un evento de un elemento, por ejemplo detectar el mouseout sobre un h2  y llamar el método getTime.

<div id="app">
<h1>{{message}}</h1>
<h2 v-on:mouseout="getTime">{{currentTime}}</h2>
<input type="button" v-bind:value="message"/>
</div>

new Vue({
el:"#app",
data:{
message: "Vue Mola",
currentTime: new Date().toISOString().slice(11, -1)
},
methods:{
getTime:function(){
this.currentTime = new Date().toISOString().slice(11, -1); 
}
}
})

Además podemos agregando el parámetro  $event podemos obtener información del evento  o podemos detener eventos como el click o preventdefault para evitar efecto burbuja o detectar teclas v-on:keyup.enter.space para saber cuando presionan la tecla enter o space.

https://vuejs.org/v2/guide/events.html

v-once

Nos permite asignar que una propiedad sea evaluada solo una vez, esto es útil si queremos mantener el valor inicial y solo evaluara una vez esta propiedad.

<h2 v-once>{{currentTime}}</h2>
<h2 v-on:mouseout="getTime($event)">{{currentTime}}</h2>

v-html

Esta directiva nos permite inyectar html o elementos dinámicos en el DOM, como input, href o buttons.

<div id="app">
<div v-html="myinput"></div>
</div>
new Vue({
el:"#app",
data:{
myinput: "<input type='text'>"
}
})

v-model:

Nos permite el “two-way binding” a una propiedad pero este solo funciona en algunos elementos como input, checkbox etc.

<input type="text" v-model="message"/>
<p>{{message}}</p>

v-if

Podemos condicionar la visualización de un elemento, pero con un aspecto especial este, remueve el elemento de DOM tiene su importancia si estamos creando una spa que crea mucho html y queremos eliminar carga del DOM.

<div v-if="visible">
 <h1>Estoy visible</h1>
</div>

v-else

Esta directiva trabaja junto con v-if para realizar lo contrario a v-if.

<div v-if="hasUser">
<h1>Hay usuarios</h1>
</div>
<div v-else>
<h2>No tenemos usuarios conectados </h2>
</div>

v-show

Nos permite ocultar un elemento en el DOM, pero manteniendo su existencia en pocas palabras un display:none en toda regla.

<div v-show="isactive">
<h2>I'm active</h2>
</div>

v-for

Este nos permite iterar en arrays de elementos y acceder a sus objetos almacenados.

<div class="player" v-for="player in players">
<p>{{player}}<p>
</div>

Como ves Vuejs nos da un aire a angular 1x, si has trabajado con el, en otro post a prueba algunas de estas directivas.

Happy Vue!

Conociendo las propiedades de Vuejs

En el post anterior fue un ejemplo muy básico de Vuejs, donde mostraba como vincular un template con una instancia de Vuejs y mostrar una propiedad  pero aun quedan varias propiedades para conocer de Vuejs, este era nuestro template.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="col-xs-12">
        <div class="row">
        <h2>{{message}}<h2>
         </div>
    </div>
</div>
</html>

Propiedades de Vue

Cuando realizamos una instancia de Vue este recibe como parámetro un json object, el cual posee varias propiedades como son:

  • el
  • data
  • methods
  • computed
  • watch

el:

Permite especificar que elemento del DOM nuestra instancia de Vue controlara.

new Vue({
   el:'#app'
});

data:

Permite almacenar las propiedades que queremos exponer a  en nuestro template y para acceder solo tenemos que usar {{}} interpolando ejemplo:

new Vue({
   el:'#app',
   data:{
     message:'Hola Vue'
   }
});

methods:

Permite exponer métodos a nuestro template que nos sirven para comportamiento o retornar datos.

new Vue({
   el:'#app',
   data:{
     message:'Hola Vue',
     
   },
    methods:{
     getName: function(){
       return 'EdgarJS!';
     },
     getMessage: function(){
       return this.message;
     }
   }
});

Modificamos nuestro template y llamando el método con () obtenemos el mensaje “EdgarJS”

 <div class="row">
        <h2>{{message}}<h2>
         <h3> {{ getName() }}</h3>
 </div>

computed

Permite definir funciones que son consumidas en la vista como propiedades y que son actualizadas cuando una propiedad de las que depende es modificada.

En el siguiente ejemplo si tengo una propiedad bankAccounts y es modificada por un método ejemplo addAccount entonces cada vez que sea modificada bankAccount la propiedad TotalAccounts es actualizada.

computed: {
 TotalAccounts: function(){
      return  this.bankAcconts.length;
   }
 }

watch

Permite definir un listado de propiedades que queremos  reaccionar a sus cambios de forma asíncrona.

 watch: {
     bankAcconts: function(value){
        alert("new account added")
    }
 }

Cuando usar watch o computed ?

Vue nos permite verificar cambios de una propiedad mediante computed o watch.  La diferencia entre cada uno, es que computed se ejecuta de forma sincronía y watch de forma asíncrona.

En mi caso uso computed para cálculos o resultados que esperan una respuesta asíncrona  ejemplo el calculo de un dato o verificar otras propiedades y watch para la llamadas asíncronas como una llamada Ajax de traer datos.

Aquí puedes ver un ejemplo completdo donde puedes ver las propiedades en acción.

Happy Vue 😀

Hola Vuejs

Hace unos meses el comente a un amigo @oriolpuigbuil sobre Vuejs, pero no le di continuidad, ya que pensé que seria un framework que terminaría muriendo antes de que llegar el invierno, pero las cosas no han sido así con Vuejs.

Vuejs ha crecido en el mercado y se ha convertido en una competencia para React, no soy un experto en React, ni he podido trabajar en grandes proyectos con el, la última vez que hice algo hacé ya casi año y medio.

Porque Vuejs ?

Yo buscaba un framework fácil de usar que la curva de aprendizaje sea corta y me permita tener buenos resultados, React y Angular2 lo había probado pero muy por muy encima.

Angular2 requiere que mejore mis conocimientos en Typescript, React a pesar de haber realizado algunas pruebas, quería mirar otra opción.

Una de las cosas que mas me gusto de Vue es lo simple, crear una app solo basta con  crear un index.html importar la librería y ya podemos tener todo el potencial de Vuejs.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="col-xs-12">
        <div class="row">
        </div>
    </div>
</div>
</html>

Ahora agregamos una área de script donde tendremos el código de  Vue y creare una instancia de Vue object,  este tendrá la responsabilidad de controlar una área de nuestro html o el template de nuestra aplicación.

Para relacionar la instancia de Vue con nuestro template necesitamos pasar como parámetro un objeto json, en la propiedad “el” la cual permite especificarle a la instancia de Vue que área de nuestro html tendrá el control.

new Vue({
   el:'#app'
})

Para exponer propiedades a nuestro template usamos la propiedad data que recibe un json object también donde puedo definir la propiedad message.

new Vue({
   el:'#app',
   data: {
    message: 'Hello Vue'
   }
})

Para mostrar nuestra propiedad expuesta por data utilizamos {{  }} y el nombre de la propiedad.

<div class="row">
            {{message}}
 </div>

Aqui puedes ver todo el código funcionando.

Vue contiene varias propiedades ademas el y data, para agregar funcionalidades a nuestro componente  como computed, methods, watch que podemos explicar en mas detalle en otro post.

Happy Vue!

Porque Sass ?

Una tarea pendiente en mi forma de trabajar era usar un pre-procesador de css, por pereza o simplemente por costumbre era escribir mis css y luego cargar con el peso de que los cambios y el código repetido,  aunque existen mas opciones a Sass como Less, Stylus, Css-Crush, Css-On-Diet y PostCSS,  yo he optado por Sass.

Porque Sass?

Sass  es estable y probado en la industria ademas de ser uno de los primeros (2007),  podemos decir que es el lider ya que la mayoría de las empresas o productos desarrollados cuenta con una versión en Sass.

Sass extiende nuestro actual css y nos permite poder incluirse variables , funciones (mixins) , herencias o extender clases entre muchas cosas mas.

Lo que queda claro es que luego que trabajas con un pre-procesador en mi caso Sass , “Sass es par los developers, css es para el browser”.

Instalando Sass

Sass es multiplataforma Mac, Windows o Linux , se apoya en Ruby gems para instalarlo, si usas windows te recomiendo que instale  http://rubyinstaller.org/, en Mac por defecto trae instalado Ruby asi que solo nos tocara instalar Sass desde la terminal usando las gems.

gem install sass

Otra opción es usar http://scout-app.io/ la cual es una aplicación que nos permite compilar nuestro Sass o usar la web Sassmeister.

Usando Sass

Yo para muchas pruebas rapidas me apoyo de Sassmeister, porque me permite tener resultados de forma rapida podemos visualizar en el menu marcar la opcion el html, css y sass ademas compila nuestro sass en tiempo real y nos permite almacenarlos en github.

screen-shot-2016-11-27-at-00-15-40

Variables

Sass nos permite crear variables que representan valores que podemos usarlo a lo largo de nuestro “scss” , podemos crear dos variables con el simbolo de $nombredevariable  e igualarlas a un valor.

Ejemplo:  podemos definir $default-bg: #2992fb o $box-bg , y asignarla a clases .player y menu y tendra el color basado a la variable $default-bg en caso que tengamos que cambiar el color solo tiene que ser en un lugar

sass variables

Mixings

Los mixings son funciones que nos permite reutilizarlas, pasarle parametros o asignar valores por defecto, este nos permite generar codigo.

para definir un mixin escribo @mixin nombre($var1,$var2) { } y para utilizar el mixin en nuestra clase utilizo @include y puedo pasar los parametros y en caso que tenga valores por defecto utilizaria esto o los que se pasen a la funcion.

Esto lo que hara es replicar el resultado de nuestro mixing en nuestra clase pero con los valores que le he suministrado y nos ahorra tiempo a la hora de escribir codigo.

Selectores Anidados

Con Sass podemos usar & para anidar una seleccion de elementos, ejemplo queremos seleccionar un div y las h1 que esten dentro de el,  pero mucho cuidado con abusar del mismo, les recomiendo estas lecturas.

http://thesassway.com/beginner/the-inception-rule
https://www.sitepoint.com/beware-selector-nesting-sass/

Extend

@extend en Sass nos permite heredar de otras clases , es muy util cuando estamos creando componentes y queremos extender la funcionalidad.

extend class sass

Colores

Sass nos provee de ciertas herramientas para facilitar el manejo de los colores, tenemos funciones como darken o lighten en los parametros recibe el color y el % que queremos, si tenemos un $box-color: red podemos asignarlo un 10% mas oscuro o mas claro.

Importando Archivos

Sass nos permite tener nuestros ficheros separados, ejemplo podemos tener _color.scss, _mixings.scss , estos archivos empiezan con _ para que sass no los compile y importarlos en nuestro achivos main.scss.

Ejemplo: main.scss

@import "_colors.scss";
@import "_mixings.scss"

Si deseas saber mas sobre importar archivos u organizar tu estructura de sass te recomiendo:

http://thesassway.com/beginner/how-to-structure-a-sass-project

Play with this gist on SassMeister.

Happy Sass!

 

Cual E2E SPA Frameworks 2016 usar ?

Nota: Este artículo viene de una opinión personal, actualmente existen un mar de frameworks Javascript, en este solo menciono los que yo o amigos han usado durante estos años y los usaría para sus proyectos considerando los requerimientos de E2E SPA frameworks .

Mucho se habla de los 1,000 de frameworks  Javascript que existen en el mercado, que cada día hay uno nuevo, que mueren más frameworks Javascript en un año que cervezas en un verano, pero todo eso es falso.

Cuando buscamos un framework que nos permita desarrollar de forma desacopladas, mantenible, y que use la últimas versiones de ES6 o ESNext entonces  ya el listado se acorta,  sabemos que la demanda de desarrollo de SPA va en aumento en lo últimos años y las necesidades , el tamaño de las mismas  por igual.

Hacer una SPA en el 2016 es muy diferente comparado con los requisitos del  año 2010 o 2012 y los frameworks que se desarrollaron durante esos años buscaban responder a una necesidad presente, aquí un listado de los frameworks que a día de hoy miramos cuando vamos a desarrollar una SPA.

  • Angular 1x   2010

Les recomiendo que miren el artículo de @carlosazaustre  donde explica como usar ES6 con angular 1.5 y trabajar orientado a componentes
https://carlosazaustre.es/blog/desarrollo-por-componentes-con-angular-1-5-con-es6-es2015/

  • Backbone    2010 
  • Ember 1x     2011
  • Durandal     2010

Estos frameworks nos permiten trabajar a día de hoy  para desarrollar SPA pero sus bases son ES5 y  las necesidades de día de hoy o la complejidad de los proyectos actuales no son satisfechas por completo por estos frameworks.

Es la razón por la cual  los equipos de estos proyectos sacan una versión 2 y a su vez nacen nuevos frameworks como alternativas.

  • Angular 2
  • Emberjs 2.0
  • Vue.js
  • Aurelia
  • Reactjs

Estos frameworks nos si permiten desarrollar de forma desacoplada, mantenible, además de poder utilizar las últimas versiones de ES6 o ES7,  de este listado podemos decir que Angular2, Emberjs y Aurelia  son los que llamo “E2E Spa Framework” ósea un ‘Todo Terreno’.

Ya que nos permiten trabajar sin agregar más librerías para la mayoría de las tareas, brindándonos un set de features que a día de hoy necesitamos para desarrollar una SPA.

Estos frameworks comparten lo siguiente:

  • Arquitectura modular
  • Inyección de dependencias
  • Gestión de módulos
  • Two-way Databinding
  • Patrón MVVM
  • Routing
  • Templating
  • Custom Elements
  • Custom Attributes
  • Task Quees
  • Pub Sub Messaging
  • Logging
  • etc..

Por tal razón a la hora de hacer una SPA a día de hoy si busco un E2E SPA Framework mis opciones a nivel personal para usar serian:

Ember

Ember esta desde agosto del 2015 con una versión estable y  un listado inmenso de clientes grandes que han optado por apostar en Ember http://emberjs.com/ember-users/ confirman la estabilidad y del producto.

Una excelente documentación le apoya y una comunidad inmensa ademas de ser un producto que tiene bastante estabilidad sin cambios drásticos.

https://guides.emberjs.com/v2.7.0/

Aurelia

Aurelia es creada por el mismo creador de Durandal unos de los frameworks mas estables y funcionales de Javascript. Aurelia  ya en version 1.0  recien sacada del horno 28 julio de 2016 cuenta con una excelente documentación y lo mas importante soporte  la palabra de más peso que pueda haber ya uno de los problemas mas grande al trabajar con un framework es solo contar con la documentacion , el repositorio de github y preguntar stackoverflow  pero saber que Aurealia cuenta con un grupo de consultores propios especializados disponible para el soporte es un plus increíble aparte de la gran comunidad.

https://github.com/aurelia/framework

Angular2 (hay que esperar ..) ?

Angular 2 aunque esta en RC sigue en beta 4 y no es un producto ya finalizado, pero es un framework con mucho potencial y un gran apoyo “google”, los que han usado angular 1x saben que muchas cosas cambiaron, pero saben que a día de hoy Angular es uno de los frameworks Javascript mas usados para desarrollo SPA o el más usado.

Angular 2 contiene los mismos features que los frameworks anteriores y nos ofrece un entorno de trabajo increíble.

Para saber el estado actual de framework les recomiendo https://splintercode.github.io/is-angular-2-ready/ en la cual dan el estado actual del proyecto.

Angular 2.0 is in Release Candidate Stage. Below are the current active milestones on Github. If you are starting a new project Angular 2 is a great option.

El único detalle es que yo me pensaría bien antes de hacer un proyecto con un producto en beta.

En Resumen si yo tuviese que apostar en serio para un proyecto a día de hoy mi opción numero uno seria Ember v2, ya que Aurelia esta recién salido del horno y Angular2 que solo le falta la crema para que este listo.

Happy SPA!

Imagen Diseñado por Freepik

Hola Aurelia Cli

Ya tenemos Aurelia 1.0! a su vez  Aurelia CLI con el cual podemos crear nuestras SPA basadas en Aurelia 1.0 de forma rápida y tenerla lista para ponerla en producción en pocos minutos.

Requisitos

Antes de instalar Aurelia CLI tenemos que tener instalado NodeJS  y Git

Instalando Aurelia CLI

Desde nuestra terminal mediante  npm instalamos Aurelia CLI.

npm install aurelia-cli -g

Ahora usando el comando au de aurelia-cli con el parámetro new podemos generar un proyecto nuevo.

au new
                      _ _          ____ _     ___
  __ _ _   _ _ __ ___| (_) __ _   / ___| |   |_ _|
 / _` | | | | '__/ _  | |/ _` | | |   | |    | |
| (_| | |_| | | |  __/ | | (_| | | |___| |___ | |
 __,_|__,_|_|  ___|_|_|__,_|  ____|_____|___|


Please enter a name for your new project below.

[aurelia-app]> edgarapp

Luego nos preguntara si queremos usar Typescript o ESNext o especificar nuestro propio transpiler, preprocessors y nos dará un resumen de la configuración seleccionada.

Would you like to use the default setup or customize your choices?

1. Default ESNext (Default)
   A basic web-oriented setup with Babel for modern JavaScript
   development.
2. Default TypeScript
   A basic web-oriented setup with TypeScript for modern JavaScript
   development.
3. Custom
   Select transpilers, CSS pre-processors and more.

[Default ESNext]>
Project Configuration

    Name: edgarapp
    Platform: Web
    Transpiler: Babel
    CSS Processor: None
    Unit Test Runner: Karma
    Editor: Visual Studio Code


Would you like to create this project?

1. Yes (Default)

Luego nos pedirá si deseamos que instale las dependencias.

Project structure created and configured.

Would you like to install the project dependencies?

1. Yes (Default)
   Installs all server, client and tooling dependencies needed to
   build the project.
2. No
   Completes the new project wizard without installing
   dependencies.

[Yes]> 

Installing project dependencies.

Al finalizar nos mostrara el mensaje que la app fue creada.

Congratulations! Your Project "edgarapp" Has Been Created!

Si queremos ver nuestra app corriendo podemos usar.

au run 
au run --watch //para monitorear los cambios, mediante browsersyn

Ahora podemos acceder a http://locahost:9000 y ver como nuestra app funciona y podemos realizar cambios en el código y ver como se refleja de forma automática.

change

Entornos y Compilacion

Aurelia CLI nos permite correr versiones de nuestro código en diferentes entornos y por ende configuraciones por defecto nos genera 3 dev, stage y prod.Solo tenemos que especificar –env para correr nuestra aplicación basada a un entorno.

Ejemplo:

danyair:edgarapp dany$ au run --env prod

Esto inicia nuestra app en modo producción, generando el bundle de la app , vendors y desactivando el debug y testing.

Al igual que poder correr nuestra app basada a los entornos también podemos generar un build  de la aplicación.

au build --env prod.

Puedes descargar el código de ejemplo de https://github.com/danywalls/hola-aurelia-cli

Mas información: https://github.com/aurelia/cli

Happy Aurelia!

© 2017 Danywalls

Tema por Anders NorénSubir ↑