joaovictornsv/http-node-api-web

O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Além disso, esse projeto também é o frontend da minha API 100% NodeJS.

Projeto HTML
100% Javascript

Front-end feito "sem HTML"

---

Conteúdos

➜ Sobre o projeto
➜ O que aprendi
➜ Como usar

---

🔎 Sobre o projeto

^{Voltar ao topo}

O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Para gerar as páginas em HTML usei o próprio JS para criá-las e inserir os componentes necessários. Além disso, esse projeto também é o frontend da minha API 100% NodeJS (sem dependências).

---

➡ API

A API utilizada é feita totalmente em NodeJS, ou seja, todo esse projeto (frontend e backend) foi feito sem nenhuma dependência externa.

Para ver mais detalhes de como usar a API acesse o repositório: joaovictornsv/http-node-api

---

➡ Arquitetura

Para gerar todos os componentes necessários criei uma arquitetura que se resume basicamente em:

• Prototypes
• Factories
• Components
• Pages

Prototypes

Os prototypes são adições nos métodos dos elementos HTML que fiz para facilitar a criação de componentes estilizados.

Um exemplo de como um prototype funciona:

// Mudando a cor de um botao
const button = document.getElementById('btn')


// ❌ SEM PROTOTYPE
button.style.color = 'blue'


// ✅ COM PROTOTYPE

// Criando uma função nova no prototype da tag 'button'
HTMLButtonElement.prototype.setCSS = function setCSS(new_css) {
  // add CSS in element
}

// Usando a função criada
button.setCSS({ color: 'blue'})

Factories

As factories são closures, ou seja, funções que "se lembram" do escopo de quando foram criadas. Funcionam semelhante a uma espécie de classe. Não escolhi trabalhar com classes para poder pôr em prática o que havia estudado sobre as closures. Caso deseje ler mais sobre closures clique aqui.

Um exemplo de como uma closure funciona:

// Cria um botão escrito 'Botão 1'
const button1 = makeButton({ value: 'Botão 1' });

// Cria outro botão escrito 'Botão 2'
const button2 = makeButton({ value: 'Botão 2' });



// Muda a cor do texto do Botão 1 para azul
button1.setCSS({ color: 'blue' })

// Muda a cor do texto do Botão 2 para Vermelho
button2.setCSS({ color: 'red' });


// Ambos os botões tem seus escopos próprios

Components

Os components são os elementos HTML já criados e estilizados prontos para uso (assim como ocorre com o styled-components).

Um exemplo de como um component funciona:

// Criação de um elemento 'h1'
const title = makeText({tag: 'h1', value: 'Título Princiapl'});

// Estilização do elemento
titleMain.setCSS({
  fontSize: '22px',
  color: 'black',
  fontFamily: 'Arial, sans-serif'
});

export default title;

Pages

As pages são os conjuntos de componentes organizados para formar uma página completa.

Um exemplo de como uma página funciona:

// Criação de um elemento 'h1'
import header from './components/header.js'
import title from './components/title.js'
import subtitle from './components/subtitle.js'

function HomePage() {
  // Adicionando components na div 'header'
  header.append(title);
  header.append(subtitle);
}

export default HomePage;

---

➡ Funcionalidades ✔️

A aplicação realiza o CRUD da API (Create, Read, Update and Delete) e possui as seguintes funcionalidades:

Funções principais:

• Listagem de usuários ou usuário único
• Criação de novo usuário
• Alteração de dados de um usuário
• Remoção de um usuário

Outras funcionalidades:

• Criação de arquivos HTML a partir do Javascript
• Tratamento de erros retornados da api

---

📚 O que aprendi

^{Voltar ao topo}

Além de aprender como funcionam as closures, também fixei mais alguns conceitos:

• Uso dos Prototypes
• Uso da função Object.entries
• Requisições com AJAX
• Tratamento de erros com AJAX
• Correção de erros de CORS da API
• Uso das classes URL e URLSearchParams
• Organização de código no geral

---

ℹ️ Como usar

^{Voltar ao topo}

Para testar essa aplicação na sua máquina você precisa atender aos requisitos:

• Baixar o repositório da API
• Instalar a extensão LiveServer no seu Visual Studio Code

# Clone this repository
$ git clone https://github.com/joaovictornsv/http-node-api-web

# Clone the server repository
$ git clone https://github.com/joaovictornsv/http-node-api


#### 🟡 BACK-END

# Go into the server repository
$ cd http-node-api

# Run the server
$ yarn start


#### 🔵 FRONT-END

# Back to this repository

# Generate HTML files
$ yarn start

# Run frontend server
➜ Use 'Live Server' to run (Visual Studio Code Extension)

---

_{Made with 💙 by João Victor}