Demystifying React for Symfony developers

Transcript

1. Demystifying React for Symfony developers Titouan GALOPIN

2. 2 Titouan Galopin Product Manager SymfonyInsight insight.symfony.com

3. Agenda 1. What’s React? 2. Components 3. Symfony integration with

   Webpack Encore 3

4. 4 1. What’s React?

5. 5 How should we structure Javascript applications?

6. 6 AngularJS Vue Backbone.js Dart Ember.js Dojo Meteor ...

7. 7 There is a consensus here: MVC, or MVVM, or

   MVW, ...

8. 8 Models

9. 9 { firstName: 'Titouan', lastName: 'Galopin', email: 'titouan.galopin@symfony.com' }

10. 10 Models = Observable objects

11. 11 Bidirectional data-binding An change in the model updates the

    view An change in the view updates the model

12. 12 Two data sources Model View

13. 13 This encourages mutations

14. 14 { firstName: 'Tito', lastName: 'Galopin', email: 'titouan.galopin@symfony.com' } Model

    { firstName: 'Titouan''Tito', lastName: 'Galopin', email: 'titouan.galopin@symfony.com' } View { firstName: 'Tito' } Mutation

15. 15 But mutations are complex

16. 16 Complex to apply Complex to reproduce Complex to debug

17. 17 What if we could do better?

18. 18 The simplest way to build views is to avoid

    mutations altogether

19. 19 React does not use mutations at all

20. 20 Instead, it has a single data source

21. 21 Model View Observable model Two-way data flow

22. 22 Model Observable model Two-way data flow View React One-way

    data flow Model Dispatcher View

23. View 23 Model Observable model Two-way data flow View React

    One-way data flow Model Dispatcher View

24. 24 Model Observable model Two-way data flow View React One-way

    data flow Model Dispatcher View

25. 25 But isn’t that super slow? What about user inputs?

26. 26 We want the benefits to blow the view away

    and re-render it ... … while dealing properly with every edge cases

27. 27 That’s React

28. 28 React is a Javascript library for building User Interfaces

29. 29 React is declarative render(data: array) => view: string

30. 30 React re-renders all your view when data changes

31. 31 2. Components

32. 32 React’s main concept is Components

33. 33 A component = A description of a part of

    your UI that depends on your current model

34. 34 It’s more than a template though

35. 35 Store Dispatcher View Each component has its own model

    and behavior This is component

36. 36 The aim? Abstract away the implementation details of parts

    of the UI

37. 37

38. 38 <Autocomplete source="/api/users" onSelect={this.handleUserSelected} />

39. 39 <Autocomplete source="/api/users" onSelect={this.handleUserSelected} /> Property

40. 40 But how does it work?

41. 41 A component = A state + A way to

    display that state

42. 42 Store (Model) Dispatcher View React handles the Dispatcher and

    the Store You only implement the view and define the structure of the Store

43. 43 The state is a single Javascript object

44. 44 The view is described by a single render() function

45. 45 Store (state) Initial state

46. 46 render Store (state) View (components) Initial state

47. 47

48. 48 class Autocomplete extends Component { constructor() { this.state =

    { results: [] }; } }

49. 49 class Autocomplete extends Component { // ... render() {

    return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } }

50. 50 class Autocomplete extends Component { // ... render() {

    return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } } Use of the state

51. 51 class Autocomplete extends Component { // ... render() {

    return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } } Use of the state To use a property: this.props.source

52. State = Local data that will change over time Props

    = Non-local data, read-only for the component 52

53. If either the state or the properties change, the component

    will be re-rendered 53

54. 54 class Autocomplete extends Component { // ... render() {

    return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } }

55. 55 class Autocomplete extends Component { // ... render() {

    return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } } What’s that?!

56. 56 JSX is a formatting language used by React to

    express a representation of views

57. 57 It is compiled to Javascript <li className="hello"> becomes React.DOM.li({

    className: 'hello'})

58. 58 class Autocomplete extends Component { // ... render() {

    return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } } Not real HTML tags but components

59. 59 render() returns a tree of components

60. 60 You usually create your own tree of components RegistrationForm

    CityAutocompleteInput PhoneNumberInput HTMLTextInput HTMLTelInput

61. 61 Now, how to update the view?

62. 62 Instead of updates (mutations) React uses reconciliation

63. 63 setState()

64. 64 React compares the view representations and apply the changes

    to the DOM

65. Tree of components before change Tree of components after change

    setState

66. 66 Tree of components before change Tree of components after

    change setState render render View before View after

67. 67 Tree of components before change Tree of components after

    change setState render render View before View after React compares both and apply only needed changes to the DOM

68. 68 class Autocomplete extends Component { // ... handleChange(event) {

    api.fetchResults(event.target.value).then(results => { this.setState({ results: results }) }); } // ... render() { return ( <div> <input type="text" onChange={this.handleChange} /> // ... </div> ); } }

69. 69 setState() merges the current state and the given data

    ...

70. 70 … then calls recursively render() on the component and

    all its children

71. 71 render Store (state) View (components) Initial state

72. 72 Dispatcher (React) setState render Store (state) View (components) Initial

    state

73. 73 Dispatcher (React) setState render Handled by React Store (state)

    View (components) Initial state

74. 74 Now you know React!

75. 75 3. Symfony integration with Webpack Encore

76. 76 Webpack is a build tool It lets you manipulate

    your Javascript and CSS before using it in production (JSX, minification, …)

77. 77 Webpack Encore wraps Webpack around a nice API to

    improve its Developer Experience

78. 78 Webpack Encore is awesome to compile React apps to

    normal Javascript

79. 79 composer req --dev webpack yarn install https://symfony.com/doc/current/frontend.html

80. 80 yarn add @babel/preset-react react react-dom prop-types

81. 81 // webpack.config.js const Encore = require( '@symfony/webpack-encore' ); Encore

    // ... .enableReactPreset(); module.exports = Encore.getWebpackConfig();

82. 82 Once Webpack Encore is ready, you can use it

    in Twig to load React

83. 83 // index.html.twig ... <div id="portfolio"></div> … // Output proper

    <script src="..."> tags {{ encore_entry_script_tags('app') }}

84. 84 // app.js import ReactDOM from 'react-dom'; import {App} from

    './App.js'; ReactDOM.render( <App />, document.getElementById('portfolio') );

85. 85 // app.js import ReactDOM from 'react-dom'; import {App} from

    './App.js'; ReactDOM.render( <App />, document.getElementById('portfolio') ); Tree of components

86. 86 And that’s all! You can now use React into

    Symfony

87. 87 Conclusion

88. Thanks! 88 For any question: ▪ @titouangalopin on Twitter ▪

    titouan.galopin @symfony.com