Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Derek Springer

March 25, 2017
Tweet

More Decks by Derek Springer

Other Decks in Programming

Transcript

  1. WHO IS THIS GUY? Derek Springer
 Code Wrangler, Automattic
 @derekspringer

    Used to build satellite plugins, now I wrangle WordPress plugins Contribute to 
 Calypso & Jetpack
  2. OR

  3. WHAT DOES THIS TALK COVER? • What is a Single

    Page App? • What is React | Angular? • Tools + Skills You Need • Things to Check Out
  4. 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!
  5. 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.
  6. 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
  7. 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.
  8. 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.
  9. “CLASSIC” LOAD • Spins up WordPress loop for each view


    (admin-ajax.php lets you do some live updates)
  10. 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
  11. 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.
  12. 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
  13. • In short: actions update the state and a new

    state object is returned, which updates the UI.
  14. 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.
  15. 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).
  16. 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?
  17. 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.
  18. 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)
  19. 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>
  20. 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
  21. 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
  22. 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/