Downloaded 16 times
Uploaded byBorek Bernard
WordPress REST API + React + TypeScript
Prezentace z WP Weekendu #1 o tom, jak ve WordPressu poskládat uživatelské rozhraní z WP REST API, Reactu a TypeScriptu.
![Smalltalk prakticky [CZ]](https://cdn.slidesharecdn.com/ss_thumbnails/smalltalkprakticky-130316153557-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
WordPress REST API + React + TypeScript
- 1. REST API, React& TypeScript WP Weekend, 28. 5. 2016
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. REST • Data namístoprezentace • (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/ • Viewknihovna 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 proWP 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.
- 16.
- 17.
- 18.
- 19.
- 20. React • Komponentový přístup •Komponenta je funkce • f(data) prezentace • JSX • Neporušuje separation of concerns • Užitečné zjednodušení
- 21.
- 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.
- 24. TypeScript • Transpiler vestylu 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.
- 28.