WCSD17

 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.

509e5d0202ed66b36363a1fc36a741b8?s=128

Derek Springer

March 25, 2017
Tweet

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?
  31. None
  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