diseño

Conectar Vue.js a una base de datos

Cuento largo corto es que no es posible ir directamente de Vue.js a la base de datos. Pero en este caso no debemos aceptar un simple “no es posible” como respuesta. Veamos el porque no es posible.

El manejo de la base de datos en una aplicación web no es un problema pertinente o relativo a las funciones de Vue.js, la creación de interfaces de usuario, por lo tanto es un problema que Vue.js no resuelve como framework. Simplemente no es para eso. Para comprender porque no es posible ir de Vue.js directamente a una base de datos vamos a definir que pasos necesitamos para llevar la data de x aplicación hasta la pantalla del usuario. Si usted ya conoce esta historia o está familiarizado con el proceso, no descubrirá nada nuevo aquí, así que le recomiendo continuar navegando por el blog.

Para poder conectarse a una base de datos usted necesita una aplicación del lado del servidor. Por ejemplo, para conectarse a su base de datos Mysql puede utilizar, PHP, Node.js o .Net Core. Todo esto puede estar instalado en un servidor o en varios. Con estas herramientas crearas los que se conoce como un API. El API se encargará de exponer la data. Ya que Vue.js es una aplicación del lado del cliente (vive en su navegador) y Mysql es una aplicación del lado del servidor usted necesitará de un mecanismo del lado del servidor para poderse conectar a su base de datos a través del API creado. Este mecanismo puede ser a través de llamadas REST usando como canal el protocolo HTTP. En Vue.js puedes manejar y/o consumir llamadas tipo REST pero lo que necesitas es poder crear estos recursos (API) para que Vue.js o cualquier herramienta pueda consumirlos.

En resumen, Vue.js se ejecuta en la parte del cliente, dentro del navegador (front-end). La parte de la base de datos se ejecuta en el servidor (back-end). Desde Vue.js puedes accesar los datos de la base de datos usando como mecanismo el protocolo HTTP. Para esto creas llamadas usando Ajax desde el cliente y así puedes consumir los datos de la base de datos a través de un API. Recuerda, estos datos se manejan en el servidor a través de un HTTP server que expone la data como un API al cliente. Este API se encarga de manejar la seguridad y todo lo necesario para mostrar la data de forma accesible al cliente en este caso Vue.js. Pero es lo mismo para React, Angular, Aurelia, etc.

tecnología

Git Bash vs Git CMD

Hablemos un poco sobre Git-Bash vs Git-CMD. En Windows cada instalación de Git añade tres elementos básicos:

  • Git Bash
  • Git CMD
  • Git GUI

Para aclarar la curiosidad repasemos que son cada una de estas opciones.

Git GUI

Git GUI es la más fácil, es el editor gráfico nativo que provee Git. Confieso que no uso esta herramienta ya que prefiero SourceTree y como segunda opción GitHub Desktop. Pero de vez en cuando juego con ella y no está nada mal.

Git CMD

El único propósito de Git CMD es podamos utilizar Git desde el terminal de Windows. Suena obvio pero para entender porque existe debemos acordarnos que las cosas funcionas diferente en Windows. Git es una herramienta que nace en el corazón del desarrollo de Linux. Para poder proveer la portabilidad de Git entre ambos sistemas, Git CMD provee un elegante wrapper que le permite a los desarrolladores de Windows seguir usando el CMD sin necesidad de brincar a otro Shell. Ahora, la próxima vez que tengas que instalar Git en Windows podrás entender un poco mejor la siguiente imagen:

Windows Git Setup

Si nunca has usado Git CMD no necesitaras de esta opción en la instalación.

Git Bash

Git Bash le permitirá usar herramientas MinGW/Linux Bash con Git en la línea de comandos. Todas esas cosas bonitas que se hacen en Linux también las podemos hacer en Windows a través de Git Bash.

Si usas VSCode hay manera de configurarlo para usarlo desde el editor.

diseño

Incorporar SASS en Vue.js

Comenzar un proyecto usando Vue.js es bien fácil. A través del vue-cli tenemos lo básico para arrancar de inmediato. Una de las opciones que incluye esta configuración es la habilidad de poder utilizar SASS o SCSS en tu proyecto. En resumen, SASS/SCSS es el siguiente paso, una vez nos sintamos cómodos con CSS, para poder construir hojas de estilo manejables y de fácil mantenimiento. Para poder aprovechar dicho funcionamiento debes añadir los módulos: npm install sass-loader node-sass –save-dev.

En el siguiente ejemplo, hemos incorporado elementos escritos en SASS de la librería Bulma a un componente de Vue.js.

<template>
  <div id="app">
    <a class="button is-active">Hello</a>
    <a class="button is-primary">Primary button</a>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss" scope>
  @import '../node_modules/bulma/sass/utilities/_all.sass';
  @import '../node_modules/bulma/sass/elements/button.sass';
</style>

Utilizando el atributo lang le estamos indicando a Webpack que procese los archivos .sass y los compile a CSS. Si te preguntas cual es la diferencia entre SASS y SCSS… pues la primordial es la sintaxis como se escriben las reglas de estilo. SASS utiliza espacios e indentación para organizar las reglas (similar a HAML) y SCSS es más expresivo, la sintaxis es similar a vanilla CSS.

Recuerda, utilizar SASS en tu proyecto es opcional. Pero cualquier opción que ayude a mejorar la claridad de código y aporte al mantenimiento del mismo debe ser considerado.

tecnología

Cómo configurar Git Bash en VSCode

VSCode es una joya. Con la opción de poder levantar un terminal en el mismo editor mi corazón de developer se siente más que agradecido. Pero, la opción por default que ofrece es Powershell. No tengo nada en contra de Powershell pero mi corazón pertenece a Git Bash. Lo mejor de VSCode es que lo podemos adaptar a nuestro gusto y necesidad. Hagamos el cambio para usar poder disfrutar de Git Bash en VSCode.

Primero vamos al área de los settings. File > Preferences > Settings. Para facilitar la búsqueda entre los cientos de settings disponibles VSCode provee una barra de búsqueda en la parte superior donde se encuentran las distintas opciones, Search Settings. Con solo escribir Shell será suficiente. Ahora necesitamos modificar las siguientes dos opciones.

// The path of the shell that the terminal uses on Windows. When using shells shipped with Windows (cmd, PowerShell or Bash on Ubuntu), prefer C:\Windows\sysnative over C:\Windows\System32 to use the 64-bit versions.
 "terminal.integrated.shell.windows": "C:\\WINDOWS\\Sysnative\\WindowsPowerShell\\v1.0\\powershell.exe",

  // The command line arguments to use when on the Windows terminal.
  "terminal.integrated.shellArgs.windows": [],

Vamos a cambiar dichas propiedades de la siguiente manera:

  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "terminal.integrated.shellArgs.windows": [
    "--init-file",
    "C:\\Program Files\\Git\\etc\\profile"
  ]

