SlideShare une entreprise Scribd logo
1  sur  60
RENAULTSHOP

@hikkyu
@chuxiuqiang
@nicolasmassouh
@cbalit
@fredoche
EKINO
WWW.EKINO.COM
AGENCE DIGITALE
FRONT, JAVA ET PHP

@NewsDuFront
@3k1n0
INTRODUCTION
RENAULT QUOI ?
WWW.RENAULTSHOP.FR
EXISTE DEPUIS 2009
FLEX
APPLICATION

Mise en relation
client-revendeur
Moteur de recherche
LA VERSION 2
L’ÉQUIPE

Cyril

Nicolas

Damien

Xiu

Fred
LANCEMENT DU PROJET
PHASE PRÉLIMINAIRE

PROTOTYPAGE / HISTORIQUE

Promoflash

Renault Shop
PHASE PRÉLIMINAIRE

WAR-ROOM
ANALYSE DU FONCTIONNEL
DÉCOUPAGE DES TÂCHES
CONCEPTION ANGULAR
MISE EN PLACE DES FLUX DE DONNÉES
CHOIX DES OUTILS
CHOIX DES OUTILS

Charles

Front

Back

Mock
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
LES COMPOSANTS

CHOIX DE LA LIBRAIRIE

Angular UI : UI-bootstrap
• modal
• pagination
LES AUTRES (AVEC UNE DIRECTIVE DE SURCOUCHE)

Selectboxit
FlexSlider
jQuery UI Slider
TOUT AU LONG DU PROJET

DES STAND UP QUOTIDIENNES
TEST UNITAIRES AVEC KARMA

Plutôt TDD
868 tests
•
•
•
•

88%
67%
50%
22%

des
des
des
des

filtres
services
controllers
directives
TOUT AU LONG DU PROJET

DES STAND UP QUOTIDIENNES
TEST UNITAIRES AVEC KARMA

Plutôt TDD
868 tests
•
•
•
•

88%
67%
50%
22%

des
des
des
des

filtres
services
controllers
directives
TESTS UNITAIRES DES DIRECTIVES

INITIALISATION DE LA DIRECTIVE

EXEMPLE D’UTILISATION
TESTS UNITAIRES DES DIRECTIVES

LE TEMPLATE URL
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
RESPONSIVE DESIGN
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
RESPONSIVE DESIGN
DESKTOP FIRST ET NON MOBILE FIRST
LAYOUT ADAPTIF POUR TABLETTE
PAS 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 CONVENTION
3 tailles d’images SMALL, MEDIUM,LARGE
Un pattern d’url /monurl/[size]/vehicle-cool.png
ON DOIT CONNAÎTRE LE CONTEXTE

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

https://github.com/weblinc/media-match
http://jsperf.com/matchmedia
UTILISATION DE MATCHMEDIA
2 FAMILLES DE TYPE DE DEVICE
TYPE

MACROTYPE

DESKTOP
TABLET
MOBILE

DESKTOP_TABLET
MOBILE

Inclusion d’un fragment HTML en fonction du flag
SNIFFING (USER AGENT)
UN DOM RESPONSIVE NE SERA PAS ALTÉRÉ
PAR ANGULAR
TIPS AND TRICKS
ORIENTÉ URL
URL

Action utilisateur

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 IOS
APPAREIL BRANCHÉ USB
IOS 6, SAFARI 6
42
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
LA PERFORMANCE
Séquence de chargement
SEO
L’EXISTANT

DES URL DÉJÀ INDEXÉES À CONVERTIR
DYNAMISATION DU SITEMAP.XML
1. UNE CONVENTION …
POUR UN BOT

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

devient
http://www.renaultshop.fr/?_escaped_fragment_=/home
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>
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.outerHTML)}) #
Et là au sein de phantomJs
, (result)->
... ## on écrit le dom dans le fichier
ph.exit() ## TA-DAA!
FILTRE

