REST API, React & TypeScript

WP Weekend, 28. 5. 2016

Proč

Historie WP UIs

PHP MySQL

Historie WP UIs

PHP MySQL

jQuery

Historie WP UIs

PHP MySQL

jQueryBackbone

Underscore.js

Budoucnost WP UIs

PHP MySQL

React API

WP REST API

REST• Data namísto prezentace• (JSON namísto HTML)

• Prezentace je starostí klienta• … nebo nemusí být vůbec

WP REST API• Infrastruktura• V jádře od v4.4• Umožňuje psát vlastní endpointy

• 4 hlavní endpointy• Zatím plugin (trable s mergnutím do jádra)• Posts, terms, comments, users

React• https://facebook.github.io/react/

• View knihovna od Facebooku• „V“ v „MVC“• Potřebuje k sobě další věci: flux / Redux, webpack,

relay, práce s daty, …

Proč zrovna React• Jednoduchost, rychlost• Flexibilita – webový DOM, React Native, statické

stránky, …• Silná komunita

• (a Automattic ho tlačí)

Čím je jiný• Oproti jQuery apod.:• vývojář nemanipuluje s DOMem (Virtual DOM)• lepří z pohledu programování• … a výkonu

• Oproti Angularu apod.:• React není rozsáhlý framework• Nemá „názor“ na práci s daty• Brutálně jednoduchý

Use casy pro WP vývojáře• Frontend• „Headless CMS“• Nomadbase, mobilní apky

• Lepší administrace• Okamžitá odezva• Příjemnější pro uživatele• Calypso, VersionPress, ManageWP apod.

React

React

React

React

React

React• Komponentový přístup• Komponenta je funkce• f(data) prezentace

• JSX• Neporušuje separation of concerns• Užitečné zjednodušení

React

Source: http://www.slideshare.net/AndrewHull/react-js-and-why-its-awesome

React a data• React data neřeší• Na fetch dat: `fetch()` nebo třeba jQuery• Na správu dat lokálně: flux, Redux

Action Reducer Store View

Redux

TypeScript

TypeScript• Transpiler ve stylu CoffeeScriptu, ClojureScript,

Babelu apod.• ALE: velmi blízko JavaScriptu• „Každý JavaScript je validní TypeScript“

• Od Microsoftu, resp. skvělého týmu kolem C# (Anders Hejlsberg…)

Nejlákavější vlastnosti TypeScriptu1. Datové typy2. Novější ES6/7 features transpilované do ES5/33. Čitelný generovaný kód

Demo

Díky!@borekb@versionpress