gifOS

aka: "buscador de perritos"

Trello v1

Tareas monumentales, poco específicas

Trello v2

Tareas pequeñas, features concretas

Organización

Pensar como si fuese proyecto laboral:

 

- Tareas chicas (features)

- Trabajar en branches + PRs de Github
- Seguir un orden prioritario (idealmente)
- En caso de trabarme ver si es bloqueante y pedir ayuda o resolver de otra manera/seguir con otra cosa

Estructura General:

 

- Dividido en secciones

- SPA (ocultando/mostrando)
- Intentando mantener orden semántico

Código JavaScript

Funciones, variables, eventos

Funciones, variables, eventos

Quilombo

Funciones, variables, eventos

Modulos

Quilombo

Funciones, variables, eventos

Modulos

Quilombo de llamados entre si
+
Qué pasa si saco alguno?

Quilombo

PubSub

PubSub = Publish Subscribe

Patrón de diseño

Componentes Emisores

Módulo Intermediario

Componente Subscriptores

Estructura del componente PubSub

Estructura del componente PubSub

Listado de eventos y funciones asociadas

Guarda eventos en el objeto events (cuando pase A quiero que se haga B)

Desuscribe eventos guardados previamente

Avisa al PubSub que ocurrió un evento X y le pasa parámetros opcionales para las callback

Funcionamiento del componente PubSub

events.on( "evento", funcion(es)Callback )

Componente

events.off( "evento", funcionCallback )

Suscripción a Eventos

Desuscripción a Eventos

events.emit( "evento", params )

Componente

Emisión de Eventos

events.emit( "ocultarMisGifs")

events.on( "ocultarMisGifs", funcionOcultarMisGifs)

events.off( "ocultarMisGifs", funcionOcultarMisGifs)

Ej: Comunicación entre componentes
Mensaje Popup - Borrar Gif

events.on("newPopupDeleteGif", newPopupMessage)

Ok! le aviso a popup cuando ocurra "newPopupDeleteGif" para que haga "newPopupMessage()"

events.on("deleteGif", deleteGif)

Ok! le aviso a MyGifs cuando ocurra "deleteGif" para que haga "deleteGif()"

Ej: Comunicación entre componentes
Mensaje Popup - Borrar Gif

Setup de Eventos

Cuando alguien emita newPopupDeleteGif quiero que me avisen así ejecuto newPopupMessage()

Cuando alguien emita deleteGif quiero que me avisen así ejecuto deleteGif()

Ejecuta newPopupMessage() con los parámetros popupContent

Asigna textos, íconos, funciones a los botones de acción y se muestra

Cuando el usuario hace click en aceptar/cancelar ejecuta la función callback pasada por el usuario en popupContent

La función callback en éste caso lanza un nuevo evento: events.emit("deleteGif", localStorageGifID)

Recibe el evento y le avisa a componente popup que ejecute la función asociada, newPopupMessage()

Ejecución

Ejecuta deleteGif() con localStorageGifID como parámetro

Le avisa a MyGifs que ocurrió el evento y que ejecute la función asociada  deleteGif()

Ej: Comunicación entre componentes
Mensaje Popup - Borrar Gif

Cada click en botón de eliminar gif lanza un evento:

events.emit( "newPopupDeleteGif", popupContent*)

*Objeto con datos para el popup y una función callback que indica que hacer al presionar el botón aceptar/cancelar del popup

Estructura de cada Componente

Estructura de cada Componente

IIFE

Variables locales al componente

Cache DOM (queries)

Eventos asociados al componente (click de botones, acciones, etc)

Funciones y métodos privados

El programa en si es un componente

Problemas durante el proyecto:

 

- POST a giphy (CORS)

- Refactor del JS (x3)
- Mantener controlado el CSS

- Respetar el Trello, prioridades y tareas

Pendientes

Gracias!