Introduzione

Nel panorama dello sviluppo JavaScript e TypeScript, gli strumenti di linting e formatting hanno sempre giocato un ruolo cruciale nel mantenere la qualità del codice, standardizzare le convenzioni di stile e prevenire errori comuni. Per molti anni, ESLint e Prettier hanno dominato questo spazio, diventando parte integrante del flusso di lavoro di innumerevoli team di sviluppo. Tuttavia, un nuovo sfidante sta emergendo: Biome, un toolkit unificato che promette di risolvere molte delle frustrazioni e dei problemi di performance associati a questi strumenti consolidati.

Prima di addentrarci in Biome, è utile fare un rapido ripasso su cosa sono ESLint e Prettier e perché sono diventati strumenti fondamentali nello sviluppo JavaScript.

ESLint e Prettier: Un Breve Riepilogo

ESLint: Il Linter di Riferimento

ESLint, lanciato nel 2013 da Nicholas C. Zakas, è uno strumento di analisi statica del codice che identifica e riporta pattern problematici nel codice JavaScript. È altamente configurabile e consente agli sviluppatori di definire regole personalizzate o utilizzare configurazioni predefinite.

Le principali caratteristiche di ESLint includono:

Identificazione di errori potenziali: Rileva problemi come variabili non utilizzate, riferimenti a variabili non dichiarate e altre potenziali insidie del codice JavaScript.
Applicazione di convenzioni di stile: Impone regole di formattazione come indentazione, spaziatura e uso di virgole, sebbene questo non sia il suo punto di forza principale.
Plugin ecosystem: Supporta un vasto ecosistema di plugin che estendono le funzionalità di base per framework come React, Vue, Angular, e per TypeScript.
Fixable rules: Molte regole offrono fix automatici che possono essere applicati eseguendo ESLint con l'opzione --fix.

Nonostante la sua potenza, ESLint presenta alcune limitazioni, tra cui prestazioni non ottimali su progetti di grandi dimensioni e una complessa configurazione che può diventare difficile da gestire.

Prettier: Il Formatter Opinionato

Prettier, rilasciato nel 2017, ha adottato un approccio radicalmente diverso alla formattazione del codice. A differenza di ESLint, Prettier è volutamente opinionato e offre opzioni di configurazione limitate, concentrandosi sull'applicazione coerente di uno stile predefinito.

Le caratteristiche chiave di Prettier includono:

Formattazione deterministica: Dato lo stesso codice di input, Prettier produrrà sempre lo stesso output, indipendentemente dalla formattazione originale.
Supporto multi-linguaggio: Oltre a JavaScript, supporta TypeScript, CSS, HTML, JSON, Markdown e altri linguaggi.
Integrazione con editor: Offre plugin per tutti i principali editor di codice, permettendo la formattazione automatica al salvataggio.
Poche opzioni di configurazione: Limita deliberatamente le opzioni di configurazione per evitare dibattiti infiniti sullo stile del codice.

Prettier ha guadagnato enorme popolarità grazie alla sua capacità di eliminare discussioni sul formato del codice, permettendo ai team di concentrarsi sulla logica e la funzionalità piuttosto che sull'indentazione o la posizione delle parentesi graffe.

Utilizzo combinato

Molti team utilizzano ESLint e Prettier insieme, configurando ESLint per la rilevazione di errori e problemi di codice, e Prettier per la formattazione. Questo approccio richiede configurazioni aggiuntive per evitare conflitti tra le regole di formattazione di ESLint e Prettier, spesso utilizzando pacchetti come eslint-config-prettier.

Questa combinazione, sebbene potente, introduce complessità nel setup del progetto e può comportare un impatto significativo sulle prestazioni, specialmente in progetti di grandi dimensioni.

Biome: Un Nuovo Approccio

Biome emerge come un'alternativa unificata che mira a risolvere le limitazioni di ESLint e Prettier, offrendo uno strumento completo per linting, formattazione e altri compiti correlati alla qualità del codice.

Cosa è Biome

Biome è un toolkit per lo sviluppo web che include linter, formatter e altri strumenti, tutti integrati in un unico pacchetto. È scritto in Rust, il che gli conferisce vantaggi significativi in termini di performance rispetto agli strumenti basati su JavaScript.

Originariamente conosciuto come "Rome Tools" (da non confondere con il framework Rome), Biome è stato rinominato nel 2023 dopo una ristrutturazione del progetto. Si propone come un sostituto diretto di ESLint e Prettier, con l'obiettivo di semplificare il flusso di sviluppo offrendo un'unica soluzione per molteplici esigenze di qualità del codice.

Storia di Biome

La storia di Biome è interessante e merita di essere raccontata per comprendere meglio il suo posizionamento nel panorama degli strumenti di sviluppo:

2020: Sebastian McKenzie (creatore di Babel) avvia Rome Tools Inc. e inizia lo sviluppo di Rome, un toolkit unificato per lo sviluppo JavaScript.
Ottobre 2022: Rome Tools Inc. chiude e il progetto Rome diventa un progetto open source completamente comunitario.
Maggio 2023: Il progetto viene rinominato Biome per evitare confusione con altri progetti Rome nel mondo dello sviluppo.
Novembre 2023: Viene rilasciata la versione 1.0 di Biome, segnando un importante traguardo di stabilità.
2024-oggi: Rapido sviluppo e crescente adozione da parte della comunità.

Il percorso di Biome riflette una tendenza verso strumenti più veloci, integrati e facili da configurare nell'ecosistema JavaScript.

Perché Biome è Stato Creato

Biome è nato per affrontare diverse sfide presenti negli strumenti esistenti:

Frammentazione degli strumenti: La necessità di utilizzare e configurare molteplici strumenti (ESLint, Prettier, TypeScript, ecc.) per gestire la qualità del codice.
Prestazioni subottimali: Gli strumenti basati su JavaScript/Node.js spesso soffrono di problemi di performance, specialmente su progetti di grandi dimensioni.
Complessità di configurazione: La configurazione di ESLint può diventare estremamente complessa, specialmente quando combinata con Prettier e vari plugin.
Consistenza cross-project: La difficoltà di mantenere configurazioni coerenti tra diversi progetti.
Dipendenze multiple: La necessità di gestire numerose dipendenze e plugin che possono causare problemi di compatibilità e aumentare i tempi di installazione.

Biome mira a risolvere questi problemi offrendo una soluzione unificata, veloce e con configurazione minima.

Come Funziona Biome

Biome è progettato con un'architettura moderna che gli consente di ottenere prestazioni elevate e un'esperienza utente fluida:

Architettura Rust-based

Il cuore di Biome è scritto in Rust, un linguaggio di programmazione noto per la sua sicurezza, performance e controllo fine delle risorse. Questa scelta architetturale offre diversi vantaggi:

Performance elevate: Esecuzione significativamente più veloce rispetto a strumenti basati su JavaScript.
Consumo di memoria ridotto: Utilizzo più efficiente delle risorse del sistema.
Eseguibile unico: Nessuna dipendenza esterna da Node.js o altri runtime.
Parallelizzazione efficiente: Migliore utilizzo di sistemi multi-core.

Parser unificato

Biome utilizza un parser unificato per JavaScript e TypeScript, che gli consente di:

Analizzare il codice in modo accurato e performante
Costruire un Abstract Syntax Tree (AST) completo
Utilizzare lo stesso AST per linting e formatting
Supportare le ultime funzionalità di ECMAScript e TypeScript

Linter integrato

Il linter di Biome include:

Set predefinito di regole curate per best practice moderne
Rilevamento di errori potenziali e anti-pattern
Suggerimenti per migliorare la qualità del codice
Fix automatici per molti problemi rilevati

Formatter integrato

Il formatter di Biome:

