The things we’ve learned from iOS×React Native hybrid development

Transcript

1. iOSDC 2018 The things we’ve learned from iOS×React Native hybrid development @hotchemi
2. Goal: walk through hybrid style development in 15 mins!
3. 01 02 03 04 05 Agenda | Introduction Motivation How we integrated Tips & Tricks Conclusion
4. 01 Introduction
5. Introduction • Shintaro Katafuchi ◦ @hotchemi • Engineering Manager@Quipper ◦ StudySapuri • Co-host of dex.fm(Android, React Native, Flutter) ◦ Check ep55, 56
6. 02 Motivation
7. React Native • Build native mobile apps using JavaScript and React ◦ “Learn Once, Write Anywhere” • User: Facebook, Instagram, Skype, Microsoft, Discord ◦ Quipper started investigation from Autumn 2017
9. Why we chose? • To secure enough amount of mobile developers ◦ Almost all web developer in Quipper can write React • Share some logics/UI components among Web and App • Easy to integrate with existing app
10. 03 How we integrated
11. How we integrated • Investigated by developing new small app • Read “Integration with Existing Apps” section in official doc • Migrated to “monorepo” • Proceed a migration incrementally from new feature • The magic API: RCTRootView ◦ We wrap with UIViewController(ReactViewController)
13. • Surrounded: RCTRootView×TypeScript • Others: (Pure)UIKit×Swift
14. public typealias ReactProps = [String : AnyObject] class ReactViewController<BridgeModule: ReactNativeProxyBridgeModule>: UIViewController { var screenName: String? var props: ReactProps? convenience init(screenName: String, props: ReactProps? = nil) { self.init(nibName: nil, bundle: nil) self.props = props } override func viewDidLoad() { super.viewDidLoad() populateReactView() } private func populateReactView() { guard let reactView = RCTRootView(bridge: ReactNative.shared.bridge, moduleName: screenName, initialProperties: nil) else { return } view.addSubview(reactView) reactView.translatesAutoresizingMaskIntoConstraints = false if #available(iOS 11.0, *) { let guide = self.view.safeAreaLayoutGuide reactView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true reactView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true reactView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true reactView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true } }
15. class ProfileContainer extends Component<Props> { render() { return ( <SectionList renderItem={({ item }) => { return ( <SectionListItem item={item} onPress={onSwitchAccountPress} /> }} renderSectionHeader={({ section }) => { return <SectionListHeader section={section} />; }} sections={profileSections(this.props.user)} keyExtractor={item => item.name} stickySectionHeadersEnabled={true} /> ); } }
16. export default function registerComponents(store: Store<any>) { AppRegistry.registerComponent(Screens.profile, () => withReduxStore(ProfileContainer, store), ); }
18. • TypeScript: 25% • Swift: 75%
19. 04 Tips&Tricks
20. Tips 01: Sunset Android support • Just dropped 2 months ago ◦ NDK, slow in debug mode, lots of workarounds are needed ◦ Especially on “brown-field” app • Cross platform is apparently difficult ◦ Who knows both platform philosophies well? ◦ Few developers can write a bridge
22. Tips 02: Data Management • We basically use Redux but it can’t be genuine “Single Store” ◦ Because existing code already has its own infrastructure • Don’t sync any data as much as you can ◦ Follow single-way sync direction if you really need to do ◦ We only sync essential user data(like userID) ◦ The magic API: RCTBridge, RCTDeviceEventEmitter
24. final class ReactNative: NSObject { enum EventType: String { case sendUserData } static let shared = ReactNative() var bridge: RCTBridge? private override init() { super.init() } func enqueueEvent(name: EventType, with: Any = []) { let args: [Any] = [name.rawValue as Any, with] bridge?.enqueueJSCall("RCTDeviceEventEmitter.emit", args: args) } }
25. func activate() -> Promise<Qlearn.Bootstrap> { return API.Qlearn.Bootstrap .bootstrap() .then { bootstrap -> Promise<Qlearn.Bootstrap> in ReactNative.shared.enqueueEvent(name: .sendUserData, with: bootstrap.toJSONString()) let initializer = Initializer() initializer.execute(user: user, context: userSessionContext) return Promise<Qlearn.Bootstrap>(resolved: bootstrap) } }
26. import { DeviceEventEmitter } from 'react-native'; import { Store } from 'redux'; import { BootStrap, updateBootStrap } from '../actions/bootstrapAction'; import { clearStore } from '../auth/authAction'; import { EventType } from '../constants/eventType'; export const observeSendUserDataEvent = (store: Store<any>) => { DeviceEventEmitter.addListener(EventType.sendUserData, (payload: string) => { const bootstrap: BootStrap = JSON.parse(payload); store.dispatch(updateBootStrap(bootstrap)); }); };
27. Tips 03: UI Consistency • Recognize React Native as “A customView written in JavaScript” ◦ Use UIViewController for container/screen transition ◦ Easy to integrate with existing screens ◦ Easy to deal with new platform change(like SafeArea) • Still important to follow HIG/iOS standard way
29. final class ProfileEditViewController: ReactViewController<ProfileEditViewBridgeModule> { var resolver: Resolver! override func viewDidLoad() { super.viewDidLoad() } @objc func onSave(_ sender: UIBarButtonItem) { ReactNative.shared.enqueueEvent(name: .onSaveProfileEdit) } @objc func onCancel(_ sender: UIBarButtonItem) { ReactNative.shared.enqueueEvent(name: .onCancelPress) } }
30. class ProfileEditContainer extends Component<Props, State> { private emitterSubscriptions: EmitterSubscription[] = []; constructor(props: Props) { super(props); this.setupEventEmitterListeners(); } setupEventEmitterListeners = () => { this.emitterSubscriptions.push( DeviceEventEmitter.addListener(EventType.onSaveProfileEdit, this.updateUserEvent); ); this.emitterSubscriptions.push( DeviceEventEmitter.addListener(EventType.onCancelPress, () => this.props.resetDraftUser(), ), ); }; }
31. 05 Conclusion
32. Retrospective -Good- • We could scale up iOS team ◦ 2 Web devs, 1 iOS dev • React component and redux are loose coupling and testable • Performance is better than expected and no memory issue for now • We can share some logics/interfaces(not UI)
33. Retrospective -Bad- • Damn on Android! • Not low learning curve for iOS dev • Two style architectures are sort of of mixed ◦ Need to know both Swift(ObjC) and JavaScript worlds
34. Hybrid is the way to go? • First of all React Native is not a silver bullet • you can scale up a team by mixing web practice and iOS knowledge • If you develop “green field” app, Go! • If you develop “brown field” app, be careful for aforementioned points
35. Thank you! @hotchemi