Executando verificação de segurança...
10
luansemz
2 min de leitura ·

[PACKAGE] Refirebase: uma maneira simplificada de desenvolver seus projetos

Esse projeto é open-source, sinta-se livre para analisar o código e realizar contribuições. 🎉

Firebase

"Firebase é uma plataforma desenvolvida pelo Google que oferece uma série de ferramentas e serviços para a criação de aplicativos web e mobile." [ChatGPT, 2024]

Devido aos seus altos limites no plano gratuito e sua facilidade de integração com o front-end de uma aplicação, ele é muito utilizado em diversos projetos, iniciantes ou avançados.

Problema

Eu utilizo o Firebase na maioria dos meus projetos.

Por sempre estar criando projetos novos, eu preciso configurar o Firebase de maneira manual toda vez.

Criar arquivos separados para importar as inúmeras funções dele, criar funções personalizadas para fazer simples buscas, etc.

Esse processo acaba se tornando muito repetitivo e "chato" para algo que deveria ser simples de fazer.

Solução

Criar um boilerplate nunca foi a melhor escolha nesse caso, pois eu sempre faço projetos com diferentes frameworks do JavaScript.

Inclusive, o Firebase já trocou a sintaxe algumas vezes, assim eu precisaria atualizar cada projeto novamente.

A solução encontrada pelo @gelzin foi criar uma biblioteca, não só para facilitar esse processo de configuração e instalação, mas também para simplificar a sintaxe do Firebase.

Refirebase

Refirebase Logo Refirebase

O nome é bem sugestivo, mas a ideia dessa biblioteca open-source é melhorar a DX (Developer Experience) e a curva de aprendizagem do Firebase.

Mais fácil do que espremer um limão, é importar e usar as configurações do Refirebase.

Além do Firestore, é possível utilizar o db.realtime, db.storage e o db.auth

Todos os exemplos estão no README do projeto.

A configuração é muito simples, o próprio Firebase já te dá o objeto com os dados.

Nosso objetivo é juntar os desenvolvedores e seus casos de uso para melhorar a experiência do desenvolvedor, principalmente os iniciantes.

Como eu disse anteriormente, esse projeto é recente e open-source e a sua sugestão e contribuição é muito importante.

O pacote já está disponível para ser instalado através do npm: refirebase

E esse é o link do repositório público: Repositório do Github

Fonte: https://github.com/orgs/refirebase/discussions/1

Carregando publicação patrocinada...
2
devcael

Mano? a configuração do firebase é literalmente isso aqui

import { initializeApp } from "firebase/app";
import {  getFirestore, collection, getDocs } from "firebase/firestore/lite";

const init = initializeApp({
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.env.FIREBASE_MEASUREMENT_ID
});

let db = getFirestore(init);

const userCollection = collection(db, 'users');
const usersSnap = await getDocs(userCollection);
const usersList = usersSnap.docs.map((user) => {
    return {
        id: user.id,
        data: user.data()
    }
});
2
luansemz
Autor
Autor

Opa devcael, tudo bem contigo?

Mano? a configuração do firebase é literalmente isso aqui tu fez um package pra reduzir isso?

Sim e não.

Se você reparar no seu código, você escreveu algumas linhas de código para buscar os 'users' no Firebase.

Aparentemente, você vai precisar reutilizar esse mesmo código e importar as mesmas funções em todo lugar que você quiser buscar os 'users' no Firebase.

O pacote não foi feito para configurar o Firebase, ele foi feito para mudar a sintaxe e a maneira que você utiliza ele.

Como você pode ver no exemplo da postagem, com apenas uma linha de código, o Refirebase fez a mesma coisa que o seu código.

A maior diferença de um para o outro é a necessidade de você precisar repetir seu código em outros arquivos, importar as mesmas funções e o mesmo 'db' que você provavelmente vai criar em um config/firebase.js?

Com o Refirebase você tem as tipagens e uma sintaxe facilitada para utilizar o firestore, o realtime, o storage e o authentication.

agora está sendo implementado o analytics também.

Você deu um exemplo com 23 linhas de código e desmereceu o trabalho que o pacote pode fazer para contribuir em projetos maiores.

O Refirebase foi construído pensando nas repetições de código, importações repetitivas e possíveis alterações na sintaxe original do Firebase.

3
devcael

Oi, tudo bem comigo sim, espero que com você também! Perdão se a minha primeira mensagem pareceu rude, não foi a intenção, e até eu achei meio brusca depois de ler novamente tanto que editei.

O meu ponto foi questionar o fato de usar uma micro library para algo que já é relativamente simples.

Todos nós sabemos que não é necessário "copiar e colar" código em toda a codebase. A configuração do Firebase por si só já adiciona uma biblioteca significativa ao projeto, e incluir mais uma camada de dependência em uma parte tão crucial como o acesso ao banco de dados parece uma trade-off complicada. Para implementar um CRUD em um banco NoSQL, geralmente não precisamos de mais de 6 funções e, no máximo, 300 linhas de código.

Novamente, isso não é um ataque ao seu trabalho ou à proposta do Refirebase. A minha preocupação está mais na questão de adicionar mais dependências. Só de instalar o Firebase já estamos trazendo uma dependência, e incluir outra dependência para gerenciar essa primeira, especialmente em uma parte tão importante do projeto, pode impactar a estrutura, mesmo em projetos maiores.

Como o Rob Pike disse:

"A little copying is better than a little dependency."
— Rob Pike, Go Proverbs