È progettato per essere deterministica come Prettier
Supporta un insieme growning di linguaggi (attualmente JavaScript, TypeScript, JSX, JSON)
Ha opzioni di configurazione limitate ma sensate
Mantiene l'intento originale del codice durante la formattazione

Configurazione semplificata

Biome adotta un approccio "convention over configuration":

Configurazione predefinita ragionevole che funziona immediatamente
File di configurazione opzionale in formato JSON (biome.json)
Opzioni di configurazione limitate e ben documentate
Supporto per ignorare file o directory specifiche

CLI e integrazione con editor

Biome offre:

Un'interfaccia a riga di comando potente e facile da usare
Estensioni per VSCode e altri editor popolari
Supporto per l'integrazione con sistemi CI/CD
Modalità watch per rieseguire automaticamente l'analisi quando i file cambiano

Biome vs ESLint + Prettier: Un Confronto Dettagliato

Per comprendere meglio i vantaggi e gli svantaggi di Biome rispetto alla combinazione consolidata di ESLint e Prettier, analizziamo diversi aspetti chiave:

Performance

La performance è uno degli aspetti in cui Biome si distingue maggiormente:

Aspetto	Biome	ESLint + Prettier
Velocità di esecuzione	Significativamente più veloce (5-10x)	Più lento, specialmente su progetti grandi
Memoria utilizzata	Efficiente	Può richiedere molta memoria su progetti complessi
Avvio a freddo	Rapido	Più lento a causa del bootstrap di Node.js
Parallelizzazione	Nativa e efficiente	Limitata o richiede configurazione aggiuntiva
Impatto CI/CD	Ridotto significativamente	Può essere un collo di bottiglia

I benchmark mostrano che Biome può essere fino a 10 volte più veloce di ESLint su progetti di grandi dimensioni, il che si traduce in feedback più rapidi durante lo sviluppo e tempi di CI ridotti.

Configurazione ed Esperienza Utente

L'esperienza di configurazione e utilizzo differisce notevolmente:

Aspetto	Biome	ESLint + Prettier
Setup iniziale	Semplice, un solo strumento	Più complesso, richiede coordinazione tra strumenti
File di configurazione	Un singolo file (biome.json)	Multipli (.eslintrc, .prettierrc, .prettierignore, ecc.)
Dipendenze	Nessuna dipendenza esterna	Numerose dipendenze e plugin
Coerenza out-of-the-box	Alta, configurazione predefinita solida	Varia in base alle configurazioni scelte
Curva di apprendimento	Più semplice	Più ripida, specialmente per configurazioni avanzate
Comportamento predefinito	Opinionato ma ragionevole	Dipende dalle configurazioni scelte

Biome si distingue per la semplicità di configurazione e l'approccio "it just works", riducendo significativamente il tempo necessario per configurare gli strumenti di qualità del codice in un nuovo progetto.

Funzionalità e Flessibilità

In termini di funzionalità, ci sono importanti differenze:

Aspetto	Biome	ESLint + Prettier
Numero di regole	Minore, ma in crescita (~227 regole)	Molto esteso (500+ regole con plugin)
Linguaggi supportati	JS, TS, JSX, JSON	JS, TS, JSX, CSS, HTML, Markdown, YAML, ecc.
Personalizzazione	Limitata ma in crescita	Estremamente flessibile
Estensibilità	Limitata, no plugin (ancora)	Altamente estensibile tramite plugin
Integrazione framework	Basilare	Eccellente (React, Vue, Angular, ecc.)
Regole custom	Non supportate	Completamente supportate

ESLint e Prettier offrono ancora un set più ampio di funzionalità e maggiore flessibilità, ma Biome sta rapidamente colmando questo divario con ogni nuova release.

Maturità ed Ecosistema

L'ecosistema circostante è un fattore cruciale nella scelta degli strumenti:

