Código CSS Eficiente: Cuida el uso de IDs

código css eficiente

Hola a todos, esta ocasión también voy a escribir este post un poco corto, pero intentaré que sea lo más explicativo posible al problema. Planeo que se convierta en una serie de varias entradas que serán englobadas bajo el tema “Código CSS Eficiente“.

código css eficiente

Esta primera entrada hablaré sobre los IDs en los elementos HTML, y una situación “curiosa” con la que me encontré hace poco, siendo esta la premisa a mi recomendación de evitar en lo posible utilizarlos.

Continuar leyendo

Trabajando con WebSockets

Programación Python

Hola a todos, debido al trabajo he descuidado el blog estás últimas semanas, así que hoy decidí esforzarme en sacar tiempo y escribir este pequeño ejemplo de un tema qué alguien me preguntó hace unos días mediante Twitter.. En esta entrada llamada “Trabajando con WebSockets”, explicaré de forma breve pero concisa como trabajar con Web Sockets y JS.

A modo de ejemplo, crearemos lo más conocido para este tipo de “features”, un chat. Tal vez eres un dev que ha experimentado en el pasado con Socket.io y buscas saber un poco más sobre lo que hay por detrás, o simplemente estás intentando añadir carácteristicas “real-time” a tu app y no sabes por donde empezar, este post fue hecho pensando en ti. La aplicación final tendrá una apariencia como la siguiente:

Trabajando con WebSocketsLuce bien, ¿cierto? 😀 No sean tan duros, deben recordar que esto fue hecho en unos minutos, solo para poder ejemplificar la teoría, y poder centrarnos en lo realmente importante de este post.

¿Qué es un Web Socket?

Intentando ser simple, WebSocket es un protocolo nuevo para la web que funciona bajo TCP, por el cual, a diferencia de las conexiones HTTP (las que se utilizan normalmente en internet), este es bi-direccional, ¿que significa esto? Como te menciono, hoy por hoy en internet estamos usando una conexión en una sola dirección, solicitamos un recurso al servidor y esperamos la respuesta (o viceversa con ServerEvents, de los cuales planeo escribir pronto). Pero con web sockets el servidor te habla también, te puede llamar y mandar un mensaje en cualquier momento, cool ¿cierto?

Esto nos permite realizar cosas tan “mágicas” en nuestro sitios web, como podamos imaginar, siempre y cuando tengamos en cuenta algunos puntos importantes:

  • La comunicación se inicia con un handshake HTTP, por lo que si la conexión HTTP no se puede establecer, tampoco habrán WebSockets.
  • El soporte debe existir tanto en el cliente como en el servidor. (Tenemos HTML5 en el cliente y Socket.io o WS en el servidor 😀 )
  • A diferencia de los protocolos convensionales de TCP, donde podemos transmitir streams de bytes, en WebSockets solo se pueden transmitir texto/JSON.
  • Al igual que ocurre con HTTP, donde tenemos su versión segura (HTTPS), en los WebSockets contamos con la versión segura WSS, aunque debemos estar en el entendido que no todos los navegadores que soportan los WebSockets, soportarán WSS.

Lo interesante de los WebSockets es que nos dan este comportamiento “real-time”, que nos da la posibilidad de crear aplicaciones complejas de forma sencilla, ¿has querido hacer un juego multijugador? con los WS esto será algo “sencillo”.

Bien, muy interesante todo pero, ¿cómo funciona?

Trabajando con WebSocketsComo mencionaba anteriormente, para iniciar una conexión con el protocolo WS primero el cliente (el browser) le pide al servidor que quiere iniciar esta conexión (handshake: aquí se pasan unos datos secretos), si este proceso es satisfactorio, el servidor responde un “todo en orden, prosigue” y a partir de ahí dejan de utilizar HTTP y pasan a WS.

Además de darnos la posibilidad de una comunicación bi-direccional, también nos ahorramos el “payload”, es decir, esos bytes que se envían en las transmisiones que hacemos por HTTP, que contienen la información para que tanto el cliente, como el servidor sepan que estan recibiendo, qué tipo de conexión utilizamos, etc. Este “payload” es mejor conocido como “cabeceras HTTP”. Esto ya que recordemos que únicamente podemos transmitir texto y nos quedamos “conectados” al servidor hasta que nosotros (los clientes) decidamos que no queremos seguir conectados.

Pequeño ejemplo: Trabajando con WebSockets

Bien, tal vez tanta teoría te abruma, así que aquí te dejo el código del ejemplo para que puedas reproducirlo. y ver un poco de que se trata. Como el código cuenta con comentarios, voy a dejar implicita la explicación del mismo por esta ocasión (es un post express) 🙂

Primeramente y ya teniendo un proyecto creado, instalamos el paquete wsdesde NPM.

yarn add ws

Teniendo el siguiente index.html:


<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, maximum-scale=1.0">
    <title>Simple Chat App - VueJS and Web Sockets</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/lumen/bootstrap.min.css">
    <style>
        .container {margin-top: 40px;}
        #messages { height: auto; min-height: 150px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="col-xs-12 col-md-offset-3 col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading">Join the conversation!</div>
                <div class="panel-body">
                    <div class="form-group">
                        <label for="messages" class="form-control-label">Messages</label>
                        <div id="messages" class="form-control"></div>
                    </div>
                    <div class="form-inline">
                        <div class="form-group form-group-sm">
                            <label for="message_text" class="form-control-label">Write your message:</label>
                            <input type="text" class="form-control" id="message_text" />
                        </div>
                        <button class="btn btn-primary">Send</button>
                    </div>
                </div>
            </div>
            <p id="username-label"></p>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

Vemos que llama un script, cuyo contenido es el siguiente:


// app.js
// URL dónde se encuentra ejecutando nuestro servidor de WS
const wsUri = "ws://localhost:5001"
// Creamos un nuevo "cliente" de WS
let socket = new WebSocket(wsUri)
// Ya que la aplicación de ejemplo es una sala de chat
// al iniciar nos pide un nombre de usuario para utilizarlo
const name = prompt("What is your username?")
document.getElementById('username-label').innerText = `You are: ${name}`

// Controla la conexión al WS
socket.onopen = event => {
  // Descomentar para ver que recibimos por parte del WS
  //console.log(event)
  socket.send(JSON.stringify({
    type: "name",
    data: name
  }))
  console.log("Socket connected successfully...")
}

