CmlKVnLWAAA3_Zu.jpg-large
Los pasados 1, 2 y 3 de Julio de 2016 tuve la suerte de poder acudir al Angular Camp 2016. Ahí, pude disfrutar de una serie de conferencias, talleres y charlas en torno a Angular en la ciudad de Barcelona.

Lo primero que quiero hacer es agradecer que mis responsables en Grupo ASV vieran esta oportunidad tan interesante como la vi yo, y me permitieran y me dieran todas las facilidades para poder acudir.

Tras descubrir que separarte de tu hija por unas noches es más difícil de lo que parece, y unos problemas con Vueling (no fui el único), a las dos y media de la mañana conseguía llegar al hotel. Por suerte, se encontraba muy cerquita de las sedes del evento: el Disseny Hub y el Parc de les Humanitats i les Ciències Socials de Barcelona.

Día 1: Conferencias

El primer día era el de las conferencias, donde veríamos a las superestrellas del mundillo. Tras un mensaje de bienvenida de los organizadores, David Pich y Johannes Weber, empezaron a salir uno detrás de otro.

Todas las conferencias se grabaron y están disponibles en el canal de YouTube del evento.

From .component() to @Component

Todd Motto fue el encargado de abrir las conferencias dándonos unas pinceladas sobre el elemento component en AngularJS y Angular2, promoviendo el uso de componentes sobre directivas para los que aún programamos en AngularJS. Aquí ya empezaríamos a anotar las primeras keywords, como smart & dumb components o intentar ir hacia one-way binding para ir acostumbrándonos a hacer las cosas como se hacen en Angular2.

La charla estuvo basada en este post de su blog.

Angular Material 2: Reward your app with high-quality UI in minutes

Maxim Salnikov nos dio un repaso de lo que está siendo Angular Material 2 (aún en alpha). Material Design nunca ha sido “mi cosa favorita” y Maxim se agobió un poco en la presentación. Pese a todo, me pareció alucinante el esfuerzo que se ha hecho en materia de accesibilidad. De todos modos, mi opinión sobre Material Design ha cambiado desde entonces, e incluso he empezado un proyecto personal con Angular Material.

En este enlace podemos ver los slides de su presentación.

Angular 2 Server Side Rendering

Charla dada por Wassim Chegham. Sí señores, renderización de Angular en el lado del servidor. Adiós problemas de SEO y páginas en blanco hasta que se carga el primer javascript. Hola Angular Universal. Además, prometen que llegará a muchos lenguajes y no se quedará sólo en el ecosistema node.js. Así que ya estoy esperando a ver qué sale para la plataforma Java.

Su presentación está en este enlace.

Sharing Code Between Web and Native Apps

Era el turno de Sebastian Witalec de hablar de NativeScript. Una tecnología que va más allá de lo que hacíamos con Cordova. Aquí, cambian el motor de renderizado de Angular por uno propio. Esto nos permite desarrollar aplicaciones que ejecutan componentes nativos en dispositivos iOS y Android (además de poderlos ejecutar también en la web). Además, NativeScript nos da la capacidad de crear wrappers de componentes nativos existentes y utilizarlos en nuestras aplicaciones.

Aquí tenemos los slides de la presentación de Sebastian.

Building Angular 2 Application with Redux

Evan Schultz nos dió un repaso de Redux. Este contenedor de estados siempre me había resultado interesante, pero después de entender mejor algunos de los puntos que resolvía, lo considero algo cercano a lo necesario para aplicaciones a partir de tamaño medio.

Redux está íntimamente relacionado con los smart & dumb components y el uso de inmutables. Sólo los componentes “listos” se comunican con las acciones; y el almacén de datos es un objeto inmutable. Pese a que podemos “jugar” con inmutables sin auyda, se recomienda el uso de la librería Immutable de Facebook.

El uso de inmutables mejora mucho el rendimiento de la aplicación (tanto en AngularJS como en Angular 2) ya que la observación de los cambios en el modelo no requiere un deep comparing, sino una comparación de punteros.

Existen librerías que facilitan la conexión de nuestros componentes con redux tanto en AngularJS como en Angular 2.

Tras la charla de Evan, me vi este vídeo de integración entre AngularJS y Redux a través de la librería ngRedux. Aunque sencillo, me ayudó bastante a entender ciertos conceptos que no terminaba de comprender:

Angular 2.0 with realtime GraphQL

Uri Goldsthein (o como se le conce por estos lares: ngJesus) nos hizo una presentación sobre GraphQL. Hasta entonces pensaba que era algo propio de Facebook y poco más. Pese a que el concepto me resulta interesante, no le veo una aplicación temprana por mi parte.

TypeScript fundamentals

La charla acerca de TypeScript corrió por cuenta de Christoffer Noring. Podemos descargarla desde aquí.

La última parte de la presentación fue bastante interesante, ya que mostraba un resumen de cómo declarar controladores, directivas, servicios… en AngularJS con TypeScript.

From the World-Wide Web to the World of IoT

Uri Shaked se marcó una de las mejores charlas del día, mostrándonos una aplicación tipo Simon en Angular 2 que exponía su interfaz a través de web (fuente) y a través de una botonera física en una Raspberry Pi. En este enlace tenemos el código fuente de la demo que nos hizo.

Uri está muy metido en temas de IoT y mantiene el proyecto angular2-iot.

Al día siguiente pudimos seguir viéndolo en acción:

  • Moviendo un robot a través de una app en Angular que hace uso de la API de bluetooth de Chrome mobile. El robot era open hardware y estaba creado en su mayor parte con piezas impresas con una impresora 3D.
  • Interactuando con una bombilla (concretamente ésta) a través de la interfaz bluetooth.

Progressive Web Apps with Angular 2

Manfred Steyer fue, para mi, el héroe del Camp. Se cascó una gran conferencia, y mil charlas en los días posteriores. Pese a ser fundamentalmente teóricas, todo lo que explicaba (y muy bien que lo hacía) iba seguido de una demo. Con las PWAs (Progressive Web Apps) vimos cómo instalar aplicaciones web en nuestros Android con elementos precacheados para una carga inmediata, así como la posibilidad de hacer notificaciones push al navegador. También, funcionan de maravilla estando offline y se actualizan cuando vuelves a tener conexión. Vamos, que montado así hay muy poca diferencia con una app nativa.

Haciendo click aquí tendremos acceso a su presentación, mientras que el código fuente del ejemplo está en este enlace.

Angular 2 super-charged: Native desktop power with Electron

Desde hace algún tiempo que le venía siguiendo la pista a Electron, que nos permite crear aplicaciones de escritorio utilizando tecnologías web para la capa de presentación. Además, nos ofrece toda la potencia de node para la lógica y la comunicación con el sistema operativo. Thorsten Hans fue el encargado de la presentación, cuyo código fuente está disponible en GitHub.

Augury

Vanessa Yuen hizo una introducción a Augury. Vanessa nos convenció para usar esta herramienta para desarrolladores (aún en beta), que puede ser para Angular 2 más de lo que fue Batarang para AngularJS.

Closing keynote & group picture

Finalmente, David y Johannes dieron una breve charla de agradecimiento y nos hicimos la fotaza que encabeza este artículo, y algún que otro selfie.

Días 2 y 3: Camp

El sábado y el domingo se llevaron a cabo las charlas y talleres. Se expusieron y votaron muchos temas. A partir de los resultados, se elaboró una agenda  con charlas simultáneas en tres salas.

AppVerse generators

Carlos Rubio nos dio a conocer algunos de los yeoman generators que utilizan para el desarrollo de aplicaciones. A destacar el HTML5 Generator, que pinta bastante bien y ya estoy pensando en hacerles un fork para montarme algo a partir de esto.

 

Desarrollo por componentes con Angular 1.5 y ES6/ES2015

Carlos Azaustre impartió un taller en el que desarrolló una app con AngularJS 1.5.6. Haciendo un uso extensivo del elemento component, siguiendo la guía de estilos de Todd Motto y con un poco de materialize, nos montó una aplicación con el listado de ponentes del Camp de lo más chula. El código fuente está en su GitHub.

En su blog ha publicado un artículo mejor detallado.

Creating a mobile app using Angular2 and Ionic2

La presentación de Rodrigo Cabello y Carlos Landeras nos hicieron un resumen del estado de las aplicaciones híbridas para luego hacernos una introducción a Ionic2 y todo su ecosistema.

Nos hicieron una demo de una aplicación híbrida con esta tecnología cuyo código fuente podemos ver en GitHub.

Create a Spotify song player app using Angular 1.x, TypeScript & Yeoman

Jeff Arese hizo uso del generador ng-poly para crear un player basado en la API de Spotify en tres patadas. Jeff fue otro de los muchos que utilizaron Angular Material para la capa de presentación. A estas alturas, material design ya empezaba a gustarme un poquito más.

