Cela fait quelques mois que nous travaillons sur une nouvelle version du site Mappy. Cette version a été mise en ligne il y a quelques jours, tout d’abord sur la partie itinéraire.
Pourquoi une nouvelle version ?
Plusieurs raisons ont poussé à une refonte du site :
- divers problèmes structurels (historique et bouton précédent peu fiable, inconsistance des données à cause d’un modèle éclaté),
- un site d’abord pensé pour les grands écrans puis adapté sur mobile,
- des différences de comportement ou de rendu entre ce que voient les moteurs de recherche et nos utilisateurs,
- une page redessinée (« rerender ») une fois le code JavaScript chargé,
- une carte de type image (« raster ») utilisant la librairie Leaflet, ne permettant pas certains usages comme un changement du style de la carte ou de pouvoir sélectionner un marqueur sur le fond de carte,
- une technologie dépassée (Backbone).
Un site à la pointe des technologies actuelles
Ainsi, nous avons démarré une refonte basée sur des technologies Web modernes :
- React permettant d’éviter de redessiner la page une fois le code JavaScript chargé et évitant des re-rendus inutiles,
- Redux pour la gestion d’état centralisé,
- Mapbox qui permettra à terme une migration vers une carte vectorielle (une fois que la majorité des navigateurs de nos utilisateurs seront compatibles pour bénéficier de performances acceptables),
- Webpack pour le découpage des ressources (« webperfs ») et Babel pour utiliser les dernières fonctionnalités du langage javascript,
- Docker et Kubernetes pour créer des environnements à la volée afin de tester chaque fonctionnalité ou correction de bug.
Par ailleurs, ce nouveau site est d’abord pensé pour le web mobile (« mobile first »).
Enfin, notre code est également en très grande partie isomorphique (le même code est exécute côté client et côté serveur) pour éviter les différences de rendu et de comportement.
Et maintenant ?
Une première étape a été franchie !
La suite est la création de pages dédiées aux résultats d’itinéraires plus adaptés aux moteurs de recherche puis la migration de la partie « recherche locale » du site (plan et points d’intérêts).
D’ailleurs, si vous souhaitez participer à cette aventure, n’hésitez pas à nous rejoindre !
Articles similaires: