Aprende TypeScript, Angular 2 e Ionic 2

Si te gusta el desarrollo web sabrás que las tecnologías que se usan cambian cada día. Y si no tienes ni idea, ya te lo digo yo😉 cada semana aparece una nueva librería, framework, editor, lenguaje, tecnología de construcción de proyectos… Vamos, una locura.

 

Selección_135

Resulta que está la cosa calentita porque uno de los frameworks de desarrollo de aplicaciones web del tipo SPA más utilizados, desarrollado por Google, está a punto de publicar su nueva versión. Pero no es una versión más, es una re-escritura completa, usando incluso un nuevo lenguaje. Estoy hablando de Angular 2. Se espera que se publique a mediados de Mayo. Aunque se puede desarrollar con el viejo y querido JavaScript ES5, está preparado para aprovechar las nuevas características del nuevo y flamante JavaScript ES6. Pero va más allá, los desarrolladores de Angular 2 recomiendan usar TypeScript, un JavaScript supervitaminado con tipado estático.

Selección_136

Para colmo, el framework de desarrollo de apps móviles híbridas ionic también está a punto de publicar su versión 2, precisamente basada en Angular 2, y por tanto también se recomienda usar TypeScript para desarrollar con él.

2.png

Como ves, se avecinan cambios importantes en el desarrollo web. Así si quieres estar al día de todo lo que se avecina, más vale que te pongas las pilas. Hay un montón de recursos por la web para aprender TypeScript, Angular 2 e Ionic 2, pero si te pierdes con tantas cosas y prefieres una guía en castellano, aquí te dejo mi tutorial de TypeScript, Angular 2 e Ionic 2  con 257 slides cargaditas de detalles para que tengas una visión general de estas tecnologías que cambiarán el desarrollo web como lo conocemos.

A disfrutar😉

Sidelab es ahora CodeUrjc

Acabamos de empezar 2016 y es momento de cambios. Año nueva, vida nueva😉. En este post os queremos contar qué hemos hecho en estos dos últimos años (desde que escribimos el último post) y lo que tenemos pensado hacer de aquí en adelante.

logo_cetrado_negro.png

Lo primero es lo primero, hemos cambiado de nombre: Sidelab se convierte en CodeUrjc. El nuevo nombre corresponde “más o menos” a un nuevo acrónimo: Grupo de Consultoría y Formación en Desarrollo Software de la Universidad Rey Juan Carlos. Aunque en realidad ese nombre destila mucho más que el acrónimo… Por un lado, queremos centrarnos en lo que nos gusta hacer, enseñar a desarrollar software, de ahí lo de “code”, el nombre que mejor resume lo que nos gusta a los programadores. Por otro lado, nos sentimos orgullosos de formar parte de la Universidad Rey Juan Carlos, la casa que nos ha visto nacer y crecer profesionalmente.

CodeUrjc (antiguo Sidelab) está formado por profesores de informática de la URJC a los que nos gusta programar, aprender nuevas tecnologías, profundizar en las que más nos interesan y compartir con los demás lo que hacemos. Algunas veces también hemos estado involucrados en pequeños desarrollos, otras veces en grandes proyectos con más gente, pero sobre todo hemos dedicado nuestro tiempo a la formación (asignaturas de grado, másteres, cursos, charlas, etc.). El cambio de nombre a CodeUrjc tiene como objetivo que sea más fácil identificarnos con la formación y la consultoría en el desarrollo software.

Como cambiamos de nombre, también cambiamos de logo. El nuevo es mucho más identificable con nuestra casa, la Universidad Rey Juan Carlos. Esperamos que el nuevo logo os guste más que el antiguo de sidelab.

Con el cambio de nombre han llegado cambios en todas nuestras páginas web y diferentes redes sociales. Aquí están los nuevos:

Lo dicho, esperemos que el cambio os guste. Para celebrar la nueva imagen, estamos preparando un curso muy interesante sobre desarrollo web… estad atentos.

Feliz 2016!

 

