 Gioco in casa. Allora, ciao a tutti, sono Luigi, e appunto il titolo del mio talk è controllare l'AVP REST API tramite JavaScript React. In realtà ci dedicano su ogni topic REST API JavaScript React sono tre conferenze diverse, quindi non vi aspettate che tratterò tutti i temi con lo stesso dettaglio. Quindi io sono appunto Luigi Maselli, sono un full stack JavaScript developer, i misiti di riferimento sono grigio.org, un blog dove parlo di tecnologia non solo di JavaScript e l'altro è corso JavaScript.it che è un mio ultimo progetto. Quindi gli argomenti che tratterò in questo spazio sono appunto cos'è un API con qualche accenno a questa novità che ha spaventato un po' tante persone del mondo WordPress, quindi questa nuova admin calypso. Non scenderò nei dettagli però utilizzerò appunto delle tecniche che mi permetteranno di accedere a questi API per fare altre cose. E appunto accenerò anche del nuovo JavaScript che probabilmente non è quello che state utilizzando in questo momento all'interno dei vostri blog perché in realtà anche qui si ha aperto un mondo di opportunità e alla fine vi farò vedere un demo che appunto utilizzerà JavaScript e React per proporre un front-end indipendente alternativo che accederà alle API. Quindi cos'è WordPress? Dal punto di vista di uno sviluppatore sostanzialmente è una scatola che ci restituisce vient HTML. La gran parte dei siti internet, soprattutto quelli che utilizzano molti contenuti, funziona ancora in questo modo. Però quello che si sta venendo sempre più spesso, il fatto di andare verso le applicazioni web e non siti web, quello al quale vorremmo tendere è questo. Quindi avere la separazione dei contenuti dalla loro presentazione e poter accedere a questo file JSON che rappresente i dati e fare la variazione nella parte client che non significa ormai solo più l'HTML ma se parliamo di applicazioni native significa ridisegnare l'applicazione nativa in base ai dati che sono cambiati rispetto le richieste precedenti. Quindi perché cambiare? Innanzitutto questo processo di cambiamento non sarà una cosa immediata come abbiamo visto su WordPress. Tuttavia se utilizziamo WordPress integrato con altre tecnologie, altri framework, altre cose, quello che ci interessa è avere l'interoperabilità, quindi avere una separazione tra i dati e l'effettiva la rappresentazione, perché appunto possiamo avere applicazioni specifiche, native, mobile, responsive, eccetera. Un altro motivo sono le performance. Quando noi chiamiamo una pagina verso il server e ci viene restituito l'HTML, in realtà andiamo a dare al client molte informazioni che lui ha già e quindi il fatto di dare solidati ci permette di conservare quello che già abbiamo e quindi dare una maggiore fluidità all'utente. E poi un altro problema più tecnico è quello della separazione della responsabilità, quindi il fatto di avere dei team, dei progetti focalizzati sulla presentazione e altri team magari dedicati al backend, alla validazione dei dati così di questo tipo e quindi andare un po' via da questo approccio dell'applicazione che fa tutto ma avere più progetti a seconda dei vari casi d'uso. Questa è un'immagine che ho postato sul mio blog perché spesso è difficile capire quale è la tecnologia più corretta per risolvere i problemi che abbiamo e purtroppo non c'è una risposta che va bene a tutti, non esiste neanche per sbucciare le patate per dire e quindi alcuni tipi di cambiamenti per forza di cose dobbiamo saper maneggiare un coltello. Maneggiare un coltello significa comunque fare delle cose potenzialmente pericolose che si rompono però per task che sono in qualche modo più contextualizzati per esempio può nascere una libreria quindi in quel caso lì lo sbucci a patate se dobbiamo solo sbucciare le patate con l'altro strumento possiamo essere molto più veloci e poi ci sono altre soluzioni quali framework o addirittura sas quindi delegare alcuni processi della nostra applicazione all'esterno. Perché non cambiare? Ovviamente questi cambiamenti non sono immediati non sono tutti facili e è sempre un compromesso per esempio persone che usano wordpress per quello per cui è nato blog probabilmente non sono così motivati a cambiare il funzionamento di come sta funzionando in questo momento il loro cms e poi ovviamente si tratta di tecnologie che sono ancora un po' in movimento e quindi bisogna sempre mettere sul piatto della bilancia anche il budget e il tempo che si vuole dedicare. Ovviamente questo discorso è più interessante per chi utilizza le tecnologie web per fare dei servizi e non per vendere dei prodotti fisici perché probabilmente queste innovazioni non cambieranno di molto il suo caso d'uso. Quindi cos'è un API? Sta per accessible programmable interface in realtà significa tantissime cose e la definizione è più semplice è una cosa che fa fare altre cose agli sviluppatori per esempio vedremo un esempio semplice quindi accedere a dei post che sono presenti nel nostro cms di wordpress. La prima opzione che abbiamo è quello appunto di adentrarci nel cms stesso questo presuppone che noi conosciamo php e che vogliamo appunto modificare dall'interno il comportamento. Abbiamo una funzione php getPost e appunto questo ci permette di accedere ai post dall'interno del cms. In realtà quello che noi interesserà di più in questo esempio è la REST PI. Questa REST PI ci permette tramite il protocollo HTTP di chiamare delle informazioni che sono presenti già in un'istanza wordpress online e possiamo addirittura utilizzare le PI demo di wordpress per appunto sperimentare magari dei frontend alternativi senza andare a modificare temi o altre cose all'interno di wordpress. Per abilitare le PI dovete seguire questo link che vedete che appunto ci sono le istruzioni per abilitare il plugin che vi spone le PI di wordpress e quello che otterremo appunto è facendo una chiamata quindi c'è la versione delle PI post otteniamo appunto i dati che volendo possiamo utilizzare per fare dei frontend diversi. Ovviamente esporre delle PI non è come fare delle modifiche sul wordpress stesso ci presuppone una conoscenza che va diciamo un pochino oltre al cms in questo caso quindi magari noi siamo focalizzati più sul marketing user experience frontend eccetera ci impone comunque se non di realizzare per lo meno di capire anche altre problematiche quindi autorizzazione, autorizzazione, database, networking eccetera che spesso diamo per scontato oppure ci fidiamo del cms che stiamo utilizzando e quello che accade è che se noi non abbiamo comunque una visione d'insieme del nostro progetto possono succedere delle cose di questo tipo per esempio questo un sito non è fatto con wordpress però è molto curato graficamente peccato che se aprite l'inspector di chrome vengono pubblicate le email delle ragazze che vedete quindi senza neanche registrare il sito tecnicamente potete contattare le persone quindi in questo caso è solo l'email però nel momento in cui fate un API ma non lo fate nel modo corretto insisto sarà sicuramente bellissimo però esponete a rischio appunti i dati degli utenti informazioni sensibili e quant'altro quindi sono delle cose che che vanno pensate non si fanno in 24 ore così soprattutto se si tratta di modifiche custom sì sono delle accompagnatrice ok quindi abbiamo i dati in qualsiasi modo abbiamo i dati e quindi cosa possiamo fare possiamo fare delle cose che non sono strettamente legate a wordpress per esempio possiamo prendere questi dati twittarli fare dei grafici alternativi le pi di wordpress che sono quelle che utilizza anche calypso ci spongono moltissimi informazioni noi volendo le possiamo presentare in modo diverso in questo caso vi farò vedere un front-end alternativo con il nuovo javascript e per nuovo javascript intendo un approccio completamente diverso alla programmazione che è quello di avere una bellissima applicazione in javascript che viene renderizzata per diverse piattaforme cosa vuol dire questo che noi diamo per scontato che quando utilizziamo javascript ci sia il dom per esempio questo non è sempre vero perché se vogliamo fare delle applicazioni in react native per esempio lì non abbiamo il dom e quindi questo ci impone anche un cambio di pensiero però i vantaggi sono innumerevoli perché da una sola codebase ipoteticamente possiamo realizzare un sito web un sito ibrido un sito nativo o addirittura dell'html estatico per chi non ha javascript o per il google bot e jquery jquery in realtà in questo contesto non serve più molto perché molte delle funzionalità che ci sponeva jquery si possono fare in javascript ecma script 6 standard per esempio la cosa più semplice è questa fetch che chiamiamo appunto le piai di warp press che ci spone i post quel page che vedete viene variato a seconda di quale pagina vogliamo visualizzare ci restituisceйsè una risposta e quando abbiamo i dati andiamo a cambiare la vista quindi questa funzione per esempio fetch funziona sia in javascript client side che server side e se non è disponibile possiamo utilizzare i polyfill sui browser react abbiamo visto stiamo chiamando un epi con una paginazione in realtà quello che fa react quando arrivano dei dati nuovi non distrugge quello che già presente nella pagina ci aggiunge solo quello che è cambiato o quello che è variato ci dà un linguaggio che si chiama gsx per rappresentare le viste che appunto può essere utilizzato sia per fare siti html oppure per fare via un active quindi androide ai os e ci fa pensare a componenti quindi dei blocchi di codice che hanno delle funzionalità molto isolate e che non non vanno interferire con quello che accade nel resto della pagina questo è un esempio di di contatore molto semplice che direi di non andare troppo nei dettagli comunque quando noi facciamo un click viene incrementato il valore dello stato e in automatico la vista viene ricomputata questo è il concetto proprio base di di react e quando vogliamo utilizzare questo componente noi abbiamo componente counter in questo caso l'ho messo due volte quindi avrò due widget counter independenti uno dall'altro e visto che si parla di di dom utilizziamo react dom per rendarizzare nel nell html il contenuto di questo componente nel caso di warpress ho fatto un componente chiamato post list che non fa chiamate lui stesso riceve dei dati da un componente allo stato superiore che si occupa di contattare le pi e quando questo array di items carica nuovi oggetti in automatico vengono visualizzate più pagine e ok quindi ricapitolando le pi permettono una più facile integrazione soprattutto dall'esterno e javascript non è solo più il linguaggio di programmazione utilizzato nel browser ma può e deve essere visto come un linguaggio di programmazione che può controllare tutto lo stack volendo qui vi faccio vedere il demo ok ok qui ecco cosa accade effettivamente quando uno sviluppa in questo modo viene fatto partire un web server che converte il nostro codice ecma script 6 in javascript supportato dal browser e una volta che questi file vengono compilati possiamo appunto accedere alla nostra versione di sviluppo dell'applicazione quindi qui carichiamo quando il componente è pronto la prima lista e quando clicchiamo carica ancora ok quello che è notate e la transizione la transizione appunto dalla pagina iniziale alla pagina del contenuto è quasi immediato perché comunque quelle informazioni vengono caricate a livello di paginazione e appunto la pagina sostanzialmente rimane quella che è ok e quindi ho finito grazie se volete approfondire il discorso su javascript potete andare sul link che vedete e potete avere uno sconto altrimenti sono qua se avete delle domande ci sono domande ciao volevo chiederti in warpress c'è attualmente qualche tema base o diciamo qualche codice riguardanti i temi che utilizza questa tecnologia che si può guardare o qualche risorse online a riguardo allora di tema che io sappia non ce ne sono però l'esempio che puoi vedere come caso reale il più grosso possibile è calypso che diciamo implementa tutto lo stack quindi no js react eccetera fa delle chiamate e lì ti fa capire anche proprio il modo diverso con il quale utilizzi warpress perché poi lo scopo è quello di utilizzare warpress solo come un fornitore di dati sostanzialmente a livello tema nulla tvieta di ricchiamare fare un tema vuoto e richiamare le dipendenze che ti servono quindi sostanzialmente react e il transpiler per convertire il codice in ecmascript 5 altre domande ok grazie ancora ciao