Esperimenti del progetto WordExpress con l'introduzione di GraphQL su WordPress

Nel 2012, quando Facebook ha iniziato a riprogettare le sue applicazioni mobili basate su HTML5 in modo che fossero app native iOS o Android, l'azienda ha inventato GraphQL. Questo nuovo linguaggio di query open source viene annunciato come un sostituto diretto di REST. GraphQL fornisce un modo più efficiente per supportare il volume di interazione che avviene ogni giorno tra le app di Facebook, ma è indipendente dal database e costruito per essere utilizzato oltre Facebook.

Sebbene GraphQL sia ancora relativamente nuovo, grandi aziende come Intuit, Coursera, Pinterest e Shopify lo stanno utilizzando nella produzione. Il mese scorso GitHub ha annunciato il supporto GraphQL per la sua API GitHub per rispondere ad alcuni degli svantaggi della sua architettura REST.

GraphQL offre un nuovo modo di strutturare la comunicazione dal client al server che rende più efficiente il recupero dei dati. Nel suo articolo GraphQL nell'era delle API REST, Petr Bela riassume la differenza tra i due tipi di architettura:

La potenza di GraphQL deriva da un'idea semplice: invece di definire la struttura delle risposte sul server, la flessibilità viene data al client. Ogni richiesta specifica quali campi e relazioni vuole recuperare e GraphQL costruirà una risposta su misura per questa particolare richiesta. Il vantaggio: è necessario un solo viaggio di andata e ritorno per recuperare tutti i dati complessi che altrimenti potrebbero estendersi su più endpoint REST e allo stesso tempo restituire solo i dati effettivamente necessari e nient'altro.

Il mese scorso Facebook ha annunciato che GraphQL sta uscendo dalla fase di "anteprima tecnica" ed è ora pronto per la produzione. È stato implementato in molti linguaggi di programmazione diversi ed è già stato adottato dalle aziende che desideravano un modo più efficiente di accedere ai dati.

WordExpress porta GraphQL su WordPress

Ramsay Lanier, uno sviluppatore front-end JavaScript che lavora presso ncud a Washington, DC, ha creato un'implementazione WordPress basata su GraphQL chiamata WordExpress. Lanier non è un fan di PHP e non gli piace lavorare con il loop o i modelli, tutte cose che storicamente hanno costituito la maggior parte dello sviluppo front-end di WordPress. Ha creato WordExpress come applicazione Node.js con l'obiettivo di sostituire PHP con JavaScript per il lato di presentazione di WordPress. Utilizza i componenti Express sul back-end e React sul front-end. GraphQL si trova tra i due per recuperare i dati dal database di WordPress.

"Quando ho iniziato con l'idea per WordExpress, volevo utilizzare l'API REST, ma ho scoperto che gli endpoint esistenti non erano quelli che volevo", ha detto Lanier. “Finirei per dover scrivere un mucchio di endpoint personalizzati e concatenare le chiamate. Quindi ho pensato di provare GraphQL.

Ha scoperto che GraphQL è più efficiente di REST, perché riduce i round trip al server, consentendo agli sviluppatori di concentrarsi sui dati di cui il client ha realmente bisogno. Lanier ha evidenziato i vantaggi relativi ai siti WordPress:

Con GraphQL, il client determina i dati esatti di cui ha bisogno tramite una query GraphQL. La query GraphQL dispone di una funzione di risoluzione personalizzata che determina come vengono recuperati i dati. In quella funzione, puoi persino accedere a più database. Ad esempio, con WordPress hai un database MySQL, ma potresti anche avere un database Mongo per un'applicazione che memorizza altri dati che non devono essere relazionali. Nella funzione di risoluzione di GraphQL, è possibile effettuare chiamate per recuperare i dati da entrambi i database e rispedirli al client in un round trip del server.

WordExpress, nella sua forma attuale, è un buon punto di partenza per la creazione di applicazioni basate su JavaScript che utilizzano WordPress per l'amministrazione. Lanier ha affermato che questa configurazione di sviluppo gli consente di creare componenti di pagine Web e applicazioni molto più facilmente rispetto ai modelli PHP.

"Con React, ogni componente contiene non solo il markup per visualizzare gli elementi, ma lo stile per quel componente, i dati necessari per funzionare e anche qualsiasi logica di interazione, il tutto in uno o due file", ha affermato.

Sfide attuali di WordExpress: compatibilità dei plug-in e rendering lato server

Nonostante tutti gli entusiasmanti vantaggi di query più efficienti e la possibilità di un frontend basato su JavaScript, il progetto WordExpress presenta una serie di serie sfide che lo renderebbero problematico da utilizzare in produzione al di là di una semplice installazione di blog. Non è compatibile con la stragrande maggioranza dei plugin di WordPress, poiché la maggior parte sono scritti in PHP.

"In sostanza, ho sostituito l'intero front-end, il che significa che qualsiasi plug-in che influisca sul front-end non farà nulla", ha detto Lanier. "Tuttavia, puoi sicuramente sfruttare i plug-in esistenti che influiscono sul lato amministrativo delle cose (come Advanced Custom Fields o il plug-in AWS S3). Tutto ciò che manipola il modo in cui i dati di WordPress vengono archiviati in MySQL è ancora utilizzabile: devi solo modificare lo schema GraphQL e le query per lavorare con loro. "

