Domina JavaScript, el lenguaje del futuro, profundizando en el manejo de ES6+ y creando interfaces ricas y complejas con React. Todo ello desde una perspectiva Agile, donde aprenderás a hacer testing y a trabajar de forma más profesional.
¿Cuando y donde?
Disponemos de una nueva edición en abierto del curso que se realizará Castellón en colaboración con el CEEI Castellón y su iniciativa SOMA TechHub.
El curso tendrá lugar en el salón de actos del CEEI Castellón los días 6, 8, 13 y 15 de Mayo de 16:00 a 20:00.
Si quieres que te avisemos cuando convoquemos una edición del curso o 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.
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 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, sistemas de ayuda al linting o la verificación estática de tipos. 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, Error Boundaries 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. De 0 a 100, paso a paso y con muchos ejemplos.
Integration testing: 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 meses contamos 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.
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.
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.
¿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.