Aspetto	Biome	ESLint + Prettier
Età del progetto	Recente (stabile dal 2023)	Consolidato (ESLint dal 2013, Prettier dal 2017)
Adozione	In crescita	Estremamente diffuso
Comunità	Attiva ma più piccola	Vasta e consolidata
Documentazione	Buona, in crescita	Eccellente e dettagliata
Supporto commerciale	Limitato	Diffuso
Stabilità	Buona, ma evoluzione rapida	Eccellente, API stabile

ESLint e Prettier beneficiano di anni di adozione diffusa, una vasta comunità e documentazione estesa, mentre Biome sta ancora costruendo il suo ecosistema.

Vantaggi e Svantaggi di Biome

Basandoci sul confronto precedente, possiamo riassumere i principali vantaggi e svantaggi di Biome:

Vantaggi di Biome

Performance superiore: Significativamente più veloce, specialmente su progetti di grandi dimensioni.
Setup semplificato: Un unico strumento da installare e configurare invece di molteplici pacchetti.
Ridotta complessità: Configurazione minima necessaria per iniziare.
Consistenza integrata: Linting e formatting in un unico passaggio, senza rischi di conflitti.
Consumo di risorse ridotto: Minore utilizzo di memoria e CPU.
Nessuna dipendenza: Non dipende da Node.js o altre dipendenze esterne.
Output migliorato: Errori e avvisi chiari e dettagliati con suggerimenti utili.

Svantaggi di Biome

Set di regole limitato: Meno regole rispetto a ESLint con plugin.
Supporto linguaggi ridotto: Minor numero di linguaggi supportati rispetto a Prettier.
Mancanza di estensibilità: Attualmente nessun sistema di plugin.
Maturità del progetto: Storia più breve e meno "battle-tested" in produzione.
Integrazione ecosistema: Minore integrazione con framework e strumenti specifici.
Personalizzazione limitata: Minori opzioni di configurazione per casi d'uso specifici.

Casi d'uso ideali per Biome

Considerando i suoi punti di forza e limitazioni, Biome è particolarmente adatto per:

Progetti dove Biome eccelle

Progetti di grandi dimensioni: Dove le performance di linting e formatting sono cruciali.
Monorepo: Dove la velocità di analisi su molti file è importante.
Progetti con CI/CD frequenti: Dove tempi di build ridotti hanno un impatto significativo.
Nuovi progetti: Dove si parte da zero e si può adottare Biome fin dall'inizio.
Team che preferiscono strumenti opinionati: Che vogliono meno discussioni sulle convenzioni di stile.
Progetti JavaScript/TypeScript standard: Che non richiedono regole o integrazioni specializzate.

Scenario meno adatto a Biome (per ora)

Progetti che richiedono regole altamente personalizzate: Dove la flessibilità di ESLint è necessaria.
Ecosistemi con integrazione profonda con ESLint: Come progetti NextJS o specifici framework con preset ESLint.
Progetti multi-linguaggio: Che richiedono formattazione coerente su molti tipi di file diversi.
Codice legacy complesso: Che potrebbe beneficiare di regole ESLint specializzate per migrazioni o refactoring.

Migrazione da ESLint e Prettier a Biome

Per chi è interessato ad adottare Biome, ecco i passi fondamentali per la migrazione:

Passi per la migrazione

Installazione di Biome:
```
npm install --save-dev @biomejs/biome
```
Creazione configurazione iniziale:
```
npx @biomejs/biome init
```
Questo crea un file biome.json con le impostazioni predefinite.
Rimozione di ESLint e Prettier:
```
npm uninstall eslint prettier eslint-config-prettier eslint-plugin-*
```
E rimuovere i relativi file di configurazione (.eslintrc, .prettierrc, ecc.)

Aggiornamento degli script nel package.json:

"scripts": {
  "lint": "biome lint .",
  "format": "biome format . --write",
  "check": "biome check ."
}

Migrazione delle configurazioni: Adattare le regole ESLint e le opzioni Prettier esistenti alle equivalenti di Biome nel file biome.json.
Aggiornamento delle integrazioni CI/CD: Modificare le pipeline CI per utilizzare i comandi Biome invece di ESLint e Prettier.
Aggiornamento delle estensioni dell'editor: Installare l'estensione Biome per l'editor di codice utilizzato e configurarla.

