React Best Practices

For JS Summit 2015

Transcript

1. R E A C T A N D E F F E C T I V E D E S I G N PAT T E R N S B R I A N H O LT photo credit to /u/ChristopherDesigns
2. photo by Steve Perry posted by /u/unkown_name Brian Holt • marketplace dev @ reddit • recent transplant to SF • worked with React for a year Twitter: @holtbt Email: bri@nho.lt
3. 3 M I N U T E R E A C T • Initially done by Facebook and Instagram • Virtual DOM • View only – mostly unopinionated about your data • Very performance oriented • Often used with JSX posted by /u/prosjektnordfjord
4. J S X ? • Translate <Nav color="blue" />; to React.createElement(Nav, {color:"blue"}); • While not exclusive to React, I haven’t seen another compelling use case. • It’s annoying to add another layer to build layer but it merits the pain. It makes sense in the context of React. As you’ll see, I’m about to propose more layers to build anyway, so might as well get on the JSX train. • While <div/> is valid JSX, don’t do it. Observe HTML best practices.
5. U S E B R O W S E R I F Y A N D C O M M O N J S • Using Browserify, it becomes trivial to share components. It’s as trivial as var Modal = require(‘./Modal.jsx’); • The “isomorphic” JavaScript revolution/madness is descending upon us. CommonJS allows you to seamlessly move from the browser into a Node environment. • You should already be using JSX. It’s trivial to plug Reactify into Browserify. posted by /u/aboutthree
6. U S E D E P E N D E N C Y I N J E C T I O N I N Y O U R E N V I R O N M E N T • Now that you’re using Browserify, it’s easy to do DI. There are several ways to do this. We use Nodeject. • This makes pulling in other components trivial, again to strongly encourage code re-use, standardizing of your components, and generally cutting down on bugs. posted by /u/someToast
7. U S E D E P E N D E N C Y I N J E C T I O N I N Y O U R C O M P O N E N T S • This allows you to do Angular-style DI by feeding in mocked-out services for testing that don’t have to worry about faking XMLHttpRequests / other async services. • You could also potentially swap services if that proved useful to you.
8. C O N S I D E R N O T U S I N G F L U X • Brian Holt Personal Editorial™: I have found Flux to be far overkill for all the apps I have written so far. Naked / Vanilla React can marshall state data well. • This means you manage all of your data is managed as state of components. This is good; it means all of your re- renders are free because you’re just calling setState/ replaceState. • Don’t feed any data as props to your root component (if you can help it.) Have your root component manage state. posted by /u/OurEarthInFocus
9. U N I D I R E C T I O N A L D ATA F L O W I S R E A C T ’ S G R E AT E S T F E AT U R E • Be explicit in your data flow at the cost of being verbose. When you or your colleague has to maintain this code later, it makes it far, far easier. • Have state live as close to its display as possible. This lends itself to re-usability. • By the same token, have the AJAX GET/POST live where the state lives. This again lends itself to being re- useable as you can throw a component on a page and it takes care of itself. posted by /u/trot-trot photo by Bruce Omori
10. N E E D I N T E R O P E R A B I L I T Y O F U N R E L AT E D C O M P O N E N T S ? U S E P U B / S U B . • Always favor using a parent component and callbacks for interoperability. If that’s not possibility, use an event emitter and have components listen for events. • When you start having this issue and start leaning heavily on the event emitter, it may be time to start using a more mature Flux approach. • We use EventEmitter2 and it has worked very well. • Yes, I recognize this is almost using Flux. posted by /u/elmofoto
11. O T H E R T I P / T R I C K S • Promises are great to use when a child component needs to wait on a parent component’s asynchronous request. • Try passing in components to other components if you have similar components that have slightly different displays. Or you can use this.props.children and put it inside. • 6to5 (using current ES6 syntax now and be compatible with ES5) is a great fit since it’s as simple as swapping Reactify and 6to5ify. post by /u/BurgerBuoy photo by Gianni Monterzino
12. M O S T O F T H E S E A R E J U S T T I P S F O R J AVA S C R I P T • I have found that much of the beauty of React is that often the “React way” of doing something is often just the JavaScript way. This is often not true of other frameworks. • Focus heavily on code re-use. While there is always new things to code, you will find yourself use and re- using components over and over again. post by /u/half_caulked_jack
13. F I N Twitter: @holtbt Email: bri@nho.lt