Tweet
Tweet

Slide 1

Slide 1 text

REACT, ANGULAR AND WORDPRESS Derek Springer

Slide 2

Slide 2 text

QUESTIONS!

Slide 3

Slide 3 text

WHO IS THIS GUY? Derek Springer
 Code Wrangler, Automattic
 @derekspringer Used to build satellite plugins, now I wrangle WordPress plugins Contribute to 
 Calypso & Jetpack

Slide 4

Slide 4 text

WHY IS HE HERE?

Slide 5

Slide 5 text

OR

Slide 6

Slide 6 text

WHAT DOES THIS TALK COVER? • What is a Single Page App? • What is React | Angular? • Tools + Skills You Need • Things to Check Out

Slide 7

Slide 7 text

APOLOGIES TO CARL SAGAN…

Slide 8

Slide 8 text

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!

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

“CLASSIC” LOAD • Spins up WordPress loop for each view
 (admin-ajax.php lets you do some live updates)

Slide 14

Slide 14 text

SINGLE PAGE APP LOAD

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

SITES USING REACT

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

• In short: actions update the state and a new state object is returned, which updates the UI.

Slide 20

Slide 20 text

TRIVIAL EXAMPLE - BASE

Slide 21

Slide 21 text

TRIVIAL EXAMPLE - REACT

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

DO YOURSELF A FAVOR AND JUST SEARCH FOR “ANGULAR 2”

Slide 24

Slide 24 text

SITES USING ANGULAR

Slide 25

Slide 25 text

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).

Slide 26

Slide 26 text

SCOPES

Slide 27

Slide 27 text

IN A NUTSHELL

Slide 28

Slide 28 text

TRIVIAL EXAMPLE - BASE

Slide 29

Slide 29 text

TRIVIAL EXAMPLE - ANGULAR

Slide 30

Slide 30 text

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?

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

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)

Slide 34

Slide 34 text

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 +

Slide 35

Slide 35 text

EXAMPLE THEME INDEX.PHP

Slide 36

Slide 36 text

EXAMPLE THEME FUNCTIONS.PHP

Slide 37

Slide 37 text

EXAMPLE THEME REACT COMPONENT

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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/

Slide 41

Slide 41 text

QUESTIONS?

Slide 42

Slide 42 text

THANKS! Slides available at:
 https://speakerdeck.com/dbspringer/wcsd17