Página 2 de 8

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!

Como mejorar mi experiencia con Parallels ?

Uno de los puntos fuertes de Parallels es la integración, pero cuando esto te hacer perder el sentido de cada entorno es un poco complicado.

En estos días estoy usando Parallels con Windows 7 / 10 y aunque estoy muy contento con la experiencia hay puntos de configuración que considero que debo poner para poder tener cada cosa en su lugar.

Parallels por defecto comparte los discos, cloud folders (Google Drive y OneDrive)  y asigna tu directorio /home/tuuser en Mac como directorio por defecto del usuario en Windows.

Cual es el problema con esto, que cuando en mi caso uso Visual Studio los proyectos se crean en la Mac y no en el Windows  causando que si hago un backup de la pc de Paralles pierda lo que he trabajado, tanto en Mac y Windows aparecen varios directorios compartidos sumado a la vinculación de aplicaciones entre sistemas Mac/ Windows ejemplo tengo un .json y me lo ha vinculado con Visual Studio 2015, por tanto cuando quiero abrir un .json termina iniciando el Parallels y el Visual Studio o en casos peores que un .zip me lo quiera abrir con el 7zip que tengo en Windows.

A pesar de estas quejas estoy contento con Parallels y esta es mi configuración que he puesto para evitar estos comportamientos.

  1. Desconecte todo lo que se comparte  (la verdad no lo considero importante)

Desabilite compartir el perfil y los directorios de Cloud esto evita que aparezca el directorio de Google Drive y OneDrive en ambos y viceversa.

3- Elimine que compartan aplicaciones y notificaciones entre Mac y Windows.

Happy Parallels.

Error actualizando Windows sobre Parallels error 0x80070643

Yo tengo en Parallels Windows 7, pero al intentar actualizarlo me daba el error 0x80070643, basado a la explicación de Microsoft me recomendaba agregar los dominios de Windows Update al archivo host, pero el error continuaba,  termine desactivando firewalls de Mac y Windows pero sin solución alguna.

Lo que se me había olvidado es que Avast en la Mac, tiene Web Shield no deja que las peticiones a Windows Update.

Así que si vas a actualizar Windows desactivar el WebShield de Avast durante la actualización.

 

 

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!

 

Como mover ventanas con el teclado en OSX ?

Poder mover las ventanas con el teclado es algo que me gusta mucho, para mi Windows 7 tiene  unos de los mejores controles de ventana con el teclado que existen y lo extrañaba en OSX.

Pero gracias a la aplicación Spectacle, puedo hacerlo en OSX, Spectacle me permite por defecto mover las ventanas en OSX con la misma configuración de Windows 7 o la puedo cambiar a mi antojo, ademas es muy es fácil de configurar, les dejo el enlace.

https://www.spectacleapp.com/

Designed by Freepik

 

Como acceder a IIS-Express remoto?

Cuando desarrollamos para asp.net y queremos acceder a nuestro servidor IIS-Express desde el otro ordenador o móvil.

IIS-Express Proxy es un paquete de Nodejs que nos permite acceder a nuestro IIS-Express desde cualquier dispositivo en la misma red.

Para utilizarlo solo basta con iniciar nuestra aplicacion web en Visual Studio modo debug y la aplicación iniciara el IIS Express en algún puerto ejemplo: http://localhost:9597, ahora para poder acceder desde nuestro móvil solo tenemos que instalar el paquete de node IIS Express.

1- Instalar iisexpress-proxy de forma global.

npm install iisexpress-proxy -g

2- Especificarle a iisexpress-proxy donde que puerto tiene que redireccionar.

iisexpress-proxy 9597 to 3000

Ahora desde nuestro dispositivo que este en la misma red, podemos acceder a nuestro IIS-Express, puedes leer mas informacion  en al pagina de github.

https://github.com/icflorescu/iisexpress-proxy

 

Negocios de vector diseñado por Dooder – Freepik.com

Como configurar NPM y VSCode detrás de un Proxy?

En estos días estaba trabajando en un lugar donde “el proxy” no era mi mejor amigo, al intentar de instalar mis paquetes mediante npm  o instalar las extensiones de VSCode era imposible por eso necesite configurar el proxy en ambos.

NPM> Desde la terminal:

npm config set proxy http://yourproxyiporaddress:port
npm config set https-proxy http://yourproxyiporaddress:port

Luego para instalar mis extensiones de VSCode también se requiere el “proxy”:

Preferences > User Settings

"http.proxy": "http://yourproxyiporaddress:port"

Happy Proxy!

Designed by Freepik

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

© 2017 Danywalls

Tema por Anders NorénSubir ↑