Microapps e Flutter: Escalando o desenvolvimento mobile

Transcript

1. Microapps e Flutter: Escalando o desenvolvimento mobile MOBILE Vinícius Moisés
 Tech Lead Rodrigo Plácido
 Tech Lead
2. Grupo Boticário 2 GRUPO BOTICÁRIO Representante Eudora Revendedor O Boticário O Boticário Minha Revenda Digital Beleza na Web
3. Cenário 3 CENÁRIO - Dois apps que resolvem o mesmo problem a - Stacks diferente s - Times distinto s - Duas bases de códig o - Feature não é compartilhada Representante Eudora Revendedor O Boticário
4. Como escalar?
5. Flutter 5 FLUTTER - Performanc e - Integração com código nativ o - Movimento de mercado
6. Arquitetura de microapps 6 ARQUITETURA DE MICROAPPS - Modula r - Agnóstica a marc a - Testabilidad e - Manutençã o - Autonomia squad s - Feature disponível em todos app s - Produtividade
7. 7 ARQUITETURA DE MICROAPPS
8. IMG Microapp 8 ARQUITETURA DE MICROAPPS
9. IMG App 9 ARQUITETURA DE MICROAPPS class EudoraApp extends MainModule { @override List<Bind> get binds => [ Bind((_) => EudoraBloc()), ... ]; @override List<ModularRouter> get routers => [ ModularRouter('/login', module: LoginMicroApp()), ... ]; @override Widget get bootstrap => EudoraWidget(); }
10. Microapp 10 ARQUITETURA DE MICROAPPS class LoginMicroApp extends ChildModule { @override List<Bind> get binds { final authenticationRepository = AuthRepositoryImpl(); return [ Bind((i) => AuthBloc(authenticationRepository: authenticationRepository)), Bind((i) => ForgotPasswordBloc()) ]; } @override List<ModularRouter> get routers => [ ModularRouter('/login', child: (_, args) => LoginPage()), ModularRouter('/forgot_password', child: (_, args) => ForgotPasswordPage()), ]; static Inject get to => Inject<LoginMicroApp>.of(); }
11. Design System
12. IMG Design System 12 DESIGN SYSTEM - Agnóstico a marc a - Baseado em temas
13. IMG Microapp Login 13 DESIGN SYSTEM
14. IMG Theme 14 DESIGN SYSTEM class EudoraTheme implements Theme { @override FontFamily fontFamily() { return FontFamily(primary: 'MyriadPro', secondary: 'OpenSans'); } @override ThemeColor color() { return ThemeColor( appBackground: Color(0xfff6f6f6), brandPrimary: Color(0xff472d75), ...); } @override FontSize fontSize() { return FontSize( bodyMedium: 3.5 * baseValue, auxiliarSmall: 3 * baseValue, ...); } @override BorderWidth borderWidth() {...} @override CornerRadius cornerRadius() {...} @override Margin margin() {...} @override Padding padding() {...} }
15. Testes
16. IMG Unitários 16 TESTES blocTest( 'should emit [PaymentLoadInProgress, PaymentLoadSuccess] when PaymentStarted is added', build: () => paymentBloc, act: (paymentBloc) { when(basketClient.getOrderPayment()) .thenAnswer((_) => Future.value(orderPayment)); paymentBloc.add(PaymentStarted()); }, expect: [ PaymentLoadInProgress(), PaymentLoadSuccess( paymentPlans: filteredPayments, total: orderPayment.total, subtotal: orderPayment.subtotal, ) ], );
17. IMG Widgets 17 TESTES testWidgets('should call bloc event when button is clicked', (tester) async { await tester.pumpWidget(_buildApp()); await tester.pumpAndSettle(); await tester.tap(find.text(Strings.buttonGetPassword)); await tester.pumpAndSettle(); verify(forgotPasswordBloc.add(ForgotPasswordRequested(email: ''))) .called(1); });
18. IMG Integração 18 TESTES test('should return ProductResponse when search', () async { final term = 'term'; final page = 1; final pageSize = 20; final expectedResponse = ProductSearchResponseExpected() final mockResponse = MockResponse() ..httpCode = 200 ..body = await 'product_search_response.json'.read() ..headers = {'content-type': 'application/json; charset=utf-8'}; mockWebServer.enqueueResponse(mockResponse); final response = await searchDataProvider.search(term, page, pageSize); final request = mockWebServer.takeRequest(); expect(request.uri.path, '/search/products'); expect(request.method, 'GET'); expect(expectedResponse, response); });
19. CI/CD
20. IMG CI/CD 20 CI/CD - Monorep o - Bitris e - fastlan e - dartanalyze r - Danger
21. Obrigadx! MOBILE