React Native "A Bad Idea Or A Game Changer" at Code Mania 101

1. A B A D I D E A O R A G A M E
C H A N G E R
R E A C T N AT I V E

2. Ranatchai Chernbamrung
(Chern)
Co-founder
• เราทำ Product อยู่หลายแนวมาก Visualization, Bigdata
หรือ Data Sci
“Cleverse - ทีมนักสร้างบริษัท ทีมสำหรับคนที่ไม่มีกรอบทางความคิดและ
ไม่หยุดที่จะเรียนรู้”

3. T H E H I S T O RY O F
R E A C T N AT I V E

6. https://www.reddit.com/r/IAmA/comments/3wyb3m/
we_are_the_team_working_on_react_native_ask_us/

8. What is great about Web technology
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016

9. What is great about Web technology
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016

10. What is great about Web technology
-
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016

11. What is great about Web technology
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016

12. What is great about Web technology
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016

13. What is great about Web technology
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016

14. U N D E R S TA N D I N G
R E A C T N AT I V E

15. R E A C T. J S
I S
A U I L I B R A RY
T O C R E AT E A
C O M P O N E N T
A N D B U I L D I N G
U S E R I N T E R FA C E S

16. CREDIT
http://coenraets.org/blog/2014/12/sample-mobile-application-with-react-and-cordova/

17. CREDIT
http://coenraets.org/blog/2014/12/sample-mobile-application-with-react-and-cordova/

18. CREDIT
http://coenraets.org/blog/2014/12/sample-mobile-application-with-react-and-cordova/

19. CREDIT
https://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660

20. D I F F E R E N T F R O M R E A C T. J S

21. CREDIT
https://www.infoq.com/articles/react-native-introduction

22. Nick Schrock at ReactJS Conf 2016

23. Code Overview

24. https://github.com/ranatchai/react-native-bkk-example

25. Live Reload Demo
https://youtu.be/urbcszfA7yU

26. Android
iOS
https://github.com/ranatchai/react-native-bkk-example

27. Bootstrap in React-Native
nativebase.io

28. NativeBase Theme
nativebase.io

29. E-Commerce Theme
nativebase.io

30. Themeforest for ReactNative

32. B I G C O M PA N Y T H AT U S E
R E A C T N AT I V E

33. T RY I T I N E A S Y WAY

34. Create React Native App
npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start

35. npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start

36. Download Expo Client for iOS and Android

43. D I F F E R AT I O N
A N D
C O M PA R I S O N
F R O M O T H E R A P P R O A C H E S

44. 4 T Y P E S O F M O B I L E
D E V E L O P M E N T

45. 4 T Y P E S O F M O B I L E
D E V E L O P M E N T
N AT I V E ( S W I F T O R K O T L I N )

46. 4 T Y P E S O F M O B I L E
D E V E L O P M E N T
N AT I V E ( S W I F T O R K O T L I N )
J S N AT I V E B R I D G E ( R E A C T N AT I V E )

47. 4 T Y P E S O F M O B I L E
D E V E L O P M E N T
N AT I V E ( S W I F T O R K O T L I N )
J S N AT I V E B R I D G E ( R E A C T N AT I V E )

48. 4 T Y P E S O F M O B I L E
D E V E L O P M E N T
N AT I V E ( S W I F T O R K O T L I N )
J S N AT I V E B R I D G E ( R E A C T N AT I V E )
J S H Y B R I D ( I O N I C , P H O N E G A P )

49. 4 T Y P E S O F M O B I L E
D E V E L O P M E N T
N AT I V E ( S W I F T O R K O T L I N )
J S N AT I V E B R I D G E ( R E A C T N AT I V E )
J S H Y B R I D ( I O N I C , P H O N E G A P )
P R O G R E S S I V E W E B A P P

50. V S N AT I V E

51. V S N AT I V E
RN has better developer
experience, productivity
(share code and cross
platform)

52. Native
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
React Native
Proprietary platforms
Installed binaries
Compile cycles
Platform-specific team

53. Native
Open standards
Nick Schrock at ReactJS Conf 2016
React Native
Proprietary platforms

54. Native
Instant distribution
Nick Schrock at ReactJS Conf 2016
React Native
Installed binaries

55. Native
Fast iteration
Nick Schrock at ReactJS Conf 2016
React Native
Compile cycles

56. Native
Unified team
Nick Schrock at ReactJS Conf 2016
React Native
Platform-specific team

57. Native
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
React Native
Proprietary platforms
Installed binaries
Compile cycles
Platform-specific team

59. RN has better performance
V S H Y B R I D ( I O N I C O R C O R D O VA )

60. https://www.youtube.com/watch?v=juWhxCz1Wmg

61. V S H Y B R I D ( I O N I C O R C O R D O VA )
but less share code from web

62. V S P R O G R E S S I V E W E B A P P

64. https://www.facebook.com/groups/react.th

65. S U M M A RY

66. Q & A