Skip to content

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.

License

Notifications You must be signed in to change notification settings

joaovictornsv/http-node-api-web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

63 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Projeto HTML
100% Javascript

Front-end feito "sem HTML"

Language Top License

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)

Profile Made with 💙 by João Victor

About

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.

Topics

Resources

License

Stars

Watchers

Forks