Quero aproveitar para te dar os parabéns pelo projeto, que com certeza tem o seu valor e resolve problemas. Eu só queria expor um ponto de vista sobre dependências e simplicidade, sem desmerecer o trabalho que você fez. Acho que cada abordagem tem seu mérito, e essa discussão é parte do processo de evoluir nossos projetos.

1
luansemz
Autor
Autor

Fica tranquilo devcael, e me desculpa a demora em responder.

Confesso que a sua mensagem estava bem rude, mas eu entendi que não era a sua intenção.

...e incluir mais uma camada de dependência em uma parte tão crucial como o acesso ao banco de dados parece uma trade-off complicada.

Com o Refirebase você não precisa adicionar uma nova camada de dependência, afinal, o que estamos fazendo é 'pegar' as funções do Firebase e simplificando elas, para melhorar a experiência do desenvolvedor.

Você nem precisa ter o Firebase instalado, o próprio Refirebase já trabalha com ele.

A minha preocupação está mais na questão de adicionar mais dependências.

Exatamente, você não precisa instalar o Firebase, apenas o Refirebase e você vai ter todas as funcionalidades do Firebase, simplificadas.

Quero aproveitar para te dar os parabéns pelo projeto, que com certeza tem o seu valor e resolve problemas.

Muito obrigado pelo reconhecimento, estamos tentando alcançar o máximo de desenvolvedores com essa biblioteca.

Acredito que para alguns, ela vai ter um valor enorme.

1
1
luansemz
Autor
Autor

Eu comecei a utilizar o Refirebase na prática, então melhorias já estão sendo feitas KKKKKKKK

Espero poder alcançar mais usuários com essa nova biblioteca.

0
1
0
1
0
4
gelzinpontocom

cara, pior que é mais simples do que parece.
mesmo o texto estando um pouquinho maior do que o normal kkkkkk

sobre o Refirebase primeiro:

como o próprio luan disse: o objetivo de criarmos esse package foi pra facilitar o processo de configuração e instalação do Firebase, e também, o mais importante, que era simplificar a sintaxe — que não frequentemente, mas sim algumas boas vezes, já mudou a sintaxe.

isso acabava atrapalhando muito, principalmente quando precisávamos atualizar a versão do Firebase por conta de alguns bugs que tinha no próprio pacote. a gente atualizava pra consertar os negócios e de quebra vinha uma sintaxe nova kkkkkkkkkk

e estar criando uma solução para esses problemas é legal demais!
inclusive, convido você a colaborar com a gente pra melhorar essa lib!

no Refirebase, dificilmente a gente vai atualizar o nome das funcoes ou algo do tipo. justamente por conta do problema que isso gera tendo que atualizar muitas coisas e etc, além de ser justamente o que a gente quer resolver.

claro que não estou cravando que, nunca nada vai ser alterado, até pq a gente precisa saber qual a melhor sintaxe possível para ser usada, assim melhorando na medida do possível a DX de todo mundo com a lib.

o objetivo é que o Refirebase seja fácil de usar como o Prisma, tão bom quanto o Drizzle e gratuito como (já é) o Firebase.

eu acredito muito na união da comunidade para se ajudar e deixar um projeto desse maravilhoso! e eu não digo isso só por ter sido a pessoa que começou com a lib, longe disso!

eu só quero que a lib possa evoluir e ficar comum entre os devs front end que acabam utilizando o Firebase nos seus projetos, como uma opção quase fixa por ser gratuita, e acabam esbarrando com a monstruosidade desnecessária do Firebase que é pra fazer uma simples requisição no banco pra pegar uma collection.

agora sobre criar um package no npm

se você quiser que eu te explique o passo a passo de como fazer para conseguir publicar um, a gente pode conversar por outro meios além daqui pra ter uma explicação mais calma.

mas tentando não prolongar ainda mais o texto sauhaushsauhahsuhaussahusahu

  • criação
    • instale o node.js e o npm (imagino que essa etapa ja esteja feita)
    • dai dentro da pasta do seu projeto você vai inicializar o projeto com npm init -y
    • crie um arquivo chamado index.js
      • é nele que você vai fazer as funções e classes
    • é bom também ter um README.md para descrever sua biblioteca
  • publicação
    • depois que tiver pronto, você usa o npm login pra fazer a autenticação no npm
    • e dps para publicar, use npm publish
      • (lembrando que, se você fizer uma mini alteração e quiser que ela seja publicada novamente, é OBRIGATÓRIO que você mude a versão do projeto no package.json)

e aí pronto! sua biblioteca está no npm!

como eu disse, se você quiser ajuda com o passo a passo, a gente pode conversar melhor do que trocar texto maiores que esse aqui kkkkkkkkk

1
guilhermeDaniel

Po man, muito legal. Eu já usei o firebase antes para muitos projetos (não uso mais hoje, mas não signifique que eu não volte a usar), e eu sempre tive problemas com bibliotecas, uns 4 anos atrás tinha uma bem famosa pra Mobile React-Native-Firebase, e pense numa dor de cabeça que foi trabalhar com ela, uma hora funcionava e na outra não, em uma documentação dizia que era pra usar ela, e na outra dizia que ela já estava depreciada, e eu acababa usando o padrão mesmo do Firebase.

Esse processo de criação de pacote NPM parece bastante simples, muito similar a criação de extensões pro google chrome, bacana.

Espero que vocês tenham sucesso com essa lib.

1
luansemz
Autor
Autor

pô Guilherme, muito obrigado pelo seus comentários.

Espero que você tenha entendido o processo de criação de um "package".

Lá no Github tem uma aba de discussões para melhorar a DX da biblioteca, da uma passada lá. 🔥