Master Front End Lemoncode ¿Qué puedo aprender?



by Braulio Diez


by Braulio Diez

El otro día nos contactó Sergio Gordillo interesándose por el Máster Front End Lemoncode, tuvimos una conversación muy interesante en la que fuimos desglosando el contenido del mismo, módulo por módulo, y recuerdo que cuando terminamos me comentó... Braulio, ahora sé como funciona tu máster y en que se distingue de otros tipos de Bootcamps, te animo a compartir lo comentado. Bueno, dicho y hecho... aquí tenéis este post :).

Bootcamps... Bootcamps... Bootcamps

Hoy en día abres la nevera y sale un Bootcamp, levantas una piedra y sale otro, vas al bar y... con tanta oferta ¿Cómo saber cual es el que mejor se ajusta a mis conocimientos y cual es "otra cosa"?

Toy Story meme, Bootcamps Bootcampos por todos sitios le dice Buzz a Buddy

En este post vamos a diseccionar el Máster Front para ver si se ajusta a lo que tú necesitas. Lo primero, si no tienes experiencia programando, es fundamental que antes de cursar nuestro máster, aprendas las bases, en nuestro caso te ofrecemos un paso previo: nuestro Bootcamp JavaScript, está enfocado a que aprendas a programar usando como lenguaje vehicular JS, una vez que lo has superado puedes ver si:

A. Te gusta esto de desarrollar.

B. Si te animas a seguir con el Máster Front End.


¿¿Comoooorrr?? ¡Pero si hay Bootcamps que en 4 meses te enseñan back y front desde cero! Aquí nuestro consejo es que preguntes a algún conocido tuyo que sea programador con experiencia y te diga lo que opina sobre esa aproximación.

Este máster parte de que tienes una base sólida en fundamentos de programación, si quieres saber si encajas dependiendo de tu perfil tenemos un post que creemos podría serte de ayuda: Máster Front End ¿Es para mi?

La Dinámica

Sobre cómo se desarrolla esta formación, nuestro objetivos son:

  • Que aprendas mucho y bien.

  • Que puedas ir a tu ritmo (sea rápido o lento).

  • Que no tengas presión, … para fechas de entrega y agobios está el trabajo, lo importante es adquirir los conocimientos y la práctica.

¿Qué hacemos para conseguirlo?

  • Primero te ofrecemos dos versiones: la de convocatoria con clases en vivo, y la continua, en la que cuentas con la grabación de las sesiones + material y lo más importante un mentor a tu disposición para resolverte dudas cuando te quedes atrancado.

  • Las clases se graban, con lo que si un día no puedes asistir por algún motivo o quieres repasar algún tema siempre tendrás la sesión a mano (incluso la puedes descargar y verla sin conexión a internet).

  • Cuentas con material adicional como por ejemplo, video resúmenes, así puedes ir al grano si quieres repasar un tema en concreto.

  • Si tienes dudas cortas las puede resolver por slack, si son de más calado, nos ponemos de acuerdo en una hora que venga bien a alumno y profesor y montamos una tutoría por videoconferencia.

  • En cada módulo se plantean unos laboratorios con una parte de obligada entrega:

    • Estos no tienen fecha límite de entrega.

    • Puedes entregar un mínimo y más adelante volver al mismo, completarlo y pedir que te los reevalúen.

    • Contamos con una sesión específica en cada módulo del máster para explicaros el enunciado del laboratorio y resolver dudas.

  • El máster es muy intenso, puedes cursarlo en dos ediciones, convalidándose lo entregado en la anterior, también te ofrecemos poder pasar a edición continua si en un momento dado ves que encaja mejor en tu horario.

Los profesores

En Lemoncode ofrecemos servicios de consultoría a través de Basefactor, los profesores internos de nuestro equipo están curtidos en consultoría, y los externos son grandes profesionales expertos en las materias que imparten, en total el equipo del Máster Front End cuenta con 11 docentes.

La duración

El máster tiene una duración de 6 meses (sin contar con pausas por vacaciones de navidad o agosto), y opcionalmente (es muy recomendable pero muchos llegáis muy cansados a esa altura del máster, o con otros compromisos), podéis participar en uno a varios trabajos fin de máster en equipo (más detalle sobre esto en la secciones siguientes :))

Estructura de contenido a alto nivel

Una de las cosas que más preocupan cuando uno ve un temario de un Bootcamp o Máster es... ¿Cómo de profundo se meten en cada materia? Es muy fácil agarrar un montón de "palabrotas de tecnologías" y soltarlas en una programación docente...


Antes de empezar a detallar que se cubre en cada tema, comentaros que en el máster distinguimos tres tipos de materia:

  • La troncal: está se imparte jueves y viernes de 19 a 22 horas, y es la que consideramos fundamental para superar el máster, de hecho es la que evaluamos en los correspondientes laboratorios de cada módulo.

  • Las máster classes: siempre que definimos un módulo, se quedan muchos temas interesantes en el tintero (que podrían incluso dar para un máster por si mismos :)), por ejemplo ¿Cómo funcionan las pasarelas de pago? ¿Oye eso de OAUTH2 qué es? ¿He oído algo acerca de d3js para generar gráficas avanzadas...? Estás sesiones son muy interesantes, y completan vuestra formación, pero es importante no perder el foco el temario principal, las ponemos en días que no colisionen con las clases troncales.

  • El módulo de introducción desarrollo móvil: ¿Cóooomor? ¿Qué hacéis ofreciendo desarrollo móvil en este máster? Es algo que nos gustaría preguntar a los antiguos alumnos... :), durante varias ediciones nos lo han venido pidiendo y nosotros respondíamos: "esto es un máster de Front no se cubre desarrollo móvil", tras analizar bien el porqué de esta petición... les dimos toda la razón, todo se acaba tocando, y decidimos montar unas sesiones de introducción en las que podéis ver PWA, React Native y Flutter, este módulo no es troncal, pero es interesantísimo de ver, a muchos alumnos os anima a hacer vuestros pinitos sabiendo que podéis aplicar parte de lo aprendido.

Los Trabajos Fin de Máster

Llevamos once ediciones puliendo este área, nos hemos dado cuenta de que:

  • El objetivo de estos TFM es que te ruedes y adquieras experiencia, esto lo ponemos como opcional ya que puede que en tu trabajo estés ya desarrollando con lo que aprendes en el máster y no tengas tiempo para colaborar (aunque es altamente recomendable).

  • Lo ideal es que lo puedas arrancar el TFM cuando quieras y puedas tener la implicación que te venga bien, por ejemplo puedes empezar implementando un caso pequeño, cortar una temporada y animarte con otro, o al revés implicarte a tope para aprender (en los TFM participan alumnos de diferentes ediciones).

  • Es importante que te definan bien el caso, arrancar con pair programming, contar con soporte y revisión de tus Pull Request.

  • Y nada mejor que poder enseñar en una entrevista de trabajo el código que has hecho, para ello el proyecto ha de ser open source.

  • Otra cosa muy importante, que el proyecto llegue a producción y puedas mostrarlo en funcionamiento.

Así pues en el TFM, entras cuando quieres, pides caso en alguno de los proyectos que tenemos activos (son proyectos open source y que se publican como herramientas gratuitas) y …manos a la obra, si por lo que sea te surge un imprevisto nos avisas y le pasamos el caso a otro compañero.

Aquí tienes algunos proyectos de los que hemos arrancado y llevado a producción:

El temario por módulos

Pasemos al temario, veamos módulo por módulo que se cubre.

Seminario previo - Conceptos de Git

Dependiendo de dónde hayas estado trabajando o estudiando, puede que no hayas tenido oportunidad de trabajar con Git o sólo con lo básico.


Aquí te ofrecemos un material grabado con una introducción a esta tecnología.


En el máster utilizamos Github para la subida de las prácticas que entreguéis.


Si estas familiarizado con esto te puedes saltar este módulo.

Módulo 1 - Layout