let messages = document.getElementById("messages")

// Nos suscribimos a los eventos de transferencia de mensajes
// por parte del servidor, si tuvieramos mensajes de diferentes tipos
// podríamos llevar a cabo una validación
socket.onmessage = event => {
  // Descomentar para ver que recibimos por parte del WS
  //console.log(event)
  const data = JSON.parse(event.data)
  messages.innerHTML += `<span class="text-success">${data.name}:</\span> ${data.data}<br /\>`
}

document.querySelector(".btn").onclick = event => {
  const text = document.getElementById("message_text").value
  socket.send(JSON.stringify({
    type: "message",
    data: text
  }))
  messages.innerHTML += `<span class="text-warning">You:</\span> ${text}<br /\>`
}

Creamos nuestro archivo server.js, que será el encargado de ejecutar el servidor con soporte para WS.


// server.js
// Referenciamos las librerías a utilizar

// Para manejar los WebSockets utilizaremos la librería 'ws'
// que nos facilita bastante el trabajo con estos.
const WS = require("ws").Server
// Puerto a donde escuchará nuestro servidor WS
const port = 5001
// Creamos nuestro servidor de WS
const server = new WS({ port })

// Nos suscribimos al evento de conexión
// el cual es llamado cuando un cliente se conecta
server.on("connection", ws => {
  // El método callback es llamado cuando
  // se conecta un nuevo cliente y en el argumento "ws"
  // vamos a tener un "enlace" a este cliente

  // Podemos enviar un mensaje al cliente
  // de bienvenida apenas se conecte
  // los parámetros son el nombre del mensaje y un json con los datos
  //ws.send('welcome', { greeting: 'Welcome WS client!' })

  // Los WebSockets se comunican en base a mensajes
  // por lo que debemos suscribirnos a cada uno de los
  // posibles mensajes que los clientes puedan enviar
  ws.on("message", message => {
    console.log(`Received: ${message}`)
    message = JSON.parse(message)
    // Ya que el cliente puede enviar mensajes de diferentes tipos
    // Validamos que el mensaje recibido sea del tipo "name"
    if(message.type === "name") {
      // Store the username that send the email
      ws.userName = message.data
      return
    }

    for(let client of server.clients) {
      // Cómo está será una aplicación de chat
      // enviamos el mensaje a todos los clientes
      // evitando enviarlo a "nosotros"
      if(client !== ws)
        client.send(JSON.stringify({
          type: "message",
          name: ws.userName,
          data: message.data
        }))
    }
  })

  // Nos suscribirnos también al evento
  // que se ejcuta cuando un cliente decide terminar la conexión
  ws.on("close", event => {
    console.log("A client was disconnected...")
  })

  // Todos los llamados a console.log son del servidor
  // con própositos de depuración
  console.log("New client connected...")
})

Ahora únicamente debemos ejecutar el servidor

node server.js

Tan sólo abrimos nuestro index.html en cualquier navegador que soporte WS (Chrome, Firefox, etc) y podremos ver nuestra aplicación funcionando.

Al principio expliqué que tanto el cliente como el servidor deben soportar web sockets, tenemos que tener en cuenta que es necesario HTML5 con web sockets, te dejo este enlace a Caniuse.com con el detalle de los navegadores que lo soportan.

Opciones como SocketIO se encargan de que la conexión funcione sin importar el navegador, esto lo hace intentando con otros mecanismos de transporte (XHR Pooling, Flash Sockets, etc.). No va a ser con web sockets pero va a funcionar como si lo fuera.

Creo que es todo por ahora, si gustan saber más al respecto de “ws”, pueden visitar su documentación, que siendo honestos es bastante clara. Recuerda que todo el código fuente puedes encontrarlo en el siguiente repositorio.

Espero la explicación haya sido clara y cualquier comentario no dudes en dejarlo aquí abajo, o con confianza mencionalo por Twitter o en la Fanpage de Facebook, y aprovecho a invitarte para que me sigas en las redes y compartas el contenido del blog, con lo cual me harías un gran favor.

Crear un blog con NodeJS y Hexo

crear un blog con nodejs

Crear un blog con NodeJS

Hola a todos, en esta entrada vengo a escribir sobre Hexo, una herramienta de línea de comandos que nos permitirá crear un blog con nodejs, y con esto, crear la estructura de un blog de forma muy sencilla.

crear un blog con nodejs

¿Qué es Hexo?

Bien, como en su propia página de documentación nos adelantan:

Hexo is a fast, simple and powerful blog framework. You write posts in Markdown (or other languages) and Hexo generates static files with a beautiful theme in seconds.

Como podemos apreciar Hexo nos permitirá crear un blog de una forma sencilla y rápida. Nos da la posibilidad de crear los post de nuestro blog utilizando Markdown (lo cual es grandioso) o algún otro lenguajes y generar archivos estáticos y con un hermoso tema en segundos.

Generando nuestro blog

Lo primero que debemos hacer es instalar hexo, para esto debemos tener instalado NodeJS previamente, y ejecutar alguno de los siguientes comandos:


# Utilizando npm

npm install -g hexo-cli

# Utilizando yarn (recomendado)

yarn global add hexo-cli

Con esto ya tendremos el binario de hexo listo para utilizar, ahora lo que debemos hacer es ejecutar el siguiente comando:


hexo init my_blog

Luego nos posicionamos en el directorio que nos ha creado el comando anterior:


cd my_blog

Instalamos las dependencias:


# Utilizando npm

npm install

# Utilizando yarn

yarn install

Si todo se instaló correctamente, simplemente ejecutamos el servidor de hexo:


hexo server

