So sánh 2 nền tảng viết cross platform mobile app

1. Flutter vs React
Native
Nguyễn Đức Hoàng – Trịnh Minh Cường

2. React Native Flutter
Cross Platform
Hot Reload
Suitable to build business apps
Call native API iOS, Android
REST, WebSocket, GraphQL
GoogleFacebook
JavaScript – JavaScript Core
Born 2015
Good for Web developer
Component -> DOM
Build a bit slower
Render slower
Very strong community
Many cool components
Dart – Dart VM
Born 2017
Good for iOS, Android
Widget: stateless / stateful
Build faster, binary bigger
Render graphics better
Smaller community
Support gRPC
Easy config, better tool

3. CHỌN FRAMEWORK MOBILE NÀO?
IOS/Android React Native Flutter ResponsiveWeb
Tối ưu tốc độ, trải nghiệm
Code nhanh
Thân thiện web dev
Cộng đồng lớn, ổn định
Tiết kiệm chi phí code
Chạy offline, native API
REST,Socket,QraphQL,gRPC
UI đồng nhất IOS-Android

4. Google Search
Google Docs
Google Maps
Android
TensorFlow
Materialize Design
Golang
Kubernetes
Google Apps
Google Cloud
Dart
Google Home
Google Play
FireBase
gRPC
Google Car Waymo
Google GlassesGoogle Home
YouTube

5. main() {
var number = 1.618;
var title = 'Golden ratio';
print("$title is $number");
for (int i = 0; i < 5; i++) {
print(i);
}
}
Golden ratio is 1.618
0
1
2
3
4
Dart dễ học, cú pháp giống C,C++,Java,C#,Swift
không con trỏ

6. var number = 1.618;
var title = 'Golden ratio';
var isDone = false;
num number = 1.618;
String title = 'Golden ratio';
bool isDone = false;
Kiểu tường minh
Kiểu tự suy

7. dynamic obj = 12;
obj = "Cuong";
obj = new Point(10, 12);
obj = new Point3D(10, 12, 14);
print(obj);

8. class Point {
num x;
num y;
Point(this.x, this.y);
}
class Point3D extends Point {
num z;
Point3D(num x, num y, this.z) : super(x, y);
}
khai báo class
constructor
inheritance

9. var listInt = [1, 2, 3]; //Mảng số nguyên
var listObj = [false, 1, "Two", 3]; //Mảng đối tượng
var colors = {'red': 'FF0000', 'green': '00FF00', 'blue': '0000FF'};
//Map key là string
var dayOfWeek = { //Map key là integer
0: 'sunday',
1: 'monday',
2: 'tuesday',
};

10. var listObj = [false, 1, "Two", 3];
listObj.add("Four");
listObj.add(5);
for (int i = 0; i < listObj.length; i++) {
print(listObj[i]);
}
for (var j in listObj) { //Giống Swift nhỉ
print(j);
}
listObj.forEach((e) => print(e)); //Giống JS nhỉ
false
1
Two
3
Four
5

11. List<int> listInt = [1, 2, 3];
Map<String, String> colors = {
'red': 'FF0000',
'green': '00FF00',
'blue': '0000FF'
};
var setInt = new Set<int>.from([1, 2, 3, 1]);
Dart có sẵn List, Map, Set. Có thể mở rộng thêm Queue,
Link List,... nhờ package ngoài

12. abstract class Color {
String color;
Color(this.color);
paint();
}
class Point3DColor extends Point3D implements Color {
Point3DColor(num x, num y, num z):super(x, y, z);
String color;
@override
paint() {
print("paint $color");
return null;
}
}
interface

13. async – await dart giống JS và C#
printNews() async {
http.Response news = await getNewsFromServer();
}
Future<http.Response> getNewsFromServer() {
return http.get('https://cnn.com');
}

14. Đánh giá Dart
• Thiết kế tốt, OOP ngon, không vá víu
• Kiểu chặt chẽ + cởi mở
• 8 tiếng học là code thành thạo (JavaScript học trong 15
phút, mất nhiều tháng để thành thạo)
• Thư viện hỗ trợ chưa bằng JavaScript
• Xuất ra JavaScript dart2js

15. JavaScript Dart
Single Thread Run
Class Inheritance
Function as variable
Functional Programming
Throw – Try – Catch
Array, Map, Set
No Pointer !
Modules – Packages
Async – Await
Reactive
Generate binary
No REPL
Static typing
Interface, Mixin
AOT Compile
Generics
Operator overloading
Compile =>JavaScript
Metadata
Run in browers
REPL
Duck typing
Strong community
Strong adoption

16. Demo Flutter

17. Hiệu suất hiển thị 60 khung hình / giây

18. import 'package:flutter/material.dart';
void main() {
runApp(
new Center(
child: new Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
Minimal Flutter app

20. class MyHomePage extends StatelessWidget {
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Hello')
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Hot Reload',
style: new TextStyle(fontSize: 60.0),

22. Flutter
flutter cli
flutter package, pub
VSCode, Android Studio
Tốt, line by line
Dart code
Faster
Faster
Dài và phức tạp cho web dev
React Native
react-native cli
npm, yarn
VS Code..
console.log, chrome inspect
CSS, dễ - thân quen hơn
Client
Package manager
IDE
Debug
Layout
Compile time
Hot Reload
Code

23. Layout theo cột
từ trên xuống dưới

24. Kết hợp layout theo cả hàng lẫn cột

25. IOS React Native Flutter

26. React Native
• Components
• Props. Eg:
Flutter
Layout comparison
• Widget: Stateless & Stateful
• Object’s properties.Eg:

27. React Native
Render các “component”
Flutter
Layout comparison
Build các “widget”

29. React Native
State (định nghĩa trong 1 class)
Flutter
Layout comparison – compare “state”
State(định nghĩa trong 2 class)

30. React Native
• set “state” .
Flutter
Layout comparison – compare “state”
• set “state” :
Where are “arrow functions” ?

31. React Native
Style kiểu CSS
Flutter
Layout comparison – compare “state”
Style kiểu “Java”

32. REST, WebSocket, gRPC, GraphQL
• Cả RN, Flutter đều hỗ trợ REST,WebSocket,
GraphQL tốt
• Flutter hỗ trợ gRPC.
gRPC + HTTP2 nhanh hơnJSON+HTTP khoảng 6-
10 lần

33. React Native Flutter
Truyền nhận qua
method channel
RCTBridgeModule
thông qua các
interface/protocol
Ko thể sử dụng hàm/View của
IOS cho android và ngược lại
Thêm thủ thuật mới
gọi được Swift & Kotlin
Dễ dàng hỗ trợ thêm
Kotlin và Swift
Hỗ trợ kiểu dữ liệu cơ
bản và Map<key,value>
Hỗ trợ gọi Objective-C & Java
Sử dụng được native UI
control của IOS và
Android như code rối
Không dùng được
native UI có thể chưa
biết cách !
Gọi native API