Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Demystifying React for Symfony developers
Search
Titouan Galopin
November 22, 2019
Programming
3
740
Demystifying React for Symfony developers
SymfonyCon Amsterdam 2019
Titouan Galopin
November 22, 2019
Tweet
Share
More Decks by Titouan Galopin
See All by Titouan Galopin
Concevoir son API pour le futur
tgalopin
2
1.5k
Content editing in Symfony
tgalopin
3
940
Symfony UX: a new JavaScript ecosystem for Symfony
tgalopin
4
4k
[SymfonyLive Paris 2020] Pragmatic frontend for Symfony developers
tgalopin
2
1.1k
SymfonyInsight: How to setup quality processes in Symfony apps
tgalopin
2
360
Symfony 5 - AFUP Day Lille 2020
tgalopin
1
860
Pragmatic frontend for Symfony developers
tgalopin
2
1.1k
Symfony 5
tgalopin
1
670
Plongée dans l'injection de dépendances de Symfony
tgalopin
3
1.2k
Other Decks in Programming
See All in Programming
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.8k
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.7k
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
230
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
役立つログに取り組もう
irof
26
8.6k
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.2k
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
qmuntal/stateless のススメ
sgash708
0
120
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.5k
Realtime API 入門
riofujimon
0
110
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
130
Macとオーディオ再生 2024/11/02
yusukeito
0
150
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Six Lessons from altMBA
skipperchong
26
3.5k
Scaling GitHub
holman
458
140k
The Cult of Friendly URLs
andyhume
78
6k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
GraphQLとの向き合い方2022年版
quramy
43
13k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Code Review Best Practice
trishagee
64
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Transcript
Demystifying React for Symfony developers Titouan GALOPIN
2 Titouan Galopin Product Manager SymfonyInsight insight.symfony.com
Agenda 1. What’s React? 2. Components 3. Symfony integration with
Webpack Encore 3
4 1. What’s React?
5 How should we structure Javascript applications?
6 AngularJS Vue Backbone.js Dart Ember.js Dojo Meteor ...
7 There is a consensus here: MVC, or MVVM, or
MVW, ...
8 Models
9 { firstName: 'Titouan', lastName: 'Galopin', email: '
[email protected]
' }
10 Models = Observable objects
11 Bidirectional data-binding An change in the model updates the
view An change in the view updates the model
12 Two data sources Model View
13 This encourages mutations
14 { firstName: 'Tito', lastName: 'Galopin', email: '
[email protected]
' } Model
{ firstName: 'Titouan''Tito', lastName: 'Galopin', email: '
[email protected]
' } View { firstName: 'Tito' } Mutation
15 But mutations are complex
16 Complex to apply Complex to reproduce Complex to debug
17 What if we could do better?
18 The simplest way to build views is to avoid
mutations altogether
19 React does not use mutations at all
20 Instead, it has a single data source
21 Model View Observable model Two-way data flow
22 Model Observable model Two-way data flow View React One-way
data flow Model Dispatcher View
View 23 Model Observable model Two-way data flow View React
One-way data flow Model Dispatcher View
24 Model Observable model Two-way data flow View React One-way
data flow Model Dispatcher View
25 But isn’t that super slow? What about user inputs?
26 We want the benefits to blow the view away
and re-render it ... … while dealing properly with every edge cases
27 That’s React
28 React is a Javascript library for building User Interfaces
29 React is declarative render(data: array) => view: string
30 React re-renders all your view when data changes
31 2. Components
32 React’s main concept is Components
33 A component = A description of a part of
your UI that depends on your current model
34 It’s more than a template though
35 Store Dispatcher View Each component has its own model
and behavior This is component
36 The aim? Abstract away the implementation details of parts
of the UI
37
38 <Autocomplete source="/api/users" onSelect={this.handleUserSelected} />
39 <Autocomplete source="/api/users" onSelect={this.handleUserSelected} /> Property
40 But how does it work?
41 A component = A state + A way to
display that state
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 The state is a single Javascript object
44 The view is described by a single render() function
45 Store (state) Initial state
46 render Store (state) View (components) Initial state
47
48 class Autocomplete extends Component { constructor() { this.state =
{ results: [] }; } }
49 class Autocomplete extends Component { // ... render() {
return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } }
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 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
State = Local data that will change over time Props
= Non-local data, read-only for the component 52
If either the state or the properties change, the component
will be re-rendered 53
54 class Autocomplete extends Component { // ... render() {
return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } }
55 class Autocomplete extends Component { // ... render() {
return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } } What’s that?!
56 JSX is a formatting language used by React to
express a representation of views
57 It is compiled to Javascript <li className="hello"> becomes React.DOM.li({
className: 'hello'})
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 render() returns a tree of components
60 You usually create your own tree of components RegistrationForm
CityAutocompleteInput PhoneNumberInput HTMLTextInput HTMLTelInput
61 Now, how to update the view?
62 Instead of updates (mutations) React uses reconciliation
63 setState()
64 React compares the view representations and apply the changes
to the DOM
Tree of components before change Tree of components after change
setState
66 Tree of components before change Tree of components after
change setState render render View before View after
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 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 setState() merges the current state and the given data
...
70 … then calls recursively render() on the component and
all its children
71 render Store (state) View (components) Initial state
72 Dispatcher (React) setState render Store (state) View (components) Initial
state
73 Dispatcher (React) setState render Handled by React Store (state)
View (components) Initial state
74 Now you know React!
75 3. Symfony integration with Webpack Encore
76 Webpack is a build tool It lets you manipulate
your Javascript and CSS before using it in production (JSX, minification, …)
77 Webpack Encore wraps Webpack around a nice API to
improve its Developer Experience
78 Webpack Encore is awesome to compile React apps to
normal Javascript
79 composer req --dev webpack yarn install https://symfony.com/doc/current/frontend.html
80 yarn add @babel/preset-react react react-dom prop-types
81 // webpack.config.js const Encore = require( '@symfony/webpack-encore' ); Encore
// ... .enableReactPreset(); module.exports = Encore.getWebpackConfig();
82 Once Webpack Encore is ready, you can use it
in Twig to load React
83 // index.html.twig ... <div id="portfolio"></div> … // Output proper
<script src="..."> tags {{ encore_entry_script_tags('app') }}
84 // app.js import ReactDOM from 'react-dom'; import {App} from
'./App.js'; ReactDOM.render( <App />, document.getElementById('portfolio') );
85 // app.js import ReactDOM from 'react-dom'; import {App} from
'./App.js'; ReactDOM.render( <App />, document.getElementById('portfolio') ); Tree of components
86 And that’s all! You can now use React into
Symfony
87 Conclusion
Thanks! 88 For any question: ▪ @titouangalopin on Twitter ▪
titouan.galopin @symfony.com