React.js Real Quick (AustinJS Sept. 2015)

AustinJS Sept 2015 React.js talk and notes

Transcript

1. React.js Real Quick (Pun Intended)
2. Tim Tyrrell • “Web Client Team Lead” at WellMatch working on Healthcare Price Transparency software • Did a lot of Backbone, did a lot of Ember, now trying to do a lot of React • King of “Piddly Throw Away ‘Intro’ Presentations” • Likes shiny javascript objects • Really good at slide colors and fonts
3. Agenda • Quick concept slides • Code up something simple to solidify concepts (and hopefully remember how to Vim in public) • Wrap up
4. What is React.js? next slide
5. “A JavaScript library for creating user interfaces” - Alright, well that doesn’t help at all. WTF else is javascript supposed to do? My take, because of the technical design of the library, it is easier to reason about your code, making it easier to troubleshoot and allowing you to move fast. It has a small API and concepts that align with this thinking.
6. Why React? • Simple • Declarative - (Simple) Simply express how your app should look at any given point in time, and React will manage all the UI updates when your underlying data (state) changes. - (Declarative) In the right ways, at the right parts of the code. Declarative “sweet spot”. Less surprises
7. Thinking in React - What is a component? A way to encapsulate a part of a page: making code reusable and more easily tested. “Colocating of concerns”. - Nest them and have a “smart component” with state manage “dumb stateless components” below them. Conceptually easier to understand and structure.
8. Ok, But Why *Now*? - Remember Facebook has been using it in production since 2011 - It took other frameworks doing it “a worse” way to realize the React’s kooky ideas were spot on. - It solves some really hard problems in uncomplicated ways, and in my opinion, better than other current popular frameworks. All about tradeoffs, I personally think they are the right ones for the problems that I am trying to solve. Manipulating UI based on API’s responses
9. API in a Nutshell • state • props • refs • render() - INTRO: React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it's easy to keep your UI consistent. If you have ever been in jQuery Toggle hell, you know what problems I am trying to avoid here - state: You simply update it and then React render’s a new UI based on this new state. - props: A way that data can flow into an component, passed in like HTML attributes - refs: like element IDs but scoped to that component) - render(): current UI on the page - So the cool thing is that coding in React gets you better at javascript and I don’t mean in the massive boilerplate kind of way. What I mean is that you are not learning a massive framework API or even a “React Way”. You can get going quickly without a massive ramp-up period.
10. When does it render() • Component “mounts” • this.setState() • Parent render() called (new props) - Your component won't actually re-render everything to the DOM, but it will re-render to a virtual DOM. It then compares this new virtual DOM to the previous one. The resulting diff is the smallest set of operations to apply to the real DOM. Also, very fast.
11. Lifecycle Events • MOUNTING • componentWillMount (call ajax to set state) • componentDidMount (manipulate the DOM) • UPDATING • componentWillReceiveProps • shouldComponentUpdate (can short-circuit the render) • componentWillUpdate • componentDidUpdate • UNMOUNTING • componentWillUnmount (remove listeners) - useful hooks for listeners, validations, tear downs, data loading, etc.
12. CODE
13. But wait, there is more!
14. React Router React.render(( <Router> <Route path="/" component={App}> <Route path="about" component={About} /> <Route path="inbox" component={Inbox} /> </Route> </Router> ), document.body)
15. Server-side Rendering Server: app.get('/', function(req, res){ res.render('index', { index: React.renderToString(HelloMessage({name: "John"})) }) }) Client: React.render(<HelloMessage name="John" />, document.getElementById('react-root')) - Server renders, client picks it up and runs with it - Not just for “booting fast” - This stuff is super easy, it is when you are doing async calls while rendering when it gets trickier - webpack/browserify makes this all easily possible
16. Hotloading • Developer <3 <3 • Not a Live Reload. • “Beast mode” Live Reload. Maintains state! • Combine with React Native for instantaneous iOS (and Android) “compiling” and debugging - keeps state. no more click click click
17. setInterval(function() { Array.prototype.slice.call(document .querySelectorAll('[data- reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; }) }, 500)
19. Why? • Because it has a simple API and helpful mental model • Because the API is easy to understand and you won’t have to make a massive intellectual investment learning it • Because you can render on the server-side and get SEO and fast page loading • Because it has righteous performance • Because it doesn’t have overbearing conventions forcing you into corners • Because if you want to build complicated applications there is an industry proven pattern to achieve this goal • Because it can be sparingly used or just replace the “view layer” for existing backbone.js applications (for example) • Because it is just javascript and you won’t be forced to use a framework or libraries proprietary objects or jQuery clones (it is just javascript)
20. Ok No Really Why? • Javascript moves so fast, life is too short: You don't need to learn a massive api • React is a library designed to work effectively and in a lightweight manner with legacy code and libraries (Or build a whole new thing like Netflix)
21. “React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy.” - JSX, don’t knock it till you try it. I love it. The UX team at my work love it. - Chose the lib/framework that resonates with you. The only reason I went to React was because I was unhappy with another JS lib I was using and this one made the tradeoffs that I valued more. - Only through experience will you find out what is important to you and then own that shit. - Have fun -
22. References • https://facebook.github.io/react/docs/thinking-in-react.html • http://ricostacruz.com/cheatsheets/react.html • https://github.com/ryanflorence/react-training/tree/gh-pages/ lessons • http://facebook.github.io/react/docs/tutorial.html • http://aeflash.com/2015-02/react-tips-and-best-practices.html • https://facebook.github.io/react/docs/why-react.html • https://www.quora.com/Pete-Hunt/Posts/React-Convincing-the- Boss
23. Thanks!