- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Consideraciones generales
- 5. Criterios de aceptación mínimos del proyecto
- 6. Hacker edition
- 7. Entrega
- 8. Pistas, tips y lecturas complementarias
- 9. Checklist
React y Angular son algunos de los frameworks y librerías de JavaScript más utilizados por lxs desarrolladorxs alrededor del mundo, y hay una razón para eso. En el contexto del navegador, mantener la interfaz sincronizada con el estado es difícil. Al elegir un framework o librería para nuestra interfaz, nos apoyamos en una serie de convenciones e implementaciones probadas y documentadas para resolver un problema común a toda interfaz web. Esto nos permite concentrarnos mejor (dedicar más tiempo) en las caractrísticas específicas de nuestra aplicación.
Cuando elegimos una de estas tecnologías no solo importamos un pedacito de código para reusarlo (lo cuál es un gran valor per se), si no que adoptamos una arquitectura, una serie de principios de diseño, un paradigma, unas abstracciones, un vocabulario, una comunidad, ...
Como desarrolladora Front-end, estos kits de desarrollo pueden resultarte de gran ayuda para implementar rápidamente características de los proyectos en los que trabajes.
En este proyecto tendrás la oportunidad de re-escribir tu anterior proyecto de la Red Social, pero esta vez usando un framework o una librería.
Creemos que una muy buena manera de profundizar en estas herramientas puede ser eliminando de la ecuación el hecho de que tengas que entender un proyecto desde cero, su alcance, sus particularidades, el flujo, las validaciones, etc. Concéntrate en aprender y utilizar estas nuevas tecnologías.
El alcance del proyecto y el detalle de sus características es exactamente el mismo que el original, incluyendo la parte de Hacker Edition pero excluyendo la parte de UX.
El objetivo principal de aprendizaje es familiarizarse con el desarrollo web usando el framework o librería elegido, y todo lo que ello conlleva: documentación, arquitectura, principios de diseño, paradigma, abstracciones, vocabulario, herramientas, comunidad, ...
Por otro lado, tener que re-escribir un programa es una experiencia de aprendizaje muy valiosa en sí misma, llevándonos a re-evaluar e iterar sobre un producto o prototipo. Dada la velocidad a la que evoluciona la tecnología web, es muy común tener que enfrentarse a este tipo de escenario donde decidimos (o alguien decide por nosotros) que lo mejor para seguir evolucionando una aplicación es re-escribirla usando una nueva tecnología.
Este proyecto se debe "resolver" en duplas.
Discutan y pónganse de acuerdo sobre cuál de los proyectos van a hacer desde cero. Si no se pueden poner de acuerdo en 10 minutos, aquí hay algo que puede ayudar
Investiguen un poco sobre estas dos herramientas propuestas (React y Angular) y elijan con cuál quieren trabajar.
Para comenzar tendrás que hacer un fork y clonar este repositorio.
Ver 03-social-network.
Ver 03-social-network.
El proyecto será entregado subiendo tu código a GitHub (commit/push) y la
interfaz será desplegada usando GitHub pages u otro servicio de hosting que
puedas haber encontrado en el camino.
Antes de elegir un framework, te recomendamos leer los siguientes artículos:
- The deepest reason why modern JavaScript frameworks exist
- Should I use frameworks or libraries such as Angular, React, or VueJS or not?
Hemos preparado algunos videos introductorios:
- Introducción a Frameworks de JavaScript (Lupo)
- Introducción a Angular (Fabián)
- Introducción a React (Elizabeth)
No dejes de explorar la documentación oficial de cada herramienta:
- React - docs oficiales
- React - tutorial
- Redux - tutorial
- create-react-app
- React js en español - tutorial básico, primeros pasos y ejemplos - frontendlabs.io
Independientemente de si eliges React o Angular, todos estas herramientes se usan muchas veces en conjunción con Redux como manejador de estado.
- Producto final sigue los lineamientos del diseño.
- Información sobre instalación y despliegue de tu aplicación.
- Tests unitarios cubren un mínimo del 70% de statements, functions, lines, y branches.
- Pasa tests (y linters) (
npm test).
- Permite crear cuenta.
- Valida email.
- Valida password.
- Muestra mensajes de error.
- Permite iniciar sesión.
- Valida email.
- Valida password.
- Muestra mensajes de error.
- Muestra muro.
- Permite publicar nuevos posts.
- Permite eliminar posts.
- Pide confirmación antes de borrar posts.
- Permite editar posts (in place).
- Permite filtrar posts por público/amigos.
- Permite marcar posts como gustados (like).