1 / 6

wp-community-uk.slack: chrisodell

The Technology Behind WordPress Blocks. wp-community-uk.slack.com: chrisodell. Twitter: chris@foxdellfolio.com. website: http://www.foxdellcodesmiths.com/. Email: chris.odell@foxdellcodesmiths.com. What I’m going to cover. What technology do I need to know?

csandra
Download Presentation

wp-community-uk.slack: chrisodell

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Technology Behind WordPress Blocks wp-community-uk.slack.com: chrisodell Twitter: chris@foxdellfolio.com website: http://www.foxdellcodesmiths.com/ Email: chris.odell@foxdellcodesmiths.com

  2. What I’m going to cover. • What technology do I need to know? • The rise of the JavaScript Frameworks. • What is React and should I care? • JSX? Do we need another TLA? wp-community-uk.slack.com: chrisodell Twitter: chris@foxdellfolio.com website: http://www.foxdellcodesmiths.com/ Email: chris.odell@foxdellcodesmiths.com

  3. What technology do I need to know? • Usual suspects HTML, CSS, JavaScript and PHP. • Node.js(npm), Gulp/WebPack/A.N.other. • React + JSX. wp-community-uk.slack.com: chrisodell Twitter: chris@foxdellfolio.com website: http://www.foxdellcodesmiths.com/ Email: chris.odell@foxdellcodesmiths.com

  4. The rise of the JavaScript Frameworks. var newName = 'John Smith’, xhr = new XMLHttpRequest(); xhr.open('POST', 'myservice/username?id=some-unique-id'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = function() { if (xhr.status === 200 && xhr.responseText !== newName) { alert('Something went wrong. Name is now ' + xhr.responseText); } else if (xhr.status !== 200) { alert('Request failed. Returned status of ' + xhr.status); } else { doSomething(); } }; xhr.send(encodeURI('name=' + newName)); • Why not use pure JS • JQuery/Prototype • Vue/React/Angular $.post('myservice/username?id=some-unique-id', { newName : 'john Smith' }, function(data) { doSomething(); }); wp-community-uk.slack.com: chrisodell Twitter: chris@foxdellfolio.com website: http://www.foxdellcodesmiths.com/ Email: chris.odell@foxdellcodesmiths.com

  5. What is React and should I care? • JS Framework. • Used by all blocks in the new Block Editor. • Originally developed by Facebook. • Outside of WP often used with Flux architecture. • Allows the building of components. wp-community-uk.slack.com: chrisodell Twitter: chris@foxdellfolio.com website: http://www.foxdellcodesmiths.com/ Email: chris.odell@foxdellcodesmiths.com

  6. JSX? Do we need another TLA? • JSX is syntactic sugar. return ( <h1>Greetings, {this.props.name}!</h1> ); • Is compiled. • Not strictly required. return React.createElement('h1', null, 'Greetings, ' + this.props.name + '!'); wp-community-uk.slack.com: chrisodell Twitter: chris@foxdellfolio.com website: http://www.foxdellcodesmiths.com/ Email: chris.odell@foxdellcodesmiths.com

More Related