ES6 + React

For the O'Reilly Webcast

Transcript

1. E S 6 + R E A C T Up B R I A N H O LT
2. @ H O LT B T – B R I @ N H O . LT P R E V I O U S LY C U R R E N T LY Frozen
3. B T H O LT. G I T H U B . I O / E S 6 - R E A C T- P R E S AKA Jessica Jones
4. U N D E R S TA N D I N G D E M O G R A P H I C • WTF? I could teach this class. • WTF is React? • WTF is ES6? • WTF is both ES6 and React? • WTF is JavaScript? • WTF is a computer? • WTF is life? House of Cards }This class best addresses these people } And these
5. E S 6 F E AT U R E S B R I A N H O LT House of Cards
6. E S 6 C O N V E N I E N C E S • Enhanced object literal syntax • Default params • Template strings • const and let • codepen.io/btholt/pen/mJQWjQ • Exercises: codepen.io/btholt/pen/QjxRPN Better Call Saul
7. E S 6 C O N V E N I E N C E S • Destructuring • Spread / rest operator • For … of loops • codepen.io/btholt/pen/eNQvov • Exercises: codepen.io/btholt/pen/rOrBxe Hemlock Grove
8. A R R O W F U N C T I O N S • From CoffeeScript • Shorthand for function • Autobinds to lexical scope • codepen.io/btholt/pen/RPqKxp • Exercises: codepen.io/btholt/pen/qOyWrP Daredevil
9. C L A S S E S • Syntactical sugar! • Looks like classical inheritance, but not. • Useful for the new version of ES6 • codepen.io/btholt/pen/QbJveO BoJack Horseman
10. P R O M I S E S • Finally built straight into JS • Easier way of dealing with callbacks • Work well with AJAX • codepen.io/btholt/pen/gpQRRW • Exercises: codepen.io/btholt/pen/PPBGdQ Wet Hot American Summer: First Day of Camp
11. G E N E R AT O R S • New construct to ES6 that enablew new patterns of asynchronous programming that looks synchronous. • Can greatly reduce the complexity of some problems. • Can be confusing due to their versatility in how they handle input and output. • github.com/btholt/generator-examples • speakerdeck.com/btholt/unlimited-power-es6-generators Bloodline
12. O T H E R E S 6 F E AT U R E S • Better Unicode support • Modules • Maps / sets • New object and Math APIs Unbreakable Kimmy Schmidt
13. O T H E R E S 6 F E AT U R E S • Proxies • Symbols • Weak maps / weak sets • Tail call recursion Arrested Development
14. @ H O LT B T Orange is the New Black
15. W H AT I S R E A C T ? • React is open source library that came out of Facebook. • It is a view layer that allows you to create components that are in turn composed of other components. • Its greatest contribution to the JS landscape is the solidifying and popularizing the concept of one-way data flow as applied JS user interface construction. • It does use a virtual DOM to achieve great performance in the browser. While a really great feature and well implemented, this only makes using React feasible, not desirable. Indiana Jones and the Last Crusade
16. “ S TAT E I S T H E E N E M Y O F A M A I N TA I N A B L E A P P. ” — B A T M A N The Dark Knight
17. S TAT E V S P R O P S • React has two concepts of data access in a component: state and props. • Props are “things” passed down from the parent to the child. Try to use props as much as possible and keep as little state as possible. Props are immutable. • State are kept in a component and can only be modified in that component. State is mutable. Using state should avoided where possible, opting to use as little state as possible. Kill Bill Vol. 1
18. O N E WAY D ATA F L O W • React views are made of a component, which is in turn made of components, which is in turn made of up of more components. Turtles all the way down. • Data only flows from the parents to the children. • Children thus only have the logic to display the data, not modify it. • Children also handle events and then inform parents via callback or events. Parents then modify their own state. • Thus when you unexpected behavior it can only live in a select few places. This comes at the cost of being a bit verbose. Skyfall
19. S O W H AT D O I D O W I T H D ATA I F R E A C T D O E S N ’ T C A R E A B O U T I T ? The Lego Movie wtf state
20. U P T O Y O U • Use props and state; store much of the state in the root component. I typically do it this way unless I have reasons not to. • Need cross, unrelated component communication? (think Facebook’s notification bar and how the number goes up and down via several different actions) Use an event emitter! • Need to share state/data across a fairly big app? Use Flux. But Flux is typically overkill for most small-scale apps / widgets. • I wouldn’t recommend shoe-horning React into MV* frameworks like Angular or Backbone. It can work but I found it easier to stick to the idiomatic ways of approaching those MV*s. The Life Aquatic
21. Falcor Relay
22. J S X • JSX is not a required part of using React but (IMO) you’ll quickly regret not doing so. I don’t know anyone who doesn’t use some sort of language abstraction with React (ClojureScript, CoffeeScript, JSX, etc.) • In a nutshell, JSX lets you write markup (HTML) straight in your JavaScript. This always bothers everyone. It bothered me. Just trust me this far: start with it. It’s not hard to switch back to the pure JS implementation. • Babel (our ES6 transpiler) already has built in JSX support anyway. You would not be using it for the sake of not using it. A Clockwork Orange
23. M A S H I N G T O G E T H E R M A R K U P A N D J AVA S C R I P T S ? I S N ’ T T H AT A B A D I D E A ? lolwut Indiana Jones and the Temple of Doom
24. M U S H I N G T O G E T H E R C O N C E R N S • Being used to MVC from the server, a lot of us get uncomfortable at the idea of mushing together concerns. I certainly was. • What is good for the server is not good for the interface. Separating models out from controllers allows great code re-use for server. It’s a mess on the client. • Instead it makes sense to thinks of things in terms of components, which are made up of behaviors (or containers) and layouts. It often mimics your markup. 2001: A Space Odyssey
25. E C M A S C R I P T 6 • Latest release of the JavaScript language. Now in final draft. Wide adoption is beginning but very incomplete. • Babel is a transpiler that allows to write it now and have it translated to work on ES5 which is now widely adopted. You could have as easily used Tracer or another one. Babel just has JSX translation built in. • We’ll covering a small surface area of useful features in ES6 and specifically how it applies to React. React has new syntax that is specifically only for use with ES6. Django Unchained
26. T O O L I N G • We’ll be using a few noteworthy tools. Let’s briefly cover that: • Gulp – Simple build system. It’ll run our build. • Babel – We’ll be using it to transpile our ES6 JSX to ES5. • Browserify – We’ll use it to package our app together so it can be used in the browser. • Koa – An awesome node/iojs server that allows you to uses ES6 generators for middleware. If you’ve used Express it should feel very familiar. • node – JS on the server. I’ll be using v4.2.1 Star Wars Episode V: The Empire Strikes Back
27. D E M O Ghostbusters II github.com/btholt/es6-react-pres
28. Batman Begins state is bad lol @ H O LT B T B R I @ N H O . LT