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: '[email protected]' }

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: '[email protected]' } Model { firstName: 'Titouan''Tito', lastName: 'Galopin', email: '[email protected]' } 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 flow

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

24 Model Observable model Two-way data flow View React One-way data flow 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 benefits 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

37

Slide 38

Slide 38 text

38

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 define 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

47

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 (
    {this.state.results.map(function(result) { return (
  • {result.name}
  • ); })}
); } }

Slide 50

Slide 50 text

50 class Autocomplete extends Component { // ... render() { return (
    {this.state.results.map(function(result) { return (
  • {result.name}
  • ); })}
); } } Use of the state

Slide 51

Slide 51 text

51 class Autocomplete extends Component { // ... render() { return (
    {this.state.results.map(function(result) { 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 (
    {this.state.results.map(function(result) { return (
  • {result.name}
  • ); })}
); } }

Slide 55

Slide 55 text

55 class Autocomplete extends Component { // ... render() { return (
    {this.state.results.map(function(result) { 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 (
      {this.state.results.map(function(result) { 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, minification, …)

    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