Ahora si navegamos a la url que nos muestra en la salida (http://localhost:4000/), podremos visualizar nuestro blog, que debería verse parecido a lo siguiente:

crear un blog con nodejsSencillo y rápido, ¿no? Cumplen lo que prometen 😀

Creando un post

Tal vez, te estás preguntando, ¿cómo se crean los post?

La respuesta es simple. Únicamente debemos ejecutar el siguiente comando:


hexo new post 'Titulo de tu post'

Donde debemos reemplazar ‘Titulo de tu post’ con el titulo que quieras que tenga tu post. Para realizar esto no es necesario que detengas el servidor de hexo. Y listo, solo debes comenzar a escribir el contenido de tu post en el archivo generado con el titulo que escribiste dentro de la carpeta source.

Y deberías tener un resultado como el siguiente:

crear un blog con nodejsSi desean saber más sobre este grandioso framework siempre pueden darle un vistazo a su buena documentación, que aunque aún tiene mucho por delante, es una buena opción si quieres algo simple y que te permita llevar a cabo el objetivo de un blog: escribir.

Y bien, es todo por esta ocasión, espero la explicación haya sido clara y cualquier comentario no dudes en dejarlo aquí abajo, o con confianza mencionalo por Twitter o en la Fanpage de Facebook, y aprovecho a invitarte para que me sigas en las redes y compartas el contenido del blog, con lo cual me harías un gran favor.

Saludos.

Primeros pasos con Axios

Consumiendo Servicios Web / REST APIs en Vuejs con Axios

Hola a todos, esta entrada es para actualizar lo visto en Realizando peticiones a un API con Vue. En esta ocasión tendremos nuestros primeros pasos con Axios, ya que como el mismo Evan You (creador de Vuejs) nos adelantaba, será retirado de los proyectos oficiales y se invita a utilizar librerías como Bluebird o Axios.

¿Qué es Axios?

Axios es un cliente HTTP basado en Promesas para Javascript, el cual puede ser utilizado tanto en tu aplicación Front-end, como en el Back-end con Nodejs. Utilizando Axios, es muy sencillo enviar peticiones a endpoints REST y realizar operaciones CRUD. Además, Axios puede ser utilizada desde una aplicación desarrollada con Javascript plano, al igual que utilizando un Framework como Vuejs. Para visualizar una lista completa con las caracteristicas de Axios, pueden visitar su página en Github, aunque aquí les menciono las que en mi opinión son las más importantes.

  • Realizar peticiones XMLHttpRequest (Ajax) desde el navegador de una manera sencilla.
  • Realizar peticiones HTTP desde Nodejs.
  • Soporta el API de Promesas.
  • Intercepta peticiones y respuestas.
  • Transforma la información de las peticiones y respuestas.
  • Cancela peticiones.
  • Transforma automáticamente la información en formato JSON.
  • Soporta protección del lado del cliente contra ataques CSRF (Cross-site request forgery).

En las próximas líneas, mi objetivo será que aprendas a instalar y añadir Axios a tu proyecto.

¿Qué vamos a realizar?

Para mostrar de forma más clara el tutorial, realizaremos una sencilla pero útil para el aprendizaje lista de posts. Pueden ver el acabado final en la siguiente imágen:

primeros pasos con axios - ejemplo

Primeros pasos con Axios…

Para añadir Axios, existen dos maneras:

Opción 1: Instalando Axios con Node Package Manager.

Para esto, sólo necesitas ejecutar uno de los siguientes comandos:


# Con npm

$ npm install -S axios

# Con yarn

$ yarn add axios

 

 

Con esto instalamos la librería dentro del directorio node_modules de nuestro proyecto.

Opción 2: Utilizando un CDN

La manera más sencilla de incluir axios es utilizando un Content Delivery Network, por ejemplo, incluyendo la siguiente etiqueta script en tu archivo index.html:


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

 

Como lo que buscamos es probar la funcionalidad de Axios para el envío y recepción de información desde servicios web/ REST, necesitamos tener un backend, como esto está fuera del alcance de este tutorial, vamos a utilizar la instancia para pruebas del servidor JSON que se encuentra en http://jsonplaceholder.typicode.com/ la cual ofrece varios endpoints para pruebas.

Especificamente, haremos uso del endpoint http://jsonplaceholder.typicode.com/posts.

Implementación de la UI

Para esta entrada utilizaremos el siguiente código HTML:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting started with Axios</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/lumen/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Getting started with Axios and Vanilla javascript</h1>
<h4>This application uses Axios.</h4>
</div>
<h2>Axios Demo by <small>LaEsporaDelHongo.com</small></h2>
<div class="panel panel-primary">
<div class="panel-heading">GET Request</div>
<div class="panel-body">
<button class="btn btn-primary" onclick="getRequest()">Get Posts</button>
<button class="btn btn-warning" onclick="cleanResult(this)">Clear</button>
<div class="panel-body" id="getResult"></div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">GET Request with Parameters</div>
<div class="panel-body">
<input type="text" class="form-control" id="postId" placeholder="Post ID..." /><br>
<button class="btn btn-primary" onclick="getRequestWithParams()">Get Post</button>
<button class="btn btn-warning" onclick="cleanResult(this)">Clear</button>
<div class="panel-body" id="getResultWithParams"></div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">POST Request</div>
<div class="panel-body">
<form class="form-inline" id="postInputForm">
<div class="form-group">
<input type="text" class="form-control" id="postTitle" placeholder="Post Title..." />
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form><br>
<button class="btn btn-warning" onclick="cleanResult(this)">Clear</button>
<div class="panel-body" id="postResult"></div>
</div>
</div>
<div class="fotter">
<p>&copy; <a href="http://laesporadelhongo.com" target="_blank">LaEsporaDelHongo.com</a></p>
</div>
</div>
<!-- Axios Library -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
</body>
</html>

 

Se puede apreciar que utilizamos un tema de bootstrap, y añadimos las secciones de nuestra aplicación. También hacemos referencia al script de Axios y añadimos un archivo main.js donde se encuentran los métodos que vamos a utilizar.

Cada sección de la aplicación se encuentra definida entre los bloques de código:


<div class="panel panel-primary">...</div>

 

Cada sección contiene el código necesario para uno de los casos de uso de Axios que veremos a continuación, y que nos permitirá generar código utilizando la respuesta devuelta por el API. El código HTML de cada sección respectivamente:


<div class="panel-body" id="getResult"></div>

<div class="panel-body" id="getResultWithParams"></div>

<div class="panel-body" id="postResult"></div>

 

Donde la unica diferencia se encuentra en el atributo id de cada bloque.

El código JS que contiene el archivo main.js es el siguiente:


function generateSuccessHTMLOutput(response) {
return  '<h4>Result</h4>' +
'<h5>Status:</h5> ' +
'<pre>' + response.status + ' ' + response.statusText + '</pre>' +
'<h5>Headers:</h5>' +
'<pre>' + JSON.stringify(response.headers, null, '\t') + '</pre>' +
'<h5>Data:</h5>' +
'<pre>' + JSON.stringify(response.data, null, '\t') + '</pre>';
}

function generateErrorHTMLOutput(error) {
return  '<h4>Result</h4>' +
'<h5>Message:</h5> ' +
'<pre>' + error.message + '</pre>' +
'<h5>Status:</h5> ' +
'<pre>' + error.response.status + ' ' + error.response.statusText + '</pre>' +
'<h5>Headers:</h5>' +
'<pre>' + JSON.stringify(error.response.headers, null, '\t') + '</pre>' +
'<h5>Data:</h5>' +
'<pre>' + JSON.stringify(error.response.data, null, '\t') + '</pre>';
}

function cleanResult(e) {
// e.nextElementSibling it's the result container
e.nextElementSibling.innerHTML = '';
}

function getRequest() {
var resultEl = document.getElementById("getResult");
resultEl.innerHTML = "";
// We use Axios to perform a GET request
axios.get('http://jsonplaceholder.typicode.com/posts')
.then(function(response) {
console.log(response);
resultEl.innerHTML = generateSuccessHTMLOutput(response);
})
.catch(function(error) {
resultEl.innerHTML = generateErrorHTMLOutput(error);
})
}

function getRequestWithParams() {
var resulEl = document.getElementById('getResultWithParams');
var postId = document.getElementById('postId').value;
resulEl.innerHTML = '';
// We use Axios to perform a GET request with params
axios.get('http://jsonplaceholder.typicode.com/posts', {
params: {
id: postId
}
})
.then(function(response) {
console.log(response);
resulEl.innerHTML = generateSuccessHTMLOutput(response);
})
.catch(function(error) {
resulEl.innerHTML = generateErrorHTMLOutput(error);
});
document.getElementById('postId').value = '';
}

function getPostRequest(e) {
e.preventDefault();
var resultEl = document.getElementById('postResult');
var postTitle = document.getElementById('postTitle').value;
resultEl.innerHTML = "";
// We use Axios to perform a POST request.
axios.post('http://jsonplaceholder.typicode.com/posts', {
userId: '1',
title: postTitle,
completed: true
})
.then(function(response) {
console.log(response);
resultEl.innerHTML = generateSuccessHTMLOutput(response);
})
.catch(function(error) {
resultEl.innerHTML = generateErrorHTMLOutput(error);
});
document.getElementById('postTitle').value = '';
}
document.getElementById('postInputForm').addEventListener('submit', getPostRequest);

 

De este archivo, podemos observar que contamos con un par de funciones para generar código HTML, el cual será insertado en cada bloque mencionado anteriormente. También tenemos una función con la cual se limpian los elementos input, y las funciones con las cuales llevaremos acabo las peticiones al API.

Estas funciones cuentan con un sencillo código javascript, donde sólo cabe mencionar la sección de Axios:


# Get request

axios.get(url)

# Get request with params

axios.get(url, params)

# Post request

axios.post(url, params)

 

Axios en cada petición nos devuelve una promesa, la cual debemos manipular haciendo uso de los métodos .then/.catch para capturar la respuesta y los errores respectivamente.

Nota final con respecto a Vuejs

Para utilizar Axios con vuejs contamos con dos maneras de llevar acabo esto:


# Utilizando Axios de forma normal

import axios from 'axios'

axios.get(url)

# Utilizando Axios como si de Vue-resource se tratara.

import axios from 'axios'

Vue.prototype.$http = axios

this.$http.get(url)

Y bien, es todo por esta ocasión, pueden encontrar un ejemplo utilizando Vuejs y otro ejemplo con Vanilla js (el utilizado en esta entrada) en el siguiente repositorio. Cualquier duda o comentario no duden en escribirlo en la sección de abajo, o en Twitter. Si gustas apoyarme a seguir escribiendo como hasta ahora, comparte el blog con tus amigos, conocidos, colegas, en tus redes, donde gustes. O bien siguiendome en Twitter y dando like a la fan-page de Facebook. Hasta la próxima.

Curso VueJS – Realizando Peticiones a un API con Vue (Clase IV)

Realizando peticiones a un API con Vue

Hola a todos, en la entrada anterior vimos como utilizar las directivas y eventos que Vue nos proporciona, y añadimos información a nuestra aplicación en el método data de nuestro componente. En esta ocasión veremos como podemos realizar peticiones a un API con Vue y de esta manera, traer esta información desde un servidor externo y visualizarla en nuestra aplicación, podríamos realizarlo utilizando Axios, fetch, o Bluebird, pero para efectos de este curso lo haremos utilizando un plugin de Vue llamado Vue-resource.

Instalando Vue-resource

Para llevar a cabo esto, basta con ejecutar el siguiente comando


# Yarn

yarn add vue-resource

# npm

npm i vue-resource -S

Ahora debemos configurarlo, esto lo haremos en nuestro archivo main.js.

  • Primero tenemos que importar el plugin:

import Vue from 'vue'

import VueResource from 'vue-resource'

import App from './App.vue'

...

  • Una vez importado, debemos “registrarlo” dentro de Vue para poder utilizarlo en nuestra aplicación.
... 
Vue.use(VueResource)

new Vue({
...

Realizando Peticiones

Habiendo realizado lo anterior, ya podemos realizar peticiones a cualquier API. Para el caso de este curso lo haremos a la PokeAPI. Para esto vamos a modificar el bloque <script> de nuestro componente App.vue para quedar de la siguiente manera:

export default {
    name: 'app',
    data() {
      return {
        pokemons: []
      }
    },
    methods: {
      toggleCaptched(pokemon) {
        pokemon.captched = !pokemon.captched
      }
    },
    mounted() {
      this.$http.get('http://pokeapi.co/api/v2/pokemon/')
        .then(response => {
          if(response.status === 200) {
            this.pokemons = response.data.results.map(pokemon => {
              return {
                name: pokemon.name,
                captched: false
              }
            })
          }
        })
        .catch(error => {
          console.console(error)
        })
    }
  }

Aquí que lo único que hicimos fue modificar el método data para que nuestro vector de pokemons esté vacío. Y añadimos el método mounted, este método que pertenece a los métodos que hacen referencia al cilo de via de una aplicación Vue, se activa cuando el render ha terminado, es decir, cuando la aplicación ha sido “montada”.

Dentro de este método, utilizamos el objeto $http que nos provee el plugin que instalamos anteriormente (vue-resource), recuerda que con “this” estamos haciendo referencia a la instancia Vue de nuestro componente, por lo tanto podemos utilizar el plugin sin problemas, y de este objeto estamos utilizando el método get, al cual le estamos pasando la URL desde donde queremos recibir los datos como parámetro.

Este método utiliza promesas para realizar la petición, por ende utilizamos .then/.catch para manejar el estado de la respuesta que nos provea el servidor. Dentro del método .then recibimos un argumento, en este caso lo he llamado response y antes que cualquier cosa, verificamos que el código de respuesta del servidor sea 200 (Correcto).

De ser verdadero, modificamos nuestro vector de pokemons, pasandole todos los pokemons que vienen en la respuesta del servidor (PokeAPI segmenta la respuesta a 20, ya veremos como trabajar esto más adelante). Utilizamos el método “map” para recorrer el vector de pokemons que nos devuelve el servidor, para aplicar una función a cada elemento y poder devolver justo lo que queremos, en nuestro caso, por ahora sólo necesitamos el nombre del pokémon y un atributo “captched” cuyo valor inicial es false.

Como vemos dentro de “map” estamos utilizando return para devolver un objeto con los parámetros que necesitamos (name y captched). Si no te queda claro, la función map sirve para iterar através de los elementos de un vector, y aplicar una función, cuyo resultado de la función map, es un nuevo vector conteniendo los datos que necesitamos, por ejemplo, podríamos devolver el nombre de los pokemons de forma invertida.

Y ahora, si ejecutamos la aplicación podremos verificar que todo está correcto. Podemos visualizar una lista de pokemons como lo hacíamos anteriormente, pero ahora utilizando datos traídos desde un API.

Resultado - Realizando Peticiones a un API con Vue

Esto ha sido todo por hoy. En la próxima entrada vamos a trabajar con más componentes para nuestra aplicación y mejorar un poco nuestro código. Espero sus opiniones acerca del curso hasta ahora, y si les ha sido util para aprender les agradezco lo compartan.

Saludos.

Curso VueJS – Directivas y Eventos (Clase III)

Directivas y Eventos con VueJS

Hola, si has seguido el curso hasta ahora deberías tener una estructura de archivos en tu proyecto similar a la siguiente, de no ser el caso, por favor realiza el procedimiento descrito en la entrada anterior  y despues continuas aquí. Ahora hablaremos sobre como trabajar con Directivas y Eventos con VueJS.

Directory-structure

Directory-structure

En esta entrada aprenderemos:

  • Como poder visualizar una lista de elementos.
  • Aplicar clases dinámicamente a los elementos de nustra aplicación.
  • Manejar eventos desde los elementos de nuestra aplicación.

Pero antes, vamos a aplicar un poco de estilo a nuestra aplicación, como los estilos están fuera del alcance de esta serie de entradas, vamos a añadir una de las plantillas bootstrap gratuitas que podemos encontrar en Bootswatch.

Para lograr esto, basta con incluir los archivos que nos proporcionan, en mi caso escogí el tema Lumen, así que añado al archivo index.html una referencia a la hoja de estilos:


...

<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/lumen/bootstrap.min.css">
</head>
<body>

...

Ya que hicimos esto, vamos a eliminar el contenido que nos da por defecto Vue-loader.
Para esto, vamos a modificar el archivo src/App.vue. Este archivo es el componente principal de nuestra aplicación, tranquilo,
esto de los componentes lo veremos más adelante en el curso. Eliminamos todo el código, tal que el archivo debe quedar así:

<script>
    export default {}
</script>

<template>
    <div id="app"></div>
</template>

<style></style>

¿Te parece extraño? VueJS, utiliza los archivos con extensión .vue para especificar que su contenido se trata de un componente.
Como podemos observar, se trata de 3 bloques de código:

 

  • Script: Aquí se “exporta” nuestro componente, por eso obligatoriamente debemos insertar:
     export default {} 

    dentro de las llaves insertamos todo nuestro contenido js relacionado a nuestra aplicación.

  • Template: Aquí se inserta todo el código html de nuestro componente. Cada componente puede ser de un sólo bloque, esto quiere decir que necesariamente debe exportarse un solo elemento html, por ejemplo:
     <span>VueJS</span>

    o

     <div id="app"><span>VueJS</span></div> 

    , como observamos, en el segundo ejemplo, el elemento span está encerrado dentro de un bloque div, por lo tanto, estamos exportando un único elemento.

  • Style: Aquí podemos agregar el código referente a estilos de nuestro componente, gracias a Vue-loader podemos utilizar out-of-box CSS, SCSS o SASS, así como Stylus u otro pre-procesador siempre y cuando se añada a la configuración de webpack. Y si no queremos hacerlo de esta manera, siempre podemos utilizar un archivo de estilos independiente sin ningún tipo de inconvenientes.

Sabiendo esto, modificaremos el bloque script con el siguiente código:

export default {
    name: 'app',
    data() {
      return {
        pokemons: [
          {name: "Bulbasaur", captched: false},
          {name: "Ivysaur", captched: false},
          {name: "Venusaur", captched: false},
          {name: "Charmander", captched: false},
          {name: "Charmeleon", captched: false},
          {name: "Charizard", captched: false},
          {name: "Squirtle", captched: false},
          {name: "Wartortle", captched: false},
          {name: "Blastoise", captched: false},
          {name: "Pikachu", captched: false},
        ]
      }
    },
  }

 

 

Podemos observar que hemos añadido un par de atributos, primero name, este atributo es una buena práctica especificarlo en nuestros componentes, ya que nos brinda mejores opciones de depuración al brindarnos mensajes de error mas claros, así como la posibilidad de llamarse a si mismo desde el template.

Además añadimos el atributo data, el cual es una función que nos retorna un objeto con los valores que queremos pasar a nuestro template, en este caso, únicamente tenemos un vector de pokemons :D. Si, cuando utilizamos componentes en VueJS, podemos utilizar cualquier atributo de manera normal, excepto data, el cual tiene que ser llamado como una función que devuelve un objeto.

Seguidamente agregamos un poco de código html en el bloque template.


<div id="app">
    <div class="col-xs-12">
        <h1 class="text-center">Pokédex</h1>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <ul class="list-group">
                <li class="list-group-item text-center" v-for="pokemon in pokemons">
                    <span>{{ pokemon.name }}</span>
                </li>
            </ul>
        </div>
    </div>
</div>

 

 

Nada extraño, sólo añadimos la estructura básica de una lista de elementos, con un par de clases de estilos que nos proporciona el template que añadimos al inicio, podemos observar la primer directiva que veremos en esta entrada v-for. Esta directiva de VueJS se aplica como un atributo al elemento html sobre el cual queremos iterar. Mientras iteramos, visualizamos el nombre de cada pokemon en nuestro vector dentro del párrafo utilizando {{}}.

Hasta este punto la aplicación debería de verse de la siguiente forma:

Mostrando lista

Mostrando lista

Pero, ¿qué tal si quisieramos saber en que iteración nos encontramos? Sencillo, VueJS nos proporciona del valor $index, el cual podemos utilizar de la siguiente manera:


...

<li class="list-group-item text-center" v-for="(pokemon, $index) in pokemons">
    <span>ID: {{ $index }} - Name: {{ pokemon.name }}</span>
</li>

...

 

 

En este caso, $index toma el valor de la posición del elemento en el que nos encontramos en la iteración actual, y en el ejemplo lo utilizo como el ID del pokemon. (Claro que no existe ningún pokémon con id 0 según recuerdo :D)

Clases dinámicas

En nuestra aplicación, sería bueno saber que pokémon ya capturamos. Por ejemplo, podríamos darle un estilo diferente a estos elementos. Para esto podemos vincular el atributo class a una propiedad, utilizando la directiva v-bind o su versión corta “:”.

Con v-bind o “:” podemos tomar cualquier atributo de los elementos html y añadirle propiedades dinámicas de VueJS. Veamos esto en código. Primero modificamos el bloque script:


...

methods: {
      toggleCaptched(pokemon) {
        pokemon.captched = !pokemon.captched
      }
    }

 

 

Añadimos el atributod methods, en el cual podemos declarar todos los métodos que usaremos en nuestro componente, en este caso, sólo estamos definiendo una función que recibe como parámetro un pokémon, y modica el valor de su atributo captched. Ahora modificamos los estilos.


.captched {text-decoration: line-through;}

 

ünicamente creamos una clase que hará que el texto aparezca “tachado”.

Luego modificamos el código del template.


...

<li v-for="(pokemon, $index) in pokemons" 
            class="list-group-item">
            <div class="row">
              <div class="col-xs-8" :class="{'captched': pokemon.captched}">
                <span>ID: {{ $index }} - Name: {{ pokemon.name }}</span>
              </div>
              <div class="col-xs-4">
                <button class="btn btn-xs btn-primary pull-right" 
                  @click="toggleCaptched(pokemon)">
                  {{ !pokemon.captched ? 'Capturar' : 'Liberar' }}
                </button>
              </div>
            </div>
          </li>
...

 

Aquí estamos viendo el concepto de binding de VueJS en acción, primero modificamos un poco la estructura. Al elemento li le añadimos el atributo :class, recordemos que “:” es la versión corta de v-bind, ahí especificamos que se aplique la clase captched a todos aquellos elemenos que su atributo captched sea verdadero.

Después observamos el botón que acabamos de crear, el cual contiene la tercera directiva que veremos en esta entrada, @click. Y si lo preguntas @click es la versión corta de v-on, con esta, hacemos binding pero de eventos a los elementos de nuestra aplicación, cabe recalcar que cuando hacemos binding con v-on, o v-bind, o sus versiones cortas “:” o “@” únicamente podemos utilizar expresiones. En nuestro botón estamos definiendo que al hacer click (@click) queremos que se ejecute el método que creamos previamente y pasamos el pokémon al cual queremos afectar.

Además podemos ver que el texto del botón es una expresión que verifica el estado del atributo del pokémon y añade el texto correcto para mostrar el estado del pokémon. Además de click podemos utilizar otros eventos como keyup, mouseover, etc.

Hasta este punto nuestra aplicación debería lucir de la siguiente forma.

Final 3er entrada

Y bien, es todo por ahora, espero el curso sea de su agrado. Me gustaría me dejaras tus comentarios y nada, te espero en la siguiente.

Saludos.

Curso VueJS – Creando el proyecto (Clase II)

Configuración del proyecto VueJS

Hola a todos, en esta entrada continuo con esta serie de articulos acerca de VueJS, en la cual vamos a configurar nuestro entorno de trabajo para comenzar a construir una aplicación que integra mucho de lo que se necesira para desarrollar aplicaciones reales, como lo son los componentes, consumir servicios web, puesta a producción, etc.

La aplicación que vamos a construir será un pokédex, para tal objetivo haremos uso de la pokéapiAquí pueden observar el resultado que podrá tener la aplicación.

Vista de la aplicación ya finalizada.Vista de loader.Vista de pokemonsVista individual de pokemonAhora, supongo que ya debes tener instalado Node en tu sistema, de no ser así (instalalo ahora y vuelve aquí al finalizar) y el excelente gestor de paquetes para node Yarn (no es obligatorio, puedes utilizar “npm” sin problemas, pero es mejor actualizarse :D)

Con esto ya podemos comenzar, así que “manos al teclado”.

Primero necesitamos instalar una maravilla de herramienta, como lo es Vue-loader. Si no la conocen Vue-loader es una herramienta que nos permite utilizar Webpack en nuestro flujo de trabajo, con lo cual podremos gozar de ventajas a la hora de desarrollar nuestras aplicaciones, como la recarga automatica en cada cambio para poder visualizarlos en el navegador, brindarnos un sistema de modulos para mejorar nuestro desarrollo con JS, compilar en un sólo archivo nuestras dependencias para enviar nuestra aplicación a producción, etc.

Además Vue-loader nos brinda la posibilidad de escribir nuestros componentes en archivos separados con extensión *.vue con el siguiente formato:

¿Genial no lo creen?

 

Manos al Teclado…

Entonces, lo primero que tenemos que hacer es abrir nuestra terminal, consola o simbolo del sistema y ejecutar el comando que corresponda con el gestor de paquetes que estén utilizando:


// Si estás utilizando npm

npm i -g vue-cli

// Si estás utilizando yarn

yarn global add vue-cli

 

 

Esperamos a que finalice la instalación, y en la misma consola nos posicionamos con ayuda del comando cd en el directorio que hayamos destinado para este proyecto.

Ya que estamos en este punto, ejecutamos el siguiente comando:


vue init webpack-simple pokedex

 

 

Vue es el comando que acabamos de instalar, init es la orden que queremos que ejecute, la cual creará un nuevo directorio, con el esqueleto de una aplicación sencilla de VueJS. La siguiente parte del comando anterior es “webpack-simple”, el cual es uno de los templates que vue-loader nos ofrece para iniciar nuestros proyectos, y por último, pokedex es el nombre de nuestro proyecto.

En la consola deberíamos tener una salida como la siguiente:

Vista del resultado en la consola.Siguiente las instrucciones que nos muestra la consola podemos ejecutar la aplicación que acabamos de crear. Entonces los llevamos a cabo:


// Nos posicionamos en el directorio del proyecto.

cd pokedex

// Instalamos las dependencias del proyecto, yo usaré yarn pero pueden utilizar npm sin problema.

yarn install

// Con npm

npm install

// Cuando el proceso finalice ejecutamos lo siguiente

// Con yarn

yarn run dev

// Con npm

npm run dev

Con eso debería mostrarse en nuestro navegador por defecto la aplicación que acabamos de crear.

Vista de la aplicación completa de VueJS.Bien, es todo por esta entrada, espero haber dejado claro lo básico y que les agrade la idea de la aplicación que vamos a crear, si quieren verla en funcionamiento, pueden hacerlo en el siguiente link o también pueden revisar el repositorio en Github.

Si quieren profundizar en cualquiera de las herramientas que vimos aquí, no duden en leer su respectiva documentación, o si lo prefieren dejen sus comentarios y con gusto les responderé.

Nos vemos en la siguiente entrada.

Saludos.

 

Curso VueJS – Hola Mundo (Clase 1)

Hola a todos, en esta entrada quiero escribirles sobre está librería (progressive framework, como ellos lo denominan) que he estado probando y utilizando últimamente, y que la verdad me ha parecido increíble, se trata de VueJS [Sitio Oficial].

VueJS Logo

Si no conocías a VueJS, aquí te dejo la descripción de su sitio oficial.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Básicamente VueJS, nos brinda otra opción más para tener en cuenta en nuestro patrón MVC, pudiendo ocupar el lugar de la V (View).

Pero, ¿por qué utilizar VueJS?

 

VueJS está diseñado desde cero para ser incrementalmente adaptable, cuenta con una característica llamada Declarative Rendering, que no es más que un sistema de plantillas para representar de forma declarativa datos en el DOM utilizando una sintaxis sencilla.

VueJS también nos proporciona Reactividad, y bueno, en su sitio oficial tienen una excelente comparativa con otras librerías y frameworks, como lo son ReactJS, EmberJS y AngularJS.

Y bien, a lo que estamos aquí, veamos un sencillo ejemplo de lo que nos aporta VueJS, realizando el mundialmente conocido “Hello World”:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>Hello World with VueJS!</title>
</head>
<body>
  <div class="container">
    <div class="jumbotron" id="app">
      <h1 class="text-center">Vue JS - Hello World</h1>
      <p class="text-center"></p>
    </div>
  </div>

  <script src="https://unpkg.com/vue@2.0.8/dist/vue.js" charset="utf-8"></script>
</body>
</html>

Como podemos notar, sólo tengo la estructura básica de una página HTML, en la cual hago referencia a Bootstrap y a VueJS desde el CDN que recomiendan en su sitio oficial.

Ahora justo antes de la etiqueta de cierre de body abrimos una nueva etiqueta de script para meter nuestro código de Vue y escribimos lo siguiente.

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

Como podemos ver, simplemente estamos creando una nueva instancia de Vue,
y declarando unos valores que recibe el objeto constructor de Vue.
Primero tenemos “el”, que recibe el elemento donde VueJS trabajará, aquí podemos
pasar cualquier tipo de selector CSS valido.
Luego tenemos “data”, el cual es un objeto, donde pasamos los datos que queremos que
se muestren en nuestra vista, aquí únicamente estamos pasando la clave “message” con
el mensaje que queremos mostrar.

Y ahora, si notaron en el código HTML tenemos una etiqueta p vacía,
la modificamos para que quede de la siguiente manera:

<p class="text-center">{{message}}</p>

Quedando nuestro código así:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>Hello World with VueJS!</title>
</head>
<body>
  <div class="container">
    <div class="jumbotron" id="app">
      <h1 class="text-center">Vue JS - Hello World</h1>
      <p class="text-center">{{message}}</p>
    </div>
  </div>

  <script src="https://unpkg.com/vue@2.0.8/dist/vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        message: 'Hello, VueJS!'
      }
    });
  </script>