En el módulo de layout nuestro objetivo es que te pongas al día con la maquetación web moderna, que cubrimos:

  • Conceptos de HTML / CSS: veremos que son los elementos, como funcionan los selectores CSS, el concepto de cascada, la herencia, la especificidad, el modelo de caja, el posicionamiento... (ojo es recomendable que si tienes experiencia cero maquetando, te hagas previamente algún tutorial básico de HTML y CSS para conocer los tags elementales).

  • FlexBox: La aparición de Flexbox fue toda una revolución, es un estándar de maquetación que ha solucionado muchos quebradores de cabeza a los desarrolladores, sobre todo ahora que los navegadores web (evergreen) lo soportan bastante bien, en este módulo arrancamos por mostraros los problemas que nos podemos encontrar maquetando "a la antigua", después cubrimos los conceptos clave de contenedor e items, jugamos con propiedades como flex wrap, aprendemos a alinear y justificar contenido, definir una ordenación en los items, controlar con que factor crecen o se hacen más pequeños los elementos al redimensionar, como alinear un elemento en concreto... y crearemos varios ejemplos de layouts.

  • CSS Grid: Poco después de la aparición de Flexbox, salió otro estándar muy interesante: CSS Grid, este tardo un poco en ser popular ya que la adopción en los browsers tomó su tiempo (de hecho en IE11 su implementación es parcial), hoy en día, si no tienes que dar soporte a IE11, es un complemento estupendo para Flexbox, resuelve casos que con la otra aproximación serían más complicados.

    ¿Qué cubrimos en esta parte?: conceptos básicos, filas y columnas, porcentajes y auto, nombrando líneas, colocando items, grid vs inline grid, posicionamiento negativo, auto flow, auto rows, referenciando en items, short hands, notación repeat, definiendo areas, usando la propiedad gap, justificación / alineación de elementos y contenido, comparación de CSS Grid y Flex box.

  • Maquetación responsiva: en los últimos años hemos tenido una explosión de dispositivos y resoluciones a las que nuestro desarrollo web se debe de adaptar y ofrecer una buena experiencia de usuario, en este módulo asimilaremos las técnicas básicas (fundamentos fluidos, contenido flexible, manejo de media queries), que herramientas tenemos a mano para ayudarnos a probar nuestros diseños, y como manejarnos con media queries.

  • SASS / Post CSS y variables HTML: A poco que nuestro CSS crece, nos damos que cuenta de que se nos puede hacer complicado de mantener, nos podemos encontrar valores harcodeados en mil sitios, trozos de código que se repiten, problemas de compatibilidad entre navegadores, o que nuestro código es difícil de seguir... tecnologías como SASS y Post CSS nos hacen la vida un poco más fácil, permitiéndonos trabajar con una extensión del lenguaje, y generando después un CSS plano 100% compatible con lo que espera un navegador web, por otro lado las variables HTML han ido tomando fuerza en los últimos años, sobre todo teniendo en cuenta que podemos actualizar los valores en tiempo real. Aprender las bases de SASS es importante, ya que hay conceptos de esta tecnología que los podemos ver aplicados incluso en algunas librerías de CSS in JS.

Además de esto, en el módulo de bundling veremos cómo funciona CSS Modules, una aproximación muy útil para poder crear islas de CSS, y en el de frameworks tendremos una máster class sobre CSS in JS (Emotion y Styled Components).

Como colofón a este módulo, tenemos las máster classes de conceptos diseño para desarrolladores, y la de prototipando con Figma.

Módulo 2- Lenguajes

JavaScript

Este bloque lo dividimos en dos apartados:

  • Fundamentos, es decir, los conceptos básicos de JavaScript que provienen de su versión más primitiva, la cual consideramos el baseline de partida: ES5. Aquí repasaremos los tipos de datos primitivos y estructurales (objetos y arrays), los diferentes operadores, directivas de control, notación JSON o tratamiento de errores entre otras cosas. Nos detendremos, además, en conceptos clave como ¿Qué es el hoisting? ¿Cuál es el ámbito de las variables? o ¿Qué es un closure y porqué es tan importante? Y, como guinda del pastel, entraremos en las tripas del lenguaje para abordar un concepto clave: el modelo prototípico y la herencia basada en prototipos.

  • JavaScript actual, o lo que se conoce como ESNext, es decir, el conjunto de características de reciente incorporación que hacen de JavaScript un lenguaje moderno y flexible. Abordaremos gran cantidad de nuevas características, de forma resumida: let/const, optional chaining, nullish coalescing, arrow functions, clases, destructuring, operadores spread y rest, template literals, map/set/weak map/weak set, símbolos, módulos, etc. Además, como colofón, haremos una introducción sobre JavaScript asíncrono con conceptos como callbacks, promesas o async/await.

