Implementing New Feature in Existing Screen Rui Kowase @rkowase 2018/08/23 Android Lunch & Learn 

Can you implement new feature in existing screen easily? 

Agenda ● The New Architecture ● Architecture of SafeTrade feature ● Q&A 

Profile ● Name: Rui Kowase / 小和瀬 塁 ● Account: @rkowase Skill: Flutter, Android, etc... 

The New Architecture 

Benefits of The New Architecture “This architecture will help you to make your code less buggy and easier to modify. Having a consistent architecture will make your work and life easier.” 

Goal of The New Architecture ● Shared Knowledge ● Improves testability ● Reusability 

Overview of The New Architecture 

Example of The New Architecture in Exhibit Screen 

Testing 

Architecture of SafeTrade 

Overview of SafeTrade Feature ItemDetail Screen Exhibit Screen 

Architecture of SafeTrade Feature Exhibit ViewProxy Exhibit Presenter Existing Feature Exhibit Repository SafeTradeExhibit Presenter SafeTradeExhibit Repository SafeTradeExhibit ViewProxy SafeTrade FeatureBuilder Exhibit Activity New Feature Feature toggle SafeTrade ViewFactory Inject Inject 

Architecture of SafeTrade Feature Exhibit ViewProxy Exhibit Presenter Existing Feature Exhibit Repository SafeTradeExhibit Presenter SafeTradeExhibit Repository SafeTradeExhibit ViewProxy SafeTrade FeatureBuilder Exhibit Activity New Feature Feature toggle SafeTrade ViewFactory Inject Inject 

ExhibitModule @Module class ExhibitModule( // ... @Provides @ActivityScope fun provideSafeTradePresenter(): SafeTradeContract.ExhibitPresenter { val builder = SafeTradeFeatureBuilder(...) return builder.buildExhibitPresenter(...) } } 

ExhibitPresenter class ExhibitPresenter @Inject constructor( // ... private val safeTradeExhibitPresenter: SafeTradeContract.ExhibitPresenter, ) : ExhibitContract.Presenter { 

Architecture of SafeTrade Feature Exhibit ViewProxy Exhibit Presenter Existing Feature Exhibit Repository SafeTradeExhibit Presenter SafeTradeExhibit Repository SafeTradeExhibit ViewProxy SafeTrade FeatureBuilder Exhibit Activity New Feature Feature toggle SafeTrade ViewFactory Inject Inject 

SafeTrade Contract interface SafeTradeContract { interface Presenter { // ..... } interface ExhibitPresenter : Presenter { // ..... companion object { val EMPTY = object : ExhibitPresenter {} } } interface ExhibitView : ViewProxy { // ..... } // ..... } The interface of SafeTrade’s ViewProxy and Presenter 

SafeTrade FeatureBuilder class SafeTradeFeatureBuilder @Inject constructor( private val activity: Activity, private val provider: SafeTradeViewFactory ) { @VisibleForTesting var isDebug: Boolean = BuildConfig.DEBUG fun buildExhibitPresenter(repository: SafeTradeRepository, helper: StringFormatHelper, state: ListingUiState ): SafeTradeContract.ExhibitPresenter { if (!isDebug) { return SafeTradeContract.ExhibitPresenter.EMPTY } // ….. return presenter } } The builder for Presenter 

Architecture of SafeTrade Feature Exhibit ViewProxy Exhibit Presenter Existing Feature Exhibit Repository SafeTradeExhibit Presenter SafeTradeExhibit Repository SafeTradeExhibit ViewProxy SafeTrade FeatureBuilder Exhibit Activity New Feature Feature toggle SafeTrade ViewFactory Inject Inject 

SafeTrade ViewFactory interface SafeTradeViewFactory { interface Exhibit : SafeTradeViewFactory { fun getEnableRoot(): View fun getEnableCheckbox(): CheckBox fun getEnableCheckboxContainer(): View fun getEnableSafeTradeFeeValue(): TextView fun getEnableTitle(): TextView fun getEnableSubTitle(): TextView fun getEnableHelpIcon(): ImageView fun getAdditionalFeeRoot(): View fun getAdditionalFeeLabel(): TextView fun getAdditionalFeeValue(): TextView fun getAgreementRoot(): View fun getAgreementCheckbox(): CheckBox } } View inflater 

Architecture of SafeTrade Feature Exhibit ViewProxy Exhibit Presenter Existing Feature Exhibit Repository SafeTradeExhibit Presenter SafeTradeExhibit Repository SafeTradeExhibit ViewProxy SafeTrade FeatureBuilder Exhibit Activity New Feature Feature toggle SafeTrade ViewFactory Inject Inject 

ExhibitActivity private void setUpDi() { // ... SafeTradeExhibitViewFactoryProvider provider = new SafeTradeExhibitViewFactoryProvider( findViewById(R.id.safe_trade_frame_enable), // ... ); ThisApplication.get(this) .component() .newStatefulExhibitSubComponent( new ExhibitModule( // ... exhibitViewProxy, // … ), new ImageModule(this)) .inject(this); } 

The flow of SafeTrade 

Architecture of SafeTrade Feature Exhibit ViewProxy Exhibit Presenter Existing Feature Exhibit Repository SafeTradeExhibit Presenter SafeTradeExhibit Repository SafeTradeExhibit ViewProxy SafeTrade FeatureBuilder Exhibit Activity New Feature Feature toggle SafeTrade ViewFactory Inject Inject Tap SafeTrade’s View 

Architecture of SafeTrade Feature Exhibit ViewProxy Exhibit Presenter Existing Feature Exhibit Repository SafeTradeExhibit Presenter SafeTradeExhibit Repository SafeTradeExhibit ViewProxy SafeTrade FeatureBuilder Exhibit Activity New Feature Feature toggle SafeTrade ViewFactory Inject Inject Call SafeTradeExhibit Presenter 

Architecture of SafeTrade Feature Exhibit ViewProxy Exhibit Presenter Existing Feature Exhibit Repository SafeTradeExhibit Presenter SafeTradeExhibit Repository SafeTradeExhibit ViewProxy SafeTrade FeatureBuilder Exhibit Activity New Feature Feature toggle SafeTrade ViewFactory Inject Inject Do nothing if it is disabled 

Architecture of SafeTrade Feature Exhibit ViewProxy Exhibit Presenter Existing Feature Exhibit Repository SafeTradeExhibit Presenter SafeTradeExhibit Repository SafeTradeExhibit ViewProxy SafeTrade FeatureBuilder Exhibit Activity New Feature Feature toggle SafeTrade ViewFactory Inject Inject Call SafeTradeExhibit ViewProxy 

Architecture of SafeTrade Feature Exhibit ViewProxy Exhibit Presenter Existing Feature Exhibit Repository SafeTradeExhibit Presenter SafeTradeExhibit Repository SafeTradeExhibit ViewProxy SafeTrade FeatureBuilder Exhibit Activity New Feature Feature toggle SafeTrade ViewFactory Inject Inject Update views 

Summary ● Toggle Feature in Builder class ● SRP (Single Responsibility Principle) ● Divide classes by interface and inject 

Thank you!