Damien Berseron, Xiu Qiang Chu, Nicolas Massouh et Cyril Balit proposent de faire un retour d'expérience sur l'un de leurs derniers projets : un moteur de recherche de véhicule neuf implémenté avec Angular en responsive web design pour Renault. Ils vont parler : • du contexte projet (mise en place, architecture et méthodologie) • de la contrainte du responsive web design • des tips and tricks utilisés tout au long du développement • de la mise en place du SEO sur un projet Angular

1. RENAULTSHOP
@hikkyu
@chuxiuqiang
@nicolasmassouh
@cbalit
@fredoche

2. EKINO
WWW.EKINO.COM
AGENCE DIGITALE
FRONT, JAVA ET PHP
@NewsDuFront
@3k1n0

3. INTRODUCTION

4. RENAULT QUOI ?
WWW.RENAULTSHOP.FR
EXISTE DEPUIS 2009
FLEX
APPLICATION
Mise en relation
client-revendeur
Moteur de recherche

5. LA VERSION 2

6. L’ÉQUIPE
Cyril
Nicolas
Damien
Xiu
Fred

7. LANCEMENT DU PROJET

8. PHASE PRÉLIMINAIRE
PROTOTYPAGE / HISTORIQUE
Promoflash
Renault Shop

9. PHASE PRÉLIMINAIRE
WAR-ROOM
ANALYSE DU FONCTIONNEL
DÉCOUPAGE DES TÂCHES
CONCEPTION ANGULAR
MISE EN PLACE DES FLUX DE DONNÉES

10. CHOIX DES OUTILS

11. CHOIX DES OUTILS
Charles
Front
Back
Mock

12. PHASE DE DÉVELOPPEMENT
REPRISE DES ÉLÉMENTS DU PROTOTYPE
Quelques directives ou services
PARALLÉLISATION DES TÂCHES
Montage de toutes les vues HTML/CSS
Écriture des services et des controllers
Angularisation des vues

13. LES COMPOSANTS
CHOIX DE LA LIBRAIRIE
Angular UI : UI-bootstrap
• modal
• pagination
LES AUTRES (AVEC UNE DIRECTIVE DE SURCOUCHE)
Selectboxit
FlexSlider
jQuery UI Slider

14. TOUT AU LONG DU PROJET
DES STAND UP QUOTIDIENNES
TEST UNITAIRES AVEC KARMA
Plutôt TDD
868 tests
•
•
•
•
88% des
67% des
50% des
22% des
filtres
services
controllers
directives

15. TOUT AU LONG DU PROJET
DES STAND UP QUOTIDIENNES
TEST UNITAIRES AVEC KARMA
Plutôt TDD
868 tests
•
•
•
•
88% des
67% des
50% des
22% des
filtres
services
controllers
directives

16. TESTS UNITAIRES DES DIRECTIVES
INITIALISATION DE LA DIRECTIVE
EXEMPLE D’UTILISATION

17. TESTS UNITAIRES DES DIRECTIVES
LE TEMPLATE URL

18. QUELQUES CHIFFRES
1 Module
22 Directives
7 Filtres
4 Développeurs front
4 Consultants
28 Services
21
Controllers
5 Développeurs back
2 UX
1 Graphiste
Env. 800 tickets bugs et tâches

19. RESPONSIVE DESIGN

20. SCOPE
DESKTOP
Chrome : latest release
Firefox : latest release
Safari 5 et 6
IE 8, 9 et 10
TABLETTE
iOS 5.1 à 6.1
Android 3.2 à 4.2
Microsoft Surface RT
MOBILE
iOS 6
Android 4.1
Android 2.3

21. RESPONSIVE DESIGN
DESKTOP FIRST ET NON MOBILE FIRST
LAYOUT ADAPTIF POUR TABLETTE
PAS DE FRAMEWORK CSS
MAIS PAS QUE !

22. POURQUOI ADAPTIF DESIGN (AWD) ?
CONTRAINTES FONCTIONNELLES
MISE EN PAGE FLUIDE (RWD) AVEC
UNE AMÉLIORATION PROGRESSIVE

24. POUR LES IMAGES
UNE CONVENTION
3 tailles d’images SMALL, MEDIUM,LARGE
Un pattern d’url /monurl/[size]/vehicle-cool.png

25. ON DOIT CONNAÎTRE LE CONTEXTE
MATCHMEDIA
REFRESH (RESIZE)

26. MATCHMEDIA
POLYFILL FROM WEBLINC FOR < IE10
FASTER THAN NATIVE MATCHMEDIA (DEPEND ON THE
BROWSER)
https://github.com/weblinc/media-match
http://jsperf.com/matchmedia

27. UTILISATION DE MATCHMEDIA

28. 2 FAMILLES DE TYPE DE DEVICE
TYPE
MACROTYPE
DESKTOP
TABLET
MOBILE
DESKTOP_TABLET
MOBILE
Inclusion d’un fragment HTML en fonction du flag

29. SNIFFING (USER AGENT)