TypeScript

En esta segunda parte profundizaremos en el tipado de JavaScript mediante el popular lenguaje TypeScript. Comenzaremos con las anotaciones de tipos más sencillas, tipos primitivos y nuevos tipos añadidos por TypeScript. Aprenderemos a tipar interfaces, funciones y clases y acabaremos estudiando las características más avanzadas y potentes del lenguaje: tipos genéricos, tipos recursivos, tipos avanzados y tipos de utilidad.

Además de todo esto, en este módulo contaremos con una máster class estrella: Introducción a la programación funcional con JavaScript.

Módulo 3 - Bundling

El tema del bundling suele ser algo que mucho desarrolladores intentamos "evitar" y pensar que es más tareas de devops, incluso nos ponemos a usar cli's que nos oculten complejidad... hasta que nos explota en la cara, si le dedicas un tiempo de aprendizaje te va a permitir ganar mucho control sobre tu desarrollo web.


En este módulo primero asimilarás conceptos, ¿Por qué me hace falta esto del bundling? ¿Qué debo tener en cuenta para llevar mi sitio a producción? ¿Cómo hago para integrar tecnologías tan potentes como TypeScript o SASS en mi proyecto?.
De herramientas de bundling nos centramos en Webpack, el estándar actual de facto, aprenderemos en que se basa (procesado, plugins, loaders,puntos de entrada...), montaremos un proyecto desde cero, aprenderemos a configurar Babel para transpilar ES6, TypeScript…, integraremos CSS tanto propios como de terceros con varios sabores de generación de salida, también aprenderemos a configurar CSS modules, como manejar imágenes, como dar soporte a React en nuestro proyecto, como crear múltiples configuraciones, manejar variables de entorno, como visualizar el peso de nuestro bundle categorizado por paquetes, …


Como herramienta de bundling simple y de uso rápido también veremos Parcel, y como en casos sencillos se convierte en un zero-config bundler muy interesante.

Módulo 4 - Frameworks

Este módulo es el principal del máster, una vez que hemos asentado la base previa de los módulos anteriores, toca liarse la manta a la cabeza y evaluar las diferentes frameworks que tenemos para crear nuestras aplicaciones web.
En este módulo cubrimos varios frameworks ¿Por qué no centrarnos sólo en el más popular?: Los frameworks y librerías vienen y se van, es bueno conocer varias aproximaciones para así poder elegir el más acertado según tus necesidades, y también conocer ventajas e inconvenientes dé cada uno, además nunca sabes en que proyecto puedes acabar.
En cuanto a peso, en la docencia seguimos el grado de uso de cada uno, siendo React el framework con más sesiones en él módulo, seguido por Angular, Vue y finalmente Svelte (esté último va ganando tracción y hemos aumentado el número de sesiones en la última edición).

Que se cubre con React: empezamos por ver en que se fundamenta React, después pasamos a desarrollar una aplicación muy básica como primera toma de contacto, de ahí nos zambullimos de pleno con React Hooks (useState, useEffect, useDebounce, custom hooks, memo, useCallback, setState func, hooks y async closures, useRef, promise unmounted…), pasamos a aprender como funciona react router y toca una parte muy interesante, aprender a estructurar tu aplicación para que está pueda escalar y tener un buen nivel de mantenibilidad: como definir tus rutas, como manejar formularios utilizando librerías de gestión de estado y de validación, como manejar datos cross cutting (perfil de usuario, tema de tu aplicación...), trabajar con layouts, escenas y pods, como crear components comunes... y para finalizar este módulo utilizaremos la librería para crear interfaces de usuario más popular en React: Material UI.

Que se cubre con Angular: primero cubrimos los conceptos básicos, ¿Qué es Angular? ¿Es una librería o Framework? ¿Qué viene a resolver? pasamos a jugar con el cli de Angular y creamos nuestro proyecto, después de esta primera tomar de contacto pasamos a cubrir conceptos tales como que son los componentes, como funciona el binding en Angular, las directivas estructurales, las directivas de atributo, los template forms, las pipes, los servicios, los model forms, como hacer llamadas Http, los decoradores @input @output, el routing, y como hacer un build, dejándolo todo listo para subir a producción.

