Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
REST API, React &
TypeScript
WP Weekend, 28. 5. 2016
Proč
Historie WP UIs
Historie WP UIs
Historie WP UIs
Budoucnost WP UIs
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 (trab...
React
• https://facebook.github.io/react/
• View knihovna od Facebooku
• „V“ v „MVC“
• Potřebuje k sobě další věci: flux /...
Proč zrovna React
• Jednoduchost, rychlost
• Flexibilita – webový DOM, React Native, statické
stránky, …
• Silná komunita
...
Čím je jiný
• Oproti jQuery apod.:
• vývojář nemanipuluje s DOMem (Virtual DOM)
• lepří z pohledu programování
• … a výkon...
Use casy pro WP vývojáře
• Frontend
• „Headless CMS“
• Nomadbase, mobilní apky
• Lepší administrace
• Okamžitá odezva
• Př...
React
React
React
React
React
React
• Komponentový přístup
• Komponenta je funkce
• f(data)  prezentace
• JSX
• Neporušuje separation of concerns
• Uži...
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 R...
TypeScript
TypeScript
• Transpiler ve stylu CoffeeScriptu, ClojureScript,
Babelu apod.
• ALE: velmi blízko JavaScriptu
• „Každý JavaS...
Nejlákavější vlastnosti TypeScriptu
1. Datové typy
2. Novější ES6/7 features transpilované do ES5/3
3. Čitelný generovaný ...
Demo
Díky!
@borekb
@versionpress
WordPress REST API + React + TypeScript
WordPress REST API + React + TypeScript
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
React & Redux
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

WordPress REST API + React + TypeScript

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

WordPress REST API + React + TypeScript

  1. 1. REST API, React & TypeScript WP Weekend, 28. 5. 2016
  2. 2. Proč
  3. 3. Historie WP UIs
  4. 4. Historie WP UIs
  5. 5. Historie WP UIs
  6. 6. Budoucnost WP UIs
  7. 7. WP REST API
  8. 8. REST • Data namísto prezentace • (JSON namísto HTML) • Prezentace je starostí klienta • … nebo nemusí být vůbec
  9. 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
  10. 10. 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, …
  11. 11. Proč zrovna React • Jednoduchost, rychlost • Flexibilita – webový DOM, React Native, statické stránky, … • Silná komunita • (a Automattic ho tlačí)
  12. 12. Čí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ý
  13. 13. 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.
  14. 14. React
  15. 15. React
  16. 16. React
  17. 17. React
  18. 18. React
  19. 19. React • Komponentový přístup • Komponenta je funkce • f(data)  prezentace • JSX • Neporušuje separation of concerns • Užitečné zjednodušení
  20. 20. React Source: http://www.slideshare.net/AndrewHull/react-js-and-why-its-awesome
  21. 21. 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
  22. 22. TypeScript
  23. 23. 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…)
  24. 24. Nejlákavější vlastnosti TypeScriptu 1. Datové typy 2. Novější ES6/7 features transpilované do ES5/3 3. Čitelný generovaný kód
  25. 25. Demo
  26. 26. Díky! @borekb @versionpress
  • lukascir

    May. 30, 2016

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

Views

Total views

1,558

On Slideshare

0

From embeds

0

Number of embeds

6

Actions

Downloads

14

Shares

0

Comments

0

Likes

1

×