Consigli per una transizione graduale

Per progetti esistenti, può essere utile una migrazione graduale:

Iniziare con il formatter: Sostituire prima Prettier con il formatter di Biome, mantenendo ESLint per le regole di linting.
Migrare incrementalmente le regole: Identificare le regole ESLint più importanti e trovare equivalenti in Biome.
Utilizzare entrambi gli strumenti in parallelo: Eseguire sia ESLint che Biome durante un periodo di transizione per garantire la copertura di tutte le regole importanti.
Approccio per directory: Migrare una directory alla volta, iniziando con parti meno critiche del codebase.

Il Futuro di Biome

Biome è un progetto in rapida evoluzione con una roadmap ambiziosa:

Roadmap e sviluppi futuri

Supporto per più linguaggi: Espansione oltre JavaScript/TypeScript per includere CSS, HTML, Markdown e altri linguaggi.
Sistema di plugin: Introduzione di un sistema di estensibilità per consentire regole personalizzate e integrazioni.
Più regole e controlli: Aumento del numero di regole di linting disponibili.
Organizer: Strumento per organizzare automaticamente le importazioni e il codice.
Miglioramenti all'analisi statica: Analisi più sofisticata per rilevare bug più complessi.
IDE features: Espansione delle funzionalità per IDE e editor di codice.
Test Runner: Potenziale integrazione di un test runner unificato.

Tendenze nell'ecosistema di sviluppo

Biome si inserisce in alcune tendenze più ampie nell'ecosistema di sviluppo:

Strumenti Rust-based: Crescente adozione di strumenti di sviluppo scritti in Rust per la loro performance (SWC, esbuild, Turbopack, ecc.)
Consolidamento degli strumenti: Preferenza per strumenti "all-in-one" rispetto a molteplici strumenti specializzati.
Developer Experience (DX): Focus crescente sugli strumenti che migliorano la DX riducendo attrito e tempi di attesa.
Zero-config: Preferenza per strumenti che funzionano bene con configurazioni predefinite.

Conclusione

Biome rappresenta un'evoluzione significativa negli strumenti di quality assurance per lo sviluppo JavaScript e TypeScript. Offrendo un'alternativa unificata, performante e facile da configurare a ESLint e Prettier, Biome risponde a frustrazioni reali che molti sviluppatori hanno sperimentato con gli strumenti esistenti.

Sebbene non abbia ancora raggiunto la maturità e la flessibilità della combinazione ESLint+Prettier, Biome sta colmando rapidamente questo divario e offre già vantaggi convincenti che lo rendono una scelta attraente per molti progetti, soprattutto quelli di grandi dimensioni o quelli che iniziano da zero.

La scelta tra Biome e gli strumenti tradizionali dipenderà dalle esigenze specifiche del progetto, dalle priorità del team e dalla tolleranza per l'adozione di tecnologie più recenti. In ogni caso, la competizione sana tra questi strumenti sta già portando a miglioramenti in tutto l'ecosistema, beneficiando tutti gli sviluppatori JavaScript.

Che scegliate di adottare Biome oggi, di pianificare una migrazione futura o di rimanere con gli strumenti consolidati, vale la pena tenere d'occhio questo promettente newcomer che sta ridefinendo gli standard per velocità, semplicità e integrazione negli strumenti di qualità del codice.

Risorse utili

Documentazione ufficiale di Biome
Repository GitHub di Biome
Documentazione ESLint
Documentazione Prettier
Biome vs ESLint Performance Benchmarks
Estensione VSCode per Biome
Guida alla migrazione da ESLint a Biome
Rome Tools: The Road to Rome - Post sul blog che spiega le origini del progetto
Biome Announcement - Annuncio del rebrand da Rome a Biome

Biome: Il Nuovo Linter/Formatter che Sfida ESLint e Prettier

Edoardo Midali