$30 off During Our Annual Pro Sale. View Details »

Features flags at BlaBlaCar

Features flags at BlaBlaCar

Talk given at ParisWeb 2016 with @genes0r

Olivier Dolbeau

September 30, 2016
Tweet

More Decks by Olivier Dolbeau

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View 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 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View 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 Slide

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

    View 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 Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide