Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
120
Help us understand the problem. What is going on with this article?
@susieyy

Facebookが公開したiOS向けReactフレームワークComponentKit

More than 5 years have passed since last update.

Introducing_ComponentKit__Functional_and_declarative_UI_on_iOS___Engineering_Blog___Facebook_Code.jpg

FacebookがiOS向けに新しいフレームワークComponentKitを公開しました。

ComponentKit which is now used to render News Feed in the Facebook iOS app.

Facebookアプリのニュースフィード部分はすでにComponentKitを利用しているそうです。

Facebookが提唱しているReactにインスピレーションを受けたiOSネイティブ向けの実装で、Facebookが合わせて発表したJavaScriptでコーディングするReact Nativeとは異なります。

  • UIViewUILabelを直接触ることはありません。CKComponentViewContextにラップされます
  • ComponentKitObjective-C++(C++)で作られています
  • ComponentKitを利用するにはObjective-C++で記述します
  • Swiftから利用するにはC++のブリッジができないので簡単ではないようです

Objective-C++について

ComponentKit___Why_C__.jpg

後述するサープルプロジェクトのコードを見ましたが、一部をObjective-C++で記述するだけなので仕切りは高くないように感じました。

ブログ componentkit.org

要点がまとまっているので、まずはここから読むのがよさそうです。

Kobito.Uzdl4M.png

Kobito.A9yoi2.png

ドキュメント Introducing ComponentKit: Functional and declarative UI on iOS

公開初日からドキュメントが大変充実しています。

ComponentKit___Getting_Started.jpg

Github

facebook/componentkit

ComponentKitはOSSでGithub上で開発されています。
もうすでにいくつかPullReqがありました。

facebook_componentkit.jpg

サンプルアプリを触ってみる

感想

やりたいことに対してコードの記述量が多いなと思いました。Objective-CObjective-C++はクラス内でも混ぜて記述できるので使い分けによる冗長なコードにならないと感じました。Swiftから利用できないのが残念です。

インストール

サンプルプロジェクトWildeGuesspod tryで簡単に試すことが出来ます。

$ pod try ComponentKit

うまく動作しない場合は最新のCocoapodsにしてみしょう。( v0.36.0 )
ダウンロードが完了すると自動的にXcodeが立ち上がります。

ソースコードの拡張子に.mmのものが見受けられます。

QuoteModelController_m.jpg

アプリを立ち上げてみると以下のような画面が動作します。Viewをタップするとポップアップが表示されるシンプルなものです。

iOS_Simulator_-_iPhone_6_-_iPhone_6___iOS_8_1__12B411_.jpg

ソースコードを除いてみます。Objective-CObjective-C++が混ざっていますね。

QuoteModelController.mm

/* This file provided by Facebook is for non-commercial testing and evaluation
 * purposes only.  Facebook reserves all rights not expressly granted.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
 * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

#import "QuoteModelController.h"

#import <UIKit/UIColor.h>

#import "Quote.h"
#import "QuoteDisplayStyle.h"
#import "QuotesPage.h"

@implementation QuoteModelController
{
  NSInteger _numberOfObjects;
}

- (instancetype)init
{
  if (self = [super init]) {
    _numberOfObjects = 0;
  }
  return self;
}

- (QuotesPage *)fetchNewQuotesPageWithCount:(NSInteger)count
{
  NSAssert(count >= 1, @"Count should be a positive integer");
  NSArray * quotes = generateRandomQuotes(count);
  QuotesPage *quotesPage = [[QuotesPage alloc] initWithQuotes:quotes
                                                     position:_numberOfObjects];
  _numberOfObjects += count;
  return quotesPage;
}

#pragma mark - Random Quote Generation

static NSArray *generateRandomQuotes(NSInteger count)
{
  NSMutableArray *_quotes = [NSMutableArray new];
  for (NSUInteger i = 0; i< count; i++) {
    NSDictionary *randomQuote = generateRandomQuoteInfo();
    Quote *quote  = [[Quote alloc] initWithText:randomQuote[@"text"]
                                         author:randomQuote[@"author"]
                                          style:generateStyle(i)];
    [_quotes addObject:quote];
  }
  return _quotes;
}

static NSDictionary *generateRandomQuoteInfo()
{
  NSArray *quotes = quotesList();
  return quotes[arc4random_uniform((uint32_t)[quotes count])];
}

static QuoteDisplayStyle generateStyle(NSUInteger index)
{
  switch (index % 4) {
    case 0:
      return QuoteDisplayStyleFrosted;
    case 1:
      return QuoteDisplayStyleMonochrome;
    case 2:
      return QuoteDisplayStyleWarm;
    case 3:
    default:
      return QuoteDisplayStyleSombre;
  }
}

static NSArray *quotesList()
{
  static NSArray *quotes;
  static dispatch_once_t once;
  dispatch_once(&once, ^{
    quotes = @[
               @{
                 @"text": @"I have the simplest tastes. I am always satisfied with the best.",
                 @"author": @"Oscar Wilde",
                 },
                 ....
               @{
                 @"text":@"It'll be boring when it's not fun any more.",
                 @"author": @"Anonymous",
                 }
               ];
  });
  return quotes;
}

@end

開発者のAdam Ernstさん

@adamjernst をフォローしました。

Adam_Ernst__adamjernst_さん___Twitter.jpg

Objc.io

Adam ErnstさんはObjc.ioにも記事をアップしています。

objc.io - React-Inspired Views

React-Inspired_Views_-_iOS_at_Scale_-_objc_io_issue__22.jpg

Refs

120
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
susieyy
フリーランス - スタートアップエンジニアリングアドバイザー - iOS技術顧問 - プロトタイプ開発

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
120
Help us understand the problem. What is going on with this article?