</body>
</html>

Ahora, si todo está correcto, podemos visualizar nuestro archivo en el navegador
y veremos algo como esto:
Clase 1 - VueJS
Bien, por ahora es todo, este es la introducción a esta serie de entradas que tendremos sobre este grandioso y potente framework.

Puedes encontrar el código en este repositorio de GitHub.

Si te gustó por favor, no dudes en compartirlo, y dejar tus comentarios.
Saludos.

Creando aplicaciones web con Sinatra y Ruby: más allá de los Rieles.

Hola y bienvenido. En esta entrada voy a dar una breve introducción a Sinatra y Ruby, el cual es posiblemente el segundo framework más utilizado del lenguaje.

Sinatra y Ruby

En la actualidad, cuando se escucha o se lee acerca del lenguaje de programación Ruby, suele interpretarse erróneamente como Ruby on Rails, esto gracias a la falta de conocimiento de muchos pseudo-programadores que piensan que son una misma cosa. Así que definamos conceptos, Rails  es un marco de trabajo (framework para los puristas), del lenguaje Ruby, el cual nos permite desarrollar aplicaciones web. Fue usado en sus inicios por Twitter, así que debe ser bueno ¿cierto?

Rails nos brinda todo para que podamos desarrollar aplicaciones robustas, proporcionándonos desde un inicio una estructura siguiendo la arquitectura MVC (Modelo-Vista-Controlador), y muchas otras cosas, pueden visitar su documentación si es que aún no lo conocían para ver más detalladamente sus bondades, yo aquí los espero…