30. UN DOM RESPONSIVE NE SERA PAS ALTÉRÉ
PAR ANGULAR

31. TIPS AND TRICKS

32. ORIENTÉ URL

33. URL
Action utilisateur
Mise à jour du
modèle
Appel serveur

34. ORIENTÉ SERVICE

35. SearchForm
Criteria
Range
Query
Search
SearchResult

36. ‘$APPLY / $DIGEST
ALREADY IN PROGRESS’ ERROR

37. SELECT SKIN TIPS

39. LES ANIMATIONS

41. DEBUG SUR LES DEVICES

42. SUR IOS POUR LES MACS USERS
SIMULATEUR IOS
APPAREIL BRANCHÉ USB
IOS 6, SAFARI 6
42

43. SUR ANDROID
ANDROID 3.2
APPAREIL BRANCHÉ EN USB
PAS DE DÉBUG POSSIBLE HORMIS AVEC CHROME
https://developers.google.com/chrome-developer-tools/docs/remote-debugging

44. LA PERFORMANCE

45. Séquence de chargement

46. SEO

47. L’EXISTANT
DES URL DÉJÀ INDEXÉES À CONVERTIR
DYNAMISATION DU SITEMAP.XML

48. 1. UNE CONVENTION …

49. POUR UN BOT
http://www.renaultshop.fr/#!/home
devient
http://www.renaultshop.fr/?_escaped_fragment_=/home

50. 2. UNE REDIRECTION…
Ex: https://gist.github.com/Stanback/7028309
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /prerender-test/
# Virtual/pushState URIs (requests not matching an existing file get forwarded to
index.html)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* index.html [L]
<IfModule mod_proxy_http.c>
# Enable prerendering for .html and directory index files
RewriteCond %{HTTP_USER_AGENT} googlebot|yahoo|bingbot|baiduspider [NC,OR]
RewriteCond %{QUERY_STRING} _escaped_fragment_|prerender=1
RewriteCond %{HTTP_USER_AGENT} !^Prerender
RewriteRule ^(.*.html)?$
http://prerender.herokuapp.com/http://www.yourdomain.com/prerender-test/$1 [P,L]
</IfModule>
</IfModule>
# Optionally add a ProxyPassReverse directive to ensure that 301/302 redirects
# issued by the prerender service are correctly forwarded to the client.
# Note that this must be located in your Apache config rather than .htaccess
# <IfModule mod_proxy_http.c>
#
ProxyPassReverse /prerender-test/
http://prerender.herokuapp.com/http://www.yourdomain.com/prerender-test/
# </IfModule>

51. 3. UN RENDERING STATIC
## Démarrer phantomJs et pour voir l'utiliser depuis
node.js
phantom = require "phantom" ## avec le pont
phantomjs-node
phantom.create (ph)->
ph.createPage (page)->
## Sérialisation du dom
page.evaluate ->
# Exécution dans le runtime
nodejs
return JSON.stringify({dom :
encodeURIComponent(document.documentElement.outerHTM
L)}) # Et là au sein de phantomJs
, (result)->
... ## on écrit le dom dans le fichier
ph.exit() ## TA-DAA!

52. FILTRE
SEO
renaultshop.fr/?_escaped_fragment_=/home
renaultshop.fr/#!/home
RENAULT
SHOP

53. SOLUTIONS
SEO4AJAX (PAYANT)
BROMBONE (PAYANT)
PRERENDER.IO (OPEN-SOURCE)
OU …. SOLUTION MAISON
GOOGLE WEBMASTER TOOLS (POUR LE DEBUG)

54. SCALABILITÉ

55. beanstalkd
File System
Sitemap.js
proxy.js

56. QUELQUES CHIFFRES …
30 SITES INDEXÉS
3000 URL /SITE
1GO DE FICHIERS/SITE
20000 URL POUR RENAULTSHOP
1 REQUÊTE DE BOT/SITE/SECONDE
5 À 7 SECONDES DE CALCUL PAR PAGE

57. BILAN
OK POUR LA TECHNIQUE
MAIS ON VEUT DES RÉPONSES PERTINENTES
Pour un SEO efficace il faut du contenu
Pertinence des url à indexer, de leurs nombres …
• « cool uris don’t change »
Tim Berners-Lee
Pertinence des informations (géolocalisation)
ATTENTION AU JAVASCRIPT

58. DONC …

59. ON A AIMÉ
L’INDÉPENDANCE DES ÉQUIPES
L’ARCHITECTURE ANGULAR
LES TESTS UNITAIRES
//TODO
ON AURAIT AIMÉ
ENCORE PLUS ORIENTÉ SERVICES
PLUS DE TESTS ET AVEC LES TESTS E2E
NE PAS SOUS ESTIMER
LA MONTÉE EN COMPÉTENCE DES ÉQUIPES
LE DEBUG SUR LES DIFFÉRENTS DEVICES CIBLES
LE SEO

60. @cbalit
@hikkyu
@nicolasmassouh
@fredoche
@chuxiuqiang
@NewsDuFront
@3k1n0