El código fuente de la aplicación está en GitHub. Espero tener en breve los slides de su presentación.

Building a MVP with Angular 2, Polymer & Firebase

No pude acudir a esta charla de Michael Prentice al coincidir con otra de NativeScript que también me interesaba. Firebase es otro de los elementos que están pegando fuerte y hay que seguir de cerca. Y más desde que lo adquirió Google…

Existen componentes para integrar Firebase con AngularJS y Angular 2. Lo que no sabía es que Polymer se puede llevar bien con Angular 2 a través de angular2-polymer.

Siempre podré ver la presentación y el código fuente sobre el que se trabajó.

DevOps & Angular 2

Adrián Ferreres nos dio esta presentación, de la que pude extraer algunos conceptos interesantes.

Angular 2 & Firebase in Action

La presentación de los gemelos David y Rubén Chavarri no fue nada comparado con ese pictionary que se curraron. Podemos acceder a la demo, o a su código fuente.

ngSlice

Attila Oláh presentó  ngSlice. Se trata de una herramienta para convertir mockups a un esqueleto de aplicación basado en componentes. Puede resultar muy útil, sobre todo para adquirir “mentalidad de componentes”. Aún está en beta, y aceptan sugerencias de todo tipo.

Modern authentication with Angular 2, OAuth 2 and OpenIDConnect

Lo que os decía de Manfred, que se curró tres presentaciones donde dejó las cosas muy claritas. La primera fue acerca del uso de los mecanismos de autenticación más utilizados actualmente. Aquí la presentación, y aquí el código de ejemplo.

Databinding and performance in Angular 2

Seguimos con Manfred. En su presentación dio un repaso de cómo funcionaba el databinding en Angular 2, y cómo podemos tunearlo para conseguir un mejor rendimiento en nuestras aplicaciones. Puso un par de casos de ejemplo: uno con inmutables y otro con inmutables y observables.

Angular 2’s new newest Router

En su última presentación, Manfred Steyer nos contó el estado de la última versión del servicio de routing de Angular 2. La verdad es que la versión deprecated incluía elementos que me hacían inclinarme por que era una buena herramienta. Sin embargo, parece que en esta ultimísima versión han dejado de estar, haciendo que se parezca más al antiguo ngRouter que al potente uiRouter. Esperemos a ver cómo acaba la cosa.

El código de ejemplo de su presentación está disponible aquí.

ngMetadata

Martin Hochel dio una presentación acerca de ngMetadata. Se trata de un conjunto de decorators para AngularJS, que nos permite desarrollar nuestras aplicaciones de igual modo que si las estuviéramos desarrollando en Angular 2.

Angular2 & NativeScript. App to control a Robot.

Parte del el equipo ngBraves (José Manuel García, Víctor Ocariz, Fernando Martín, Pablo Pérez y Adrián Ferreres) dio una charla de cómo controlar un Robot Mip. Mediante el uso de NativeScript, se consigue crear una app multiplataforma que permite controlar el robot mediante la interfaz BTE (Bluetooth Low Energy). Recomiendo encarecidamente echarle un ojo a la presentación y al código fuentecódigo fuente. En twitter hay algún vídeo al respecto:

Code reuse between web, mobile native and server side

A través de este proyecto, vimos con Pau Martínez  y su compañero Omar cómo crear una aplicación con NativeScript en tres sabores simultáneos: Web, iOS y Android. Tras la charla, pude abordar a Pau con unas cuestiones sobre el enfoque de este tipo de proyectos que me resolvió de buen gusto.

GraphQL Q&A

Continuando con sus charlas del día anterior, Uri hizo una sesión Q&A donde mencionó unas charlas must-see para profundizar en el tema:

Working with interceptors in Angular 2

Aunque el concepto de interceptors de AngularJS se ha perdido en Angular 2, el código de Víctor Olivas nos enseña cómo sobreescribir el servicio HTTP para poder volver a utilizarlos.

Contributing to Angular core

David Rodenas dio unas pinceladas de cómo contribuir, con código o documentación, al core de Angular. Espero tener la presentación en breve

Conclusiones

Se me han quedado algunas presentaciones y código fuente en el tintero, pero aún no he sido capaz de dar con ellas.

La estancia en el AngularCamp ha sido bastante provechosa. Además de conocer cosas nuevas y gente apasionada, me he podido poner al día de lo que está por venir, y he podido ver mejoras a aplicar en lo que utilizo actualmente.

Espero poder volver al año que viene.

Anuncios