ReactJS France - 8 Décembre 2014
Senior Software Engineer Front-End chez Deezer
yannickcr
yannickc
yannick.cr
PHP
Java
Python
Ruby
Serveur
Client
JavaScript
Tout est fait côté serveur
JavaScript est seulement utilisé pour des animations et des interactions simple
La communication avec le serveur se fait via de simple requêtes HTTP (et parfois avec Ajax)
API
PHP
Java
Python
Ruby
Serveur
Client
JavaScript
JavaScript est maintenant une part importante de l'application.
Le serveur et le client peuvent tous 2 avoir à faire du routing, templating et du formatage de donnée.
API
Client
JavaScript
Tout est réalisé sur le client :
Le serveur n'est alors seulement utilisé que pour servir les fichiers statiques (CSS, JS, HTML, Fonts).
Beaucoup de choses à faire avant même d'afficher un simple contenu :
Tout ceci à un impact significatif sur l'utilisation de l'application, en particulier sur mobile.
Tout le contenu est généré par Javascript, et est donc invisible pour les moteurs de recherche *
Solutions de contournement complexes afin d'éviter le problème :
(Votre application en cas d'erreur JavaScript)
API
Serveur
Client
JavaScript
JavaScript
API
Serveur
Client
JavaScript
JavaScript
Routing
Templating
Data fetching
Popularisé par AirBnB en 2013 pour décrire une application dont le code est partagé entre le client et le serveur.
Aussi connu comme le "Saint Graal" des application web.
Plus de duplication de code ou de logique
Nous pouvons pré-rendre notre application sur le serveur :
Cohérence entre le comportement côté client et côté serveur
Fonctionne de la même manière côté client ou côté serveur, seule la commande pour rendre l'application change :
Nous épargne les problématiques manipulation du DOM côté serveur grâce à son Virtual DOM.
var markup = React.renderToString(Component());
React.render(Component(), document.body);
Action
Dispatcher
Store
View
Action
1. Recevoir la requête
2. Remplir notre store
3. Générer la vue en fonction des valeurs du store
4. Renvoyer cette vue au client
// Server.js
var React = require('react');
var App = require('./components/App.jsx');
var actionHandler = require('./lib/actionHandler');
var server = express();
server.use(actionHandler); // Handle the action and populate Store
server.use(function (req, res) { // Render the application
var markup = React.renderToString(App());
res.send('<!doctype html>' + markup);
});
server.listen(8000);
// App.jsx
var Store = require('../lib/Store');
var App = React.createClass({
getInitialState: function() {
return Store.get('app');
},
componentDidMount : function(){
Store.addChangeListener('app', this._onStoreChange);
},
componentWillUnmount : function(){
Store.removeChangeListener('app', this._onStoreChange);
},
render: function() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<title>Isomorphic example</title>
</head>
<body>
/* ... */
<script dangerouslySetInnerHTML={{__html: 'window.Store=' + Store.export()}}></script>
<script src="scripts/app.js"></script>
</body>
</html>
);
}
});
// Client.jsx
var React = require('react');
var App = require('./components/App.jsx');
var Store = require('./lib/Store');
Store.import(window.Store);
React.render(<App />, document);
Mais peut être n'avez vous pas (encore) JavaScript sur votre serveur.
Pas idéal amha, mais peut aider à facilement pré-rendre son application côté serveur sur une stack existante.
Notre application est pré-générée côté serveur puis "démarrée" côté client.
Partage des stores et composants React entre le client et le serveur.
On pourrait aller encore plus loin :
React-router: Parce que pourquoi se limiter seulement aux stores et aux composants ?
Fluxible App: Conteneur pour construire une application isomorphique à partir d'une architecture Flux
La source des données, l'API, est la clé, le lien entre le client et le serveur.
Trouvez un moyen de générer vos composants côté serveur, nativement avec Node.js ou via des extensions pour les autres languages.
Essayez d'aller au delà des composants (routes)