Soluciones BackEnd 2016

Las soluciones JavaScript para el servidor que marcan tendencia en el desarrollo back end durante este 2016. Continuación de la saga que iniciamos con FrontEdge.

  • Mi apuesta de mercado sigue empezando por la base, el lenguaje JavaScript. En concreto su última y muy necesaria versión: el conocido ES6. En el lado del servidor destaco la disponibilidad de Promesas de forma nativa..

  • Las aplicaciones crecen y se controlan por su API.Así que este es el punto al que más atención debes prestarle. Por supuesto que hay que cumplir con el estándar REST y hay que documentar todo nuestro código. Pero para ser más productivo y mantener actualizado el sistema, te propongo que uses RAML. Un lenguaje para documentar APIs que con las herramientas adecuadas permite la generación de pruebas, esqueletos de aplicaciones e infraestructura.

  • El ya viejo conocido NodeJS se ha modernizado y a partir de la versión 4, especialmente en la 5, admite la mayor parte de la sintaxis ES6. Además ha mejorado su velocidad en un 25% gracias a la actualización del motor V8 que procesa internamente el JavaScript.

  • En la base de datos irrumpe con fuerza la nueva versión de MongoDB 3.2, que incorpora grandes novedades como: sistema de almacenamiento más rápido, índices parciales, validación de esquema y el esperado join entre colecciones .

En esta presentación tienes más información acerca de lo que llamo backEdge : tecnología utilizable, de última generación y con enorme potencial.

En este video tienes la charla que di con o que llamo Desarrollo Web presentando las tendencias tecnológicas del 2016.

CompartirComentarios

Soluciones FrontEnd 2016

Inicio el año proponiendo una selección de tecnologías que serán tendencia en el desarrollo front end durante este 2016.

  • Mi apuesta de mercado empieza por la base, el lenguaje JavaScript. En concreto su última y muy necesaria versión: el conocido ES6. Tras siete años desde la anterior gran revisión, el éxito y la popularidad de JS no podía esperar más. Y tu tampoco debes esperar más para conocerlo y usarlo.

  • Existe una creciente necesidad de dependencias externas en nuestra aplicaciones y sobre todo incorporar librerías provenientes de otros entornos y desarrolladas con variantes de JS. Para administrar todo ello propongo JSPM, que se incorporará definitivamente a nuestro toolbox durante el 2016.

  • De entre las librerías y frameworks disponibles, AngularJS continuará siendo el rey. Este viejo conocido está creciendo en ya en grandes empresas, banca y administraciones públicas. Mientras esperamos la gloriosa venida de la versión 2.0, tenemos la oportunidad de adecuar nuestro estilo de programación y desarrollar de manera mas limpia con la versión puente AngularJS1.5

  • En la parte visual, el look & feel propuesto por Google con Material Design es un éxito de aceptación para el desarrollo de aplicaciones empresariales. La librería AngularMaterial es una implementación para Angular de dicha especificación gráfica. Moderno y con enorme potencial.

En esta presentación tienes más información acerca de lo que llamo frontEdge : tecnología utilizable, de última generación y con enorme potencial.

Presentación frontEdge

Si tienes tiempo, mira este vídeo con una charla en la que comentamos estas y otras tecnologías para programadores.

video frontEdge

CompartirComentarios

7 formas de incluir Bootstrap en nuestro proyecto

1- Descargando los archivos

Haz clic en el botón “Download Bootstrap” y se descargará una carpeta comprimida, al descomprimirla te encontrarás las versiones compiladas y minificadas de Bootstrap así como los iconos que utiliza:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

2- Para usuarios de GitHub

Bootstrap es un proyecto en código abierto así que puedes clonar o hacer fork desde GitHub

3- Código fuente original

Lo obtienes al hacer clic en el botón “Download source”. Lo que obtienes son los archivos LESS y Javascript originales. Esta opción requiere Grunt y Node.js y se estructura dentro de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/

4- Fans de Bower

Si tenemos Git y Bower instalado simplemente debes teclear en tu terminal:

1
$ bower install bootstrap

Y el pajarito hará todo el trabajo.

5- NPM Install

Tan fácil como con Bower solo que esta vez debes teclear en tu terminal:

1
$ npm install bootstrap

6- Versión en SASS

A pesar de que Bootstrap 3 fue escrito en LESS (aspecto que cambiará en la versión 4, que será en SASS), existe una versión para SASS que puedes descargar en el botón “Download SASS” para facilitar su inclusión en proyectos en Rails, Compass o solo SASS.

7- CDN

Por último, si no quieres descargarte nada puedes utilizar los links del proveedor de CDN y referenciarlos en tu HTML:

1
2
3
4
5
6
7
8
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

Esta es la manera más fácil pero no podrás trabajar sin conexión a internet.

