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
   

   View Slide

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

   View Slide

3. ÉTAT
   2012
   

   View Slide

4. COLLABORATION
   2012
   !"
   !"
   !"
   

   View Slide

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

   View Slide

6. 2012
   QUALITÉ DE CODE
   var remi = "bar"
   var sam = { test: true };
   var simon = 'bar';
   var charles = {'test': true}
   

   View Slide

7. DÉPLOIEMENT
   2012
   $ cap deploy production
   

   View Slide

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

   View Slide

9. ÉTAT
   2015
   

   View Slide

10. COLLABORATION
    2015
    #
    100%
    

    View Slide

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

    View Slide

12. PULL REQUEST
    COLLABORATION
    2015
    

    View Slide

13. TESTS
    2015
    $
    

    View Slide

14. ...................................
    . ..............................
    . ............................
    . ....
    . ....
    ...................................
    ...................................
    ...................................
    ...................................
    ...................................
    ...................................
    ...................................
    ...................................
    ...................................
    TESTS POUR TOUT
    TESTS
    2015
    .....

    .....

    .....

    .....

    .....

    .....

    .....

    .....

    .....

    .....

    .....

    .....

    .....

    .....
    ....
    ....
    ....
    ....
    ....
    ....
    ....
    ....
    ....
    ....
    ....
    ....
    ....
    ....
    

    View Slide

15. SERVICES
    TESTS
    2015
    inviter = GameInviter.new(
    inviter: user,
    invitee: other_user,
    game: game
    )
    inviter.invite!
    

    View Slide

16. SERVICES
    TESTS
    2015
    OUTPUT
    GameInviter#invite!
    INPUT
    BEHAVIOR
    "
    GameInviter.new(mock) true
    Autres services
    " " "
    

    View Slide

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
    

    View Slide

18. CI
    TESTS
    2015
    

    View Slide

19. QUALITÉ DE CODE
    2015
    %
    

    View Slide

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
    

    View Slide

21. STYLE CONSTANT
    QUALITÉ DE CODE
    2015
    mirego/ruby-style-guide
    mirego/javascript-style-guide
    mirego/scss-style-guide
    &
    &
    &
    

    View Slide

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

    View Slide

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

    View Slide

24. CI
    QUALITÉ DE CODE
    2015
    

    View Slide

25. BÉNÉFICES
    Moins de bogues
    '
    On-boarding accéléré
    (
    Productivité
    )
    Plaisir
    ♥
    COLLABORATION, TESTS, QUALITÉ DE CODE
    2015
    

    View Slide

26. DÉPLOIEMENT
    2015
    +
    

    View Slide

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

    View Slide

28. TWELVE
    FACTOR
    APP
    DÉPLOIEMENT
    2015
    

    View Slide

29. TWELVE
    FACTOR
    APP
    DÉPLOIEMENT
    2015
    12
    

    View Slide

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

    View Slide

31. DEPENDENCIES
    TWELVE FACTOR APP
    2015
    --
    -
    2
    

    View Slide

32. CONFIGURATION
    TWELVE FACTOR APP
    2015
    " +
    3
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

36. PROCESSES
    TWELVE FACTOR APP
    2015
    6
    # Procfile
    web: puma -p $PORT -C config/puma.rb
    worker: sidekiq -q default
    

    View Slide

37. BÉNÉFICES
    Indépendance (self-contained)
    Développement local
    Scalability
    Constance et prévisibilité
    0
    1
    2
    $
    TWELVE FACTOR APP
    2015
    

    View Slide

38. « CONSTANCE »
    Si vous n’avez qu’un mot à retenir
    

    View Slide

39. QUESTIONS?
    COMMENTAIRES?
    Merci à GitHub pour les icônes Octicons
    3
    remi
    Merci à The Cars pour la musique d’inspiration
    

    View Slide