Arreglando el histórico en git

Si usamos git en el día a día, probablemente nos habremos encontrado alguna vez con que olvidamos configurar nuestro user.name y/o user.email, el sistema coge valores por defecto y acabamos teniendo commits con autor o dirección de correo inválidos para el repositorio remoto (sea Github, Gerrit, BitBucket o cualquier otro). En tal caso hay que arreglar todos los commits incorrectos sí o sí.

Arreglar el último commit

Esta fiesta es la más sencilla. Para arreglar el último commit basta con hacer:

git commit --amend --author "New Author Name <email@address.com>"

Arreglar varios commits o un commit antiguo

Vale. La hemos cagado. Y ahora nos encontramos con miles de líneas de código que hemos ido comiteando sin hacer push, y de pronto tenemos a git rechazando el push porque el commiter es incorrecto para el repositorio remoto, es decir, su dirección de correo  y/o autor no los reconoce.

Podríamos decirnos que estamos jodidos y tratar de endosarle el marrón a otro, pero la verdad es que el problemón tiene solución. Es un poco pesada y usa algunas cosas de git que son peligrosas (puedes cambiar el orden de los commits de todo el repo jodiendo al resto de desarrolladores de tu equipo), pero siguiendo estas instrucciones con cuidado igual salvamos el culo…

En primer lugar hay que encontrar el commit más reciente en el repositorio local anterior a todos los que tienen mal el commiter. Por ejemplo, supón el siguiente histórico:

afffg2 patxi@gmail.com
cdfg34 jorge@gmail.com
3f55a4 patxi@gmail.com
345dg8 pepito@gmail.com
658dff patxi.gortazar@gmail.com
... a partir de aquí todo ok

Supongamos que hay que apañar el mail de patxi@gmail.com y cambiarlo por patxi.gortazar@gmail.com. El commit más reciente anterior a los que tienen el email patxi@gmail.com que hay que cambiar es el 345dg8 de pepito@gmail.com.

Ahora hacemos un git rebase con este commit como referencia:

git rebase -i -p 345dg8

Se abre un editor de texto que nos muestra todos los commits desde el 345dg8 en adelante. Cada commit está en una línea y comienza por “pick”. Tenemos que ver cuáles queremos cambiar y sustituir “pick” por “edit” y guardar. La cosa debería quedar tal que así:

edit afffg2 patxi@gmail.com
pick cdfg34 jorge@gmail.com
edit 3f55a4 patxi@gmail.com
pick 345dg8 pepito@gmail.com

Guardamos y salimos. Git nos informa de cómo proceder, básicamente vamos a ir avanzando haciendo commits parando en cada uno de los commits que le hemos dicho que queremos editar. Estos commits los apañaremos y seguiremos adelante con el proceso hasta el final.

Vamos paso por paso. En primer lugar, git habrá avanzado por defecto hasta el primer commit: 3f55a4. Vamos a arreglar este commit. Para ello usamos “git commit –amend” indicando el nuevo autor y correo electrónico:

git commit --amend --author "Patxi Gortázar <patxi.gortazar@gmail.com>"

Se abre un editor por si queremos cambiar el mensaje del commit. No tocamos nada, simplemente guardamos y salimos.

Ahora avanzamos hasta el siguiente commit que queremos arreglar:

git rebase --continue

Git se para en el commit afffg2. Arreglar este commit de la misma forma:

git commit --amend --author "Patxi Gortázar <patxi.gortazar@gmail.com>"

Aunque hemos arreglado todos los commits, aún le tenemos que decir a git que avance hasta el final, dejando el repo con los mismos commits que tenía antes de comenzar:


git rebase --continue

Listo. Prueba a hacer un pull (por si acaso) y un push.

EclipseGavab 2.0

EclipseGavab es una distribución de Eclipse que desarrollamos en Sidelab y venimos usando desde hace más de 5 años en la Universidad Rey Juan Carlos como el IDE de referencia en asignaturas de paradigmas y programación. El principal valor de EclipseGavab es que integra soporte para diferentes de lenguajes de programación permitiendo que los alumnos se familiaricen con un único entorno y se puedan centrar en el lenguaje concreto. En aquellos casos en que ha sido posible, incluye también los correspondientes compiladores/intérpretes/máquinas virtuales de dichos lenguajes.

Lenguajes soportados:

  • Java
  • C/C++ (en Windows incluye compilador basado en cygwin)
  • Pascal y ObjectPascal (en Windows incluye el compilador FreePascal)
  • PascalFC (incluye compilador e intérprete en Windows y Linux)
  • Ruby (en Windows incluye intérprete Ruby)
  • Haskell (en Windows incluye ghc)

Puedes descargar EclipseGavab de los siguientes enlaces:

  • EclipseGavab 2.0 Windows Installer (300Mb). Windows XP and Windows Vista installer. Requires 660 Mb.
  • EclipseGavab 2.0 tar.gz for Linux. A tar.gz Linux distribution. It requires the installation of the following tools: Java SE 6 for executing EclipseGavab and Java programming; gcc for C/C++ programming; FreePascal for Pascal programming; ghc for Haskell programming; and Ruby for Ruby programming.

En Ubuntu, los paquetes necesarios son: build-essential, fp-compiler, fp-units-base, fp-units-rtl, ghc6, ruby, sun-java6-jre, y se pueden instalar con el siguiente comando:

sudo apt-get install build-essential fp-compiler fp-units-base fp-units-rtl ghc6 ruby sun-java6-jre

[Editado el 7/2/2014]

En Ubuntu 64 bits es necesario usar una versión Java de 32 bits. En Windows esto no es necesario porque EclipseGavab lleva una versión de java de 32 bits embebida. Se puede descargar el jdk 7 de 32 bits de esta url, pulsando en “Java Download” y seleccionando después la versión “linux x86” de extensión tar.gz.

Una vez descargado Java, se descomprime (tar -xvzf jdk-7-xx.tar.gz) en el home del usuario y se edita el fichero eclipse.ini para que utilice esta versión de Java. Supongamos que la ruta es “/home/user/jdk-7-u51”, el fichero eclipse.ini debe incluir las siguientes líneas inmediatamente antes de la opción “-vmargs”:

-vm
/home/user/jdk-7-u51/bin/java

Enjoy programming!

En el evento Big Data Spain…

Hola a todos, hace tiempo que no escribíamos en el blog. La verdad es que Sidelab ha sufrido cambios importantes últimamente… en breve os contaremos en detalle la nueva situación, pero ahora os voy a hablar de BigData.

Evento "Big Data Spain"

Hoy he estado en la conferencia BigData Spain. Se ha celebrado en la ETSIT de la UPM y ha sido organizada por Paradigma Tecnológico. La verdad es que ha estado muy bien. En este post contaré las cuestiones más relevantes del evento.

Por la mañana hemos tenido las charlas más generales sobre Big Data. La conclusion a la que he llegado es que Big Data en realidad es “processing” de big data. Hemos tenido varias charlas de gente clave en el mundo de BigData. Se han hablado de cuestiones como: Cassandra, otra de Cloud y BigData (de la mano de gente de gigaspaces), de BigQuery de Google y de Apache Pig.

Con lo que me quedo del mini-congreso es que hay muchos enfoques diferentes para trabajar en BigData. Como la eficiencia y la optimización es muy importante, hay muchos enfoques, cada uno de ellos para una tarea específica. Es decir, tradicionalmente lo más normal es que los datos de tu aplicación estén alojados en una base de datos relacional y todos los servicios (almacenamiento, análisis en tiempo real, consultas, informes…) se bases en dicha base de datos. Lo que aprendemos de BigData es que los modelos tradicionales no escalan y hay que utilizar otras tecnologías si queremos escalabilidad. Pero lo más importante es que no hay “una única nueva tecnología”… ahora hay muchas tecnologías diferentes que solventan problemas diferentes. Es más, lo habitual es que esas tecnologías se utilicen “a la vez” en tu sistema. Y eso me recuerda el término de persistencia-políglota de Martin Fowler. Todas estas nuevas formas de persistencia se engloban dentro del movimiento NoSQL, que ahora se empieza a entender como “Not only SQL” (en vez de No SQL).

La conclusión a la que llego es que en movimiento de BigData ya está lo suficientemente maduro como para que se empiece a pensar en la integración de todas estas tecnologías dentro de un mismo paraguas. Y no sólo desde el punto de vista conceptual, de modeloado de datos y de procesado de los mismos, también desde el punto de su ejecución. Hay que tener en cuenta que la escalabilidad es muy importante (junto con la tolerancia a fallos), por tanto el cloud computing (y la facilidad que proporciona el Paas) están muy relacionados con el BigData.

En definitiva… hay que estar al tanto de este movimiento para que no te pille desprevenido. Yo ya me he puesto a tope con MongoDB, una base de datos NoSQL.

¿Cuándo usar BigData? Según el ingeniero de Google: cuando el coste de determinar qué cosas no almacenar es mayor que el coste de almacenarlo todo:)

 

Making Of: Libro de Lenguajes y Procesadores

Como comenté en esta otra entrada, el libro de Lenguajes de Programación y Procesadores lo hemos creado con LaTeX. LaTeX es un sistema de composición de textos que a mí me vendieron (teóricamente) como “céntrate en el contenido, y olvídate del aspecto”. Y digo teóricamente entre paréntesis porque la realidad nunca es tan idílica. Al final las imágenes se te van unas páginas más allá de lo que querrías, conseguir que las palabras se corten bien es un problema aparte, hay que configurar un montón de cosas para que el tamaño de página, encabezados, etc queden como tú quieres…

Además, un libro como el que nos ocupa contiene diferentes recursos: listados de código, diagramas en forma de árbol, figuras… Cada uno de estos recursos requiere importar uno o varios paquetes LaTeX y, en ocasiones, configurarlos adecuadamente. Al final, el proceso se parece bastante a programar. De hecho, utilicé Eclipse para escribir mi parte del libro, utilizando para ello el plugin Texlipse, y todo el libro se encuentra en el correspondiente proyecto de SidelabCode.

Total, que al final dejar el libro como quieres es una tarea en la que a veces hay que hilar muy fino. La parte positiva de todo esto es que me he encontrado con algunos paquetes de LaTeX que son extremadamente útiles y versátiles, y quería dejarlos aquí anotados para uso y disfrute de la comunidad.

Código fuente

La inclusión de código fuente en un libro no es algo que se pueda tomar a la ligera. Los siguientes aspectos me parecían fundamentales a la hora de insertar código en el libro:

  • La tipografía del código fuente debe ser diferente de la del resto del libro y monoespaciada.
  • Las líneas deben ir numeradas para poder hacer referencia a una línea concreta del código o a un bloque.
  • Preferiblemente el código debe tener resaltado de sintaxis.
  • A mi personalmente me gusta que el fragmento del código se separe del texto “normal” de alguna manera (por ejemplo recuadrando el código).

Evalué diferentes formas de hacer esto hasta que di con el paquete perfecto: Listings. Añadir código fuente con Listings es tan fácil como esto:


\begin{lstlisting}[style=Haskell]
suma :: Integer -> Integer -> Integer
suma x y = x + y
\end{lstlisting}

Y el resultado queda como en la imagen:

Aspecto de código Haskell usando Listings

Las palabras reservadas aparecen en negrita, el fondo es de un gris claro para distinguirlo fácilmente del resto del texto, la fuente es monoespaciada y las líneas están numeradas.

Listings trae un montón de lenguajes predefinidos y es sumamente versátil. Es posible cambiar el aspecto de prácticamente todo: comentarios, fondo, números de línea, palabras reservadas… Nosotros lo hemos utilizado para código Java, Haskell, C, Ruby, Pascal, XML, PHP, Awk, bash, Prolog y Perl. Puedes usarlo para un lenguaje que Listings no conozca. Evidentemente no reconocerá las palabras reservadas, pero al menos se mostrará con estilo de código fuente.

Árboles

En un libro donde hay un capítulo dedicado a los compiladores, abundan los árboles de análisis sintáctico. Habíamos pensado hacer estos árboles con algún programa externo, generar la imagen correspondiente y después insertar la imagen en el documento. El problema de este enfoque es que la tipografía de la imagen puede variar mucho respecto a la del texto del libro. Además, hay que tener mucho cuidado con el escalado, para que el tamaño del texto de unas figuras no difiera del de otras.

Buceando un poco por la web, vi el paquete qtree. Con este paquete es sumamente sencillo definir árboles, siempre que se tenga un poco de cuidado con el balanceado de los corchetes que sirven para delimitar los diferentes niveles. El punto indica cuál es la raiz del subárbol correspondiente:

\Tree [.S [.A a b ] [.B a b a ] ]

La sintaxis es sencilla, pero desagradable a la vista. Ahora bien los resultados son espectaculares:

Un árbol generado con Qtree

Diagramas sintácticos

Otro de los recursos que contiene el libro son diagramas sintácticos. Estos diagramas se utilizan en el Capítulo 1 y para generarlos utilizamos el paquete syntax. Syntax forma parte de mdwtools, que incluye también paquetes para formatear gramáticas BNF. He aquí un ejemplo de definición de diagrama sintáctico con syntax:

\begin{figure}
\begin{syntdiag}
<termino>
\begin{stack}\\
\begin{rep}
\begin{stack}
'+'\\
'-'
\end{stack}
<termino>
\end{rep}
\end{stack}
\end{syntdiag}
\caption{\small \emph{Diagrama sintáctico correspondiente a la gramática \ref{gram:termino}}}
\label{fig:diagrama-sintactico-termino}
\end{figure}

Y el resultado (en nuestro caso escogimos diagramas con bordes cuadrados en lugar de redondeados):

Resultado de syntax

Encabezados en versales

Esta es una de las cosas que más fastidiosa resultó. Una vez que teníamos terminado el libro, el editor, con buen criterio, nos señaló que los encabezados de los índices aparecían en mayúsculas, mientras que en el resto del libro los encabezados de las páginas aparecen en versales.

Estuve intentando cambiar el estilo de las páginas de los índices, pero no era capaz. El estilo por defecto para los capítulos no se aplicaba a los índices. Al final opté por particularizar el estilo de los capítulos para cada uno de los índices (hay un índice general, un índice de figuras y un índice de tablas):

\newcommand{\ps@indexheadings}{%
\renewcommand{\@oddhead}{% encabezamiento páginas impares %
\parbox{\textwidth}{
\hfill \textsc{Índice} \hfill \thepage}}
\renewcommand{\@evenhead}{% encabezamiento páginas pares %
\parbox{\textwidth}{
\thepage \hfill \textsc{Índice} \hspace*{\fill}}}}

Ahora, poniendo lo siguiente:

\pagestyle{indexheadings}
\tableofcontents

El encabezado del índice aparece correctamente en versales.

Bibliografía

El último de los temas (que yo recuerde) de interés en la composición del libro fue el estilo de la bibliografía. El estilo bibliográfico normal añade un and entre el penúltimo autor y el último en las publicaciones. Queríamos que apareciera un y. Intentamos cambiar al estilo castellano (con el fichero de estilo spain.bst), pero el estilo era muy diferente y no nos gustaba.

Al final opté por modificar a mano el fichero plain.bst con el estilo normal (renombrándolo) y cambiar el and por y. Sólo hay que cambiar la línea 201:

{ " y " * t * }

Os dejo el diff:

201c201
< { " and " * t * }
---
> { " y " * t * }

Y este es el resultado:

Bibliografía en castellano