Meetup angular rshop

701 views

Published on

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

No Downloads
Views
Total views
701
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Meetup angular rshop

  1. 1. RENAULTSHOP @hikkyu @chuxiuqiang @nicolasmassouh @cbalit @fredoche
  2. 2. EKINO WWW.EKINO.COM AGENCE DIGITALE FRONT, JAVA ET PHP @NewsDuFront @3k1n0
  3. 3. INTRODUCTION
  4. 4. RENAULT QUOI ? WWW.RENAULTSHOP.FR EXISTE DEPUIS 2009 FLEX APPLICATION Mise en relation client-revendeur Moteur de recherche
  5. 5. LA VERSION 2
  6. 6. L’ÉQUIPE Cyril Nicolas Damien Xiu Fred
  7. 7. LANCEMENT DU PROJET
  8. 8. PHASE PRÉLIMINAIRE PROTOTYPAGE / HISTORIQUE Promoflash Renault Shop
  9. 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. 10. CHOIX DES OUTILS
  11. 11. CHOIX DES OUTILS Charles Front Back Mock
  12. 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. 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. 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. 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. 16. TESTS UNITAIRES DES DIRECTIVES INITIALISATION DE LA DIRECTIVE EXEMPLE D’UTILISATION
  17. 17. TESTS UNITAIRES DES DIRECTIVES LE TEMPLATE URL
  18. 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. 19. RESPONSIVE DESIGN
  20. 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. 21. RESPONSIVE DESIGN DESKTOP FIRST ET NON MOBILE FIRST LAYOUT ADAPTIF POUR TABLETTE PAS DE FRAMEWORK CSS MAIS PAS QUE !
  22. 22. POURQUOI ADAPTIF DESIGN (AWD) ? CONTRAINTES FONCTIONNELLES MISE EN PAGE FLUIDE (RWD) AVEC UNE AMÉLIORATION PROGRESSIVE
  23. 23. POUR LES IMAGES UNE CONVENTION 3 tailles d’images SMALL, MEDIUM,LARGE Un pattern d’url /monurl/[size]/vehicle-cool.png
  24. 24. ON DOIT CONNAÎTRE LE CONTEXTE MATCHMEDIA REFRESH (RESIZE)
  25. 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. 26. UTILISATION DE MATCHMEDIA
  27. 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. 28. SNIFFING (USER AGENT)
  29. 29. UN DOM RESPONSIVE NE SERA PAS ALTÉRÉ PAR ANGULAR
  30. 30. TIPS AND TRICKS
  31. 31. ORIENTÉ URL
  32. 32. URL Action utilisateur Mise à jour du modèle Appel serveur
  33. 33. ORIENTÉ SERVICE
  34. 34. SearchForm Criteria Range Query Search SearchResult
  35. 35. ‘$APPLY / $DIGEST ALREADY IN PROGRESS’ ERROR
  36. 36. SELECT SKIN TIPS
  37. 37. LES ANIMATIONS
  38. 38. DEBUG SUR LES DEVICES
  39. 39. SUR IOS POUR LES MACS USERS SIMULATEUR IOS APPAREIL BRANCHÉ USB IOS 6, SAFARI 6 42
  40. 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. 41. LA PERFORMANCE
  42. 42. Séquence de chargement
  43. 43. SEO
  44. 44. L’EXISTANT DES URL DÉJÀ INDEXÉES À CONVERTIR DYNAMISATION DU SITEMAP.XML
  45. 45. 1. UNE CONVENTION …
  46. 46. POUR UN BOT http://www.renaultshop.fr/#!/home devient http://www.renaultshop.fr/?_escaped_fragment_=/home
  47. 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. 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. 49. FILTRE SEO renaultshop.fr/?_escaped_fragment_=/home renaultshop.fr/#!/home RENAULT SHOP
  50. 50. SOLUTIONS SEO4AJAX (PAYANT) BROMBONE (PAYANT) PRERENDER.IO (OPEN-SOURCE) OU …. SOLUTION MAISON GOOGLE WEBMASTER TOOLS (POUR LE DEBUG)
  51. 51. SCALABILITÉ
  52. 52. beanstalkd File System Sitemap.js proxy.js
  53. 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. 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. 55. DONC …
  56. 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. 57. @cbalit @hikkyu @nicolasmassouh @fredoche @chuxiuqiang @NewsDuFront @3k1n0

×