Agile JavaScript

Domina JavaScript, el lenguaje del futuro, profundizando en el manejo de ES6+ y construyendo un proyecto real con React y AWS lambda, el servicio de serverless de Amazon. Todo ello desde una perspectiva Agile, donde aprenderás a hacer testing y a trabajar de forma más profesional.

¿Cuando y donde?

Nuestra próxima edición presencial será en Valencia a finales de Septiembre de 2018. Esta será una convocatoria pública abierta a todo el universo de adictos a JavaScript. Si trabajas en una empresa donde ya sóis varios y os interesa una edición “in-house”, no dudes en contactar con nosotros :)

¿Cuales serán los contenidos?

La duración del curso será de 16 horas repartidas en 4 sesiones de 4 horas, las cuales incluyen los contenidos teóricos, los ejemplos y prácticas y una sesión de MOB programming donde analizar todos juntos los principales errores que solemos encontrar en el código JavaScript de proyectos reales.

Módulo 1: JavaScript

La madre del cordero :) En este módulo daremos un buen repaso a lo que ya sabes de JavaScript. Veremos como están los estándares a día de hoy, las últimas novedades del lenguaje y que conocimientos mínimos de testing y tooling necesitas para poder trabajar de forma efectiva y profesional con el lenguaje.

JavaScript sin jQuery Comenzaremos por repasar todo lo que ya puedes hacer con JavaScript en el navegador sin necesidad de un framework específico, tanto a la hora de interactuar con el DOM, como en las comunicaciones asíncronas con el server utilizando distintos protocolos de acceso. ¿Quién necesita ya jQuery?

ES6+: Babel, Class, Destructuring, Arrow functions, Modules y más. Seguiremos conociendo el lenguaje en más detalle. Con la llegada de ES2015 aka ES6 inicialmente y, más adelante de ES2016, ES2017 y lo que nos deparará el futuro con ES.next, etc, se han introducido todo un nuevo abanico de funcionalidades que debemos conocer y que mejoran las capacidades y la expresividad del lenguaje. Lamentablemente, gran parte de ellas no se pueden utilizar en los navegadores de forma generalizada, por lo que introduciremos Babel como herramienta de transpilado de código a una versión compatible y extendida como es ES5.

Async: Promise y async/await. El dominio de la asincronía en JavaScript es uno de los aspectos claves a la hora de ser efectivo con el lenguaje. En este sentido, la evolución del lenguaje no ha sido un camino de rosas … partiendo de los cuestionados callbacks, hemos llegado hoy en día a formas de asincronía más generales como son las promesas o, con las últimas versiones de JavaScript async/await, la tierra prometida de la asincronía.

Testing: Jest, Matchers, Mocks y Snapshots. El testing es uno de los conceptos más core de eXtremme Programming (XP). Ya lo decía el gran Kent Beck: Any program feature without an automated test simply doesn’t exist. Curiosamente, JavaScript ha sido desde hace tiempo uno de los lenguajes con más frameworks de test y menos cultura de testing en su comunidad. Los frameworks han ido apareciendo y desapareciendo a la velocidad del rayo y, por fin hoy, tenemos una magnífica combinación de ellos que ha venido para quedarse. Con Jest como abanderado, trabajar con matchers personalizados, crear mocks o comprobar snapshots de componentes visuales es ya algo sencillo y asequible.

NPM and tools: npm, webpack, eslint y flow. La ya conocida como JavaScript fatigue viene a darnos una idea de cuan rápido está cambiando y evolucionando el tooling alrededor de JavaScript. En esta sección analizaremos gestores de dependencias y de nuestra build como NPM, empaquetadores de assets como Webpack o sistemas de ayuda al linting o la verificación estática de tipos como flow. Todos ellos orientados a integrarse para ofrecernos un flujo de trabajo predecible y potente. ¿Qué más puedes necesitar?

Módulo 2: React

A la hora de interactuar con el DOM de la página es cuando JavaScript y los nuevos frameworks como React, VueJS o Angular compiten por la ser la opción de referencia en el mundo del desarrollo frontend. ¿Por qué entonces nos hemos decantado por React? La respuesta a esta pregunta podría abrir un debate sangriento, pero la razón más importante es que seguimos apostando por esta librería en el desarrollo que hacemos de producto y somos realmente felices con su especialización en la vista sin intentar fagocitar el resto de nuestra arquitectura, su estabilidad y compatibilidad entre versiones y su sorprendente evolución e incorporación de nuevas y alucinantes funcionalidades como Fiber en la última v16.

