Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Component-based development with React

492a25871b1279286bdb95c7bacb7697?s=47 Helielson
October 08, 2016

Component-based development with React

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

492a25871b1279286bdb95c7bacb7697?s=128

Helielson

October 08, 2016
Tweet

Transcript

  1. React Component-based Development

  2. Helielson (Hel) @hyetho @helielson Software developer @Jusbrasil

  3. None
  4. Agenda Components What's React How to handle data - Relay

    - Graphql
  5. Once upon a time

  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. Now everything has changed

  15. None
  16. None
  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

  25. None
  26. None
  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

  38. None
  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
  61. None
  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?