Que se cubre con Vue: aprenderemos a crear un proyecto desde cero, como añadir rutas, manejar eventos, enlaces a datos, como funcionan las computed properties, trabajar con estilos, en el temario se cubre una parte con Vue 2 y Vue 3.

Que se cubre con Svelte: ¿Qué viene a solucionar este iframework? ¿Qué trae de novedoso? Vemos los conceptos que diferencian a Svelte del resto de frameworks o librerías. Comenzaremos con un get started, partiendo de un boilerplate, utilizando como no Typescript, y hacemos un recorrido por los conceptos base y la forma de trabajar con Svelte, desde la importancia de la reactividad y cómo mantener sincronizado el DOM con el estado de nuestra aplicación, cómo comunicar componentes padres e hijos, manejar flujos condicionales y bucles en el markup de nuestros componentes, gestionar eventos y bindings, para terminar con el concepto de store y context, que nos permite acceder a nuestros datos comunes desde múltiples componentes de nuestra aplicación.

En cuanto a master classes, esté módulo viene cargadito, tenemos sesiones extra sobre: principios SOLID, accesibilidad, CSS in JS, NEXTJS, RXJS, MicroFrontEnds, d3js, Web Assembly, Web Components..

Módulo 5 - Unit Tests

Cuando una persona se interesa por el máster, suele preguntar: ¿pero en el módulo de Frameworks cubre unit testing? Y la respuesta que damos es no... para nosotros el testing es tan importante que tenemos un módulo entero dedicado a ello ;-).
Aquí arrancamos por explicar conceptos básicos de testing: porqué hace falta, que es un mock, un stub… después nos ponemos con React, empezamos por probar lógica de negocio, pasamos a probar componentes de UI, utilizando para ello Jest + React Testing Library, aprendemos a probar custom hooks, y a como enfocar los tests de componentes como si un usuario lo estuviese utilizando, todo ello para acabar añadiendo las pruebas a nuestro ciclo de integración continua. Finalmente simulamos cómo trabajaríamos con testing en un proyecto real.
Con Angular, revisamos conceptos básicos, aprendemos a probar pipes, servicios, directivas, componentes, y nos metemos con testing end to end.

De Vue, de momento no cubrimos pruebas unitarias, estamos estudiando en está edición el añadir una sesión.
Para finalizar el módulo nos ponemos a montar pruebas end to end con Cypress, siguiendo la misma filosofía aprendida con testing de componentes, por lo que nos ayuda a tener una base sólida para testear, sea cuál sea la tecnología.

Módulo 6 - API Rest

Saber consumir una API Rest es muy importante, en este módulo vemos como trabajar con los verbos básicos, utilizando el estándar Fetch, así como la librería Axios, también cubrimos conceptos de autenticación y autorización (headers, cookies, JWT token...), después saltamos a GraphQL: una tecnología muy potente, llamada a reemplazar al estándar de API Rest.

Para finalizar tenemos máster classes muy interesantes, cubrimos: OAUTH2, WebSockets, seguridad y pasarelas de pago.

Módulo 7 - Cloud

Ahora que ya sabemos como hacer una aplicación web... toca el momento de llevarla a producción :).


En esté módulo aprenderás que hace falta para generar un bundle de producción, que opciones tienes para subirlo a un proveedor, partimos de las aproximaciones más primitivas (ftp) evaluando que problemas traen, pasamos a despliegue por rama, nos ponemos las pilas con Docker, y acabamos automatizando despliegues con Github Actions.


Además este año como novedad, nos metemos a desplegar con Vercel.

Módulo 8 - Introducción a desarrollo móvil

Y aquí viene el "perro verde" del máster, esto módulo lo hemos metido a petición vuestra, en el feedback de varias ediciones nos pedíais que añadiéramos una introducción a desarrollo móvil con tecnologías hermanas del desarrollo web, en este módulo puedes encontrarte con una introducción a PWA, otra a React Native y finalmente una sobre Flutter.


¿Nos animaremos algún día a montar un Máster / Bootcamp sobre desarrollo móvil? ¿Quién sabe? :)

¿Te apuntas?

Son ya doce ediciones del Máster, en las que hemos ido puliendo y mejorando cada una, el resultado es una formación en la que tienes que trabajar mucho, pero como recompensa adquieres unos buenos conocimientos en el área de Front End.


Para saber más sobre este máster: