Fried Flutter: preparing the Flutter app for commercial development

Transcript

1. Fried Flutter: preparing Flutter for commercial development 1
2. Vladimir Ivanov 2
3. Vladimir Ivanov • Solution Architect @ EPAM Systems 2
4. Vladimir Ivanov • Solution Architect @ EPAM Systems • Experienced in Android, React- Native & Flutter 2
5. Today we 3
6. Today we • Know about Quality Standards in EPAM 3
7. Today we • Know about Quality Standards in EPAM • Know the project 3
8. Today we • Know about Quality Standards in EPAM • Know the project • Face the issues 3
9. Today we • Know about Quality Standards in EPAM • Know the project • Face the issues • Make the conclusions 3
10. Engineering Excellence in EPAM 4
11. Engineering Excellence in EPAM • Unified Code Style 4
12. Engineering Excellence in EPAM • Unified Code Style • Static analysis 4
13. Engineering Excellence in EPAM • Unified Code Style • Static analysis • Unit tests 4
14. Engineering Excellence in EPAM • Unified Code Style • Static analysis • Unit tests • Tests coverage 4
15. Engineering Excellence in EPAM • Unified Code Style • Static analysis • Unit tests • Tests coverage • Quality Gates 4
16. Our project 5
17. Our project • Innovative way of learning English. 5
18. Our project • Innovative way of learning English. • AI to help learning 5
19. Project Specifics 6
20. Project Specifics • High number of integrations 6
21. Project Specifics • High number of integrations • The initial team was not familiar with Flutter, only React-Native 6
22. Project Structure 7
25. What we faced 10
26. What we faced • Relied on default code style/ static analysis 10
27. What we faced • Relied on default code style/ static analysis • Struggled with code generation 10
28. What we faced • Relied on default code style/ static analysis • Struggled with code generation • Struggled with test runs for different modules 10
29. Case #1 Type system and code analysis 11
30. Dart & Type System The Dart language is type safe: it uses a combination of static type checking and runtime checks to ensure that a variable’s value always matches the variable’s static type, sometimes referred to as sound typing. — https://dart.dev/guides/language/type-system 12
31. But nothing by default 13
32. void printInts(List<int> a) => print(a); void main() { var list = []; list.add(1); list.add('2'); printInts(list); } 14
35. flutter analyze Analyzing typecheck... No issues found! (ran in 2.1s) 17
36. Unhandled exception: type 'List<dynamic>' is not a subtype of type 'List<int>' 18
37. class HelloTest { final interactions; HelloTest(this.interactions); void addInteraction(interaction) { interactions.add(interaction); } } 19
40. analyzer: strong-mode: implicit-dynamic: false 22
42. Case #1 - conclusions 24
43. Case #1 - conclusions • Use analysis_options.yaml from the beginning 24
44. Case #1 - conclusions • Use analysis_options.yaml from the beginning • Configure it according your needs 24
45. Case #2 Code generation 25
47. The problem 5+ services 50+ types for the service 27
48. OpenAPI The OpenAPI Specification (OAS) defines a standard, language-agnostic interface to RESTful APIs which allows both humans and computers to discover and understand the capabilities of the service without access to source code, documentation, or through network traffic inspection -- https://swagger.io/specification/ 28
49. OpenAPI { "/pets": { "get": { "description": "Returns all pets from the system that the user has access to", "responses": { "200": { "description": "A list of pets.", "content": { "application/json": { "schema": { "type": "array", "items": { "$ref": "#/components/schemas/pet" }}}}}}}} } 29
50. components: schemas: GeneralError: type: object properties: code: type: integer format: int32 message: type: string 30
51. Code generation with OpenAPI java -jar openapi-generator-cli-4.3.1.jar generate -i openapi.yaml -g dart-dio -o newversion 31
52. Code generation with OpenAPI java -jar openapi-generator-cli-4.3.1.jar generate -i openapi.yaml -g dart-dio -o newversion 31
53. Code generation with OpenAPI java -jar openapi-generator-cli-4.3.1.jar generate -i openapi.yaml -g dart-dio -o newversion 31
54. Code generation with OpenAPI java -jar openapi-generator-cli-4.3.1.jar generate -i openapi.yaml -g dart-dio -o newversion 31
55. Generation output 32
57. Expectation 34
58. Expectation • single "Make it perfect" button 34
59. Reality 35
60. Reality • Buggy generators 35
61. Reality • Buggy generators • Developers have to patch buggy code 35
62. Reality • Buggy generators • Developers have to patch buggy code • Developers have to redo patches after openapi.yaml update 35
64. Case #2 - conclusions 37
65. Case #2 - conclusions • Try to avoid codegen 37
66. Case #2 - conclusions • Try to avoid codegen • Otherwise, automate it 37
67. Automating openapi2 2 https://vvsevolodovich.dev/working-with-openapi-in-flutter-fully-automatically/ 38
68. Automating openapi2 • Download jar/install through npm 2 https://vvsevolodovich.dev/working-with-openapi-in-flutter-fully-automatically/ 38
69. Automating openapi2 • Download jar/install through npm • Download openapi.yml 2 https://vvsevolodovich.dev/working-with-openapi-in-flutter-fully-automatically/ 38
70. Automating openapi2 • Download jar/install through npm • Download openapi.yml • Generate the files 2 https://vvsevolodovich.dev/working-with-openapi-in-flutter-fully-automatically/ 38
71. Automating openapi2 • Download jar/install through npm • Download openapi.yml • Generate the files • Patch imports and formatting 2 https://vvsevolodovich.dev/working-with-openapi-in-flutter-fully-automatically/ 38
72. Automating openapi2 • Download jar/install through npm • Download openapi.yml • Generate the files • Patch imports and formatting • Run build_runner build 2 https://vvsevolodovich.dev/working-with-openapi-in-flutter-fully-automatically/ 38
73. Case #3 Tests 39
74. Fluttter Dart flutter test flutter pub run test ./ test 40
75. Tests 41
76. Tests • flutter test doesn't run tests for submodules(in comparison with 'pub get') 41
77. Tests • flutter test doesn't run tests for submodules(in comparison with 'pub get') • Separate code coverage ! 41
78. Tests • flutter test doesn't run tests for submodules(in comparison with 'pub get') • Separate code coverage ! • Code coverage requires additional steps 41
79. Coverage 42
80. Coverage • Generated as lcov.info 42
81. Coverage • Generated as lcov.info • Accepted by Github/Gitlab, not the bitrise 42
82. Coverage • Generated as lcov.info • Accepted by Github/Gitlab, not the bitrise • Html report shows the coverage 42
83. Coverage • Generated as lcov.info • Accepted by Github/Gitlab, not the bitrise • Html report shows the coverage • Code coverage should not drop(we have ~45% now) 42
84. Coverage • Generated as lcov.info • Accepted by Github/Gitlab, not the bitrise • Html report shows the coverage • Code coverage should not drop(we have ~45% now) • Coverage doesn't work for branches and functions 42
86. How to generate coverage report and check it // install junit flutter "pub" "global" "activate" "junitreport" // execute tests and convert the results flutter "test" "--machine" | tojunit "--output" "./junit_results.xml" // exclude the files flutter pub run remove_from_coverage -f coverage/lcov.info -r \ '.g.dart,lib/widgets/*,lib/screens/*' // Generate report genhtml -o coverage/html coverage/lcov.info // Check coverage flutter pub run check_coverage -f coverage/lcov.info --min-line-coverage 45 44
87. How to generate coverage report and check it // install junit flutter "pub" "global" "activate" "junitreport" // execute tests and convert the results flutter "test" "--machine" | tojunit "--output" "./junit_results.xml" // exclude the files flutter pub run remove_from_coverage -f coverage/lcov.info -r \ '.g.dart,lib/widgets/*,lib/screens/*' // Generate report genhtml -o coverage/html coverage/lcov.info // Check coverage flutter pub run check_coverage -f coverage/lcov.info --min-line-coverage 45 44
88. How to generate coverage report and check it // install junit flutter "pub" "global" "activate" "junitreport" // execute tests and convert the results flutter "test" "--machine" | tojunit "--output" "./junit_results.xml" // exclude the files flutter pub run remove_from_coverage -f coverage/lcov.info -r \ '.g.dart,lib/widgets/*,lib/screens/*' // Generate report genhtml -o coverage/html coverage/lcov.info // Check coverage flutter pub run check_coverage -f coverage/lcov.info --min-line-coverage 45 44
89. How to generate coverage report and check it // install junit flutter "pub" "global" "activate" "junitreport" // execute tests and convert the results flutter "test" "--machine" | tojunit "--output" "./junit_results.xml" // exclude the files flutter pub run remove_from_coverage -f coverage/lcov.info -r \ '.g.dart,lib/widgets/*,lib/screens/*' // Generate report genhtml -o coverage/html coverage/lcov.info // Check coverage flutter pub run check_coverage -f coverage/lcov.info --min-line-coverage 45 44
90. How to generate coverage report and check it // install junit flutter "pub" "global" "activate" "junitreport" // execute tests and convert the results flutter "test" "--machine" | tojunit "--output" "./junit_results.xml" // exclude the files flutter pub run remove_from_coverage -f coverage/lcov.info -r \ '.g.dart,lib/widgets/*,lib/screens/*' // Generate report genhtml -o coverage/html coverage/lcov.info // Check coverage flutter pub run check_coverage -f coverage/lcov.info --min-line-coverage 45 44
91. You need check_coverage3 3 we wrote it and plan to share 45
92. Tightening the feedback loop 46
93. Tightening the feedback loop • CI for tests, code coverage, static analysis and Android/iOS builds ! 46
94. Tightening the feedback loop • CI for tests, code coverage, static analysis and Android/iOS builds ! • It takes up to 30 " 46
95. Git hook 47
96. ./tools/flutter_analyze.sh if [ $? -ne 0 ]; then exit 1 fi flutter test if [ $? -ne 0 ]; then exit 1 fi flutter format 48
97. ./tools/flutter_analyze.sh if [ $? -ne 0 ]; then exit 1 fi flutter test if [ $? -ne 0 ]; then exit 1 fi flutter format 48
98. ./tools/flutter_analyze.sh if [ $? -ne 0 ]; then exit 1 fi flutter test if [ $? -ne 0 ]; then exit 1 fi flutter format 48
99. ./tools/flutter_analyze.sh if [ $? -ne 0 ]; then exit 1 fi flutter test if [ $? -ne 0 ]; then exit 1 fi flutter format 48
100. Case #3 - conclusions 49
101. Case #3 - conclusions • Check code coverage 49
102. Case #3 - conclusions • Check code coverage • Check the coverage is not dropping 49
103. Case #3 - conclusions • Check code coverage • Check the coverage is not dropping • Use git hooks for faster feedback 49
104. Case #4 supporting different envs 50
105. Supporting different envs 51
106. Supporting different envs • You have to test the app against different envs 51
107. Supporting different envs • You have to test the app against different envs • Require different configs for analytics/crash reporting 51
108. Expectations Flavors will solve the problem 52
109. Reality Configuring flavors is a pain for iOS 53
110. Android 54
111. Android • Add flavor to build.gradle 54
112. Android • Add flavor to build.gradle • Add a folder to src 54
113. Android • Add flavor to build.gradle • Add a folder to src • Done 54
114. iOS 55
115. iOS • Clone the target 55
116. iOS • Clone the target • Clone the scheme 55
117. iOS • Clone the target • Clone the scheme • Clone configurations 55
118. iOS • Clone the target • Clone the scheme • Clone configurations • Ensure, the scheme is named in Upper-case 55
119. iOS • Clone the target • Clone the scheme • Clone configurations • Ensure, the scheme is named in Upper-case • Ensure, the scheme is pointing to a proper configuration 55
120. iOS • Clone the target • Clone the scheme • Clone configurations • Ensure, the scheme is named in Upper-case • Ensure, the scheme is pointing to a proper configuration • Ensure, the scheme is shared в Runner.xcproject(не воркспейс!) 55
121. iOS • Clone the target • Clone the scheme • Clone configurations • Ensure, the scheme is named in Upper-case • Ensure, the scheme is pointing to a proper configuration • Ensure, the scheme is shared в Runner.xcproject(не воркспейс!) • Ensure, the configuration for all targets bundle id & provisioning profile are set 55
122. iOS • Clone the target • Clone the scheme • Clone configurations • Ensure, the scheme is named in Upper-case • Ensure, the scheme is pointing to a proper configuration • Ensure, the scheme is shared в Runner.xcproject(не воркспейс!) • Ensure, the configuration for all targets bundle id & provisioning profile are set • Check through flutter build ios -- flavor=<flavor-name> 55
123. Case #4 - conclusions 56
124. Case #4 - conclusions • There is --dart-define, use it if you have to change only api url 56
125. Case #4 - conclusions • There is --dart-define, use it if you have to change only api url • Otherwise flavors, see the checklist 56
126. What we knew today 57
127. What we knew today • How to configure code-style & typisation 57
128. What we knew today • How to configure code-style & typisation • How to work with code generation 57
129. What we knew today • How to configure code-style & typisation • How to work with code generation • How to work with tests and code coverage 57
130. What we knew today • How to configure code-style & typisation • How to work with code generation • How to work with tests and code coverage • How to configure different environments 57
131. Conclusions 58
132. Conclusions • Flutter is ready for commercial development 58
133. Conclusions • Flutter is ready for commercial development • It can be adjusted for high quality standards 58
134. Conclusions • Flutter is ready for commercial development • It can be adjusted for high quality standards • More info in my twitter and my blog! 58
135. Vladimir Ivanov 59
136. Vladimir Ivanov • https://vvsevolodovich.dev ! 59
137. Vladimir Ivanov • https://vvsevolodovich.dev ! • https://twitter.com/ vvsevolodovich " 59