64
// app.js
import ReactDOM from 'react-dom';
import {ColorChooser} from './ColorChooser/ColorChooser';
$('div[data-color-chooser]').each((key, node) => {
const input = $(node).find('input');
ReactDOM.render(
input.attr('value', color)}
/>,
node
);
});
Using a selector library to
find the node
Slide 65
Slide 65 text
65
// app.js
import ReactDOM from 'react-dom';
import {ColorChooser} from './ColorChooser/ColorChooser';
$('div[data-color-chooser]').each((key, node) => {
const input = $(node).find('input');
ReactDOM.render(
input.attr('value', color)}
/>,
node
);
});
Replacing the content of
the node by the React tree
Slide 66
Slide 66 text
66
Slide 67
Slide 67 text
67
✓ Allow to use great React components
where it’s useful
✓ Do not add unnecessary complexity
✓ 100% compatible with Symfony Forms,
HTTP, default browser behaviors, ...
Slide 68
Slide 68 text
68
3. How to transfer data
from the backend to the
frontend?
Slide 69
Slide 69 text
69
HTML5 is awesome
Slide 70
Slide 70 text
70
✓ HTML5 is scoped: data concerning a
node is stored as attributes of the node
✓ HTML5 is semantic: many use cases are
already considered in the standard
✓ HTML5 is flexible: you can add your own
attributes
{% endblock %}
Option which could be coming
from a Twig variable
Slide 72
Slide 72 text
72
// app.js
// ...
$('div[data-color-chooser]').each((key, node) => {
const input = $(node).find('input');
ReactDOM.render(
input.attr('value', color)}
/>,
node
);
});
Using the option from the data
attribute is easy because it’s
scoped to the node
Slide 73
Slide 73 text
73
Slide 74
Slide 74 text
74
✓ Easy to use (scoped and accessible in the
appropriate Javascript context)
✓ Compatible with Content Security Policy
✓ Easy automatic testing
Slide 75
Slide 75 text
75
4. How to transfer data
from the frontend to the
backend?
Slide 76
Slide 76 text
76
Use an API focused on
your Javascript needs
Slide 77
Slide 77 text
77
fetch() is native in most browsers
Polyfills exist for others
Slide 78
Slide 78 text
78
Do not develop an API
if you don’t need it!
Keep things as simple as possible
Slide 79
Slide 79 text
79
5. Avoiding page refresh
without an SPA
Slide 80
Slide 80 text
80
What is an API?
A way to transfer data in a
structured way
Slide 81
Slide 81 text
81
HTML contains data, in a
structured way, and is
already made to be displayed
by the browser
Slide 82
Slide 82 text
82
What if we used our
traditional HTML
application instead of
an API?
Slide 83
Slide 83 text
83
Turbolinks
A tiny library which replace links in
your application with AJAX calls to
switch the HTML on the fly
Slide 84
Slide 84 text
84
yarn add turbolinks
Slide 85
Slide 85 text
85
// app.js
import Turbolinks from 'turbolinks';
Turbolinks.start();
Slide 86
Slide 86 text
86
✓ Same “no-refresh” effect as SPA
✓ Fully compatible with browser history,
sessions, cache, …
✓ Better SEO (HTML rendered on the server)
✓ No added complexity over traditional
Symfony apps
Slide 87
Slide 87 text
87
(by the way, that’s how Github works)
Slide 88
Slide 88 text
88
Conclusion
Slide 89
Slide 89 text
KISS
Keep It Super Simple
89
Slide 90
Slide 90 text
The simplest option
=
HTML + CSS built with PHP
90
Slide 91
Slide 91 text
It useful for UX, add
Javascript in some places
91
Slide 92
Slide 92 text
Using Javascript that relies
on browser features
decreases complexity
92
Slide 93
Slide 93 text
Full-page apps are useful in
some situations …
but not a solution for UX!
93
Slide 94
Slide 94 text
Thanks!
94
For any question:
▪ @titouangalopin
on Twitter
▪ titouan.galopin
@symfony.com