Your SlideShare is downloading. ×
Meetup angular rshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Meetup angular rshop

327
views

Published on


0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
327
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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% 67% 50% 22% des des des 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% 67% 50% 22% des des des 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
  • 23. POUR LES IMAGES UNE CONVENTION 3 tailles d’images SMALL, MEDIUM,LARGE Un pattern d’url /monurl/[size]/vehicle-cool.png
  • 24. ON DOIT CONNAÎTRE LE CONTEXTE MATCHMEDIA REFRESH (RESIZE)
  • 25. MATCHMEDIA POLYFILL FROM WEBLINC FOR < IE10 FASTER THAN NATIVE MATCHMEDIA (DEPEND ON THE BROWSER) https://github.com/weblinc/media-match http://jsperf.com/matchmedia
  • 26. UTILISATION DE MATCHMEDIA
  • 27. 2 FAMILLES DE TYPE DE DEVICE TYPE MACROTYPE DESKTOP TABLET MOBILE DESKTOP_TABLET MOBILE Inclusion d’un fragment HTML en fonction du flag
  • 28. SNIFFING (USER AGENT)
  • 29. UN DOM RESPONSIVE NE SERA PAS ALTÉRÉ PAR ANGULAR
  • 30. TIPS AND TRICKS
  • 31. ORIENTÉ URL
  • 32. URL Action utilisateur Mise à jour du modèle Appel serveur
  • 33. ORIENTÉ SERVICE
  • 34. SearchForm Criteria Range Query Search SearchResult
  • 35. ‘$APPLY / $DIGEST ALREADY IN PROGRESS’ ERROR
  • 36. SELECT SKIN TIPS
  • 37. LES ANIMATIONS
  • 38. DEBUG SUR LES DEVICES
  • 39. SUR IOS POUR LES MACS USERS SIMULATEUR IOS APPAREIL BRANCHÉ USB IOS 6, SAFARI 6 42
  • 40. 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
  • 41. LA PERFORMANCE
  • 42. Séquence de chargement
  • 43. SEO
  • 44. L’EXISTANT DES URL DÉJÀ INDEXÉES À CONVERTIR DYNAMISATION DU SITEMAP.XML
  • 45. 1. UNE CONVENTION …
  • 46. POUR UN BOT http://www.renaultshop.fr/#!/home devient http://www.renaultshop.fr/?_escaped_fragment_=/home
  • 47. 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>
  • 48. 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!
  • 49. FILTRE SEO renaultshop.fr/?_escaped_fragment_=/home renaultshop.fr/#!/home RENAULT SHOP
  • 50. SOLUTIONS SEO4AJAX (PAYANT) BROMBONE (PAYANT) PRERENDER.IO (OPEN-SOURCE) OU …. SOLUTION MAISON GOOGLE WEBMASTER TOOLS (POUR LE DEBUG)
  • 51. SCALABILITÉ
  • 52. beanstalkd File System Sitemap.js proxy.js
  • 53. 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
  • 54. 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
  • 55. DONC …
  • 56. 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
  • 57. @cbalit @hikkyu @nicolasmassouh @fredoche @chuxiuqiang @NewsDuFront @3k1n0