React, Angular y Vue 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 proyecto anterior de la red social, pero esta vez usando un framework o una librería.
Creemos que la mejor manera de enfrentarte a estas herramientas es 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.
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 tres herramientas propuestas (React, Angular y Vue) 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.
| Habilidad | Nivel esperado |
|---|---|
| JavaScript | |
| Estilo | 3 |
| Nomenclatura/semántica | 3 |
| Funciones/modularidad | 2 |
| Estructuras de datos | 2 |
| Tests | 2 |
| HTML | |
| Validación | 3 |
| Estilo | 3 |
| Semántica | 3 |
| SEO | n/a |
| CSS | |
| DRY | 3 |
| Responsive | 3 |
| SCM | |
| Git | 3 |
| GitHub | 3 |
| CS | |
| Lógica | 2 |
| Arquitectura | 2 |
| Patrones/paradigmas | n/a |
Para este proyecto esperamos que ya hayas consolidado un nivel 4 en todas tus habilidades blandas. Igualmente para llevar tus habilidades al siguiente nivel, te invitamos a alcanzar un nivel 5 en ellas. Particularmente entrena tu habilidad de autoaprendizaje, de planificación y organización, y también de dar y recibir feedback.
Te aconsejamos revisar la rúbrica:
| Habilidad | Nivel esperado |
|---|---|
| Planificación y organización | 4 |
| Autoaprendizaje | 4 |
| Solución de Problemas | 4 |
| Dar y recibir feedback | 4 |
| Adaptabilidad | 4 |
| Trabajo en equipo (trabajo colaborativo y responsabilidad) | 4 |
| Comunicación eficaz | 4 |
| Presentaciones | 4 |
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?
No dejes de explorar la documentación oficial de cada herramienta:
Independientemente de si eliges React, Vue o Angular, todos estas herramientes se usan muchas veces en conjunción con Redux como manejador de estado.
Otros:
- create-react-app
- React js en español - tutorial básico, primeros pasos y ejemplos - frontendlabs.io
- Angular CLI
- Vue CLI
- 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).