Facebook이 공개한 iOS용 React 프레임워크 ComponentKit

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와는 다릅니다.

UIView 또는 UILabel를 직접 만지지 마십시오. CKComponentViewContext로 래핑됨

ComponentKit는 Objective-C++ (C++)로 만들어집니다

ComponentKit를 사용하려면 Objective-C++로 작성하십시오.

Swift에서 사용하려면 C++ 브리지를 사용할 수 없기 때문에 쉽지 않은 것 같습니다

Objective-C++ 정보

후술하는 서플 프로젝트의 코드를 보았습니다만, 일부를 Objective-C++ 로 기술할 뿐이므로 구분은 높지 않게 느꼈습니다.

블로그 구성 년 t 기계 t. 오 rg

요점이 정리되어 있으므로, 우선은 여기에서 읽는 것이 좋을 것 같습니다.

문서 Introducing ComponentKit: Functional and declarative UI on iOS

공개 첫날부터 문서가 매우 충실합니다.

Github

facebook/componentkit
ComponentKit는 OSS로 Github에서 개발되었습니다.
이미 이미 몇 가지 PullReq이있었습니다.

샘플 앱을 터치해보세요

감상

하고 싶은 것에 대해서 코드의 기술량이 많다고 생각했습니다. Objective-C 와 Objective-C++ 는 클래스내에서도 섞어 기술할 수 있기 때문에 구분에 의한 중복 코드가 되지 않는다고 느꼈습니다. Swift에서 사용할 수없는 것이 유감입니다.

설치

샘플 프로젝트 WildeGuess를 pod try에서 쉽게 시도 할 수 있습니다.

$ pod try ComponentKit

제대로 작동하지 않으면 최신 Cocoapods으로 시도하십시오. (v0.36.0)
다운로드가 완료되면 자동으로 Xcode가 시작됩니다.

소스 코드의 확장자에 .mm 의 것을 볼 수 있습니다.



앱을 시작하면 다음과 같은 화면이 작동합니다. 보기를 탭하면 팝업이 표시되는 간단한 것입니다.



소스 코드를 제외해 보겠습니다. Objective-C와 Objective-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를 팔로우했습니다.

오 bjc. 이오

Adam Ernst는 Objc.io에도 기사를 올리고 있습니다.

objc.io - React-Inspired Views

Refs

objc.io - React-Inspired Views

React Native가 스마트 폰 앱의 전면 개발을 변경하는지