https://github.com/claudimf/alura_performance_web
https://github.com/claudimf/alura_performance_web
alura alura-cursos-online css docker docker-compose gulpjs html-css html-css-javascript html5 node node-js nodejs npm performance-web
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/claudimf/alura_performance_web
- Owner: claudimf
- Created: 2021-02-25T21:02:31.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-02-26T23:02:51.000Z (over 5 years ago)
- Last Synced: 2025-06-09T05:02:04.678Z (about 1 year ago)
- Topics: alura, alura-cursos-online, css, docker, docker-compose, gulpjs, html-css, html-css-javascript, html5, node, node-js, nodejs, npm, performance-web
- Language: CSS
- Homepage:
- Size: 935 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Projeto do [Curso de Otimização de Performance Web do Alura](https://cursos.alura.com.br/course/otimizacao-performance-web)
## Sobre o projeto:
Clone o [projeto](https://github.com/alura-cursos/performance-web) para depois configurarmos o docker.
### Configurar a aplicação no Docker:
1. Cria o arquivo [server.js](https://github.com/claudimf/alura_performance_web/blob/main/docker-compose.yml) para subir o servidor:
```sh
var express = require("express");
var app = express();
var router = express.Router();
var path = __dirname + '/site/';
const PORT = 8080;
const HOST = '0.0.0.0';
router.use(function (req,res,next) {
console.log("/" + req.method);
next();
});
router.get("/",function(req,res){
res.sendFile(path + "index.html");
});
app.use(express.static(path));
app.use("/", router);
app.listen(PORT, HOST);
console.log(`Running on http://${HOST}:${PORT}`);
```
2. Cria o arquivo [Dockerfile](https://github.com/claudimf/alura_performance_web/blob/main/Dockerfile)
3. Cria o arquivo [docker-compose.yml](https://github.com/claudimf/alura_performance_web/blob/main/docker-compose.yml)
4. Adaptar o arquivo [package.json](https://github.com/claudimf/alura_performance_web/blob/main/package.json) adicionando as dependências:
```sh
{
"devDependencies": {
"nodemon": "^1.18.10"
},
"dependencies": {
"ejs": "^2.6.1",
"express": "^4.16.4",
"mongoose": "^5.4.10"
}
}
```
5. Adaptar o arquivo [.dockerignore](https://github.com/claudimf/alura_performance_web/blob/main/.dockerignore) para ignorar os arquivos abaixo:
```sh
node_modules
npm-debug.log
```
6. Criar o arquivo [npm-shrinkwrap.json](https://github.com/claudimf/alura_performance_web/blob/main/npm-shrinkwrap.json) com o seguinte conteúdo:
```sh
{
"dependencies": {
"graceful-fs": {
"version": "4.2.4"
}
}
}
```
7. Faça o build da sua aplicação para poder seguir com as aulas:
```sh
docker-compose build
```
# Aulas
Economizando bytes
- Porque otimizar o front-end?
- Motivos pra otimização
- Minificação
- Automação com Gulp
- Projeto & Ambiente
- Projeto: Minificação
- Projeto: gulp copy
- Servidor & GZIP
- Tamanho do download
- Servidor HTTP local
- Análise com DevTools
- Projeto: habilitar GZIP
- Revisão do conteúdo
- Para saber mais: Brotli
- Transcrição das aulas
Otimizações de Imagens
- O peso das imagens
- Otimizações lossless
- Imagens grandes
- O melhor formato
- O melhor formato 2
- Otimizações lossy
- SVGs otimizados
- Otimização lossless
- Otimização lossy
- Automação das otimizações
- Projeto: redimensionar imagens
- Projeto: otimizar imagens
- Harmonia na equipe
- Para saber mais: ferramentas de otimização de imagens
- Para saber mais: por trás dos formatos de imagens
- Transcrição das aulas
O custo dos requests
- Custo dos requests
- Conexões simultâneas
- Análise dos requests no DevTools
- Projeto: diminuindo dependências
- Deploy no Google App Engine
- Mão na massa: deploy no App Engine
- Análise de performance
- WebPageTest
- PageSpeed Insights
- (opcional) Analise outro site
- Transcrição das aulas
Concatenações & Trade-offs
- Concatenação do CSS
- Mais concatenação e trade-offs
- Por que?
- Concatenação de CSS
- Concatenação de JS
- Transcrição das aulas
Sprites
- Porque Sprites
- Sprites PNG
- Automação de Sprites
- Projeto: sprites CSS
- Sprites em SVG
- Automação de Sprites SVG
- Projeto: sprite SVG
- (opcional) Polyfill para símbolos SVG
- (opcional) Outras sprites SVG
- Transcrição das aulas
Inline de recursos
- Inline de recursos
- O tamanho real do HTML
- Tamanho do HTML
- Projeto: inline de JS
- Projeto: inline de SVG
- Transcrição das aulas
Paralelizando requests
- Requests paralelos
- Impactos da paralelização
- Porque paralelizar?
- Hostname paralelo
- Análise do impacto
- Transcrição das aulas
Cache HTTP
- Cache com Expires
- Prática do cache
- Fingerprint dos assets
- Cache alto nos servidores
- Projeto: revisões com gulp
- Cache no GAE
- Cache no nginx
- Transcrição das aulas
Conclusão
- Análise final
- Atalho no gulp
- Sua análise final
- Transcrição das aulas
- Performance é UX
# Notas das aulas:
* Projeto: Minificação
No arquivo [Dockerfile](https://github.com/claudimf/alura_performance_web/blob/main/Dockerfile) adicione o comando de instalação do [gulp-cli](https://www.npmjs.com/package/gulp-cli):
```sh
RUN npm install -g gulp-cli
```
Criar rotas para visualizar o 'original' e a versão 'modificada' com gulp no servidor [server.js](https://github.com/claudimf/alura_performance_web/blob/main/server.js):
```sh
var dist_path = __dirname + '/dist/';
...
router.get("/original",function(req,res){
res.sendFile(path + "index.html");
});
router.get("/modificada",function(req,res){
res.sendFile(dist_path + "index.html");
});
...
```
Entrar na bash e executar o comando de minificar:
```sh
docker-compose run --rm web bash gulp minify
```
Subir a aplicação e verificar a [original](http://localhost:3000/original) e a [modificada](http://localhost:3000/modificada)
* Projeto: gulp copy
Na bash do seu container remova a pasta 'dist/assets' e depois 'minifique', para isso rode:
```sh
rm -rf dist/assets/
gulp copy minify
```
### Permissões de arquivos:
Ao se adicionar libs ou qualquer outro comando que crie arquivos dentro do contâiner Docker o proprietário para edição se torna o contâiner, sendo assim você precisará rodar o comando abaixo para alterar essas permissões e você poder editar:
```sh
sudo chown -R $USER:$USER .
```
# Exigências
**:warning: Atenção:** É necessário que os desenvolvedores usem o Docker no seu ambiente de desenvolvimento.
- **🛠 Modo Desenvolvimento Docker**
- :computer: [Linux Ubuntu LTS](https://ubuntu.com/download/desktop)
- 🐳 [Docker](https://docs.docker.com/engine/installation/) Deve estar instalado.
- 🐳 [Docker Compose](https://docs.docker.com/compose/) Deve estar instalado.
- **💡 Dica:** [Documentação do Docker](https://docs.docker.com/)
# Instalando
## 🐳 Modo Desenvolvimento com Docker
Após instalar o docker e docker-compose, estando na pasta raiz do projeto, execute:
```sh
docker-compose up
```
Para se certificar que os seus containers subiram corretamente, todos os containers deve estar com o status `UP`, execute:
```sh
docker-compose ps -a
```
Para acessar o container da aplicação, execute:
```sh
docker-compose run --rm web bash
```
Para derrubar e subir a instância do docker novamente, execute:
```sh
docker-compose down && docker-compose up
```
Para visualizar o sistema basta acessar no navegador no endereço: [localhost:3000](http://localhost:3000/)
# Referências utilizadas
[1° Repositório para clonar o projeto inicial](https://github.com/alura-cursos/performance-web)
[2° Performance Web I: otimizando o front-end](https://cursos.alura.com.br/course/otimizacao-performance-web)
[3° Criar um projeto com Node + Docker](https://nodejs.org/en/docs/guides/nodejs-docker-webapp/)
[4° Como Construir uma Aplicação Node.js com o Docker](https://www.digitalocean.com/community/tutorials/como-construir-uma-aplicacao-node-js-com-o-docker-pt)
[5° Conteinerizando um aplicativo Node.js para desenvolvimento com o Docker Compose](https://www.digitalocean.com/community/tutorials/containerizing-a-node-js-application-for-development-with-docker-compose-pt)
[6° ERRO: primordials is not defined](https://cursos.alura.com.br/forum/topico-erro-primordials-is-not-defined-106764)