GUIアプリケーションの構造と設計

GUIアプリケーションの構造と設計
• スマートフォン（iOS/Android）
• デスクトップ
• Web（React）

アプリケーションの設計
App
App
App
App
ここ
Libraries
Libraries
Libraries
Libraries
Cocoa touch
android.*
DOM
…
iOS
Android
Web
…

ステートフル
• GUIアプリケーションの本質的な難しさ
• 状態をどうやって扱うのか

• Observerパターン
• オブジェクトの生成・管理
• 非同期処理の抽象化

Android app
Kotlin
RxJava 2
Dagger 2
Data Binding
Architecture Components

Observerパターン

Observerパターン
• GoFの23のデザインパターンにも数えられる
• 状態を監視できる
• モデルの状態をUIに反映させる
→UIはモデルの状態の写像

単純なObserverパターン
• JavaBeans
• Key-Value Observation (iOS)
• ReduxにおけるStoreのsubscribe (Web)

バインディング
• Data Binding (Android)
• Cocoa Bindings (iOS)
• React (Web)

Data Binding
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<data>
<import type="jp.ne.hatena.myapplication.entry.Entry"/>
<variable name="entry" type="Entry"/>
</data>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/titleView"
android:text="@{entry.title}"
.../>
<TextView
android:id="@+id/bodyView"
android:text="@{entry.body}"
.../>
...
</android.support.constraint.ConstraintLayout>
</layout>

Data Binding
class EntryViewHolder(private val binding: EntryItemBinding):
RecyclerView.ViewHolder(binding.root) {
companion object {
fun create(parent: ViewGroup) = EntryViewHolder(
EntryItemBinding.inflate(LayoutInflater.from(parent.context),
parent,
false)
)
}
fun bindTo(entry: Entry?) {
binding.entry = entry
}
}

データベース
• Room (Android)
• Realm
• Core Data (iOS)

Room
@Entity(tableName = "entry",
indices = arrayOf(
Index(value = "date")
))
data class Entry(
@PrimaryKey(autoGenerate = true) val id: Int = 0,
val title: String,
val body: String,
val date: Date
)

Room
@Dao
interface EntryDao {
@Insert
fun insertEntry(entry: Entry)
@Update
fun updateEntry(entry: Entry)
@Delete
fun deleteEntry(entry: Entry)
@Query("SELECT * FROM entry ORDER BY date DESC")
fun entriesByDate(): Flowable<List<Entry>> // RxJava 2
}

Room
@Dao
interface EntryDao {
@Insert
fun insertEntry(entry: Entry)
@Update
fun updateEntry(entry: Entry)
@Delete
fun deleteEntry(entry: Entry)
@Query("SELECT * FROM entry ORDER BY date DESC")
fun entriesByDate(): LiveData<List<Entry>> // LiveData
}

Room
@Dao
interface EntryDao {
@Insert
fun insertEntry(entry: Entry)
@Update
fun updateEntry(entry: Entry)
@Delete
fun deleteEntry(entry: Entry)
@Query("SELECT * FROM entry ORDER BY date DESC")
fun entriesByDate(): LivePagedListProvider<Int, Entry> // Paging Library
}

Room
class EntriesViewModel @Inject constructor(entryDao: EntryDao): ViewModel() {
val entries: LiveData<PagedList<Entry>> = entryDao.entriesByDate().create(0, 50)
}
class EntriesAdapter: PagedListAdapter<Entry, EntryViewHolder>(EntryDiffCallback()) {
override fun onBindViewHolder(holder: EntryViewHolder?, position: Int) {
val entry = getItem(position)
holder?.bindTo(entry)
}
...
}
val entriesAdapter = EntriesAdapter()
viewModel.entries.observe(this, Observer {
list -> entriesAdapter.setList(list)
})
recyclerView.adapter = entriesAdapter

Reactive Programming
• RxJava (Android)
• Live Data (Android)
• RxSwift (iOS)
• ReactiveCocoa (iOS)
• RxJS (Web)

RxJava
fun createEntry(title: String, body: String) = Completable.create { emitter ->
val entry = Entry(title = title, body = body, date = Date())
// Slow
entryDao.insertEntry(entry)
emitter.onComplete()
}

オブジェクトの生成・管理

オブジェクトの生成・管理
• メモリ上のオブジェクトという状態について
• オブジェクトをどう管理するか
• オブジェクトへの参照をどう取得するか
• 画面間での情報のやり取り

Singletonパターン
• Singleton
• グローバル変数
• ReduxのStore (Web)

Dependency Injection
• Dagger 2 (Android)
• React Reduxのconnect (Web)

Dagger 2
• DI Containerフレームワーク
• オブジェクトを提供するModuleと
それを保持するComponent
• Android向けの機能が充実

Dagger 2
class App: Application(), HasActivityInjector {
@Inject lateinit var activityInjector: DispatchingAndroidInjector<Activity>
private fun applicationInjector() = DaggerAppComponent.builder()
.app(this)
.build()
override fun onCreate() {
super.onCreate()
applicationInjector().inject(this)
}
override fun activityInjector() = activityInjector
}

Dagger 2
@Singleton
@Component(modules = arrayOf(
AndroidSupportInjectionModule::class,
AppModule::class,
DatabaseModule::class,
ActivityBuilder::class
))
interface AppComponent {

@Component.Builder
interface Builder {
@BindsInstance
fun app(app: App): Builder
fun build(): AppComponent
}
fun inject(app: App)

}

Dagger 2
@Module abstract class AppModule {
@Binds abstract fun bindsContext(app: App): Context
}
@Module abstract class ActivityBuilder {
@ContributesAndroidInjector
abstract fun contributesMainActivity(): MainActivity
}
@Module object DatabaseModule {
@JvmStatic @Singleton @Provides
fun providesAppDatabase(context: Context): Database =
Room.databaseBuilder(context, Database::class.java, "diary_db").build()
@JvmStatic @Provides
fun providesEntryDao(database: Database) = database.entryDao()
}

Dagger 2
class MainActivity : AppCompatActivity() {
@Inject lateinit var entryDao: EntryDao
...
override fun onCreate(savedInstanceState: Bundle?) {
AndroidInjection.inject(this)
super.onCreate(savedInstanceState)
...
}
...
}

その他
• Architecture ComponentsのViewModel
(Android)
• Core Data (iOS)

非同期処理の抽象化

非同期処理の抽象化
• 非同期的な処理はそれ自体が状態と言える
• 処理中なのかどうか
• 正常に終了したのか失敗したのか
• メインスレッドを止められない

言語機能の利用
• コールバック
• 関数ポインタ
• クロージャ
• generator
• async, await

抽象表現
• キューイング
• ThreadPoolExecutor (Java)
• OperationQueue (iOS)
• Promise

Reactive Programming
• RxJava (Android)
• RxSwift (iOS)
• ReactiveCocoa (iOS)
• RxJS (Web)

RxJava 2
val compositeDisposable = CompositeDisposable()
fun createEntry(title: String, body: String) = Completable.create { emitter ->
val entry = Entry(title = title, body = body, date = Date())
entryDao.insertEntry(entry)
emitter.onComplete()
}
fun create() {
val disposable = createEntry(
"今日の日記",
"今日の晩ご飯はハンバーグだった。おいしかった。")
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe()
compositeDisposable.add(disposable)
}

まとめ

GUIアプリケーションの特性
• モデルの状態をもとにUIを更新し続ける
• 画面間でのデータのやり取りが必要
• メインスレッドを止めてはいけない

3つの構造
• Observerパターン
• オブジェクトの生成・管理
• 非同期処理の抽象化

Android app
Kotlin
RxJava 2
Dagger 2
Data Binding
Architecture Components

App
Component
Application
AppModule
Dagger 2
Activity
Component
ActivityMod
Activity
Other
Models
RxJava 2
ViewModel
Architecture
Components
Fragment
Fragment
Data Binding
View
View

Observerパターン
• Data Binding
• Room (Architecture Components)
• Live Data (Android)
• RxJava 2

オブジェクトの生成・管理
• Dagger 2
• ViewModel (Architecture Components)

非同期処理の抽象化
• クロージャ (Kotlin)
• RxJava 2

GUIアプリケーションの構造と設計
• 典型的なGUIアプリケーションの設計は3つの構造で
説明できる
• この構造に着眼することで複雑なGUIアプリケーションを
うまく設計できる