Prezentace z WP Weekendu #1 o tom, jak ve WordPressu poskládat uživatelské rozhraní z WP REST API, Reactu a TypeScriptu.

1. REST API, React &
TypeScript
WP Weekend, 28. 5. 2016

2. Proč

3. Historie WP UIs

4. Historie WP UIs

5. Historie WP UIs

6. Budoucnost WP UIs

7. WP REST API

8. REST
• Data namísto prezentace
• (JSON namísto HTML)
• Prezentace je starostí klienta
• … nebo nemusí být vůbec

9. 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

11. 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, …

12. Proč zrovna React
• Jednoduchost, rychlost
• Flexibilita – webový DOM, React Native, statické
stránky, …
• Silná komunita
• (a Automattic ho tlačí)

13. Čí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ý

14. 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.

15. React

16. React

17. React

18. React

19. React

20. React
• Komponentový přístup
• Komponenta je funkce
• f(data)  prezentace
• JSX
• Neporušuje separation of concerns
• Užitečné zjednodušení

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

22. 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

23. TypeScript

24. 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…)

26. Nejlákavější vlastnosti TypeScriptu
1. Datové typy
2. Novější ES6/7 features transpilované do ES5/3
3. Čitelný generovaný kód

27. Demo

28. Díky!
@borekb
@versionpress