WCSD17

Single page apps are all the rage these days, but did you know you can use WordPress to help you build one!? This presentation will go over the basics of single page app frameworks (React/Angular) and how to use them with WordPress.

Transcript

1. REACT, ANGULAR AND WORDPRESS Derek Springer
2. QUESTIONS!
3. WHO IS THIS GUY? Derek Springer
 Code Wrangler, Automattic
 @derekspringer Used to build satellite plugins, now I wrangle WordPress plugins Contribute to 
 Calypso & Jetpack
4. WHY IS HE HERE?
5. OR
6. WHAT DOES THIS TALK COVER? • What is a Single Page App? • What is React | Angular? • Tools + Skills You Need • Things to Check Out
7. APOLOGIES TO CARL SAGAN…
8. SOME NOTES • This is a pretty broad subject! • Somewhat generically talking about single page apps and noting how WordPress can get involved. • This talk will be an intro to the topics discussed, you’ll need to dig deeper at home!
9. WHAT IS A SINGLE PAGE APP? • Web app that loads on a single web page providing an experience similar to a desktop app. • All necessary code (HTML/JS/CSS) is retrieved in the original load or dynamically loaded as necessary. • Page does not reload at any point in the process and often involves dynamic communication with the web server behind the scenes.
10. BENEFITS • Maximally responsive, once page loads you can hide a lot of the lag common in Web connections. • Less server overhead after initial page load. • Smart caching can make it feel really fast. • Lots of resources ($$$) available to SPA devs
11. DOWNSIDES • SEO is a challenge! Not recommended where search engine indexing is a requirement/desirable. • Browser History requires some gymnastics. • You can no longer count on page loads to trigger different events (e.g. Google Analytics). • Loads require management → balloon as app grows.
12. WHERE DOES WORDPRESS COME IN? • Via the REST API available in WordPress 4.7+
 (via plugin < 4.7) WP core functionality available outside of display layer. • WordPress acts as engine to store/retrieve/update site data in any context that can consume it. • Connect to WordPress and use it to “feed” our apps.
13. “CLASSIC” LOAD • Spins up WordPress loop for each view
 (admin-ajax.php lets you do some live updates)
14. SINGLE PAGE APP LOAD
15. BROKEN DOWN • Initial page view connects to server | file and grabs the bootstrap HTML/JS/CSS (+ maybe data). • Page connects to remote data source via JS (probably WP REST API) and populates content • User actions pull/push updates to remote source
16. WHAT IS REACT? • Used at Facebook starting in 2011 (OS’d 2013). • One-way data flow
 “properties flow down; actions flow up.” • Uses Virtual DOM which calculates differences before making an update.
17. SITES USING REACT
18. IMPORTANT CONCEPT
 REDUX • A predictable state container for JavaScript apps. • Implements/Extends/Simplifies FLUX. • Three goals:
 Single source of truth
 State is read-only
 Changes are made with pure functions
19. • In short: actions update the state and a new state object is returned, which updates the UI.
20. TRIVIAL EXAMPLE - BASE
21. TRIVIAL EXAMPLE - REACT
22. WHAT IS ANGULAR? • Developed as AngularJS by Google in 2010, updated to Angular (née 2.0) in 2016. • Two-way data-binding that syncs models and views. • Direct, but abstracted manipulation of the DOM.
23. DO YOURSELF A FAVOR AND JUST SEARCH FOR “ANGULAR 2”
24. SITES USING ANGULAR
25. THREE KEY IDEAS • Declarative programming.
 “What you see is what you mean” • Separation of view from logic/data. • Cascading scopes.
 Scopes are a method of "inheriting" data 
 (they use JS prototypical inheritance rules).
26. SCOPES
27. IN A NUTSHELL
28. TRIVIAL EXAMPLE - BASE
29. TRIVIAL EXAMPLE - ANGULAR
30. WHICH IS BETTER? • Do you think in templates? Check out Angular • Do you think in functions? Check out React • Whichever one gets you the job, amirite?
32. PERSONAL POV • Angular is losing heat, but active in small projects. • React is where all the cool kids/big projects are. • Is elm the new hotness? http://elm-lang.org/ • Whichever framework you choose, learning the
 JS/Node/SPA ecosystem is a smart idea.
33. WHAT DO YOU NEED KNOW? • PHP + WordPress development • JavaScript fundamentals + ES6 | TypeScript • Node + (NPM|Yarn) + (Webpack|Browserify|…) + (Grunt|Gulp) + … • Find a dev combo you like and run with it
 (Or just inherit/copy a setup from your fav project)
34. AN EXAMPLE STACK • PHP 7 / MariaDB / WordPress 4.7+
 (The REST API is already baked right in!) • node-wpapi + wordpress-query-* from NPM • wordpress-rest-api-oauth-1 from NPM • React + webpack + sass + <insert fav tool here>
35. EXAMPLE THEME INDEX.PHP
36. EXAMPLE THEME FUNCTIONS.PHP
37. EXAMPLE THEME REACT COMPONENT
38. THINGS TO CHECK OUT REACT • Calypso - The React front-end to WordPress.com
 https://github.com/Automattic/wp-calypso • Foxhound - Freshly released React-based theme
 https://github.com/ryelle/Foxhound • ustwo.com-frontend - Source to WP-based React site
 https://github.com/ustwo/ustwo.com-frontend
39. THINGS TO CHECK OUT ANGULAR • Roy Sivan’s Posts on WP + Angular development
 https://www.roysivan.com/category/angularjs/ • WPNG2 - A minimal theme using Angular
 https://github.com/stuartkuentzel/angular2-wp-theme • wp-and-angular.com - A collection of articles and links to interesting WP+Angular topics
40. MORE QUESTIONS? React: 
 https://facebook.github.io/react/ 
 Angular:
 https://angular.io/ Diggin’ Deeper: Search for: “WordPress ( react 2 | angular )” https://developer.wordpress.com/calypso/
 http://wesbos.com/courses/
41. QUESTIONS?
42. THANKS! Slides available at:
 https://speakerdeck.com/dbspringer/wcsd17