Meetup angular rshop

RENAULTSHOP

@hikkyu@chuxiuqiang@nicolasmassouh@cbalit@fredoche

EKINO

WWW.EKINO.COMAGENCE DIGITALEFRONT, JAVA ET PHP

@NewsDuFront@3k1n0

INTRODUCTION

RENAULT QUOI ?

WWW.RENAULTSHOP.FREXISTE DEPUIS 2009FLEXAPPLICATION

Mise en relation client-revendeurMoteur de recherche

LA VERSION 2

L’ÉQUIPE

NicolasCyril Xiu

Damien Fred

LANCEMENT DU PROJET

PHASE PRÉLIMINAIRE

PROTOTYPAGE / HISTORIQUE

Promoflash Renault Shop

PHASE PRÉLIMINAIRE

WAR-ROOMANALYSE DU FONCTIONNELDÉCOUPAGE DES TÂCHESCONCEPTION ANGULARMISE EN PLACE DES FLUX DE DONNÉES

CHOIX DES OUTILS

CHOIX DES OUTILS

Front Back

Mock

Charles

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 controllersAngularisation des vues

LES COMPOSANTS

CHOIX DE LA LIBRAIRIE

Angular UI : UI-bootstrap• modal• pagination

LES AUTRES (AVEC UNE DIRECTIVE DE SURCOUCHE)

SelectboxitFlexSliderjQuery UI Slider

TOUT AU LONG DU PROJET

DES STAND UP QUOTIDIENNES

TEST UNITAIRES AVEC KARMA

Plutôt TDD868 tests• 88% des filtres• 67% des services• 50% des controllers• 22% des directives

TOUT AU LONG DU PROJET

DES STAND UP QUOTIDIENNES

TEST UNITAIRES AVEC KARMA

Plutôt TDD868 tests• 88% des filtres• 67% des services• 50% des controllers• 22% des directives

INITIALISATION DE LA DIRECTIVE

EXEMPLE D’UTILISATION

TESTS UNITAIRES DES DIRECTIVES

LE TEMPLATE URL

TESTS UNITAIRES DES DIRECTIVES

QUELQUES CHIFFRES

4 Développeurs front

5 Développeurs back

4 Consultants

Env. 800 tickets bugs et tâches

2 UX 1 Graphiste

1 Module

22 Directives

7 Filtres 28 Services

21 Controllers

RESPONSIVE DESIGN

SCOPE

DESKTOP

Chrome : latest releaseFirefox : latest releaseSafari 5 et 6IE 8, 9 et 10

TABLETTE

iOS 5.1 à 6.1Android 3.2 à 4.2Microsoft Surface RT

MOBILE

iOS 6Android 4.1Android 2.3

RESPONSIVE DESIGN

DESKTOP FIRST ET NON MOBILE FIRSTLAYOUT ADAPTIF POUR TABLETTEPAS DE FRAMEWORK CSS

MAIS PAS QUE !

POURQUOI ADAPTIF DESIGN (AWD) ?

CONTRAINTES FONCTIONNELLES

MISE EN PAGE FLUIDE (RWD) AVEC UNE AMÉLIORATION PROGRESSIVE

POUR LES IMAGES

UNE CONVENTION3 tailles d’images SMALL, MEDIUM,LARGEUn pattern d’url /monurl/[size]/vehicle-cool.png

ON DOIT CONNAÎTRE LE CONTEXTE

MATCHMEDIAREFRESH (RESIZE)

MATCHMEDIA

POLYFILL FROM WEBLINC FOR < IE10 FASTER THAN NATIVE MATCHMEDIA (DEPEND ON THE BROWSER)

https://github.com/weblinc/media-matchhttp://jsperf.com/matchmedia

UTILISATION DE MATCHMEDIA

Inclusion d’un fragment HTML en fonction du flag

MACROTYPE

DESKTOP_TABLETMOBILE

TYPE

DESKTOPTABLETMOBILE

2 FAMILLES DE TYPE DE DEVICE

SNIFFING (USER AGENT)

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

TIPS AND TRICKS

ORIENTÉ URL

Action utilisateur

URL

Mise à jour du modèle Appel serveur

ORIENTÉ SERVICE

SearchForm

Criteria Range Query Search SearchResult

‘$APPLY / $DIGEST ALREADY IN PROGRESS’ ERROR

SELECT SKIN TIPS

LES ANIMATIONS

DEBUG SUR LES DEVICES

SUR IOS POUR LES MACS USERS

SIMULATEUR IOSAPPAREIL BRANCHÉ USBIOS 6, SAFARI 6

42

SUR ANDROID

ANDROID 3.2APPAREIL BRANCHÉ EN USBPAS DE DÉBUG POSSIBLE HORMIS AVEC CHROME

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

LA PERFORMANCE

Séquence de chargement

SEO

L’EXISTANT

DES URL DÉJÀ INDEXÉES À CONVERTIRDYNAMISATION DU SITEMAP.XML

1. UNE CONVENTION …

POUR UN BOT

http://www.renaultshop.fr/#!/home

http://www.renaultshop.fr/?_escaped_fragment_=/home

devient

2. UNE REDIRECTION…

<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>

Ex: https://gist.github.com/Stanback/7028309

3. UN RENDERING STATIC

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

SEO

RENAULT SHOP

FILT

RE

renaultshop.fr/#!/home

renaultshop.fr/?_escaped_fragment_=/home

SOLUTIONS

SEO4AJAX (PAYANT)BROMBONE (PAYANT)PRERENDER.IO (OPEN-SOURCE)OU …. SOLUTION MAISON

GOOGLE WEBMASTER TOOLS (POUR LE DEBUG)

SCALABILITÉ

File System

Sitemap.js

proxy.js

beanstalkd

QUELQUES CHIFFRES …

30 SITES INDEXÉS3000 URL /SITE1GO DE FICHIERS/SITE20000 URL POUR RENAULTSHOP1 REQUÊTE DE BOT/SITE/SECONDE5 À 7 SECONDES DE CALCUL PAR PAGE

BILAN

OK POUR LA TECHNIQUE

MAIS ON VEUT DES RÉPONSES PERTINENTES

Pour un SEO efficace il faut du contenuPertinence des url à indexer, de leurs nombres …• « cool uris don’t change » Tim Berners-Lee

Pertinence des informations (géolocalisation)

ATTENTION AU JAVASCRIPT

DONC …

ON A AIMÉL’INDÉPENDANCE DES ÉQUIPESL’ARCHITECTURE ANGULARLES TESTS UNITAIRES

ON AURAIT AIMÉENCORE PLUS ORIENTÉ SERVICESPLUS DE TESTS ET AVEC LES TESTS E2E

NE PAS SOUS ESTIMERLA MONTÉE EN COMPÉTENCE DES ÉQUIPESLE DEBUG SUR LES DIFFÉRENTS DEVICES CIBLESLE SEO

//TODO

@NewsDuFront@3k1n0

@nicolasmassouh@cbalit @chuxiuqiang

@hikkyu @fredoche