¿Listos? Bien, continuemos…a estas alturas podrás estarte preguntando, ¿por qué utilizar otro framework cuando Rails nos proporciona tanto? La respuesta es sencilla, Porque Rails nos proporciona tanto. ¿No quedó claro? Dejame explicarte un poco más.

Sinatra y Ruby

Sinatra se define a si mismo como un DSL para crear aplicaciones web en Ruby con un mínimo esfuerzo. Esto lo logra quitándonos características las cuales según nuestro proyecto, no necesitamos, pero es mejor que veamos código cierto.

Lo primero que debemos hacer es instalar la gema de Sinatra.

Sinatra y RubyUna vez que termina de instalarse, vamos a ver lo sencillo que es de utilizar,

Cuando utilizamos Rails, debemos generar un proyecto, hacer un par de configuraciones y ponernos a codificar, con Sinatra y Ruby nos olvidamos de esto y vamos directo al código, en mi caso crearé un archivo llamado test-sinatra.rb.

Lo primero que haremos para probar la sencillez y poder de Sinatra es crear una ruta.

# test-sinatra.rb
require 'sinatra'

get '/' do
  '&amp;lt;h1&amp;gt;Mi primer Ruta definida con Sinatra :D!&amp;lt;h1&amp;gt;'
end
Sinatra y Ruby

