Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flutter vs React Native 2018

1,257 views

Published on

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

Published in: Technology
  • Be the first to comment

Flutter vs React Native 2018

  1. 1. Flutter vs React Native Nguyễn Đức Hoàng – Trịnh Minh Cường
  2. 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. 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. 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. 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. 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. 7. dynamic obj = 12; obj = "Cuong"; obj = new Point(10, 12); obj = new Point3D(10, 12, 14); print(obj);
  8. 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. 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. 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. 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. 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. 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. 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. 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. 16. Demo Flutter
  17. 17. Hiệu suất hiển thị 60 khung hình / giây
  18. 18. import 'package:flutter/material.dart'; void main() { runApp( new Center( child: new Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); } Minimal Flutter app
  19. 19. 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),
  20. 20. 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
  21. 21. Layout theo cột từ trên xuống dưới
  22. 22. Kết hợp layout theo cả hàng lẫn cột
  23. 23. IOS React Native Flutter
  24. 24. React Native • Components • Props. Eg: Flutter Layout comparison • Widget: Stateless & Stateful • Object’s properties.Eg:
  25. 25. React Native Render các “component” Flutter Layout comparison Build các “widget”
  26. 26. React Native State (định nghĩa trong 1 class) Flutter Layout comparison – compare “state” State(định nghĩa trong 2 class)
  27. 27. React Native • set “state” . Flutter Layout comparison – compare “state” • set “state” : Where are “arrow functions” ?
  28. 28. React Native Style kiểu CSS Flutter Layout comparison – compare “state” Style kiểu “Java”
  29. 29. 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
  30. 30. 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

×