Recentemente abbiamo lanciato il nostro nuovo prodotto Bit Social, un plugin utilizzato per condividere i contenuti di WordPress sui social media. Sebbene molti plugin offrano funzionalità simili, abbiamo voluto creare qualcosa che si distinguesse per il suo design facile da usare e per la sua robusta serie di funzioni. Bit Social è in continua evoluzione, con l'aggiunta regolare di nuove funzionalità in base al feedback della comunità, che è stato estremamente positivo. Bit Social e altri nostri prodotti popolari come Forma del bit e Integrazioni di bithanno guadagnato una notevole popolarità per la loro velocità e le loro interfacce intuitive. Per questo motivo, abbiamo voluto condividere lo stack tecnologico che sta dietro ai nostri prodotti e le ragioni per cui abbiamo scelto queste tecnologie.
In questo articolo parleremo delle tecnologie che abbiamo utilizzato per creare Bit Social e del perché le abbiamo scelte. Inoltre, forniremo alcuni spunti su come utilizziamo queste tecnologie per creare un'esperienza utente senza soluzione di continuità.
In WordPress non esiste un quadro specifico o uno standard de facto per la struttura dei plugin. Sebbene questa flessibilità sia uno dei punti di forza di WordPress, può anche essere scoraggiante per gli sviluppatori che sono alle prime armi con la creazione di plugin. Nonostante la mancanza di un'architettura fissa, esistono principi fondamentali, best practice e misure di sicurezza essenziali che gli sviluppatori dovrebbero seguire.
Dalla nostra esperienza con Bit Form, riteniamo che sia importante mantenere una base di codice riutilizzabile e manutenibile. Per semplificare lo sviluppo futuro, abbiamo deciso di creare un boilerplate/framework che includa componenti riutilizzabili e segua le best practice, garantendo coerenza ed efficienza nei nostri prossimi prodotti.
L'obiettivo principale di un boilerplate o framework è quello di offrire una solida base per lo sviluppo di plugin WordPress. Accelera lo sviluppo, migliora la struttura del codice e semplifica la manutenzione e i test a lungo termine. Inoltre, l'utilizzo di un framework garantisce la coerenza tra i diversi plugin, offrendo un vantaggio significativo.
La nostra architettura frontend è costruita utilizzando Reagireè una libreria JavaScript molto utilizzata per lo sviluppo di interfacce utente. La velocità, la semplicità e la flessibilità di React la rendono ideale per costruire applicazioni web dinamiche e interattive. Con TypeScript integrato nella nostra base di codice React, beneficiamo di un robusto controllo dei tipi, che ci aiuta a individuare potenziali errori durante lo sviluppo, garantendo un codice più pulito e manutenibile prima della distribuzione.
Per il nostro sistema di progettazione, sfruttiamo Design della formicauna popolare libreria React UI che offre un insieme completo di componenti e stili precostituiti. In combinazione con le nostre linee guida di design personalizzate, Ant Design ci aiuta a fornire un'interfaccia utente coerente e visivamente accattivante, garantendo un'esperienza senza soluzione di continuità in tutti i nostri prodotti.
La gestione degli stati gioca un ruolo fondamentale nel moderno sviluppo front-end. Mentre Redux è una scelta di lunga data per molti, noi abbiamo optato per Recoil.js e Jotai per la gestione dello stato dell'applicazione. Queste librerie introducono il concetto di atomic store, rendendo la gestione dello stato più modulare e intuitiva. La loro natura leggera e la sintassi simile a quella di React forniscono una soluzione più leggibile, flessibile ed efficiente rispetto a Redux, rendendole ideali per l'architettura della nostra applicazione.
Per offrire un'esperienza utente senza interruzioni, ci concentriamo molto sul recupero dei dati e sulla cache. A differenza dei tradizionali plugin di WordPress, che ricaricano intere pagine e recuperano dati a ogni navigazione, il nostro design di applicazione a pagina singola (SPA) migliora l'esperienza dell'utente evitando di ricaricare intere pagine. Utilizziamo Query di React (di Tanstack), un potente strumento per la gestione del fetching e del caching dei dati, che ci permette di ottimizzare le prestazioni recuperando solo i dati necessari, mettendoli in cache per un uso futuro e gestendo in modo efficiente la paginazione e gli stati di errore. In questo modo garantiamo che gli utenti non subiscano inutili ritardi nella navigazione dei nostri prodotti.
Per mantenere un'elevata qualità del codice e applicare le best practice, integriamo ESLint e Più bella nel nostro flusso di lavoro. `ESLint` aiuta a individuare potenziali problemi e a far rispettare gli standard di codifica, mentre Prettier assicura una formattazione coerente del codice nell'intera base di codice. Inoltre, utilizziamo hook di Git come Lefthook e Commitlint per imporre controlli di qualità prima di ogni commit, assicurando che il codice pulito e affidabile venga inviato in produzione.
Per l'ottimizzazione di bundling e build, ci si affida a Viteuno strumento front-end di nuova generazione che offre build veloci, sostituzione a caldo dei moduli e bundle di produzione ottimizzati. L'approccio moderno di Vite accelera in modo significativo lo sviluppo e semplifica il nostro processo di creazione, rendendo più facile la distribuzione e la manutenzione dei nostri prodotti in modo efficiente.
Questa architettura non solo garantisce un'esperienza di sviluppo fluida, ma ci permette anche di fornire ai nostri utenti prodotti di alta qualità, performanti e manutenibili.
Nel cuore dello sviluppo del backend di WordPress, aderiamo alle linee guida per i plugin di WordPress e seguiamo le best practice del settore per garantire compatibilità, sicurezza e prestazioni di altissimo livello. Per migliorare la leggibilità e la qualità del codice, abbiamo adottato un'architettura modulare ispirata al famoso framework PHP Laravel. Questo approccio ci permette di isolare i componenti chiave in pacchetti riutilizzabili, consentendoci di mantenere la coerenza, ridurre le duplicazioni e semplificare lo sviluppo dei plugin. Alcuni di questi pacchetti sono open-sourced e disponibili sul nostro repository GitHub.
Alcuni componenti della nostra architettura:
Abbiamo sviluppato una serie di componenti fondamentali per gestire attività essenziali come il recupero dei dati, la cache e le richieste API. Al centro di tutto questo c'è il nostro wp-kit un insieme di componenti riutilizzabili e flessibili che semplificano lo sviluppo dei plugin. Utilizzando wp-kit, garantiamo un codice coerente e di alta qualità tra i vari plugin, accelerando lo sviluppo e consentendo la creazione di soluzioni robuste e ricche di funzionalità.
L'integrità e la sicurezza dei dati sono fondamentali nello sviluppo dei plugin. Per gestire le richieste, utilizziamo l'API REST di WordPress e wp_ajax. Per migliorare ulteriormente la sicurezza dei dati, utilizziamo wp-validatorè un pacchetto di validazione open-source ispirato all'elegante sistema di validazione di Laravel. Con una sintassi pulita ed espressiva, wp-validator consente agli sviluppatori di definire regole e messaggi di validazione riutilizzabili, semplificando il processo di mantenimento della validazione dei dati su diversi endpoint.
Per le interazioni con il database, abbiamo costruito il metodo wp-database progettato per semplificare le operazioni CRUD e snellire la gestione del database. Astrae le attività comuni del database, come l'interrogazione, l'inserimento, l'aggiornamento e l'eliminazione dei record, rendendo più facile lavorare con le tabelle di WordPress e i tipi di post personalizzati. Inoltre, offre comandi CLI per la migrazione e la semina del database, offrendo un approccio moderno alla gestione dei database di WordPress.
Per garantire una base di codice pulita e manutenibile, integriamo strumenti come PHP-CS-Fixer e PHPStan. Questi strumenti applicano gli standard di codifica ed eseguono analisi statiche, individuando tempestivamente potenziali problemi. Automatizzando questi processi, garantiamo che ogni plugin che forniamo sia affidabile, sicuro e allineato ai moderni standard di sviluppo.
Il nostro approccio modulare al backend ci consente di creare rapidamente plugin scalabili, sicuri e di alta qualità. Ci impegniamo a condividere maggiormente il nostro lavoro open-source, fornendo alla comunità strumenti che semplificano lo sviluppo di plugin per WordPress.
I test svolgono un ruolo fondamentale nel nostro processo di sviluppo, garantendo i più alti standard di qualità e affidabilità dei nostri prodotti. Nel backend, utilizziamo PHPUnit per i test unitari, ma siamo in procinto di migrare a Parassiti, un framework più moderno e facile da sviluppare che migliora sia l'efficienza che l'esperienza dello sviluppatore.
Per il front-end, Vitest è il nostro strumento preferito per i test di unità e integrazione, che garantisce che ogni componente React sia controllato a fondo e privo di bug. Questo test rigoroso ci aiuta a individuare tempestivamente i problemi, contribuendo alla stabilità complessiva delle nostre applicazioni.
Oltre ai test unitari e di integrazione, ci affidiamo a Cipresso per i test end-to-end. Con Cypress, siamo in grado di simulare le interazioni reali degli utenti e di testare le nostre applicazioni su una varietà di browser e dispositivi, garantendoci che l'esperienza dell'utente rimanga coerente e affidabile in condizioni diverse.
Per completare il nostro approccio di verifica, utilizziamo anche Libro di storie per il test dei componenti e la regressione visiva. Storybook ci permette di isolare e testare i singoli componenti dell'interfaccia utente, rendendo più facile individuare le incoerenze di progettazione e i potenziali problemi prima che si ripercuotano sull'interfaccia utente complessiva.
Combinando questi potenti strumenti, manteniamo una forte attenzione alla qualità del codice e alla robustezza del prodotto, assicurando che le nostre applicazioni siano ben testate, visivamente coerenti e affidabili per i nostri utenti.
Quando distribuiamo i plugin, utilizziamo il Plugin Repository di WordPress.org come piattaforma principale per garantire un'ampia accessibilità agli utenti di WordPress in tutto il mondo. Questo repository è l'hub centrale per la distribuzione dei plugin di WordPress e consente a milioni di utenti di scoprire, scaricare e installare i plugin direttamente nelle loro installazioni di WordPress.
Per mantenere standard di alta qualità, seguiamo rigorosamente le Linee guida per i plugin di WordPress. Queste linee guida coprono tutti gli aspetti, dalla qualità del codice alla sicurezza e alla corretta documentazione dei plugin, assicurando che i nostri prodotti soddisfino i più alti parametri di compatibilità, prestazioni e sicurezza. Il rispetto di queste linee guida ci aiuta a evitare potenziali problemi come conflitti con altri plugin o aggiornamenti del nucleo di WordPress.
Per gestire il processo di sviluppo e distribuzione, utilizziamo Azioni GitHub per automatizzare l'integrazione continua e la distribuzione continua (CI/CD). Questo approccio ci consente di ottimizzare il ciclo di rilascio dei plugin. Grazie al CI/CD, ogni modifica apportata alla nostra base di codice viene automaticamente testata, costruita e preparata per il rilascio. Questa automazione riduce al minimo gli errori umani e garantisce che i nostri plugin rimangano aggiornati e funzionino in modo affidabile per gli utenti.
Questo flusso di lavoro senza soluzione di continuità significa che gli utenti hanno sempre accesso alle ultime funzionalità, ai miglioramenti delle prestazioni e alle patch di sicurezza senza ritardi. Sfruttando questi sistemi e queste best practice, garantiamo che i nostri plugin offrano un'esperienza utente eccellente, rimanendo al contempo sicuri, compatibili e ben mantenuti nel tempo.
Il nostro impegno a fornire prodotti di alta qualità e di facile utilizzo si riflette nelle tecnologie che utilizziamo e nelle pratiche di sviluppo che seguiamo. Utilizzando strumenti e framework moderni, creiamo soluzioni robuste, performanti e manutenibili che soddisfano le esigenze in continua evoluzione dei nostri utenti. Bit Social è il primo prodotto che abbiamo realizzato utilizzando il nostro boilerplate e siamo entusiasti di continuare a perfezionare ed espandere i nostri prodotti per fornire ancora più valore ai nostri utenti.
IT 
EN 
ES 
FR 
DE 
PT 
NL