Comment marier Symfony et ReactJS ?

PHP Tour Nantes - Claire Coloma et Suzanne Favot - 18 mai 2017

Coucou, je suis Claire Coloma

Développeuse web et mobile chez
@_ClaireColoma

Coucou, je suis Suzanne Favot

Développeuse web @
@SFavot

ReactJS

Librairie Javascript
Développée par Facebook et rendue open-source en 2013
Parsage du DOM => DOM Virtuel
Render uniquement les éléments du DOM modifiés
Architecture en composants écrits en JSX
Chaque composant a un état (state) et des propriétés (props)

Le DOM virtuel

Version abstraite du DOM physique, inclu son propre système d'évènements
Utilise l'api DOM
DOM, représentation abstraite des éléments HTML

Composants

Code qui gère une partie spécifique de la page
Possède un lifecycle

class TodoList extends Component {
  render() {
    return (
      <div className="well">
        /* Code du rendu */
      </div>
    );
  }
}

élément central de React
"rendu" graphiquement à l'aide de la méthode render()"

Props

Données passées du composant parent vers le composant enfant
Composant => fonction de props

<Todo done={false} item={item} />

State

État d'un composant
"Variable locale" d'un composant
Géré par le composant lui-même

class Todo extends Component {
  constructor() {
	super();

  	this.state = {
      visible: true,
  	};
  }

  markAsDone() {
    this.setState({
	  visible: false,
    });
  }

  render() {
    if (!this.state.visible) {
	  return null;
	}

	return (
	  <li>
	    <span>{this.props.item}</span>
		<button onClick={this.markAsDone.bind(this)}>
			Fait
		</button>
	  </li>
	);
  }
}

L'écosystème React

Twig

Possible d'inclure et d'étendre les templates
Peu de dynamisme
Pas de maîtrise sur la donnée passée aux templates
Peu adapté aux interfaces complexes

{% extends "base.html" %}

{% block content %}

    <h1>Bienvenue</h1>

    {% include 'AppBundle:Homepage:content.html.twig' %}

{% endblock %}

Du React dans Symfony ???

Ça fait peur

Over-engineering...
Et le SEO ?
Et les temps de chargement ?
Et les (3) utilisateurs qui désactivent le JS ?
Et puis de toute façon le JS c'est pour les intégrateurs !

On essaye quand même ?

Quelles options ?

Dans une application à part qui consomme une API Symfony
Dans un fichier JS inclus dans Twig
En utilisant un bundle

Projet 1

On a une API Symfony
On veut un back-office
Pour faire du CRUD basique
Avec une interface très dynamique

Une API Symfony, un front React

Le schéma le plus "classique"
Risque de dupliquer la logique métier
Nécessite de bien séparer (ou partager) les rôles (traductions, validation...)
Solutions clés en main : api-platform-admin, admin-on-rest...

Mais si on veut seulement quelques parties du site en React, comment on fait ?

Projet 2

On a un site Symfony fait avec Twig
On veut une page de recherche
Sans rechargement de la page
Avec des filtres dynamiques

Faire du React dans Twig

Javascript compilé et inclus dans Twig

Composants React déclarés à part proprement et compilés en un fichier

{# layout.html.twig #}

{% block body %}
<div
	id="search-page"
	data-categories="{{ categories|json_encode }}"
></div>
{% endblock %}

{% block javascripts %}
	<script type="text/javascript" src="{{ asset('searchpage.js') }}"></script>
{% endblock %}

 // index.js

import React from 'react';
import ReactDOM from 'react-dom';

import SearchPage from './SearchPage.jsx';

const searchPageElement = document.querySelector('#search-page');
const getData = (name, json = true) => {
    const value = searchPageElement.getAttribute(`data-${name}`);
    return json ? JSON.parse(value) : value;
};

const element = React.createElement(SearchPage, {
    categories: getData('categories'),
});

ReactDOM.render(element, document.getElementById('search-page'));

Et le référencement ?

On veut mettre du React sur la homepage => problème : pas de référencement => solution : ?

Vu par un robot

Avec Javascript

Sans Javascript

Nuancer à mort : la plupart des robots lisent le js et l'immense majorité des gens aussi
Transition vers React rendu serveur

Rendu serveur

Rendu serveur : fonctionnement

Le serveur reçoit la requête
Il interprète lui-même le code React
Puis génère et sert le code HTML au client
React côté client peut alors reprendre la main
Il construit le DOM virtuel à partir du HTML généré
Puis s'exécute normalement

Rendu serveur : pourquoi ?

Permettre la lecture par les robots (SEO)
Afficher du contenu pour tous les utilisateurs
Premier affichage plus rapide
Isomorphisme

Google interprète déjà le JS
Plus rapide => dépend de comment est rendu le JS

Avec un serveur node externe

Avec node.js en ligne de commande


exec('node ./test.js', $output);

Avec V8Js

Extension PHP
Permet d'utiliser la librairie V8 de Google
Exécute le code Javascript directement dans PHP

$v8 = new V8Js();
$v8->answer = 41;

$js = "var life = {}; life.answer = PHP.answer; life.answer++; life.answer;";

// Affiche 42
$v8->executeString($js);

v8js va agir comme un contexte d'exécution auquel on peut ajouter des propriétés

PhpExecJs

Librairie en PHP
Détecte automatiquement le moyen à utiliser pour exécuter le Js (V8Js ou node.js)
Permet aussi d'utiliser un runner externe


$phpexecjs = new PhpExecJs();

$js = "Math.min(1, 2)";

// Affiche 1
$phpexecjs->evalJs($js);

en fonction de l'environnement
agnostique (indépendemment du contexte)

LimeniusReactBundle

Bundle Symfony
Inspiré de React on Rails
Une simple extension Twig pour le rendu

Rendu serveur, client ou les deux !


	{{ react_component('HomePage', {'rendering': 'server_side'}) }}
	{{ react_component('HomePage', {'rendering': 'client_side'}) }}
	{{ react_component('HomePage', {'rendering': 'both'}) }}

Permet d'utiliser PhpExecJs ou un serveur node externe

LimeniusReactBundle - Mise en place (1)

On crée les composants React à part

LimeniusReactBundle - Mise en place (2)

On register les composants à rendre dans Twig grâce à React on Rails


// registration.js
import ReactOnRails from 'react-on-rails';
import HomePage from './components/HomePage';

ReactOnRails.register({ HomePage });

LimeniusReactBundle - Mise en place (3)

On build le code Javascript (par exemple avec Webpack) dans deux fichiers server-bundle.js et client-bundle.js.

LimeniusReactBundle - Mise en place (4)

Enfin, on appelle nos composants en leur passant les props souhaitées.


{{ react_component('HomePage', {'props': {'items': items}, 'rendering': 'both'}) }}

Convaincus ?

Ne faites pas du React si vous n'avez pas le besoin factuel et concret d'employer React

X.

Pourquoi utiliser ReactJS avec Symfony ?

J'ai besoin de dynamiser une grande partie de mon site
Je veux faire la transition d'un front Twig vers un front full React
Je veux réaliser une interface complexe ou interactive
Je compte développer une application React Native et je veux pouvoir mutualiser mon code

Merci ! Et bon appétit ! 🍔

@_ClaireColoma - @SFavot |