CompartirComentarios

Introducción a Bootstrap

Bootstrap es un conjunto de archivos HTML, CSS y Javascript bien definidos y exhaustivamente testados que componen una sólida estructura sobre la cual construir tu proyecto web o aplicación.

¿Por qué debo utilizar Bootstrap en mi proyecto?

Empezar un proyecto web desde cero puede ser laborioso y te puede llevar bastante tiempo mientras vas construyendo los diferentes componentes y testándolos en los diversos navegadores.

Bootstrap te provee de una biblioteca de componentes reusables que puedes usar en cada proyecto, desde un sistema de rejilla o “grid”, una barra de navegación, botones o estilos tipográficos, todos ellos preparados para funcionar en todos los navegadores y adaptarse a todos los tipos de pantalla, tanto de móvil, como tablet o escritorio.

Con Bootstrap te ahorras todo el trabajo inicial y además tienes un código revisado y testado que además es mantenible y escalable, una sólida estructura sobre la cual construir tu proyecto.

Práctica común

Hoy en día su uso se encuentra muy extendido, y no es extraño encontrarse ofertas de trabajo en las cuales además de conocimientos de HTML y CSS y Javascript se exige el dominio de Bootstrap. La suave curva de aprendizaje hace que sea una herramienta sencilla de usar por todos los miembros de un equipo de desarrollo, lo que incrementa la productividad.

¿Por dónde empezar?

Para descargar la última versión debes acudir a la página http://getbootstrap.com/ y pulsar el botón “Download Bootstrap” una vez hecho esto te dirigirá a la sección “Download” de la página. Hay diferentes maneras de integrar Bootstrap en tu proyecto, en este artículo hablaremos de la primera de ellas que es descargarnos la carpeta comprimida.

En el apartado “Bootstrap” de la sección “Download” te encontrarás otra vez el botón de “Download Bootstrap”, esta vez al clicarlo se descargará una carpeta comprimida que se compone de:

  • Una carpeta ”css”: Incluye todos los estilos predefinidos por Bootstrap.
  • Una carpeta “fonts”: Incluye una fuente de iconos svg listos para usar.
  • Una carpeta “js”: Con todo el javascript necesario para que los componentes y efectos de Bootstrap funcionen.

Una práctica común es empezar el proyecto con estas carpetas e incluir a través de tu HTML los archivos que vas a utilizar. Normalmente bootstrap.min.css y bootstrap.min.js. Además deberás incluir JQuery en tu proyecto para el correcto funcionamiento de los plugins.

Una vez hecho esto te debería quedar un HTML inicial parecido a esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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">
<!-- Los 3 metatags de arriba deben ir al principio del head -->
<title>Mi primer tema con Bootstrap</title>
<!-- Incluye el css de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Incluye nuestro propio CSS -->
<link href="css/styles.css" rel="stylesheet">
<!-- Este código es necesario si queremos dar soporte a IE8 -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hola!</h1>
<!-- Incluye jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Incluye el JS de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Con esto ya estarías listo para empezar tu proyecto con Bootstrap y, con la ayuda de la documentación de Bootstrap, ir incluyendo los módulos y clases que necesites.

Cómo norma general nunca modifiques los archivos originales de Bootstrap, para añadir tus estilos propios o modificar los de bootstrap.css lo mejor es que crees una hoja de estilos independiente de bootstrap.css, lo mismo para el archivo bootstrap.js, así para actualizar tu versión de Bootstrap simplemente tendrás que descargarte la última versión y sustituir los archivos bootstrap.min.css y bootstrap.min.js por los de la nueva versión.

En siguientes artículos profundizaremos un poco mas sobre las diferentes opciones que tienes para incluir Bootstrap en tu proyecto.

CompartirComentarios

Para qué puedo usar NodeJS

NodeJS se ha hecho muy popular por dos razones relacionas: potencia y escalabilidad. Ambas derivadas de su modelo de ejecución asíncrona no bloqueante.

Se basa en el lenguaje JavaScript: sencillo, versátil y ampliamente conocido. NodeJS complementa a JS con librerías de sistema que sacan un gran rendimiento a los ejecutables.

El uso más inmediato de NodeJS está en la programación de servicios web. Tanto en la creación de APIs como sirviendo páginas tradicionales. Esto le ha valido que se le conozca como el JavaScript del lado del servidor.

Pero, más allá de la web destaca en entornos empresariales. Se puede utilizar para construir aplicaciones de escritorio con iniciativas como (NW)[] y (electron)[]. También y sobre todo se usa para scripts de administración o monitorización en departamentos IT. Pequeños proyectos aplicables a sistemas de ficheros, máquinas y servidores. Y una derivada de esto son los proyectos de ayuda al desarrollador que se integran en los development workflows de cada vez más empresas de programación en cualquier lenguaje.

