How can we have one codebase for mobile and web when both of them have different APIs and behavior? Sanket covered the behavioral and technical differences between web and mobile platforms. Watch on YouTube: https://www.youtube.com/watch?v=m6HgfkCYiT8

1. Hey

2. I am Sanket Sahu

3. I am Sanket Sahu
Co-created NativeBase

4. I am Sanket Sahu
GeekyAnts

5. /sanketsahu
I am Sanket Sahu
GeekyAnts

6. The state of one codebase
for all the platforms

7. Obviously, it’s about

8. Obviously, it’s about
Flutter

9. Obviously, it’s about
Java

11. Approaches

12. Approach #1
One Code Widgets
Native Platforms
Canvas
Events
Source Framework

13. Approach #1
One Code
Native Platforms
Widgets
Canvas
Events
Source Framework

14. Approach #1
One Code
Native Platforms
Widgets
Canvas
Events
Source Framework
Thin glue, minimal mapping to get it up and running
Guarantees consistency
Pros

15. Approach #1
One Code
Native Platforms
Widgets
Canvas
Events
Source Framework
Platform level UI patterns need to be reimplemented
Native accessibility can be hard to achieve
Cons

16. Approach #1
One Code
Native Platforms
Widgets
Canvas
Events
Source Framework

17. Approach #1
One Code
Native Platforms
Widgets
Canvas
Events
Source Framework

18. Approach #1
One Code
Native Platforms
Widgets
Canvas
Events
Source Framework

19. Approach #2
One Code
Native Platforms
Widgets
Canvas
Events
Source Framework

20. Approach #2
One Code
Native Platforms
Widgets
Canvas
Events
Source Framework

21. Approach #2
One Code
Native Platforms
Widgets
Canvas
Events
Source Framework
No need of reimplementing platform level UI patterns
Native accessibility is easy to implement
Pros
Adding new components is easier

22. Approach #2
One Code
Native Platforms
Widgets
Canvas
Events
Source Framework
Mapping every component for every target platform
Doesn’t guarantee consistency
Cons

23. Approach #2
One Code
Native Platforms
Widgets
Canvas
Events
Source Framework

24. Approach #2
One Code
Native Platforms
Widgets
Canvas
Events
Source Framework

25. There is more than
painting the pixels

26. User Interface
Navigation
Accessibility
Animations & Gestures
Native Modules
Build Systems

27. User Interface

28. User Interface

29. User Interface

30. User Interface
Android iOS

31. User Interface
Web

32. Navigation

33. Navigation
Mobile

34. Navigation
Mobile

35. Web
Navigation

36. Accessibility

37. Accessibility

38. Screen Readers
Focus control
Keyboard interaction
Mouse & Touch events
Color Contrast
…

39. Accessibility
TalkBack

40. Accessibility
VoiceOver

41. Animation & Gestures

42. Animation & Gestures

43. Animation & Gestures

44. Animation & Gestures

45. Native Modules

46. Native Modules

47. Build Systems

48. Build System
One Code
Android
iOS
Web
.apk
.ipa
bundle

49. Finding a uni
fi
ed API
in the React Ecosystem

50. User Interface

51. User Interface
React

52. User Interface
React
React DOM Web

53. User Interface
React
React Native
React DOM Web
Android
iOS

54. React
React Native Web
React Native
React DOM Web
Android
iOS
User Interface

55. React
Web
Android
iOS
React Native Web
React Native
User Interface

56. React Native DOM
User Interface
by Vincent Riemer
EXPERIMENTAL

57. React Native DOM
User Interface

58. UI libraries
User Interface

59. by Showtime
Universal UI Library
UI libraries

60. UI libraries
by Fernando Rojo

61. UI libraries

62. by Nate
UI libraries

63. UI libraries

64. UI libraries

65. UI libraries
Expo HTML elements

66. UI libraries
by

67. UI libraries

68. UI libraries

69. Navigation

70. Navigation / Web

71. Navigation / Web

72. React Navigation
Navigation / Native

73. by
React Native Url Router
UI libraries

74. Navigation / Universal
React Native + Next.js

75. Navigation

76. Navigation

77. Accessibility

78. Accessibility

79. Accessibility

80. Accessibility

81. Accessibility

82. Accessibility

83. Accessibility

84. Accessibility

85. Accessibility / Web

90. React Native Aria
Accessibility

91. Accessibility
React Native Aria

92. *useCheckbox needs input ref to set indeterminate state which can be only set using JavaScript

93. *useCheckbox needs input ref to set indeterminate state which can be only set using JavaScript

96. Animations & Gestures

108. Animation & Gestures

109. Animation & Gestures

110. Animation & Gestures
Write once, animate anywhere.

112. Native Modules

113. Native Modules

121. Build Systems

122. Build Systems

123. Build Systems

124. Build Systems

125. Build Systems
EAS

127. Respecting the Platform
1. Embracing Platform Constraints
2. Learning from Institutional Knowledge
3. Competition Drives Innovation
React Native’s Many Platform Vision

128. Embracing Platform Constraints
We have found that by approaching these problems with React
Native, we can more easily borrow lessons learned and code
written for one platform, and apply them to other platforms.
React Native’s Many Platform Vision

129. Learning from Institutional
Knowledge
We believe that by targeting more platforms, we can accelerate
cross-pollination of institutional knowledge between platform
experts.
React Native’s Many Platform Vision

130. Competition Drives Innovation
We believe that competition leads to better outcomes for
everyone in the long run.
React Native’s Many Platform Vision

131. Expanding to
New Platforms
React Native’s Many Platform Vision

132. The future of React Native
looks very promising!

133. The future of “one codebase”
for “all the platform” is exciting!

134. /sanketsahu