Sinatra y Ruby

Y al ejecutar esto desde la consola, debemos tener una salida similar a esto:
Sinatra y RubyLo cual significa que nuestro servidor Sinatra está funcionando. Ahora, si desde tu navegador accedes a http://localhost:4567/ deberías tener una salida similar a esta:
Sencillo cierto, en Sinatra, una ruta no es más que un método HTTP
junto a un patrón de coincidencia de URL, donde cada ruta debe estar asociada a su bloque.
Por lo tanto, las siguientes rutas son validas:

get '/' do
  # bloque de código
end

post '/' do
  # bloque de código
end

put '/' do
  # bloque de código
end

patch '/' do
  # bloque de código
end

delete '/' do
  # bloque de código
end

options '/' do
  # bloque de código
end

link '/' do
  # bloque de código
end

unlink '/' do
  # bloque de código
end

Un punto que hay que cuidar con Sinatra, es que las rutas coinciden en el orden en que
son definidas, esto quiere decir que la primer ruta que coincida con la solicitud
del cliente es la que será invocada.

De igual forma, podemos tener rutas dinámicas, las cuales nos permiten definir parámetros
con nombre, los cuales serán accesibles desde el hash params.

get '/hola/:nombre' do
 # http://localhost:4567/hola/Mushr00m
 # params['nombre'] es 'Mushr00m'
 "<h1>Hola, #{params['nombre']}!</h1>"