Dada la capacidad de procesamiento asíncrono es una herramienta ideal para generar sistemas que respondan en tiempo real. Y por su escasa demanda de hardware se usa también en proyectos de Internet of Things

En definitiva podemos decir que NodeJS y su ecosistema proponen un nuevo paradigma de desarrollo que eleva a JavaScript como lenguaje de propósito general.

CompartirComentarios

Por qué AngularJS

En este vídeo charlamos sobre AngularJS y el momento actual de desarrollo, y el porqué de su éxito.



Video en YouTube

CompartirComentarios

Introducción a MongoDB

¿Qué es MongoDB?

MongoDB es una base de datos orientada a documentos con esquema dinámico. Esto le permite ofrecer un alto rendimiento y facilita el desarrollo de aplicaciones. A cambio nos impide tener Joins y Transacciones algo muy habitual en bases de datos relacionales, pero sin lo que se puede vivir.

¿De qué se compone?

Después de su instalación disponemos en un directorio de varios ejecutables que componen la aplicación servidora y sus herramientas. El ejecutable fundamental será mongod que es el servidor, es el motor de manejo de datos. Para acceder al servidor se nos ofrece una aplicación de consola llamada mongo. Este es un intérprete de JavaScript y con él, podemos comunicarnos con la base de datos.

¿Cómo funciona?

MongoDB almacena documentos en formato JSON. Bueno realmente lo hace en BSON que es un superconjunto de JSON. BSON es un formato binario que optimiza espacio, rendimiento y aporta funciones extra sobre JSON. Pero esencialmente para nosotros como usuarios toda la entrada salida es en JSON.

Como los documentos se almacenan en JSON y la consola es un interprete JavaScript, la verdad es que la consola ofrece una potencia enorme para realizar operaciones de inserción, selección y manipulación de datos. Cabe destacar que la consola es un programa e intérprete síncrono. Con algunos drivers como el de NodeJS el trabajo es puramente asíncrono.

¿Se parece a SQL?

Si vienes del mundo relacional, cuando llegues a Mongo tendrás que ajustar tu punto de mira al definir tus estructuras de datos. Como una primera guía te diré que hay una ligera equivalencia entre Mongo y los SQL

SQL -> MongoDB

DataBase -> DataBase

Table -> Collection

Row -> Document

Field -> Property

Join -> Embedded

Index -> Index

La enorme diferencia está en que en una colección se pueden guardar documentos con esquemas distintos, y que esos esquemas pueden incluir documentos complejos, como arrays y subdocumentos. A esta falta de rigor al definir el esquema se la conoce
en inglés como schemaless. Estamos ante una base de datos que almacena documentos de esquema dinámico.

Lo anterior es sin duda un valor diferencial a favor de Mongo pues facilita mucho el desarrollo y evolución de las aplicaciones. Otra cosa es la ausencia de Joins y Transacciones entre colecciones que obliga a diseñar y codificar de manera metódica para garantizar eficiencia e integridad en las consultas. La sugerencia es aprovechar sus fortalezas para minimizar las debilidades.

¿Y entonces?

MongoDB tienes campos de aplicación en los que supera a los sistemas relacionales en potencia y facilidad de desarrollo. Pero, hay que saber escoger la herramienta mas adecuada para cada caso. Ahora que ya sabes un poco de que va esto de MongoDB puedes empezar a buscar aplicaciones dónde seguro que le sentará como un guante.

CompartirComentarios

ng* el ecosistema de AngularJS

Lista de componentes para ampliar AngularJS que te ayudarán a mejorar tus proyectos.

  • AngularUI: Antes de programar nada mira si estos chicos ya lo han hecho antes: utilidades, componentes visuales, bootstrap y…
  • ng-grid: Si tienes que mostrar datos en forma de tabla, este es tu punto de partida.
  • ngProgress: Para incorporar una barra de progreso que informe a tus usuarios de la actividad de la aplicación.
  • RestAngular: Librería especializada para consumir servicios REST de manera avanzada e intensiva.
  • angular-aop: El AOP encapsula los Aspectos del código relacionados con instrumentación y seguimiento, liberándolo para la lógica de negocio.
  • textAngular: Editor de textos cpn doble binding, formatos, estilos…
  • angular-translate: Tener una interfaz en distintos idiomas es una tarea cada vez mas común… y complicada. Esta librería es un gran ayuda.
  • angular-field-splitter: Útil para descomponer un campo lógico en varios inputs físicos: Códigos de cuenta, teléfonos, fechas
  • angular-gm: Para mostrar mapas de Google de forma dinámica enlazados con tu modelo
  • ng-slider: Una barra con punteros para selecionar rangos de forma visual
CompartirComentarios