読者です 読者をやめる 読者になる 読者になる

独自のツールを構築する | try! Swift Tokyo 2017 #tryswiftconf Day1-14 聞き起こし

twitter.com

あなたは、最小のコード量で、すばやく、最大限のインパクトがあるアプリケーション開発をしたいでしょう。これを適切な抽象化を習得することで実現できますが、これには長年の訓練が必要です。Artsyのモバイルチームには、複数のSwift製アプリがありますが、それは我々のアプリの未来ではありません。 このトークでは、Swiftの利用方法の構築とそれがReact Native導入につながる議論をどのように引き起こしたかについて説明します。

独自のツールを構築する

f:id:niwatako:20170302173557j:plain

皆さんこんにちは

f:id:niwatako:20170302173608j:plain

個々で務めています。アートをミュージックと同じように。

モバイルチームを立ち上げました

f:id:niwatako:20170302173640j:plain

5年間依存するオープンソースにかなり貢献できました。CocoaPodsなど

f:id:niwatako:20170302173703j:plain

これはコードレビューを自動化します。

Swift, ネイティブコードから離れた話をします。

f:id:niwatako:20170302173718j:plain

SwiftのカンファレンスでSwiftで欠かないということを話すのはおかしいですよね。

いろいろな方法があって、それぞれSwiftと比べてプラスマイナスが有ります。

本題に入る前に、免責事項のお話をします。ObjCもRustもそう。GoもRuby

それぞれの役割がある。

私がお話するSwiftはネイティブ開発のツールとしてのSwiftだと考えて下さい。

なぜこんな話しをすることになったの

チームもプロダクトも拡大しているのに、開発に時間がかかるしビルドも時間が掛かる。

f:id:niwatako:20170302173911j:plain

f:id:niwatako:20170302173929j:plain

3人フルタイムのチームで取り組んできました。すべてのリソースを見せるアプリです。CustomViewControllerがとてもたくさんあります。

ブラウザとWebページ両方構築すると社内では説明しています。

そしてとうとうWebと同じ速度で開発することは無理だという結論になりました。

再使用可能なコードでもっと早く開発するアイディアの模索をはじめました。

問題はコードの再使用ができていないことに起因していました。

f:id:niwatako:20170302174102j:plain

変更しようとするとコンパイル速度が遅くなる。ネイティブ開発がアプリ開発の拡大でスローになるという問題です。

f:id:niwatako:20170302174136j:plain

Swfit的なアプリケーションなら良いと思った。

f:id:niwatako:20170302174157j:plain

これらのパターンは素晴らしい。明確にデータのレイアウトとデータの振る舞いを表現できた。CodeInjectinでライブリロードに対応。

私どもは、かなりリアクトに影響を受けてコンポーネントストラクチャを構築しようと考えました。

リアクトプログラミングパラダイムが大幅に向上しているという話を聞いていました。

f:id:niwatako:20170302174302j:plain

コンパイルが必要ならコンパイルを少なくすることが答えかもしれないと思いました。

f:id:niwatako:20170302174329j:plain

そこでエンジニアがReact Nativeやってみようと言い出した。

実験のようなものでした。4人のエンジニアでみんな忙しくて時間を書けられなかった。私ともう一人でSwiftの抽象化をやってみようとしてみた。

実験の結果をまとめてお話したいと思います。

Swiftコードドメイン固有になりました。すなわち再利用できない。

実際に0から作った複数の参照実装が有りました。ReactNativeの結果は素晴らしかったです。既存のViewControllerのコードが減る。開発者も満足でした。

どうするか、Nativeで書くか、書かないか

Swiftに良いこともあります

f:id:niwatako:20170302174554j:plain

デメリットも有る。

開発者Experienceは悪かった。コンパイルが遅い。Injection for Xcodeをやっていたが、とにかく遅い。Injectionを使うと変更は1秒かからない。Swiftにより多く移動すると、ものすごくランタイムがないので時間的なメリットが無くなる。

SwiftはAPI指向のアプリには向いていません。データを表現するためだけのコードはアプリ内で結構な量になります。

UIKitが用意してくれているものもあるが最低限なので、カスタムが沢山必要になる。

ReactNativeはどうでしょう

デメリットはこちらも沢山あります。593も依存性が発生します。ほとんど依存ツリーが理解不能です。 若い技術でおお手数者しか使っておらず、目まぐるしく変化し、ものすごく実践的です。先にFacebookの問題を修正するということです。

f:id:niwatako:20170302174836j:plain

すべての問題を解決すると思ってくれているがそんな万能薬はないしできないししないしするべきではない。

f:id:niwatako:20170302174841j:plain

しかしAPI指向のアプリとは相性が良い。

まだ今もNativeコードで書いている。いつでも戻る事ができる。構築の必要に応じて使うことが出来る。

全てのJavaScriptは異なるスレッドで実行されています。全て最後はメインスレッドに統合されますが、自分のコンポーネント以外のところでコントロール外です。

Flex Box実装でアプリのようなインターフェースに特化した形で実装されています。

従来からあるものとコンセプトは同じだが実効性と洗練度が全く違います。

f:id:niwatako:20170302175021j:plain

Appleと比べてオープンで他の開発者が対応可能

Webチームと同じパラダイムを共有している。

f:id:niwatako:20170302175055j:plain

f:id:niwatako:20170302175116j:plain

構築してすべての問題をFix出来る、時間と専門知識が弊害だが。

Native開発者は横柄にもJavaScriptは酷い言語だといいます。事実だが日常的に最悪なコードを書くばかりかのように言います。しかし、現代ではさまざまな改善がなされています。TypeScriptがあります。型、オプショナルが利用できます。

至った結論は、自分たちのプロジェクトの性質を考えるとReactNativeで十分。

サポートがなくなっても自分たちで回せると確認しています。

具体的にこのReactがなにか

一方方向のコンポーネントモデルを提供しています。

フロントエンドアプリケションのMVCスタックすべてを置き換えることができます。

Viewに変更を行って、Viewステートとの間の違いにReactに対応する。

ReactNativeではWebのdomを抽象化するのではなくNativeViewヒエラルキーを管理します。

JavaScriptを買いて、NativeViewヒエラルキーを作る。

ReactNativeはクロスプラットフォームです。

実際どう見えるのか

f:id:niwatako:20170302175436j:plain

名前と年が必要ですね

f:id:niwatako:20170302175445j:plain

f:id:niwatako:20170302175446j:plain

Reactのimportが必要です。

f:id:niwatako:20170302175501j:plain

f:id:niwatako:20170302175519j:plain

Viewコンポーネントを返します。UIViewを返します。HTMLのJavaScriptバージョン。

HeaderComponentを再利用

f:id:niwatako:20170302175554j:plain

これが一方高のデータフローです。親が変わるとrender()が走ってReCreateされたりされなかったりする。

f:id:niwatako:20170302175639j:plain

データはどこから来てるのか

f:id:niwatako:20170302175715j:plain

Relayを使っています。

f:id:niwatako:20170302175748j:plain

f:id:niwatako:20170302175808j:plain

f:id:niwatako:20170302175828j:plain

f:id:niwatako:20170302175906j:plain

全関数がnullを戻します。その場合はレンダリングがないということになります。

f:id:niwatako:20170302175959j:plain

Atomic(たくさんのインプット・アウトプットが存在する)でデータをサーバーと同期することはメインの機能ではありません。Appleは自分たちの仕事に集中しているんです。そうしたアプリ向けのツールになっています。

f:id:niwatako:20170302180031j:plain

f:id:niwatako:20170302180050j:plain

Swiftはアプリを安全に構築できる。彼らはデータ通信をメインで行わないしめったに出荷しない。彼らはそれで良いわけです。

しかし自分たちのプロダクトは少し目的が違うなと思ったら、Xcodeの外に目を向けてみると良いかもしれません。

f:id:niwatako:20170302180320j:plain

Q&A

お話の中にReactNativeでの開発の話がありましたが、複雑なアニメーションを作る場合どのくらい大変なんでしょう

正直申し上げてそういったアプリに向いているか定かではあありません。ネイティブツーリングに戻るチャンスはいくらでもありますがどの程度が複雑化という問題もあります。我々は今のところ問題になっていません。Abstractionを使うのはやはり難しいかと思います。きれいなアニメーションがあった場合にはReactNativeは使わないかもしれません。

ReactNativeは全部のアプリケーションで使うのか一つのアプリケーションで使うのか、一つの箇所で使うのか、ハイブリッドなことはできますか

あると思います、いやウソです。Podを構築しました。全てのreactNativeが中にあるんです。 ライブラリのように扱いました。 事前に計画すればうまくいきます。推奨するかというとそうではないですが大きなプロジェクトなら可能です。