controllare la wp rest api tramite javascript e react · cos'é il 'nuovo'...
TRANSCRIPT
Controllare la WP REST API tramiteJavaScript e React
#wctrn Luigi Maselli - corso-javascript.it
Luigi MaselliFullstack JavaScript Developerhttps://grigio.orghttps://corso-javascript.it
#wctrn Luigi Maselli - corso-javascript.it
● Cos'é un'API (WP admin Calypso)● Cos'é il 'nuovo' JavaScript (e React)● Demo: Frontend alternativo con JS / React
Argomenti
#wctrn Luigi Maselli - corso-javascript.it
Cos'é WordPress?
WP PHPHTML
#wctrn Luigi Maselli - corso-javascript.it
Cos'é WP Calypso Admin UI + REST API ?
WP PHPJSON
VIEW / HTML
#wctrn Luigi Maselli - corso-javascript.it
● Interoperabilità: dati (JSON) WP mostrati in app native● Performance: la maggior parte della view non cambia● Separazione responsabilità: Frontend(s), Backend, dati,
presentazione, meno complessità e app che 'fa tutto'
Perché cambiare?
#wctrn Luigi Maselli - corso-javascript.it
#wctrn Luigi Maselli - corso-javascript.it
● Solo blog: mi basta WP, al max ritocco il tema responsive● Poco budget / tempo● Vendo un prodotto non un servizio
Perché NON cambiare?
#wctrn Luigi Maselli - corso-javascript.it
● Accessible Programmable Interface● Una 'cosa' che fa "fare cose" agli sviluppatori● es. 'accedere ai post'
Cos'é un'API?
#wctrn Luigi Maselli - corso-javascript.it
● es. get_posts● Doc https://developer.wordpress.org/reference/functions/get_posts/● Accessibile da PHP (dall'interno dell'applicazione)
WP API (PHP)
#wctrn Luigi Maselli - corso-javascript.it
● /posts (url accessibile dall'esterno dell'applicazione)● Demo http://demo.wp-api.org/wp-json/wp/v2/posts● Abilitare il plugin sul proprio WordPress● Doc http://v2.wp-api.org/reference/posts/
WP REST (o JSON, HTTP) API
#wctrn Luigi Maselli - corso-javascript.it
#wctrn Luigi Maselli - corso-javascript.it
#wctrn Luigi Maselli - corso-javascript.it
#wctrn Luigi Maselli - corso-javascript.it
☐ Script che twitta in automatico ?☐ Grafici 'alternativi' sulle stats di utilizzo di WP ?☐ ...☑ Frontend 'alternativo' con JavaScript ES6 e ReactJS
Abbiamo i dati!!!! E ora?
#wctrn Luigi Maselli - corso-javascript.it
JavaScript è ovunque!!
#wctrn Luigi Maselli - corso-javascript.it
E... jQuery ??
#wctrn Luigi Maselli - corso-javascript.it
Prendere i dati dalla ns App JS
#wctrn Luigi Maselli - corso-javascript.it
● Funziona in JavaScript Client / Server (NodeJS)● Polyfill se non supportato nativamente
fetch ..
#wctrn Luigi Maselli - corso-javascript.it
● Virtual DOM● View astratta JSX: renderizzata in HTML DOM o View Nativa)● Componenti
- blocchi di codice che encapsulano funzionalità e vista- possono interagire con uno stato esterno o proprio
ReactJS / React Native
#wctrn Luigi Maselli - corso-javascript.it
Es. componente <Counter />
#wctrn Luigi Maselli - corso-javascript.it
Es. utilizzo di <Counter />
#wctrn Luigi Maselli - corso-javascript.it
Componente <PostList> che detiene lo stato e passa aicomponenti figli le azioni che permettono di variare lostato dell'app
Codice completogithub.com/corso-javascript/react-wp-demo
Nel caso di WordPress..
#wctrn Luigi Maselli - corso-javascript.it
● Le API di WordPress permettono una più facileintegrazione in progetti esterni e NON-PHP/WP (es. WPCalypso)
● JavaScript > Web / HTML
Recap
#wctrn Luigi Maselli - corso-javascript.it
Se siete interessati ad imparare il 'nuovo' JavaScript ES6..
corso-javascript.itcodice WPTO o bit.ly/corso-javascript-wpto
Grazie!