Skip to content

merunga/product-list-vanillajs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Contenido de pill sobre arquitectura y diseño de aplicaciones con vanillajs

Demo

Getting started

  • Instalar deps: yarn o npm install
  • Servidor de desarrollo: yarn start o npm start
  • Tests: yarn test o npm test
  • Linting: yarn lint o npm run lint
  • Deploy a gh-pages: yarn deploy o npm run deploy

Pasos de la demo

  • mostrar el producto terminado
  • extraer historias de usuario
  • comenzar con el boilerplate listo en codesandbox

Controlador

  • explorar las historias de usuario y determinar cuales serian las funciones de controller
    • productoCrear
    • productoIncStock
    • productoDecStock
    • productoEliminar
    • productosFiltrar
  • escribir los tests para cada funcion, explicar rapidamente el mock de utils

Modelo

  • Discutir la forma de debe tener el state

Vista

  • Comenzar con el mock estatico ya listo, tanto html como css
  • Identificar los "bloques de la interfaz"(aka componentes)
  • Extraer el html estatico a 2 archivos, uno para form y otro para lista y crear view-controllerpara hacer el renderUI on window.load
  • Crear un array estatico de productos y generar dinamicamente la lista

Modelo

  • Crear store

Vista-Controlador

  • Crear event listener para el form
  • Crear event listeners para los productos

Vista

  • crear un renderList independiente

Si hay tiempo implementar funcionalidad de filtrado:

  • tests
  • controller
  • ui
  • event-listener

Model

  • localstorage

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published