Monthly Archives: Abril 2017

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.