end

Ahora, para realizar la prueba de esto, debemos detener nuestro
servidor y volver a ejecutarlo. Al hacer esto podemos probarlo ingresando a
http://localhost:4567/hola/:nombre dónde, debemos sustituir :nombre, con
la cadena que deseemos. Debes tener una salida similar a:

Sinatra y Ruby

Nota como en la URL sustituí :name por Programadores, y esto es lo que imprimió el mensaje,
genial ¿cierto? 😀

Eso no es todo, Sinatra nos permite crear las rutas de distintas maneras,
utilizando parámetros de bloque, condiciones, expresiones regulares, además de otras
peculiares formas que Sinatra nos permite.

Como espero poder haber mostrado, Sinatra es una muy buena opción para
crear aplicaciones web rápidamente y de una forma sencilla. Además de esto,
podemos servir archivos de plantillas, les recomiendo lean la documentación oficial,
o si gustan, escribiré otra entrada para profundizar un poco más en este excelente framework.

Y bien, Sinatra es una excelente opción y alternativa a Rails, como framework para desarrollar
aplicaciones web utilizando Ruby, y no se crean, con Sinatra podemos tener las caracteristicas
que nos brinda Rails con a penas un poco de esfuerzo extra.

Espero te sirva esta entrada, cualquier comentario, sugerencia o punto de mejora que encuentres
te estaré agradecido si lo dejas en los comentarios.
Saludos 😀

