Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Développer un client riche React dans un projet...

Développer un client riche React dans un projet Symfony 4

Titouan Galopin

December 18, 2018
Tweet

More Decks by Titouan Galopin

Other Decks in Programming

Transcript

  1. Développer un client riche React dans un projet Symfony 4

    Titouan GALOPIN Product Manager SymfonyInsight SfPot Décembre 2018 Deezer 1
  2. Agenda 1. Introduction 2. Mais au fait, pourquoi on développe

    des clients riches ? 3. Quand les clients riches tournent mal 4. Un client riche dans Symfony 4 2
  3. - Chargement rapide - Interfaces qui les aide et les

    accompagne - Formulaires efficaces et facile d’utilisation 10
  4. - Chargement rapide - Interfaces qui les aide et les

    accompagne - Formulaires efficaces et facile d’utilisation - Réutilisation de patterns d’UI d’autres sites 11
  5. - Chargement rapide - Interfaces qui les aide et les

    accompagne - Formulaires efficaces et facile d’utilisation - Réutilisation de patterns d’UI d’autres sites - Multiples clients sur différents appareils 12
  6. - Chargement rapide - Interfaces qui les aide et les

    accompagne - Formulaires efficaces et facile d’utilisation - Réutilisation de patterns d’UI d’autres sites - Multiples clients sur différents appareils 13 Expérience utilisateur Presque expérience utilisateur
  7. Combien de fois est-ce qu’un appel de méthode PHP ne

    fonctionne pas, de manière aléatoire ? 1 fois sur 1 000 000 000 ? 1 fois sur 1 000 000 000 000 000 000 ? En pratique, jamais ? 18
  8. Quand est la dernière fois que vous avez eu besoin

    de développer votre propre gestion de session en PHP ? En pratique, jamais ? 22
  9. Se baser sur les navigateurs pour gérer l’historique, la session

    ou les cookies simplifie énormément votre code 23
  10. Ne plus se baser sur les comportements natifs des navigateurs

    (JWT, react-router, ...) => nécessité de beaucoup redéfinir soit même => complexité additionnelle 24
  11. Combien de développeurs(ses) dans votre équipe maîtrisent parfaitement à la

    fois React et Symfony ? Tous ? La moitié ? Seulement quelque uns ? 26
  12. Une application interactive implique une façon de développer différente =>

    il faut des compétences spécifiques => complexité humaine additionnelle 27
  13. Ne pas utiliser de client riche si cela n’améliore pas

    de manière significative l’expérience utilisateur 29
  14. Utiliser des (petits) clients riches uniquement là où c’est utile

    (et oui, peut-être que c’est utile pour toute votre application, mais pas forcément) 31
  15. A titre personnel, j’utilise généralement 1 de ces 3 niveaux

    d’intégration selon le projet 33 Pas de Javascript ou VanillaJS React seul sur certains composants spécifiques Single Page App complète React + React-Router + Redux
  16. 35 {% block stylesheets %} {{ encore_entry_link_tags('user-registration') }} {% endblock

    %} {% block javascripts %} {{ encore_entry_script_tags('user-registration') }} {% endblock %} Twig + Vanilla JS
  17. 39 Single Page App API-platform + create-react-app : deux possibilités

    Deux dossiers distincts dans le repository Idéal dans le cas de noms de domaine différent
  18. 40 Single Page App API-platform + create-react-app : deux possibilités

    Deux dossiers distincts dans le repository Idéal dans le cas de noms de domaine différent React intégré dans Symfony Utilise Symfony comme proxy (route wildcard vers Twig qui appelle l’app React)
  19. 41 Deux dossiers distincts ├── api │ ├── bin │

    ├── config │ ├── public │ ├── src │ ├── var │ └── vendor └── client ├── node_modules ├── public └── src
  20. 42 React intégré dans Symfony /** * @Route("/app") * @Route("/app/{wildcard}",

    requirements={"wildcard"=".+"}) */ public function appAction(): Response { return $this->render('react-app-index.html.twig'); }
  21. 43 Pas de Javascript ou VanillaJS React seul sur certains

    composants spécifiques Single Page App complète React + React-Router + Redux Symfony gère l’état et la logique métier Utilisation de JS comme progressive enhancement Client complexe qui gère l’état et la logique métier API-platform, React, React-Router, Redux
  22. 44 Pas de Javascript ou VanillaJS React seul sur certains

    composants spécifiques Single Page App complète React + React-Router + Redux Logique métier : PHP Routing : Symfony Vue : Twig Stockage : Doctrine Logique métier : PHP Routing : Symfony Vue : Twig + React Stockage : Doctrine Logique métier : JS Routing : React-Router Vue : React Stockage : API-platform
  23. Attention au SEO ! Aujourd’hui, la plupart des robots d’indexation

    comprennent bien les applications Javascript 46
  24. 50 Pas de Javascript ou VanillaJS React seul sur certains

    composants spécifiques Un entrypoint JS par page Progressive enhancement via JS/React Très fiable et flexible car basé sur HTTP et le navigateur
  25. 51 Pas de Javascript ou VanillaJS React seul sur certains

    composants spécifiques Single Page App complète React + React-Router + Redux Un entrypoint JS par page Progressive enhancement via JS/React Très fiable et flexible car basé sur HTTP et le navigateur API + client riche Projets séparés Plus complexe car redéfinit des comportements natifs