Component-based development with React

How to create applications component-based with React, Relay and Graphql.
Presented on FrontIn Salvador.

Transcript

1. React Component-based Development
2. Helielson (Hel) @hyetho @helielson Software developer @Jusbrasil
4. Agenda Components What's React How to handle data - Relay - Graphql
5. Once upon a time
14. Now everything has changed
17. What’s a component?
18. "Reusable API that encapsulate a bunch of different stuff" Tom Occhino
19. FeedDocumentCard
20. Component definition
21. Benefits of using components Reusable Updatable Abstract
22. When use components Rich applications
23. JS libs and frameworks Ember Angular Polymer React
24. A javascript library for building user interfaces
27. Is it a template engine like handlebars.js?
28. Nooooooooooo! "To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular’s directives instead. [Directives are Angular's way of creating custom elements]." Pete Hunt quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look
29. - It's the markup - It's the javascript - It's the behavior's function It's more than a template engine
30. helloWorld.jsx import React from 'react'; class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } } React.render(<HelloMessage name="John" />, mountNode);
31. helloWorld.jsx <div> Hello John </div> Result
32. - State - Events - Render - And more... React Features
33. isFollowing: false State isFollowing: true
34. Events <button onClick={() => follow()}> ... </button>
35. ReactDOMServer.render(<Component />); Server side rendering
36. And about the data?
37. Request data
39. viewerLiked: false viewerLiked: true
40. liked = checkViewerLiked(); <RecommendButton viewerLiked={liked} /> CONTROLLER VIEW
41. APP-1 APP-2 APP-3 APP-4
42. Let's update the component
43. liked = checkViewerLiked(); profiles = whoRecommended(); <RecommendButton viewerLiked={liked} profiles={profiles} /> CONTROLLER VIEW
44. APP-1 APP-2 APP-3 APP-4
45. Hard to maintain
46. How to solve it?
47. Relay
48. liked = checkViewerLiked(); profiles = whoRecommended(); CONTROLLER X
49. QL Query
50. import Relay from 'react-relay'; React.createContainer(RecommendButton, { fragments: { viewer: () => Relay.QL` fragment on Document { viewerLiked, } `, } }
51. <RecommendButton document={document} />
52. Just update a query
53. React.createContainer(RecommendButton, { fragments: { document: () => Relay.QL` fragment on Document { viewerLiked, whoRecommended { picture } } `, } }
54. APP-1 APP-2 APP-3 APP-4
55. Relay benefits Mutations Composition Pagination Lazy load And more...
56. New approach
57. React Componentization Relay Data-wire Graphql Data API
58. Component-based development
59. How are using?
60. Development Easy to update Easy to read Easy to compose Fast delivery
62. Deep dive facebook.github.io/react facebook.github.io/relay facebook.github.io/graphql bit.ly/relay-graphql-talk bit.ly/react-talk
63. That's all folks! @hyetho @helielson Questions?