SEO

renaultshop.fr/?_escaped_fragment_=/home
renaultshop.fr/#!/home

RENAULT
SHOP
SOLUTIONS

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

GOOGLE WEBMASTER TOOLS (POUR LE DEBUG)
SCALABILITÉ
beanstalkd

File System
Sitemap.js

proxy.js
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
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
DONC …
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
@cbalit

@hikkyu

@nicolasmassouh

@fredoche

@chuxiuqiang

@NewsDuFront
@3k1n0

Contenu connexe

Tendances

Présentation de PHP 5.4 [FR]
Présentation de PHP 5.4 [FR]Présentation de PHP 5.4 [FR]
Présentation de PHP 5.4 [FR]
Wixiweb
 
Web typographie
Web typographieWeb typographie
Web typographie
mirko
 
Presentation Symfony2
Presentation Symfony2Presentation Symfony2
Presentation Symfony2
Ahmed ABATAL
 

Tendances (12)

Symfony live Paris 2014 - Symfony2 sur Azure
Symfony live Paris 2014 - Symfony2 sur AzureSymfony live Paris 2014 - Symfony2 sur Azure
Symfony live Paris 2014 - Symfony2 sur Azure
 
Réduisez vos Coûts d'Administration et les Risques d'erreurs avec Windows Pow...
Réduisez vos Coûts d'Administration et les Risques d'erreurs avec Windows Pow...Réduisez vos Coûts d'Administration et les Risques d'erreurs avec Windows Pow...
Réduisez vos Coûts d'Administration et les Risques d'erreurs avec Windows Pow...
 
PL/Sql et Sécurité des bases de données
PL/Sql et Sécurité des bases de donnéesPL/Sql et Sécurité des bases de données
PL/Sql et Sécurité des bases de données
 
Présentation de PHP 5.4 [FR]
Présentation de PHP 5.4 [FR]Présentation de PHP 5.4 [FR]
Présentation de PHP 5.4 [FR]
 
Une application en deux heure - PHP Québec Janvier 2009
Une application en deux heure - PHP Québec Janvier 2009Une application en deux heure - PHP Québec Janvier 2009
Une application en deux heure - PHP Québec Janvier 2009
 
Apache camel et les entreprise integration patterns
Apache camel et les entreprise integration patternsApache camel et les entreprise integration patterns
Apache camel et les entreprise integration patterns
 
Cours Php
Cours PhpCours Php
Cours Php
 
Introduction à Symfony2
Introduction à Symfony2Introduction à Symfony2
Introduction à Symfony2
 
wallabag, comment on a migré vers symfony3
wallabag, comment on a migré vers symfony3wallabag, comment on a migré vers symfony3
wallabag, comment on a migré vers symfony3
 
Mieux Développer en PHP avec Symfony
Mieux Développer en PHP avec SymfonyMieux Développer en PHP avec Symfony
Mieux Développer en PHP avec Symfony
 
Web typographie
Web typographieWeb typographie
Web typographie
 
Presentation Symfony2
Presentation Symfony2Presentation Symfony2
Presentation Symfony2
 

En vedette

Caddie scholarship open 1
Caddie scholarship open 1Caddie scholarship open 1
Caddie scholarship open 1
Tyce Calvert
 
Media powerpoint
Media powerpointMedia powerpoint
Media powerpoint
REBAmedia
 
Xat 2014 preparation tips
Xat 2014 preparation tipsXat 2014 preparation tips
Xat 2014 preparation tips
sakshij91
 
Opening presentation retail day
Opening presentation retail dayOpening presentation retail day
Opening presentation retail day
VisionID
 

En vedette (12)

Caddie scholarship open 1
Caddie scholarship open 1Caddie scholarship open 1
Caddie scholarship open 1
 
IADIS e-learning conference
IADIS e-learning conferenceIADIS e-learning conference
IADIS e-learning conference
 
