Lesson learned from React native and Flutter

© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved.
Lesson learned from
React Native
Flutter

React Native and Flutter
2

3

4

5
Building Mobile app

6
Building Mobile app
Web Hybrid Native

7
Performance !!
Web
Hybrid
Native
Performance
Resources

8
Building Mobile app
Web Hybrid Native

9
Hybrid Mobile app
?
One
source code
Android app iOS app

10
Hybrid Mobile app
One
source code
Android app iOS app

11
Building Mobile app

12
Building native cross-platform
app using JavaScript and
ReactJS

13
Building native cross-platform
app using Dart

14
React Native developer roadmap
https://javascript.plainenglish.io/ultimate-react-native-developer-roadmap-for-2021-a34a2bf49699

15
React Native developer roadmap
https://javascript.plainenglish.io/ultimate-react-native-developer-roadmap-for-2021-a34a2bf49699

16
Flutter developer roadmap
https://github.com/DroidsOnRoids/flutter-roadmap

17
Lesson learned from both !!

18
Basic is very important

19

20

21
Hot Reload is useful

22
Project structure

23
Project structure
MVC (Model View Controller)
MVP (Model View Presenter)
MVVM (Model View ViewModel)
Clean Architecture

24
Project structure
MVC (Model View Controller)
MVP (Model View Presenter)
MVVM (Model View ViewModel)
Clean Architecture

25
Start with simple way

26
Feature-based
Feature A Feature B
Feature C Feature D

27
Feature-based
Feature A
Business logic
Presentation
Data API

28
Design component

29
Design component
https://flutter.dev/docs/resources/architectural-overview

30
Design component
https://flutter.dev/docs/development/ui/layout

31
Design component
https://flutter.dev/docs/resources/architectural-overview

32
Component Inpector
https://flutter.dev/docs/development/tools/devtools/inspector

33
React Native

34
State management
https://flutter.dev/docs/development/data-and-backend/state-mgmt/declarative

35
State management
https://flutter.dev/docs/development/data-and-backend/state-mgmt/ephemeral-vs-app

36
State management in React

37
Redux

38
React Hook

39
State management in Flutter
https://flutter.dev/docs/development/data-and-backend/state-mgmt/options
Redux
BLoC / Rx
MobX
… etc …

40
Dependency Hell

41
Work as a Team
Editor/IDE
Version Control System
Coding standard and formatting
Lint tool and static code analysis
Testing

42
Work as a Team
https://makeitopen.com/

43
CI/CD for Mobile app

44
Automation process
Reduce human error

45
CI/CD for Mobile app
Source
code
Static code
analysis
Build Testing
Package
Delivery
Release
Monitoring

46
Release process !!

47

48
Android app iOS app
API ?

49
Android app iOS app
API versioning

50
Android app iOS app
V1 V2
Backward compatibility !!

51
Super App !!

52

53
Bigger app and size !!
Many problems
High build time
Hard to maintain

54
Design structure,
Fit your org structure

55
Goals
Independent development
Independent deployment
Stable infrastructure
Easy to testing

56
Multi-Module Architecture
https://medium.com/wix-engineering/react-native-at-wix-the-architecture-db6361764da6

57
Performance Issue !!

58
iOS app

59
Android app

60
Android distribution
https://developer.android.com/about/dashboards

61
Profiling in React Native
https://reactnative.dev/docs/profiling

62
Profiling in Flutter (Frame Rate)
https://flutter.dev/docs/development/tools/devtools/performance

63
Profiling in Flutter (CPU)
https://flutter.dev/docs/development/tools/devtools/performance

64
Security Issue !!

65
Security Issue !!
https://owasp.org/www-project-mobile-top-10/

66
Security for Mobile app
Mobile App API
HTTPS
JSON

67
SSL Pinning
Mobile App API
HTTPS
JSON
Main in the Middle Attack

68
SSL Pinning
Mobile App API
HTTPS
JSON
Main in the Middle Attack

69
Secure Data Storage
Mobile App API
HTTPS
JSON
Don’t save secure data in App !!
Data !!

70
Data Encryption
Mobile App API
HTTPS
JSON
Data
Data transfer

71
Data Encryption
Plain text everywhere !!

72

73
Authentication
Authorization

74
https://www.okta.com/identity-101/authentication-vs-authorization/

75
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/enterprise-application-patterns/authentication-and-authorization

76

77
More …

78
Feature Toggle/Flag
is very important
https://featureflags.io/

79
Feature Toggle/Flag

80

81
More …

82
อย่าลืม
ปิด log บน production
ด้วยนะจ๊ะ !!

83
Finally …

84
Right tool for the right job

85
ว่าแต่รู้จัก tool อะไรกันบ้าง ?

86

Lesson learned from React native and Flutter

More Related Content

What's hot

Similar to Lesson learned from React native and Flutter

More from Somkiat Puisungnoen

Recently uploaded

Lesson learned from React native and Flutter