Demystifying React for Symfony developers

Slide 1

Slide 1 text

Demystifying React for Symfony developers Titouan GALOPIN

Slide 2

Slide 2 text

2 Titouan Galopin Product Manager SymfonyInsight insight.symfony.com

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4 1. What’s React?

Slide 5

Slide 5 text

5 How should we structure Javascript applications?

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8 Models

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

10 Models = Observable objects

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

12 Two data sources Model View

Slide 13

Slide 13 text

13 This encourages mutations

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

15 But mutations are complex

Slide 16

Slide 16 text

16 Complex to apply Complex to reproduce Complex to debug

Slide 17

Slide 17 text

17 What if we could do better?

Slide 18

Slide 18 text

18 The simplest way to build views is to avoid mutations altogether

Slide 19

Slide 19 text

19 React does not use mutations at all

Slide 20

Slide 20 text

20 Instead, it has a single data source

Slide 21

Slide 21 text

21 Model View Observable model Two-way data ﬂow

Slide 22

Slide 22 text

22 Model Observable model Two-way data ﬂow View React One-way data ﬂow Model Dispatcher View

Slide 23

Slide 23 text

View 23 Model Observable model Two-way data ﬂow View React One-way data ﬂow Model Dispatcher View

Slide 24

Slide 24 text

24 Model Observable model Two-way data ﬂow View React One-way data ﬂow Model Dispatcher View

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

26 We want the beneﬁts to blow the view away and re-render it ... … while dealing properly with every edge cases

Slide 27

Slide 27 text

27 That’s React

Slide 28

Slide 28 text

28 React is a Javascript library for building User Interfaces

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

30 React re-renders all your view when data changes

Slide 31

Slide 31 text

31 2. Components

Slide 32

Slide 32 text

32 React’s main concept is Components

Slide 33

Slide 33 text

33 A component = A description of a part of your UI that depends on your current model

Slide 34

Slide 34 text

34 It’s more than a template though

Slide 35

Slide 35 text

35 Store Dispatcher View Each component has its own model and behavior This is component

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

39 Property

Slide 40

Slide 40 text

40 But how does it work?

Slide 41

Slide 41 text

41 A component = A state + A way to display that state

Slide 42

Slide 42 text

42 Store (Model) Dispatcher View React handles the Dispatcher and the Store You only implement the view and deﬁne the structure of the Store

Slide 43

Slide 43 text

43 The state is a single Javascript object

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

45 Store (state) Initial state

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Slide 48

Slide 48 text

48 class Autocomplete extends Component { constructor() { this.state = { results: [] }; } }

Slide 49

Slide 49 text

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

{result.name}

); } }

Slide 50

Slide 50 text

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

{result.name}

); } } Use of the state

Slide 51

Slide 51 text

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

{result.name}

); } } Use of the state To use a property: this.props.source

Slide 52

Slide 52 text

State = Local data that will change over time Props = Non-local data, read-only for the component 52

Slide 53

Slide 53 text

If either the state or the properties change, the component will be re-rendered 53

Slide 54

Slide 54 text

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

{result.name}

); } }

Slide 55

Slide 55 text

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

{result.name}

); } } What’s that?!

Slide 56

Slide 56 text

56 JSX is a formatting language used by React to express a representation of views

Slide 57

Slide 57 text

57 It is compiled to Javascript

becomes React.DOM.li({ className: 'hello'})

Slide 58

Slide 58 text

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

{result.name}

); } } Not real HTML tags but components

Slide 59

Slide 59 text

59 render() returns a tree of components

Slide 60

Slide 60 text

60 You usually create your own tree of components RegistrationForm CityAutocompleteInput PhoneNumberInput HTMLTextInput HTMLTelInput

Slide 61

Slide 61 text

61 Now, how to update the view?

Slide 62

Slide 62 text

62 Instead of updates (mutations) React uses reconciliation

Slide 63

Slide 63 text

63 setState()

Slide 64

Slide 64 text

64 React compares the view representations and apply the changes to the DOM

Slide 65

Slide 65 text

Tree of components before change Tree of components after change setState

Slide 66

Slide 66 text

66 Tree of components before change Tree of components after change setState render render View before View after

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

68 class Autocomplete extends Component { // ... handleChange(event) { api.fetchResults(event.target.value).then(results => { this.setState({ results: results }) }); } // ... render() { return (

// ...

); } }

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

70 … then calls recursively render() on the component and all its children

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

73 Dispatcher (React) setState render Handled by React Store (state) View (components) Initial state

Slide 74

Slide 74 text

74 Now you know React!

Slide 75

Slide 75 text

75 3. Symfony integration with Webpack Encore

Slide 76

Slide 76 text

76 Webpack is a build tool It lets you manipulate your Javascript and CSS before using it in production (JSX, miniﬁcation, …)

Slide 77

Slide 77 text

77 Webpack Encore wraps Webpack around a nice API to improve its Developer Experience

Slide 78

Slide 78 text

78 Webpack Encore is awesome to compile React apps to normal Javascript

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

82 Once Webpack Encore is ready, you can use it in Twig to load React

Slide 83

Slide 83 text

83 // index.html.twig ...

… // Output proper tags {{ encore_entry_script_tags('app') }}

Slide 84

Slide 84 text

84 // app.js import ReactDOM from 'react-dom'; import {App} from './App.js'; ReactDOM.render( , document.getElementById('portfolio') );

Slide 85

Slide 85 text

85 // app.js import ReactDOM from 'react-dom'; import {App} from './App.js'; ReactDOM.render( , document.getElementById('portfolio') ); Tree of components

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

87 Conclusion

Slide 88

Slide 88 text

Thanks! 88 For any question: ▪ @titouangalopin on Twitter ▪ titouan.galopin @symfony.com