https://alanvncs.github.io/challenge-front/

Embora a implementação do projeto conte com tecnologias como Gulp, Sass e Typescript, os únicos pré-requisitos são:

• Node.js

• Algum gerenciador de pacotes como NPM ou YARN

Antes de executar, é necessário baixar o projeto e instalar suas dependências:

git clone https://github.com/AlanVncs/challenge-front.git
cd challenge-front
npm install -y

Com o projeto baixado, será possível executá-lo de duas formas:

• Modo de produção (Express)
• Modo de desenvolvimento (BrowserSync)
  
  

npm run prod

Compila o projeto e inicia um servidor HTTP. A página fica disponível em http://127.0.0.1:1337.

npm run dev

Similar ao modo de produção, porém sempre que um arquivo é atualizado (salvo) no diretório src/, o projeto é recompilado e a página aberta no navegador é atualizada, agilizando o desenvolvimento.

Obs.: Com o comando npm run build, é possível apenas gerar os arquivos no diretório docs/ sem iniciar um servidor HTTP.

No início do carregamento da página, um request é feito e o conteúdo do arquivo docs/data/products.json preenche as informações do carrinho. Ao clicar no ícone, o conteúdo do carrinho é exibido. Clicando novamente no ícone ou fora do carrinho, o conteúdo é escondido.

Assim com os ítens do carrinho, o conteúdo do menu também é obtido através de uma requisição a um JSON (docs/data/menu.json). O menu pode ter vários itens e vários submenus e seu conteúdo é exibido ao passar o mouse por cima. Em tamanhos pequenos de tela (mobile), o menu é escondido e fica acessível através do hamburger icon no canto superior esquerdo.

Os arquivos Javascript e CSS são minificados pelo Gulp (na verdade, por seus plugins), o que aumenta significativamente a rapidez com que a página é carregada. Além disso, sourcemaps destes arquivos são gerados para facilitar uma eventual depuração via browser. Como é recomendado, os sourcemaps só ficam disponíveis quando o projeto é executado no modo de desenvolvimento.
Obs.: A política de acesso aos sourcemaps pode ser facilmente modificada através do Express no arquivo server.js.

O Gulp foi usado para gerenciar todo o workflow do projeto, concentrando as operações de compilação, minificação, geração dos sourcemaps e iniciação do server HTTP. O seu sistema de tarefas (tasks) proporcionou uma maneira simples de executar ações conforme necessário, como rodar o projeto em modos diferentes com uma simples modificação de comando (ex.: "gulp prod" ou "gulp dev").
Plugins utilizados :gulp-sass gulp-typescript gulp-babel-minify gulp-sourcemaps

Para facilitar o desenvolvimento, o CSS e o Javascript do projeto foram implementados, respectivamente, em Sass e Typescript.

O BrowserSync foi usado como servidor HTTP no modo de de desenvolvimento devido à sua funcionalidade de atualizar a página "automaticamente" (browsersync.reload é chamada quando alguma mudança de código é detectada pelo gulp.watch). Isso agiliza muito o desenvolvimento, pois dispensa o desenvolvedor da tarefa de atualizar a página para ver as mudanças.

Além da sua facilidade de uso, o Express, diferente do BrowserSync, é um servidor HTTP puro e por isso é mais adequado para ser usado no modo de produção.

npm run dev

Chama o Gulp no modo de desenvolvimento (gulp dev), que compila os arquivos no diretório docs/ e inicia o BrowserSync. Simultaneamente, inicia o "watching" dos arquivos no diretório src/, fazendo com que sempre que haja alguma alteração neste diretório, os arquivos sejam recompilados no diretório docs/ e o BrowserSync seja notificado.

npm start

Chama o Gulp no modo de produção (gulp prod), que compila os arquivos no diretório docs/ e inicia o Express (server.js).

O maior desafio foi o CSS, principalmente no que diz respeito à reutilização do código e responsividade da página. Não sei (ainda!) como isso é feito no CSS mas certamente dá para melhorar bastante. De qualquer forma, tentei compensar meu défice em CSS integrando outras tecnologias ao projeto e espero que isso agregue valor.

Com um entendimento melhor do CSS e, principalmente, do SASS, foi possível responsivar a página e melhorar a modularização/organização do código. Dessa vez o desafio foi a escolha de layout em partes que não haviam sido definidas pelo enunciado, como por exemplo em resoluções mobile.