Nueva versión del navegador “Firefox” nos permite desarrollar aplicaciones para “Firefox OS” fácilmente.

No cabe duda que últimamente todas las noticias que están saliendo entorno a “Firefox OS” son alentadoras, y nos demuestran, que este proyecto va por un excelente camino. Y como la gente de Mozilla nos tiene acostumbrados, la nueva versión de su navegador el mejor en mi opinión Firefox, así como la que ya tenemos disponible en su versión de prueba disponible en Firefox Nightly (versión de Firefox que prueba las funcionalidades antes de su lanzamiento en la versión oficial) nos permitirá desarrollar aplicaciones para Firefox OS directamente desde el navegador, algo que al leer me emociono mucho. 😀

El Web IDE como fue llamado, nos permitirá conectar dispositivos vía “USB” para desarrollar aplicaciones usando las características típicas de los móviles modernos (acelerómetro, brújula, etc.)

La idea de incluir un entorno de desarrollo integrado (IDE) para Firefox OS en las próximas versiones del navegador Firefox tiene sentido, ya que dejará de ser necesario instalar software adicional y facilitará el acceso a los programadores que quieran aventurarse en el mundo HTML5 y JS, sin necesidad de que tengan que aprender el uso de un ambiente de programación nuevo. El WebIDE estará disponible en la versión 31 del navegador Firefox, y esperan que en el futuro sea posible crear aplicaciones no solo para Firefox OS, sino también para iOS y Android.

Una vez creada la aplicación, podremos simular su funcionamiento desde el navegador, ejecutando un sistema de simulación incluido dentro del propio Firefox. En Mozilla Hacks  tienes más información sobre esta forma de programar aplicaciones, donde informan que ya hay varias plantillas disponibles.

También les dejo el video que la gente de Mozilla que publicó, donde nos dan una pequeña introducción:

Eso es todo por ahora, pero antes de irme, me gustaría saber que opinan de este gran proyecto de Mozilla, dejen sus comentarios.

Saludos.