Skip to content

Latest commit

 

History

History
96 lines (74 loc) · 5.38 KB

lesson1.md

File metadata and controls

96 lines (74 loc) · 5.38 KB

Parcel + Scaffolding

Recursos adicionales

Recursos

  1. Servidores locales
  2. ¿Qué son los automatizadores? ¿Qué es Parcel?
    • Cómo empezar con Parcel.
    • Scaffolding de un proyecto. Estructura de carpetas
  3. Entorno de desarrollo y entorno de producción
  4. Opciones avanzadas de configuración de Parcel
  5. Linters
    • ESLint: Linter de Javascript
    • Prettier: Formateador de código sin opinión
  6. Parcel es una alternativa cómoda de...
    • Webpack: El más extendido (y complejo)
    • Gulp: Organizador y planificador de tareas
    • Rollup: Enfoque muy utilizado para librerías JS.

Práctica

En las siguientes prácticas y retos intentaremos abordar un enfoque híbrido donde trabajaremos tanto con tecnologías de frontend clásicas, tecnologías de backend (como node) o enfoque siguiendo la filosofía de devops. Para comenzar un proyecto, es muy importante tener una buena estructura de carpetas, una buena configuración y conocer bien todo el scaffolding que hay detrás del mismo.

  nombre-del-proyecto
    |
    +-- dist
    +-- build
    +-- src
        |
        +-- css
        +-- js
        +-- assets
        |
        index.html
    +-- node_modules
    |
    package.json
    package-lock.json
    .gitignore
    README.md

Un ejemplo de estructura de carpetas de un proyecto

El objetivo de esta práctica es tener un repositorio que siga las buenas prácticas vistas en clases, las cuales tendremos que utilizar de base para las siguientes prácticas que realizaremos. Por lo tanto, lo ideal sería practicar y configurar todo lo posible para trabajar cómodamente durante las siguientes semanas en nuestros proyectos.

  1. Crea en tu entorno de desarrollo una buena estructura de carpetas para un futuro proyecto frontend. El documento HTML debe referenciar a un documento de estilos CSS y a un archivo Javascript, ambos con un contenido mínimo para comprobar que funcionan.

  2. Inicializa correctamente tanto Git como NPM para tener nuestro proyecto bien configurado. No te olvides que, por norma general, node_modules nunca debería subirse a GitHub.

  3. Instala Parcel y utilizalo como automatizador. ¿Debes instalarlo como paquete global o como paquete de proyecto? ¿Si lo instalasemos como paquete de proyecto que debemos tener en cuenta?

  4. Revisa los scripts de NPM. Hay comandos que, posiblemente, sea mejor escribirlos ahí para evitar tener que escribir comandos largos. Crearemos un script dev o start que se encargará de lanzar el servidor local Parcel como desarrollo (con hot reload), otro script build que se encargará de crear la versión definitiva que irá en el entorno de producción. Por otro lado, también necesitaremos otro script deploy que subirá el contenido adecuado a GitHub Pages.

  5. Instala y configura ESLint y Prettier para tu proyecto.

  6. Escribe un buen README.md donde documentarás los pasos realizados para hacer esta práctica.

Criterios importantes

  • Uso de una buena estructura de carpetas
  • Uso de GIT/NPM
  • Exclusión de node_modules (y otros) en GitHub
  • Utilizacióno del automatizador Parcel
  • Buena gestión de scripts de NPM
  • Utilización de ESLint/Prettier
  • Documentar la práctica en el README.md

Retos

Los siguientes retos pueden enfocarse como páginas individuales adicionales que pueden enlazarse desde la página HTML principal.

  1. Vinilo: Crea un disco de vinilo lo más realista posible haciendo uso de HTML y CSS. Intenta no utilizar imágenes. Esta parte la podremos utilizar de base para la próxima práctica. · Previsualización de ejemplo

  2. Assets con Parcel: Investiga como importar assets (recursos estáticos) para utilizarlos en nuestra página con Parcel.