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

Features flags at BlaBlaCar

Features flags at BlaBlaCar

Talk given at ParisWeb 2016 with @odolbeau

Benjamin De Bernardi

September 30, 2016
Tweet

More Decks by Benjamin De Bernardi

Other Decks in Technology

Transcript

  1. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Benjamin de Bernardi & Olivier Dolbeau
    Benjamin de Bernardi & Olivier Dolbeau
    Feature Flags
    at

    View full-size slide

  2. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Benjamin De Bernardi
    Lead Engineer
    Since 2014
    @genes0r

    View full-size slide

  3. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Olivier Dolbeau
    Web architect
    Since 2012
    @odolbeau

    View full-size slide

  4. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    100€ 25€ 25€ 25€
    100€ 25€

    View full-size slide

  5. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    15M
    20M
    10M
    5M
    1M
    2015
    2014
    2013
    2012
    2011
    2010
    2009
    25M
    members worldwide
    Over 35 million members and growing
    1.5 million+
    joining each month
    35M
    2016

    View full-size slide

  6. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Agenda
    ● Past
    ○ BlaBlaTech
    ○ Fail Learn Succeed
    ● Now
    ○ Why feature flags rocks?
    ○ What about the implementation?
    ● Future

    View full-size slide

  7. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    1

    View full-size slide

  8. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  9. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  10. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Features & people
    100+ people in the
    tech team.
    ● Code
    ● Test
    ● Deliver (fast)
    AT THE SAME TIME!

    View full-size slide

  11. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  12. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Angry developer

    View full-size slide

  13. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Angry
    Product owner

    View full-size slide

  14. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Medias

    View full-size slide

  15. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  16. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Angry ops

    View full-size slide

  17. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  18. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Deploying big
    features is too
    risky.
    It can’t be done for
    everyone at the same
    time anymore.

    View full-size slide

  19. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Testing a feature
    with 25M users is
    not a solution.
    We need to be able to
    test a feature only in a
    country or for some
    users.

    View full-size slide

  20. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    The “Capital
    effect” must not
    happen anymore.
    We need to find a
    solution to maintain
    the website up even
    when the traffic is
    high.

    View full-size slide

  21. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  22. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Feature flags
    Feature flags
    Feature flags
    Feature flags
    Feature flags

    View full-size slide

  23. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    A 'Feature Flag' (or Feature Toggle) is
    the ability to turn features
    (sub-sections) of your application
    on/off at a moments notice.
    Wikipedia

    View full-size slide

  24. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    2

    View full-size slide

  25. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Tech & product guys are happy!

    View full-size slide

  26. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Activate a feature

    View full-size slide

  27. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Slowly rollout a new feature

    View full-size slide

  28. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Angry ops.

    View full-size slide

  29. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Deactivate
    a feature
    in
    production

    View full-size slide

  30. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Implementation

    View full-size slide

  31. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Device agnostic

    View full-size slide

  32. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    No deployment

    View full-size slide

  33. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  34. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    What do we need?
    ● a storage to store all feature flags and their rules
    ● an admin interface to create / update / delete feature flags
    ● a PHP library to use in our application

    View full-size slide

  35. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Existing solutions
    ● etsy / features
    ● joshuaestes / feature-toggle
    ● opensoft / rollout
    ● qandidate / toggle

    View full-size slide

  36. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Existing solutions
    ● etsy / features
    ● joshuaestes / feature-toggle
    ● opensoft / rollout
    ● qandidate / toggle
    deprecated

    View full-size slide

  37. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Existing solutions
    ● etsy / features
    ● joshuaestes / feature-toggle
    ● opensoft / rollout
    ● qandidate / toggle
    deprecated
    no storage logic

    View full-size slide

  38. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Existing solutions
    ● etsy / features
    ● joshuaestes / feature-toggle
    ● opensoft / rollout
    ● qandidate / toggle
    deprecated
    no storage logic
    Good choice!

    View full-size slide

  39. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Existing solutions
    ● etsy / features
    ● joshuaestes / feature-toggle
    ● opensoft / rollout
    ● qandidate / toggle
    deprecated
    no storage logic
    Good choice!
    Even better!

    View full-size slide

  40. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    http://labs.qandidate.com/blog/2014/08/18
    /a-new-feature-toggling-library-for-php/

    View full-size slide

  41. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Meet Qandidate\Toggle

    View full-size slide

  42. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Checking values: operators

    View full-size slide

  43. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Context

    View full-size slide

  44. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Putting it all together

    View full-size slide

  45. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  46. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    http://labs.qandidate.com/blog/2014/08/19/
    open-sourcing-our-feature-toggle-api-and-ui/
    API
    UI

    View full-size slide

  47. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    How it works for us?

    View full-size slide

  48. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    What will we explain?
    Storages
    Strategies
    Operators & Context
    Devices
    Administration

    View full-size slide

  49. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Storages

    View full-size slide

  50. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Storages
    APCu
    Our own implementations.

    View full-size slide

  51. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    ● Primary data store
    ● 1 key containing all
    toggles
    ● 1 key / toggle
    containing its
    configuration
    (encoded JSON)

    View full-size slide

  52. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    ● Cache layer (60
    seconds)
    ● Encapsulation FTW
    ● Encoded JSON
    APCu

    View full-size slide

  53. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Strategies

    View full-size slide

  54. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Strategies

    View full-size slide

  55. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Operators

    View full-size slide

  56. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    >=
    >=
    LessThan
    LessThanEqual
    MatchesRegex
    Percentage
    Available operators
    EqualsTo
    GreaterThan
    GreaterThanEqual
    InSet
    =
    [...]
    <
    %%
    %
    >

    View full-size slide

  57. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  58. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Implementation

    View full-size slide

  59. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Implementation - Context

    View full-size slide

  60. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Implementation - Context
    Mainly focused on the user.

    View full-size slide

  61. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Implementation - Context
    Can be website centric.

    View full-size slide

  62. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Can also be feature centric.
    Implementation - Context

    View full-size slide

  63. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Implementation - Manager

    View full-size slide

  64. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Implementation - Views

    View full-size slide

  65. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Implementation - Views

    View full-size slide

  66. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Devices
    Devices

    View full-size slide

  67. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Mobile apps
    API Flags
    Native flags

    View full-size slide

  68. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Internal Flags
    Export JSON
    Get JSON

    View full-size slide

  69. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Internal Flags

    View full-size slide

  70. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Name
    Internal Flags

    View full-size slide

  71. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Strategy
    Internal Flags

    View full-size slide

  72. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Conditions
    Internal Flags

    View full-size slide

  73. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Context key
    Internal Flags

    View full-size slide

  74. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Flaggr
    Open Source
    Android : blablacar/flaggr-android
    iOS : blablacar/flaggr-ios (soon)

    View full-size slide

  75. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  76. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  77. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    We have 100+ toggles.

    View full-size slide

  78. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    We can define toggles / devices

    View full-size slide

  79. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Name
    Strategy
    Conditions
    summary Actions

    View full-size slide

  80. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Basic settings
    1. User id
    2. Website locale
    3. User percentage
    4. User phone extension
    5. Currency

    View full-size slide

  81. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  82. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Example

    View full-size slide

  83. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  84. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  85. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Rules
    1. Displayed in France only
    a. Will be activated for other countries later (BE, PL, NL)
    2. Two kinds of results
    a. Beginners only
    b. Cheapest rides
    3. Only for logged users
    4. Activate for 50% of the users to control the impact

    View full-size slide

  86. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Flag

    View full-size slide

  87. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Implementation

    View full-size slide

  88. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  89. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  90. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Geo based conditions
    ● Axis between cities
    ● GeoJSON inside ElasticSearch

    View full-size slide

  91. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Features activation & A/B test
    Partnership with on Paris - Lyon
    Partnership with on Paris - Nancy
    Geo based conditions

    View full-size slide

  92. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Internal A/B test tool.

    View full-size slide

  93. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Internal A/B test tool.
    Why ?
    ● External tools are JavaScript based (GTM & Optimizely)
    ● Upgrades upon need

    View full-size slide

  94. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Internal A/B test tool.
    New settings
    ● User grade

    View full-size slide

  95. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Internal A/B test tool.
    New settings
    ● Visitor group
    ○ Cookie set by Nginx
    ○ 18 groups

    View full-size slide

  96. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    3

    View full-size slide

  97. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  98. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    To improve
    ● Feature flag removal
    ● Deal with permissions - In progress
    ● Use a flag for “old” features
    ● Naming!

    View full-size slide

  99. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  100. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r

    View full-size slide

  101. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Feature flags?

    View full-size slide

  102. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Yes.

    View full-size slide

  103. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Questions?

    View full-size slide

  104. ParisWeb 2016 - Feature flags @ BlaBlaCar @odolbeau & @genes0r
    Thank you
    BlaBlaCar is hiring !

    View full-size slide