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.

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