Respecto al curso, a continuación detallaremos algunos de los temas que abordaremos en este módulo.

create-react-app. Aunque tengamos todo el tooling asociado a React bajo control, el valor de create-react-app no es para nada desdeñable. Con esta utlidad podremos “generar” una estructura muy básica de proyecto con la que podremos desarrollar, construir y desplegar nuestra aplicación rica sin más problemas. Desarrollada por Facebook, es la solución de referencia para huir de los boilerplates existentes.

Acceptance testing: user stories, cypress y faker. Como ya comentábamos anteriormente, nuestro propósito es poder testear nuestra aplicación a todos los niveles. Si en la parte de JavaScript presentábamos Jest como herramienta de unit testing, con el UI utilizaremos una herramienta de diseño, depuración y ejecución de nuestros tests de accepción que nos alucinará. Cypress es una herramienta de última generación que reducirá radicalmente el tiempo de construcción y mantenimiento de este tipo de tests. Y todo ello sin selenium!!! :)

React: JSX, Functional components, Properties, Property types, State, Fragments, HOC y más. Esta sección constituye el núcleo de aprendizaje de React y nos llevará a explorar desde aspectos más básicos como la modularidad, manejo de propiedades o gestión básica del estado a las últimas novedades en React y la construcción avanzada de componentes mediante técnicas como Render props o High Order Components. De 0 a 100, paso a paso y con muchos ejemplos.

Integration testing: enzyme y react-testing-library. Si con cypress.io tenemos solucionado el nivel de aceptación a la hora de hacer testing, es hora de ocuparnos del de integración de componentes. Aunque la tendencia hasta hace poco ha sido integrar enzyme para tal objetivo, desde hace unos meses contamos también con react-testing-library como solución alternativa, por lo que merece la pena echarle un ojo :).

React Router. Navegabilidad y posibilidad de acceso directo a distintas partes del interfaz desarrollado, son aspectos que se han convertido en totalmente obligatorios en aplicaciones ricas. Con react-router v4 podremos declarar de forma sencilla las rutas utilizadas y como se relacionan con el resto de componentes de React.

Storybook. Cuenta la historia de tus componentes con Storybook, una forma visual y sincronizada con el código desarrollado de documentar tus componentes, las propiedades, los tipos que definen y hasta las pruebas automatizadas que pasan. La nueva forma de documentar tu biblioteca común de componentes para que su consulta por parte del resto del equipo sea realmente efectiva.

GraphQL. Se ha convertido en el estándar de facto a la hora de modelar consultas que queremos resolver en nuestro backend. Con este lenguaje de query podemos expresar las situaciones más frecuentes de recuperación de información, dando el control absoluto de qué, cuándo y cómo se van a recuperar los datos utilizados en nuestro interfaz de usuario.

Styling. Bootstrap. Si no quieres comenzar de 0 a construir tu biblioteca de componentes comunes, siempre puedes arrancar con react-bootstrap. Estos bindings de integración de Bootstrap con React nos permiten, de forma declarativa, utilizar la vasta biblioteca de Bootstrap y sus estilos predefinidos. Porque no siempre hay un diseñador a mano…

Architecture: State management: Redux y Context API. La gestión del estado en React es un tema candente y que está en frenética evolución en estos últimos tiempos. Ante un escenario en el que Redux es casi la implementación de referencia a nivel de arquitectura y gestión del estado, se publica en React v16.3 la nueva Context API y, al mismo tiempo, se afianzan alternativas como MobX. Un mundo apasionante que mejorará la manera en que estructuramos nuestras aplicaciones y, en consecuencia, su posterior mantenimiento.

Módulo 3: Serverless

El nuevo paradigma de serverless está rompiendo con fuerza en el panorama del desarrollo de aplicaciones Cloud Native. El punto clave es no tener la obligación de crear un nuevo server o máquina virtual para desplegar un servicio. Para conseguirlo, utilizaremos el servicio de Lambda de AWS, el cual permite desplegar aplicaciones implementadas en NodeJS, Golang, Java, Python o C#. El objetivo es sencillo, 99.999% de disponibilidad pagando únicamente por la CPU/memoria consumida.