L'altra grande sfida è far funzionare il rendering lato server, necessario per gestire cose come SEO e meta tag. Apollostack, che WordExpress utilizza per recuperare i dati e consegnarli ai componenti React, ha aggiunto solo di recente il supporto iniziale per il rendering automatico lato server.

"Sono passato dall'utilizzo di Relay di Facebook ad ApolloStack", ha detto Lanier. “Entrambe sono tecnologie piuttosto nuove e non sono sicuro che nessuna delle due abbia davvero capito come gestire molto bene il rendering lato server. Non l'ho esaminato per alcuni mesi e le cose si sono mosse abbastanza rapidamente con ApolloStack, quindi a quest'ora potrebbero averlo capito".

Per ora, WordExpress è solo una prova di concetto e Lanier ha detto che non ha in programma di provare a supportare i plugin esistenti. Dato che WordExpress al momento non può sfruttare temi e plug-in, alcune delle parti migliori dell'ecosistema WordPress, Lanier ha affermato che gli sviluppatori che utilizzano questo stack sono probabilmente più interessati a preservare il potere del lato amministrativo di WordPress.

"Adoro l'amministratore di WordPress", ha detto. “È molto potente e facile da usare per gestire i contenuti. WordExpress sarebbe un punto di partenza per qualsiasi sviluppatore JavaScript che desideri creare applicazioni WordPress utilizzando solo JavaScript".

L'obiettivo di Lanier con WordExpress è trasformarlo in un pacchetto npm che può essere riutilizzato in una varietà di diversi progetti React. Ha già pubblicato due pacchetti WordExpress npm che funzionano insieme: wordexpress-schema (gestisce lo schema GraphQL e le impostazioni di connessione) e wordexpress-components (attualmente ospita i primi due componenti, WordExpressPage e WordExpressMenu). Poiché il progetto è basato su Node.js, gli sviluppatori possono utilizzare qualsiasi pacchetto npm che desiderano, una consolazione per la compatibilità limitata dei plug-in.

GraphQL e l'API REST di WP

Molti di coloro che prevedono che GraphQL diventerà un sostituto diretto di REST sono anche dell'opinione che i due possano coesistere. In effetti, Facebook ha recentemente scritto una guida per il wrapping di un'API REST in GraphQL.

"È probabile che se GraphQL si rivelerà efficace, coesisterà con le API REST", ha affermato Petr Bela. “Alcune API utilizzeranno REST, altre utilizzeranno GraphQL. Alcuni potrebbero supportare entrambi”. Prevede che il settore impiegherebbe anni, forse anche un decennio, per passare completamente da REST a GraphQL.

WordExpress di Lanier, che ha recentemente superato le 1.000 stelle su GitHub, è attualmente l'unico progetto open source che sta esplorando pubblicamente un'implementazione di WordPress basata su GraphQL. Una ricerca superficiale su GitHub rivela che molti altri stanno sperimentando configurazioni simili. Fortunatamente, GraphQL non richiede alcuna modifica al core di WordPress per consentire ai siti di utilizzare l'API per eseguire query sul database.

Lanier ha affermato di apprezzare il lavoro di coloro che stanno cercando di fondere l'API REST di WP nel core e di non vedere le implementazioni di GraphQL come una minaccia per questo.

"Penso che il lavoro che stanno facendo con l'API REST sia roba buona", ha detto. “Avevano decisamente bisogno di fare quel passo. REST è in circolazione da molto tempo: GraphQL è ancora piuttosto nuovo, quindi ha senso seguire la strada REST. Inoltre, molte più persone sanno come usarlo. La cosa bella di GraphQL è che puoi usarlo per avvolgere un'API REST, in modo che possano coesistere entrambi".

La possibilità che WordExpress vada oltre un semplice proof-of-concept dipende dal feedback della community. Lanier ha affermato che gli sviluppatori stanno dimostrando interesse per WordExpress biforcandolo e ponendo domande.

"Le persone lo usano, giocano e (si spera) lo fanno proprio", ha detto. “Penso che l'interesse ci sia. Per renderlo davvero fattibile, però, è necessario un intero team di sviluppatori che lo renda un'opzione di prim'ordine".

Lanier ha recentemente accettato un nuovo lavoro in cui utilizza React 100% e non ha avuto l'opportunità di utilizzare WordPress per un po', ma ha detto che è disposto a esplorare la collaborazione per rendere pronta la produzione di WordExpress.

"Se le persone fossero davvero interessate e volessero riunirsi per trasformarla in una soluzione fattibile, sarei coinvolto al 100%", ha detto.

Gli sviluppatori che vogliono testarlo e iniziare a sviluppare con WordExpress avranno bisogno di una conoscenza di base di come funziona React. Lanier ha scritto una documentazione dettagliata su come viene impostata l'implementazione di GraphQL e su come estendere le query GraphQL e i modelli di database. Il sito WordExpress.io è una demo live del codice, che puoi trovare su GitHub.