Recuerda que con tan solo hacer clic en el lápiz la propiedad se copia a tu archivo settings.json. Una vez hagas el cambio todo esta listo. Presionas Ctrl + ` y ya tienes Git Bash en la terminal de VSCode.

tecnología

Puerto Rico se prepara para Hackea por una Causa

Hackea por Una Causa” es el primer hackathon y bootcamp empresarial para causas benéficas de Puerto Rico. En este evento se estarán reuniendo diferentes organizaciones sin fines de lucro con el propósito de presentar ante un grupo de programadores, innovadores, diseñadores, y empresarios diferente necesidades que puedan ser suplidas a través de la tecnología, el empresarismo y la innovación social. Actualmente “miles de organizaciones sin fin de lucro [en Puerto Rico] no tienen acceso o conocen cómo integrar adecuadamente la tecnología para adelantar su causa y lograr un mayor impacto.” La intención de Hackea por Una Causa es acortar esa brecha tecnológica.

Las organizaciones tienen desde hoy para someter sus necesidades. El evento será del 31 de Marzo al 2 de Abril en la Fundación Banco Popular.

Esta es una oportunidad única para demostrar que unidos podemos hacer obra de gran impacto social a través de la tecnología. Te animo a que vayas preparando tu equipo de trabajo y busques mas información en su pagina web.

Se parte del cambio. Revolución con causa.

programación

React Snippets código fácil sin compromiso

Repetir lo mismo una y otra vez es una tarea tediosa. A la hora de crear clases en React te das cuenta que la misma base se repite una y otra vez a lo largo de los componentes. Una forma de atacar esta incomodidad es a través del uso de snippets. Los snippets son bloques de texto predefinidos que podemos añadir a nuestro código con el uso de atajos. Es el mismo concepto de los Emmet. Veamos como configuramos los snippets en Visual Studio Code.

Lo primero es buscar el lenguaje que vamos a impactar. File > Preferences > Users Snippets. En nuestro caso vamos a buscar por JavaScript React ya que lo que queremos es mejorar la experiencia al momento de escribir código de JSX.
search snippets react

Al escoger el lenguaje VSCode te mostrara un archivo tipo json con un ejemplo de cómo crear tus propios snippets. En nuestro caso vamos a utilizar el formato ya definido en el siguiente repositorio en Github. Solo necesitamos copiar el contenido del archivo snippets.json. Yo acostumbro cerrar y abrir el editor para saber que VSCode capturó el cambio.

¡Listo! Ahora cada vez que vayas a trabajar un documento JSX tendrás la opción de añadir varios bloques de código con tan solo presionar algunas teclas.

El listados completo de los atajos lo puedes revisar en el Read Me del repositorio. Si deseas realizar todo esto a través de una extensión, no hay problema, también existe.

programación

¿Qué es Redux?

Redux es una librería que se encarga de emitir actualizaciones de estado en respuesta a acciones. En lugar de modificar directamente el estado, la modificación se maneja a través de objetos sencillos llamados acciones. Luego escribes una función especial llamada reductor para decidir cómo cada acción transforma el estado de toda la aplicación. Y por último todo se maneja desde un solo lugar llamado store (ya somos experto en Redux! No?). Ya que la repetición nos ayuda a recordar las cosas podemos decir que los elementos principales de esta arquitectura o patron de diseño son:

  • Acciones
  • Reducers
  • Store

La librería Redux en sí es sólo un conjunto de ayudas para “montar” reductores a un único objeto de store global. Veamos los detalles.

Redux overview
Ilustración por Lynn Fisher

Aunque no sea importante para entender qué es Redux, debemos indicar que para instalar la versión estable usamos npm:

npm install --save redux

Principios fundamentales

Como los requisitos para las aplicaciones tipo SPA en JavaScript se han complicado cada vez más, nuestro código debe gestionar más states que nunca. Las librerías como React, Angular y Vuejs intentan resolver parte de este problema en el layer de vista eliminando tanto la asincronía como la manipulación DOM directa. Sin embargo, la gestión del state de la data se deja a tu discreción. Aquí es donde Redux entra.

Redux intenta hacer predecible las mutaciones de estado imponiendo ciertas restricciones sobre cómo y cuándo pueden suceder las actualizaciones. Estas restricciones se reflejan en los tres principios de Redux.

Única fuente de verdad

El estado de toda la aplicación se almacena en una estructura de árbol dentro de un único store.

Esto hace que sea fácil crear aplicaciones universales, ya que el estado en el servidor puede ser serializado e hidratado en el cliente sin ningún esfuerzo adicional de codificación. Un solo árbol de estado también facilita la depuración o la introspección de una aplicación. Esto permite que el ciclo de desarrollo sea más rápido.

El estado es read-only

La única manera de cambiar el estado es emitir una acción, un objeto que describe lo sucedido.

Esto garantiza que nada modificará directamente al estado de tu aplicación. Por el contrario, la acción expresa una intención de transformar el estado. Debido a que todos los cambios están centralizados y suceden uno por uno en un orden estricto, no hay race conditions que necesitemos monitorear. Dado que las acciones son objetos sencillos, se pueden registrar, serializar, almacenar y reproducir posteriormente para fines de depuración o pruebas.

Los cambios se realizan a través de funciones puras

Para especificar cómo se transforma el estado por acciones, se escriben reducers puros.

Los reducers son funciones puras que toman el estado anterior y una acción, y devuelven el siguiente estado. Esta función debe devolver objetos que presentan el nuevo estado, en lugar de cambiar el estado anterior. Puedes comenzar con un solo reductor y, a medida que la aplicación vaya creciendo, divídelo en reductores más pequeños que administren partes específicas del estado.

Actions

Las acciones son cargas útiles de información que envían datos desde su aplicación a su store. Son la única fuente de información para el store. Los envía al store mediante el método store.dispatch ().

Las acciones son simples objetos en JavaScript. Las acciones deben tener una propiedad conocida como type que indica el tipo de acción que se está realizando. Los types normalmente se deben definir como una cadena de constantes. Una vez la aplicación haya crecido, puedes mover las acciones a módulos independientes. Veamos un ejemplo:

var action = {
  type: 'ADD_USER',
  user: {name: 'Dan'}
};

Action Creators

Los creadores de acciones son exactamente eso, funciones que crean acciones. Es fácil combinar los términos “acción” y “creador de acción” al momento de buscarle nombres a nuestros elementos, así que haz lo mejor que puedas para usar el término apropiado. Así evitaras confusiones.

// Action type
const ADD_USER = 'ADD_USER';

// Action Creator
var addUser = function(name) {
  return { type: ADD_USER, name}
}

// Dispatch envía un object
store.dispatch(addUser('Jaime'));

La función dispatch() se puede accesar directamente desde el store como store.dispatch(), pero es más conveniente utilizar el método connect() que tenemos en la librearía react-redux. Puedes utilizar bindActionCreators() para asociar automáticamente cuantos creadores de acción desees a la función dispatch(). Ya empezamos a tocar un poco de profundidad asi que mejor vamos a continuar con el próximo tema.

Reducers

Las acciones describen el hecho de que algo ocurrió, pero no especifican cómo cambia el estado de la aplicación en respuesta a esa intención de cambio. Este es el trabajo de los reductores. El reductor es una función pura que toma el estado anterior y una acción, y devuelve el siguiente estado.

(previousState, action) => newState

Es muy importante que el reductor se mantenga puro. Cosas que nunca debes hacer dentro de un reductor:

  • Modificar sus argumentos (entonces ya no es una función pura)
  • Ejecutar acciones como llamadas a algún API o jugar con las rutas (routes)
  • Ejecutar funciones no-puras, por ejemplo Date.now(), Math.random(), etc

La documentación es enfática en destacar que el reductor debe ser puro. Dado los mismos argumentos, debes calcular el siguiente estado y devolverlo. Sin sorpresas. Sin efectos secundarios. No llamadas de API. No mutaciones. Sólo una simple evaluación. Veamos un ejemplo:

import { combineReducers } from 'redux'
import { ADD_USER } from './actions'

function users(state = [], action) {
  switch (action.type) {
    case ADD_USER:
      return [
        ...state,
        {
          text: action.text
        }
      ]
    default:
      return state
  }
}

const reducers = combineReducers({
  users
})

export default reducers

Store

Como hemos visto las acciones representan los hechos sobre “lo que pasó” y los reductores actualizan el estado de acuerdo a esas acciones. El store es el objeto que los reúne (yey!). El objeto store tiene las siguientes responsabilidades:

  • Almacena el estado de aplicación
  • Permite el acceso al estado a través del método getState()
  • Permite que el estado se actualice a través del método dispatch(action)
  • Registra los listeners mediante el método subscribe(listener)
  • Maneja remover el registro de los listeners a través de la función que invocó al subscribe(listener). Te lo aclaro con el siguiente ejemplo:
const remove = subscribe(myListener);
// para remover:
remove();

Ya cubierto lo básico podemos tener una idea de lo que es Redux. Veamos el ejemplo completo (en producción se debe perseguir crear módulos para cada parte):

// Reducers
const users = (state = [], action) => {
  switch (action.type) {
    case 'ADD_USER':
      return [
        ...state, {
          text: action.text
        }
      ]
    default:
      return state
  }
}

//Actions
const addUser = (text) => {
  return {
    type: 'ADD_USER',
    text
  }
}

// Redux y amigos
const { combineReducers, createStore } = Redux
const userApp = combineReducers({ users })

let store = createStore(userApp)
// Registra el estado inicial
console.log(store.getState())

// cada vez que haya un cambio en el state, registrarlo
// Observa que la función subscribe() devuelve una función para remover el listener
let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

// Dispatch some actions
store.dispatch(addUser('Wolverine'))
store.dispatch(addUser('Batman'))
store.dispatch(addUser('Ironman'))

// Remover listeners a la actualización del state
unsubscribe()

Conclusión

Esto es solo el comienzo. Esta arquitectura puede parecer un poco pesada para proyectos pequeños, pero la belleza de este patrón de diseño es lo bien que escala en aplicaciones grandes y complejas. Además, es fácil de integrar en ya sea en React, Angular, Vuejs etc.

tecnología

Encuesta oficial de Programadores Puerto Rico sobre Análisis de Salario


En los pasados años uno de los temas recurrente entre los usuarios del grupo Programadores Puerto Rico es el asunto del salario ofrecido por los patronos de la isla. Las historias generadas alrededor de este asunto han sido muy interesantes. Los números capturados por varias iniciativas también han sido igual de interesantes. No obstante no hemos logrado colectar una muestra representativa para poder realizar un análisis más detallado.

Versión 2017

Este año para incentivar la participación estaremos regalando dos certificados de Amazon cada uno de $25.00. Además hemos creado una encuesta un poco más abarcadora pero a la vez fácil de responder. A pesar de que el origen de esta iniciativa nace en el Grupo Programadores Puerto Rico, nuestro deseo es poder también atender a la comunidad hispano parlante. Ten la confianza de completar la encuesta aun si no resides en Puerto Rico. La encuesta también toma en consideración diferentes especializaciones dentro de la Industria de Tecnología y no solamente a la programación como oficio. Contamos con tu participación. Puedes completarla a continuación o visitando el enlace a final.

Encuesta oficial de Programadores Puerto Rico sobre Análisis de Salario

programación

Componentes Vue.js en español

Vayamos rápido al grano sobre el tema de componentes en Vue.js. Por ahora, sólo necesitas saber que todos los componentes en Vue son esencialmente una extensión a la instancia de Vue.

// Instancia Vue
new Vue({
  el: '#some-element',
  // options
})

Utilizando el entorno ofrecido por la herramienta vue-cli, vamos a utilizar los archivos iniciales para ver como trabajamos con los components. Veamos el siguiente ejemplo:

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

// Extendemos las instancia para crear los componentes
Vue.component('comp1', {
  template:'<div>Component 1</div>' 
}) 

Vue.component('comp2', { 
  template:'<div>Component 2</div>' 
}) 

Vue.component('comp3', { 
  template:'<div>Component 3</div>' 
}) 

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

Continuar la lectura…

programación

Construir un ambiente de desarrollo para Vue.js usando Webpack

Después de haber escrito sobre lo básico de Vue.js es momento de pasar al próximo nivel, Vue.js usando Webpack. La idea este “próximo nivel” es poder tener un ambiente relativamente completo para desarrollar nuestro front-end.

Vue ha desarrollado una herramienta increíblemente práctica para este propósito. La herramienta es conocida como vue-cli y contiene todo lo necesario para arrancar el ambiente de desarrollo. Lo bueno de utilizar esta herramienta es que provee una manera oficial y opinionada de empezar un proyecto. Además provee espacio para adaptarlo a nuestra necesidades y gustos.

Para comenzar a utilizar vue-cli debes tener: Node.js (>=4.x, 6.x siendo preferido) y Git. En cuanto a npm una recomendación es tener npm >= 3.x.

Instalamos de la siguiente manera:

$ npm install -g vue-cli

Actualmente los templates oficiales disponible son:

  • webpack
  • webpack-simple
  • browserify
  • browserify-simple
  • simple

Si deseas utilizar vue-cli para trabajar con tu propio template los puedes hacer fácilmente. La documentación oficial lo explica con lujo de detalle.

Para propósitos de este tutorial y porque es el template que más utilizo estaremos trabajando con webpack. Esta versión es bien completa e incluye todo lo que necesitamos: Webpack Dev Server, Babel setup, Hot Reloading, Unit Testing, etc.

Ya que hemos instalado vue-cli, vamos a utilizarlo para crear nuestro proyecto y de una vez procederemos a instalar las dependencias.

$ vue init webpack my-project

$ cd my-project

$ npm install

Ya con todo en su lugar vamos a inicial el proyecto.

$ npm run dev

Conclusión

Es hora de repasar que tenemos hasta el momento. Hemos creado un proyecto a través de la herramienta vue-cli. Esta herramienta utiliza Webpack para manejar todo el ambiente de desarrollo de Vue. Nada “fancy” por el momento pero si analizamos todo lo que tenemos con tan solo usar vue-cli, comprenderemos el gran ahorro en tiempo y stress que esta simple herramienta nos provee.