Serverless introduction and AWS. Comenzaremos describiendo la estrategia serverless que están siguiendo en el mercado proveedores como AWS, los cuales ya permiten desplegar micro-servicios en la nube sin definir la infraestructura subyacente.

AWS lambda. Continuaremos aprendiendo lo que es AWS Lambda y cómo podemos definir código que actue como pegamento entre los distintos servicios de AWS, aunque el meollo de la cuestión vendrá en los siguientes apartados en los que analizaremos como invocar código alojando en AWS Lambda para que se pueda utilizar como servicio invocándolo por HTTP.

AWS API Gateway and custom domains. Elemento clave dentro de la infraestructura propuesta para invocar por HTTP los servicios almacenados en AWS Lambda. En este apartado aprendemos que es el API gatway y cómo definir este conjunto de llamadas dentro de un dominio propio.

Serverless framework. Armados hasta los dientes con nuestros conocimientos sobre la plataforma, entraremos de lleno en el trabajo con serverless.io para poder gestionar todo el proceso de forma automática desde un único punto. Ya estamos listos para crear nuestros micro-servicios en JavaScript sin necesidad de provisionar ningún servidor :)

¿Quien imparte esta formación?

Ricardo Borillo

Llevo desarrollando aplicaciones ricas con JavaScript desde hace más de 15 años, durante todo esto tiempo no he parado de dar formaciones y charlas alrededor de JavaScript y de su ecosistema. Adicionalmente, ofrezco servicios de revisión y asesoramiento en arquitectura de frontend a empresas, contando con Idealista y TheMotion entre mis últimos clientes.

Mi principal objetivo es dar a conocer el lenguaje y sus herramientas desde una perspectiva ágil, centrada en la calidad del código y en poder aplicar de forma sencilla técnicas consideradas más avanzadas como testing y/o refactoring.

Actualmente imparto un curso presencial sobre Java, React y Docker en el Centro de Postgrado de la Universitat Jaume I de Castellón. Por otra parte, enseño refactoring en Agile@Work. Genero contenidos en Programmer@Work y GenBeta Dev. Organizo decharlas y, desde hace ya un par de años, participo en el desarrollo de proyectos en la academia de emprendedores StartWars Lab.

Puedes encontrarme en @borillo en Twitter o en LinkedIn.

Jaime Perera

Soy un desarrollador apasionado por la calidad en el desarrollo de software. Llevo más de 10 años trabajando con metodologías ágiles y XP (testing, pair programming, …). En las empresas que he trabajado, como idealista o IoTsens, he formado parte de los equipos encargados de formar al resto de empresa en buenas prácticas, clean code, testing, y refactoring.

Gran parte de mi carrera profesional la he pasado desarrollando en JavaScript y en el ecosistema Java, tanto en backend como en Android, pero me gusta colaborar en todas las fases de desarrollo. Así, tengo amplia experiencia en todas las fases/tipos de testing y he sido responsable de DevOps (despliegue, integración continua, mantenimiento de la infraestructura,…), entre otras cosas.

En mi trabajo actual, en Bia360 desarrollando una aplicación de gestión de subcontratas, soy desarrollador full stack, desarrollando en React y Java y manteniendo la infraestructura con Docker en AWS.

En lo que respecta a la formación, siempre me gusta ir más allá de la tecnología. Esto se pone de manifiesto en mis charlas, donde me centro más en trabajar con Legacy Code, testing o refactoring. Actualmente, imparto un curso presencial sobre Java, React y Docker en el Centro de Postgrado de la Universitat Jaume I de Castellón.

En redes, estoy en Twitter y LinkedIn. También genero contenidos en Programmer@Work.

¿Cuánto cuesta?

Y, ¿Cuánto cuesta esta inmersión en el JavaScript del futuro? Pues por sólo 250 € podrás compartir esta experiencia con nosotros en un grupo reducido (15 personas) en el que poder aprender participando.

APUNTAME!! LO QUIERO!! LO QUIERO!!