The document discusses React Native for Android. It covers topics like React Native, JavaScript environment, ES6 syntax, JSX syntax, Node.js/NPM, React, rendering, debugging, running demos, delivering packages, examples, performance considerations, and what can be learned from building cross-platform mobile apps with React Native. Building native mobile apps for both iOS and Android from the same codebase allows shipping updates faster and reusing code, though it also has challenges to overcome.

1. React Native for Android
廖祜秋

2. 唯有钱与美酒不可辜负

3. Make it better.

4. 质有高低，境界不同。

5. Thanks.

6. 廖祜秋liaohuqiu_秋百万

7. Not only for Android.

8. Let’s start again.

9. React Native
廖祜秋

10. A month ago …

11. Survey
• Node.js / NPM
• JavaScript
• React Native
• React

12. Content
• React && React Native
• Thinking
• Performance
• JavaScript
• Deep into React Native
• Quick Start
• Hot Deployment
• Why React Native

13. JavaScript Environment
• JSC: iOS simulators and devices
• V8: Chrome debugging / Debug Server
• JSC: Android emulators and devices

14. ES6

15. JSX Synax
• Looks similar to XML
• A JavaScript syntax extension
• NOT a part of the ECMAScript spec

16. JSX Synax
https://facebook.github.io/jsx/

17. Node.js / NPM
Full stack development

18. React
• Declarative
• Virtual DOM
• Simple: state / render

19. Render
• Data changed: setState()
• Initialized: getIinitialState()

20. JavaScript & React

21. React Native

22. Quick Start

23. Quick Start

24. Debug Server

25. Run Demo
• Android …
• iOS: open project in Xcode, then run

26. Run Demo for Android
• devices: 5.0 above, adb reverse port
• simulators
• devices: set Debug server

27. Deliver Package
• Android: gradle plugin
• iOS / Android: react-native bundle(since 0.12.0)

28. Examples

29. Why React Native

30. Why React Native
• Acceptable performance
• Native look and feel
• Code reuse
• Fast development
• Fast deployment (Still some way to go for Android)

31. Deep into React Native

32. Deep into React Native
• JavaScriptModule
• ReactBridge
• NativeModule
• Native UI Components

33. ReactBridge

34. ReactBridge
• callFunction(int moduleId, int methodId, NativeArray arguments)
• setGlobalVariable(String propertyName, String data)

35. Module tables
• NativeModule
• JavaScriptModule

36. JavaScriptModule

37. NativeModule

38. NativeModule

39. Module tables
• From JS to Native: MessageQueue
• From Native to JS
• Send touch event to JS, JS process UI

40. Reuse of current code
• Module
• UI

41. Hot Deployment

42. Update React Native apps, instantly.
Only for iOS currently.

43. Android ?

44. Performance

46. A compelling reason for using React Native instead
of WebView-based tools is to achieve 60 FPS and a
native look & feel to your apps.
Performance

47. Sources of performance problems.

48. Dropping JS thread FPS because of doing a lot of
work on the JavaScript thread at the same time

49. • Development mode (dev=true)
• Slow navigator transitions
• ListView initial rendering is too slow or scroll
performance is bad for large lists

50. Considerations
• Test on both platforms
• Prone to human error
• Inevitable consequence

51. Working across separate iOS and Android code
repositories is difficult.
Even with lots of tools and automation.
Code repositories

52. What do we have?

53. WeApp

54. WeApp
• CSS
• iOS and Android implementation
• Testing

55. What we learn?

56. Shipped native app on two platforms, with native
look and feel.
What we learn

57. 3 ->
7
What we learn

58. Not all of the engineers were familiar with React
when they joined the team.
Yet they built an iOS app with native look and feel
in just five months.
What we learn

59. And after an additional three months, we released
the Android version of the app.
What we learn

60. What we learn
• Product engineer: full stack
• Creativity
• Smart and hard working

61. Q & A

62. What we learn

63. 廖祜秋liaohuqiu_秋百万
Q & A