French Lick Resort Golf - facebook
French Lick Resort Golf - facebookFrench Lick Resort Golf - facebook
French Lick Resort Golf - facebook
 
Connecting with the 21st
Connecting   with   the   21stConnecting   with   the   21st
Connecting with the 21st
 
Media powerpoint
Media powerpointMedia powerpoint
Media powerpoint
 
Vendendo a paz
Vendendo a pazVendendo a paz
Vendendo a paz
 
Xat 2014 preparation tips
Xat 2014 preparation tipsXat 2014 preparation tips
Xat 2014 preparation tips
 
Opening presentation retail day
Opening presentation retail dayOpening presentation retail day
Opening presentation retail day
 
What Type of Brace is Suited for You?
What Type of Brace is Suited for You?What Type of Brace is Suited for You?
What Type of Brace is Suited for You?
 
Tyce Calvert Results Sheet Portfolio
Tyce Calvert Results Sheet PortfolioTyce Calvert Results Sheet Portfolio
Tyce Calvert Results Sheet Portfolio
 
Guide_de_survie_en_milieu_responsive
Guide_de_survie_en_milieu_responsiveGuide_de_survie_en_milieu_responsive
Guide_de_survie_en_milieu_responsive
 
Поліцейські знешкодили злочинну групу, що під керівництвом «злодія у законі» ...
Поліцейські знешкодили злочинну групу, що під керівництвом «злодія у законі» ...Поліцейські знешкодили злочинну групу, що під керівництвом «злодія у законі» ...
Поліцейські знешкодили злочинну групу, що під керівництвом «злодія у законі» ...
 

Similaire à Meetup angular rshop

Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
Vincent Composieux
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
goldoraf
 
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
Jean-Laurent de Morlhon
 
2013 01-08-php-maturite
2013 01-08-php-maturite2013 01-08-php-maturite
2013 01-08-php-maturite
Rémi Alvado
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet Applications
Vincent Perrin
 

Similaire à Meetup angular rshop (20)

HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
 
IBM Bluemix Paris Meetup #14 - Le Village by CA - 20160413 - SOGETI
IBM Bluemix Paris Meetup #14 - Le Village by CA - 20160413 - SOGETIIBM Bluemix Paris Meetup #14 - Le Village by CA - 20160413 - SOGETI
IBM Bluemix Paris Meetup #14 - Le Village by CA - 20160413 - SOGETI
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
 
Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009
 
Octo Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endOcto Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-end
 
Octo RefCard test front-end
Octo RefCard test front-endOcto RefCard test front-end
Octo RefCard test front-end
 
sfPot aop
sfPot aopsfPot aop
sfPot aop
 
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
 
Glowroot, le petit APM qui vous veut du bien
Glowroot, le petit APM qui vous veut du bienGlowroot, le petit APM qui vous veut du bien
Glowroot, le petit APM qui vous veut du bien
 
JBoss clustering et tuning (lab 3/3)
JBoss clustering et tuning (lab 3/3)JBoss clustering et tuning (lab 3/3)
JBoss clustering et tuning (lab 3/3)
 
Présentation de WAMP.ws, le protocole pour faire du PUB/SUB et RPC over Webso...
Présentation de WAMP.ws, le protocole pour faire du PUB/SUB et RPC over Webso...Présentation de WAMP.ws, le protocole pour faire du PUB/SUB et RPC over Webso...
Présentation de WAMP.ws, le protocole pour faire du PUB/SUB et RPC over Webso...
 
Paris ember js lab #6 - Taking over server-side rendering websites
Paris ember js lab #6 - Taking over server-side rendering websitesParis ember js lab #6 - Taking over server-side rendering websites
Paris ember js lab #6 - Taking over server-side rendering websites
 
2013 01-08-php-maturite
2013 01-08-php-maturite2013 01-08-php-maturite
2013 01-08-php-maturite
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet Applications
 

Meetup angular rshop