Meetup angular rshop
-
Upload
nicolas-massouh -
Category
Documents
-
view
377 -
download
0
Transcript of 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