Development Approach to Large-Scale Updates Using Feature Toggle in LINE Sukimani

Kenjiro Isomura (LINE Growth Technology / HRS Development Team / Front-end Engineer)

https://tech-verse.me/ja/sessions/28
https://tech-verse.me/en/sessions/28
https://tech-verse.me/ko/sessions/28

Transcript

2. About Speaker Kenjiro Isomura › LINE Growth Technology › Front-end Engineer › Develop in LINE Sukimani › Prefer React, TypeScript and Next.js
3. About LINE Sukimani › Released in March 2021 › Job search service for people who want to work “Just a few hours” or “Right away tomorrow” › Provides a web application for those looking for work and a management screen for companies offering jobs
4. Do you know Feature Toggle?
5. What is Feature Toggle User Production flag = false OFF
6. What is Feature Toggle User Production ON flag = true
7. Agenda › Why We needed Feature Toggle › Approach with React Custom Hook › Development Strategies in Feature Toggle › What Happened with Feature Toggle
8. Agenda › Why We needed Feature Toggle › Approach with React Custom Hook › Development Strategies in Feature Toggle › What Happened with Feature Toggle
9. LINE Sukimani Development Structure Squad Development Structure Squad A Squad B Squad C Sukimani Product Team PdM(Plan) Server Side Front-end QA
10. LINE Sukimani Development Structure Squad Branch Structure release release release release release release 6 releases per month on average develop develop-b develop-c develop-a feature/*
11. › Development 30+ modifications › Estimated man-hours about 6 months › Project with Deadline Major Renovation Started in May
12. Consideration of Big Bang Release Main Branch Other Squad Branch Our Squad Branch Developed Codes Release When Developing with Big Bang Release 6months
13. Consideration of Big Bang Release Main Branch Other Squad Branch Our Squad Branch Developed Codes Release Other Squads are Developing in Parallel Release Release Release 6months
14. Consideration of Big Bang Release In the Case of Linkage from Our Squad to Other Squads Main Branch Other Squad Branch Our Squad Branch Developed Codes Release Release Release Release We can import codes from other Squads 6months
15. Consideration of Big Bang Release In the Case of Linkage from Our Squad to Other Squads Main Branch Other Squad Branch Our Squad Branch Developed Codes Release Release Release Release Other Squads cannot import codes from our Squad 6months
16. Pain Points for Big Bang Release › Large number of QA ISSUE › Difficult to improve codebases › Conflicts in many codes at release time
17. Pain Points for Big Bang Release › Large number of QA ISSUE › Difficult to improve codebases › Conflicts in many codes at release time
18. Pain Points for Big Bang Release › Large number of QA ISSUE › Difficult to improve codebases › Conflicts in many codes at release time
19. Encounter with Feature Toggle My Slack Channel One Day I wonder if it‘s like a Feature Toggle It was about a crazy Feature Toggle!! Thanks
20. Cons of Feature Toggle Cons › Complexity of Condition Logic › Risk of functional exposure › Increased QA costs
21. Pros of Feature Toggle Pros › Fewer Conflicts › Improved Codebase › Arrow for Planned Development
22. Agenda › Why We needed Feature Toggle › Approach with React Custom Hook › Development Strategies in Feature Toggle › What Happened with Feature Toggle
23. Prevent Exposure of Functions Under Development User Production OFF
24. Switch Toggle for Each Environment User Production OFF Other Squad OFF Our Squad ON Local ON
25. useFeatureToggle React Custom Hook
26. useFeatureToggle React Custom Hook isEnable
27. useFeatureToggle React Custom Hook isEnable
28. useFeatureToggle React Custom Hook isEnable
29. useFeatureToggle React Custom Hook isEnable
30. useFeatureToggle React Custom Hook renderFeatureToggle
31. useFeatureToggle React Custom Hook renderFeatureToggle
32. useFeatureToggle React Custom Hook renderFeatureOn and renderFeatureOff
33. useFeatureToggle React Custom Hook renderFeatureOn and renderFeatureOff
34. Why render hooks Easier Feature Toggle Cleanup Before After
35. Why render hooks Easier Feature Toggle Cleanup Before After
36. Why render hooks Easier Feature Toggle Cleanup Before After
37. Why render hooks Easier Feature Toggle Cleanup Before After
38. Agenda › Why We needed Feature Toggle › Approach with React Custom Hook › Development Strategies in Feature Toggle › What Happened with Feature Toggle
39. Secure Release with Virtual Release › Normal Release Operation Flow › Virtual Release Operation Flow
40. Secure Release with Virtual Release Development phase Squad A Squad B Feature QA phase Regression QA phase Release phase feature/* feature/* › One sprint is divided into four phases develop-a develop master feature/* develop-b Normal Release Operation Flow
41. Development phase Squad A Squad B Feature QA phase Regression QA phase Release phase feature/* feature/* › Developed in local develop-a develop master feature/* develop-b Secure Release with Virtual Release Normal Release Operation Flow
42. Development phase Squad A Squad B Feature QA phase Regression QA phase Release phase develop-a feature/* feature/* Squad A › Merge feature branch into squad’s develop branch › Deploy to Squad’s environment › QA of features and fix issues develop master feature/* develop-b Secure Release with Virtual Release Normal Release Operation Flow
43. Development phase Squad A Squad B Feature QA phase Regression QA phase Release phase develop-a feature/* develop feature/* Squad A Beta › Merge squad’s develop branch into develop branch › Deploy to Beta environment › QA of Regression master feature/* develop-b Secure Release with Virtual Release Normal Release Operation Flow
44. Development phase Squad A Squad B Feature QA phase Regression QA phase Release phase develop-a feature/* develop master feature/* Squad A Beta Production › Merge develop branch into master branch › Deploy to Production environment › QA of Production › Release develop feature/* develop-b Secure Release with Virtual Release Normal Release Operation Flow
45. Development phase Squad A Squad B Feature QA phase Regression QA phase Release phase develop-a feature/* develop master feature/* develop-b Squad A Squad B Beta Production › Back-merge develop branch into squad’s develop branch Secure Release with Virtual Release Normal Release Operation Flow
46. Secure Release with Virtual Release › Normal Release Operation Flow › Virtual Release Operation Flow
47. Development phase Squad A Squad B Feature QA phase Regression QA phase Release phase feature/* feature/* › Developed in local with Feature Toggle on develop-a develop master feature/* develop-b Secure Release with Virtual Release Virtual Release Operation Flow
48. Development phase Squad A Squad B Feature QA phase Regression QA phase Release phase develop-a feature/* develop master feature/* develop-b Squad A-2 Squad A-1 Secure Release with Virtual Release Virtual Release Operation Flow › Merge feature branch into squad’s develop branch › Deploy to two environments › Squad A-1 is for toggle off environment › Squad A-2 is for toggle on environment
49. Development phase Squad A Squad B Feature QA phase Regression QA phase Release phase develop-a feature/* develop master feature/* develop-b Squad A-2 Squad A-1 Beta Secure Release with Virtual Release Virtual Release Operation Flow › Merge squad’s branch into develop branch › Deploy to Beta environment › QA of Regression
50. Development phase Squad A Squad B Feature QA phase Regression QA phase Release phase develop-a feature/* develop master feature/* develop-b Squad A-2 Squad A-1 Beta Production Secure Release with Virtual Release Virtual Release Operation Flow › No merge into master branch at this point › Sprint development is considered complete › We call this “Virtual Release”
51. Development phase Squad A Squad B Feature QA phase Regression QA phase Release phase develop-a feature/* develop master feature/* develop-b Squad A-2 Squad A-1 Squad B Beta Production › Back-merge to other squads › Resolve conflicts currently › Q. When will it be released to the production environment? Secure Release with Virtual Release Virtual Release Operation Flow
52. Development phase Squad A Squad B Feature QA phase Regression QA phase Release phase develop-a feature/* develop master feature/* develop-b Squad A-2 Squad A-1 Squad B Beta Production › Released to production with other Squad releases Secure Release with Virtual Release Virtual Release Operation Flow
53. Proactive and Planned Development with Two QA Phases Three Types of ISSUE › Exposure of features under development › Degrade existing Functions › ISSUE of new feature
54. Proactive and Planned Development with Two QA Phases Three types of ISSUE › Exposure of features under development › Degrade existing Functions › ISSUE of new feature
55. Toggle QA Proactive and Planned Development with Two QA Phases Comparison of QA Completion Criteria Feature QA › No functional exposure › No degrade in existing features › All test cases performed will be Pass › ISSUE affecting the progress of the test has been corrected › The response to remaining issues is fixed
56. Toggle QA Proactive and Planned Development with Two QA Phases Comparison of QA Completion Criteria Feature QA › No functional exposure › No degrade in existing features › All test cases performed will be Pass › ISSUE affecting the progress of the test has been corrected › The response to remaining issues is fixed
57. Proactive and Planned Development with Two QA Phases Plan for Development and QA Periods 2weeks Fix ISSUES Develop Features
58. Proactive and Planned Development with Two QA Phases Toggle QA in All Periods 2weeks Fix ISSUES Develop Features Toggle QA
59. Feature QA Proactive and Planned Development with Two QA Phases Functional QA Starts Late in Feature Development 2weeks Fix ISSUES Develop Features Toggle QA
60. Feature QA Advantages of Dividing QA into Two Phases 2weeks Fix ISSUES Proactive and Planned Development with Two QA Phases Develop Features Toggle QA
61. Feature QA Advantages of Dividing QA into Two Phases 2weeks Develop Features Proactive and Planned Development with Two QA Phases Fix ISSUES Toggle QA
62. Agenda › Why We needed Feature Toggle › Approach with React Custom Hook › Development Strategies in Feature Toggle › What Happened with Feature Toggle
63. Minimize Conflict Safety Development Planned Development What Happened with Feature Toggle
64. Safety Development Planned Development Minimize Conflict What Happened with Feature Toggle
65. Minimize Conflict Safety Development Planned Development What Happened with Feature Toggle
66. Planned Development 0 100 200 300 400 500 600 Sprint0 Sprint1 Sprint2 Sprint3 Sprint4 Sprint5 Sprint6 Sprint7 Plan
67. 0 100 200 300 400 500 600 Sprint0 Sprint1 Sprint2 Sprint3 Sprint4 Sprint5 Sprint6 Sprint7 Plan Result Planned Development
68. 0 100 200 300 400 500 600 Sprint0 Sprint1 Sprint2 Sprint3 Sprint4 Sprint5 Sprint6 Sprint7 Plan Result Planned Development
69. Feature QA Unexpected Discovery 2weeks Fix ISSUES Proactive and Planned Development with Two QA Phases Develop Features Toggle QA
70. Conclusion
71. The challenges we encounter are not the first challenges we have encountered in humanity
72. Thank you!