Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Développement Web Moderne — méthodes de travail et principes éprouvés

Développement Web Moderne — méthodes de travail et principes éprouvés

This talk was given at Web à Québec 2015 on March 19.

I talked about how our Web team at Mirego is constantly improving how we work. Collaboration, tests, code quality and infrastructure were discussed.

I also talked about how we’re now building Web applications according to the “Twelve Factor App” principles.

8c4cee1129bc11fbe9a0b9379dce2cb1?s=128

Rémi Prévost

March 19, 2015
Tweet

Transcript

  1. Rémi Prévost DÉVELOPPEMENT WEB MODERNE méthodes de travail et principes

    éprouvés
  2. Rémi Prévost Développeur Web

  3. ÉTAT 2012

  4. COLLABORATION 2012 !" !" !"

  5. TESTS 2012 ............................. ....FFFF..................... ..................FF......... .....

  6. 2012 QUALITÉ DE CODE var remi = "bar" var sam

    = { test: true }; var simon = 'bar'; var charles = {'test': true}
  7. DÉPLOIEMENT 2012 $ cap deploy production

  8. DÉPLOIEMENT 2012 # config/database.yml development: host: localhost staging: host: db.dev-456.mirego.com

    production: host: db.prod-123.mirego.com
  9. ÉTAT 2015

  10. COLLABORATION 2015 # 100%

  11. CODE REVIEW COLLABORATION 2015 master feature/foo ❗️ ❓ # 1

    2 3
  12. PULL REQUEST COLLABORATION 2015

  13. TESTS 2015 $

  14. ................................... . .............................. . ............................ . .... . .... ...................................

    ................................... ................................... ................................... ................................... ................................... ................................... ................................... ................................... TESTS POUR TOUT TESTS 2015 .....
 .....
 .....
 .....
 .....
 .....
 .....
 .....
 .....
 .....
 .....
 .....
 .....
 ..... .... .... .... .... .... .... .... .... .... .... .... .... .... ....
  15. SERVICES TESTS 2015 inviter = GameInviter.new( inviter: user, invitee: other_user,

    game: game ) inviter.invite!
  16. SERVICES TESTS 2015 OUTPUT GameInviter#invite! INPUT BEHAVIOR " GameInviter.new(mock) true

    Autres services " " "
  17. SERVICES TESTS 2015 BEHAVIOR expect(NotificationSender) .to.receive(:new).with(user: other_user).once expect(GameInvitation.count) .to.eql(1) expect(GameSynchronizer)

    .to.receive(:new).with(game: game).once
  18. CI TESTS 2015

  19. QUALITÉ DE CODE 2015 %

  20. QUALITÉ DE CODE 2015 function handle_click(event) { if ( this.field_element.value

    == "" ) { this.buttonelement.style.display = 'none'; } } function handleClick() { if (this.fieldElement.value === '') { this.buttonElement.style.display = 'none'; } } AVANT APRÈS
  21. STYLE CONSTANT QUALITÉ DE CODE 2015 mirego/ruby-style-guide mirego/javascript-style-guide mirego/scss-style-guide &

    & &
  22. ANALYSEURS QUALITÉ DE CODE 2015 $ rubocop $ jshint $

    jscs $ scss-lint
  23. ANALYSEURS QUALITÉ DE CODE 2015 $ rubocop && jshint &&

    jscs && scss-lint mirego/phare &
  24. CI QUALITÉ DE CODE 2015

  25. BÉNÉFICES Moins de bogues ' On-boarding accéléré ( Productivité )

    Plaisir ♥ COLLABORATION, TESTS, QUALITÉ DE CODE 2015
  26. DÉPLOIEMENT 2015 +

  27. PAAS DÉPLOIEMENT 2015 mirego/hanzo & $ hanzo deploy production

  28. TWELVE FACTOR APP DÉPLOIEMENT 2015

  29. TWELVE FACTOR APP DÉPLOIEMENT 2015 12

  30. CODEBASE TWELVE FACTOR APP 2015 " + , , 1

  31. DEPENDENCIES TWELVE FACTOR APP 2015 -- - 2

  32. CONFIGURATION TWELVE FACTOR APP 2015 " + 3

  33. CONFIGURATION TWELVE FACTOR APP 2015 " + . ENV 3

  34. PROCESSES TWELVE FACTOR APP 2015 / 1 WEB / 1

    WORKER 6
  35. PROCESSES TWELVE FACTOR APP 2015 / 1 WEB / 1

    WORKER / 2 / 3 / … 6
  36. PROCESSES TWELVE FACTOR APP 2015 6 # Procfile web: puma

    -p $PORT -C config/puma.rb worker: sidekiq -q default
  37. BÉNÉFICES Indépendance (self-contained) Développement local Scalability Constance et prévisibilité 0

    1 2 $ TWELVE FACTOR APP 2015
  38. « CONSTANCE » Si vous n’avez qu’un mot à retenir

  39. QUESTIONS? COMMENTAIRES? Merci à GitHub pour les icônes Octicons 3

    remi Merci à The Cars pour la musique d’inspiration