Executando verificação de segurança...
16
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
crafaelsdo

Muito bom, eu uso uma biblioteca chamada fireorm em um projeto com um amigo, não sei se já ouviu falar sobre, ela tem uma proposta parecida porem focada no firestore usando uma abordagem como a do typeorm.

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.

1
jeffz

Cara que projeto genial, parabéns pela iniciativa! Tenho certeza que quando a bolha dev conhecer o pacote vai estourar rápido.

Eu como dev mais focado em front-end, uso o firebase em praticamente todo projeto. Também fiz alguns pacotes para facilitar ainda mais a integração, porém são bem abstraídos (mais funcionalidades e menos possibilidade de personalização) e não estão públicos ainda.

Vou aproveitar para fazer algumas contribuições no refirebase!

Uma das abstrações que fiz e que mais gosto de usar, é uma espécie de "proxy" para o firestore, funciona mais ou menos na seguinte sintax:

config/firebase.ts

const database = new FirestoreClient(....)

database.users.query
    .where('isActive', '==', true)
    .orderBy('createdAt')
    .limit(10)
    .index({ page: 1 })

essa simples linha de código, quem já usa o firebase, sabe que faz BASTANTE coisa e que levaria umas 20 linhas (filtros, ordenação, limitação e paginação). Além desse query, temos também outros métodos úteis que facilitam muito a manter um padrão e organização (coisa muito importante quando se usa um banco nosql em prod).

além de ter o FirestoreServerClient, que tem a mesma sintaxe mas usa o firebase-admin para funcionar no servidor (node, server-side do nextjs, etc).

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á. 🔥