Supabase vs Firebase : comparatif

Voici un cheatsheet comparatif Supabase vs Firebase :

Tableau comparatif rapide

Supabase — Points forts

• Performance en temps réel : Facilité de mise à jour en temps réel sans frais supplémentaires.

  // Supabase
  import { createClient } from '@supabase/supabase-js';
  
  const supabaseUrl = 'https://your-project-id.supabase.co';
  const supabaseKey = 'your-anon-key';
  const supabase = createClient(supabaseUrl, supabaseKey);
  
  supabase.from('table').on('*', payload => {
      console.log('Change received!', payload.new);
  }).subscribe();
  

• Typage fort et TypeScript : Simplifie le développement avec des suggestions de type.

  // Supabase
  interface User {
      id: number;
      name: string;
  }
  
  const supabaseUrl = 'https://your-project-id.supabase.co';
  const supabaseKey = 'your-anon-key';
  const supabase = createClient(supabaseUrl, supabaseKey);
  
  async function fetchUsers(): Promise<User[]> {
      const { data } = await supabase.from('users').select('*');
      return data as User[];
  }
  

• Ecosystème open source : Nombreuses extensions et plugins disponibles.

  // Supabase
  import pgcrypto from 'pgcrypto';
  
  const hashedPassword = pgcrypto.digest('sha256', 'password123');
  

• Communauté active : Aide rapide et nombreux tutoriels disponibles en ligne.

  • Supabase Documentation
  • GitHub Issues

Firebase — Points forts

• Support de données structurelles : Facilité de manipulation de structures de données complexes.

  // Firebase
  import firebase from 'firebase/app';
  import 'firebase/database';
  
  const firebaseConfig = {
      apiKey: "your-api-key",
      authDomain: "your-auth-domain",
      databaseURL: "https://your-database-url.firebaseio.com",
      projectId: "your-project-id",
      storageBucket: "your-storage-bucket.appspot.com",
      messagingSenderId: "your-messaging-sender-id",
      appId: "your-app-id"
  };
  
  firebase.initializeApp(firebaseConfig);
  const db = firebase.database();
  
  db.ref('users').set({
      user1: {
          name: 'John Doe',
          age: 30
      }
  });
  

• Typage fort et TypeScript : Meilleure typage pour les développeurs utilisant TypeScript.

  // Firebase
  interface User {
      id: string;
      name: string;
      age?: number;
  }
  
  const db = firebase.database();
  
  async function getUser(userId: string): Promise<User | null> {
      const snapshot = await db.ref(`users/${userId}`).once('value');
      if (snapshot.exists()) {
          return snapshot.val() as User;
      }
      return null;
  }
  

• Gestion des fichiers : Facilité de stockage et d'accès aux fichiers.

  // Firebase
  import firebase from 'firebase/app';
  import 'firebase/storage';
  
  const storage = firebase.storage();
  const ref = storage.ref('path/to/file');
  
  ref.put(file).then(snapshot => {
      console.log('File uploaded successfully');
  });
  

• Support technique dédié : Documentation approfondie et support technique professionnel.

  • Firebase Documentation
  • Firebase Support

Syntaxe cote à côte

Authentification avec email/password

// Supabase
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password123'
});
javascript
// Firebase
firebase.auth().signInWithEmailAndPassword('user@example.com', 'password123')
    .then((userCredential) => {
        // Signed in 
        var user = userCredential.user;
        console.log(user);
    })
    .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorCode, errorMessage);
    });

Ajout de données à une collection

// Supabase
const { data, error } = await supabase.from('users').insert([
  { name: 'John Doe', age: 30 }
]);
javascript
// Firebase
db.collection('users').add({
    name: 'John Doe',
    age: 30
}).then((docRef) => {
    console.log("Document written with ID: ", docRef.id);
}).catch((error) => {
    console.error("Error adding document: ", error);
});

Lecture de données depuis une collection

// Supabase
const { data, error } = await supabase.from('users').select('*');
console.log(data);
javascript
// Firebase
db.collection('users').get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id} => ${JSON.stringify(doc.data())}`);
    });
});

Mise à jour de données dans une collection

// Supabase
const { data, error } = await supabase.from('users').update({ age: 31 }).eq('id', '1');
console.log(data);
javascript
// Firebase
db.collection('users').doc('1').update({
    age: 31
}).then(() => {
    console.log("Document successfully updated!");
}).catch((error) => {
    console.error("Error updating document: ", error);
});

Suppression de données dans une collection

// Supabase
const { data, error } = await supabase.from('users').delete().eq('id', '1');
console.log(data);
javascript
// Firebase
db.collection('users').doc('1').delete().then(() => {
    console.log("Document successfully deleted!");
}).catch((error) => {
    console.error("Error deleting document: ", error);
});

Quand choisir Supabase vs Firebase

• Supabase est idéal pour les startups et les équipes junior qui préfèrent une approche simple et dédiée à la base de données. Son typage fort et son écosystème open source peuvent également faciliter le développement.

• Firebase est approprié pour les projets plus complexes avec des besoins en gestion de données structurelles et en stockage de fichiers. Son support technique dédié et sa documentation approfondie peuvent être un atout majeur.

Verdict

Supabase offre une solution simple et performante pour les petites à moyennes entreprises nécessitant des opérations en temps réel et le stockage de fichiers. Firebase, quant à lui, est mieux adapté aux projets plus grands avec des données structurelles complexes et des besoins en support technique professionnel.