Features flags at BlaBlaCar

Talk given at ParisWeb 2016 with @genes0r

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