FacebookがつくったReactライクに記述できるオープンソースのフレームワーク。
Facebook F8カンファレンスで発表されたReact Nativeは jsで記述してnative のAPIを叩くのでComponentKitとは別物。
2013年にfacebookが発表した、群雄割拠のjsフレームワークの中でいま一番Hotなやつ。
Reactのざっくりな特徴として、フロントエンドでも、データモデル変更したらDOMをあまり意識しないでViewを丸ごと描画し直すようなサーバーサイド的コーディングができるところ。
ReactについてはAjaxを劇的に簡単にするReact.jsの解説がすごい整理されていたのでオススメです。
ちなみに技術系podcastのRebuildの84回目 の29:00くらいから結構詳しく話されていました。
サーバーサイド脳の人がフロントエンドやるときにReact使うとすごい良いらしい。
とりあえずまだComponentKitの旨味がよくわからないので公式ドキュメントに沿って試していきます。
サクッとみたいなら以下でサンプルプロジェクトを試せます。
% pod try ComponentKit
インストールしてサンプルアプリを開くなら以下。
% git clone https://github.com/facebook/componentkit
% cd componentkit/Examples/WildeGuess/
% pod install
% open WildeGuess.xcworkspace
WildeGuess.xcworkspace を開いたらビルドしたら、デバッガ起動させるための停止ボタンを押して下記のexpressionコマンドを実行します。
(lldb) e (void)[CKComponentDebugController setDebugMode:YES]
これで再生ボタンを押してアプリを見ると各構成要素がわかりやすく見れるデバッグモードになっています。
公式ドキュメントでは表示されてるクオートを消す という過程を通じて導入としているのでそれに習います。
まずはXcodeのDebug View Hierarchyボタンを押してヒエラルキを確認します。
クオートを削除するにはこれらを包んでいるFrostedQuoteComponentを修正すればいいみたいです。
⌘+Shift+o でFrostedQuoteComponent へジャンプして実装を確認していきます。
QuoteWithBackgroundComponent newWithBackgroundImage:で背景画像を設定しているようです。
+ (instancetype)newWithText:(NSString *)text
context:(QuoteContext *)context
{
return [super newWithComponent:
[QuoteWithBackgroundComponent
newWithBackgroundImage:[context imageNamed:@"LosAngeles"]
quoteComponent:
次にコンテンツは、左右に20pt、上に70pt、下部に25ptにインセットされています。
[CKInsetComponent
newWithInsets:{.top = 70, .bottom = 25, .left = 20, .right = 20}
フォント、背景、UserInteractionEnabled,Alighnの設定をしています。
[CKStackLayoutComponent
newWithView:{}
size:{}
style:{}
children:{
{
[CKLabelComponent
newWithLabelAttributes:{
.string = text,
.font = [UIFont fontWithName:@"Baskerville" size:30]
}
viewAttributes:{
{@selector(setBackgroundColor:), [UIColor clearColor]},
{@selector(setUserInteractionEnabled:), @NO},
}],
.alignSelf = CKStackLayoutAlignSelfCenter
},
クオートがつくられている箇所は以下のようです。下記の中括弧を含めてコメントアウトしてアプリを再ビルドするとクオートが消えているはずです。
{
// A semi-transparent end quote (") symbol placed below the quote.
[CKInsetComponent
newWithInsets:{.right = 5}
component:
[CKLabelComponent
newWithLabelAttributes:{
.string = @"\u201D",
.color = [UIColor colorWithWhite:1 alpha:0.5],
.font = [UIFont fontWithName:@"Baskerville" size:140]
}
viewAttributes:{
{@selector(setBackgroundColor:), [UIColor clearColor]},
{@selector(setUserInteractionEnabled:), @NO},
}]],
.alignSelf = CKStackLayoutAlignSelfEnd, // Right aligned
}
一番上のセルがなんとなく上下左右のバランスが悪いので修正しましょう。 bottomのmarginを70にします。
[CKInsetComponent
newWithInsets:{.top = 70, .bottom = 25, .left = 20, .right = 20}
↓
[CKInsetComponent
newWithInsets:{.top = 70, .bottom = 25, .left = 20, .right = 20}
できました。
コードの見通しは良いですが、記述量は多いのがReactライクといった所でしょうか。
「コードは書く時間より読む時間の方が長いからReactはこれでいい」とかなんとかRebuildで話されてましが、可読性は高いので保守しやすそうです。でもそれなりにファットなプロジェクトだと厳しいんでしょうかね。
自分のプロジェクトで使用すならcocoaPodを利用すればOKです。
pod 'ComponentKit', '~> 0.9'
今回のComponentKit、Reactをはじめ、facebookのオープンソースプロジェクトって結構あるんだなと思いました。 iOSまわりで言えば以下が有名なんでしょうかね。
- LLDBのデバッグコマンド拡張のchisel
- アニメーションライブラリのpop
- KVO扱いやすくするkvocontroller