Android

So găng: Android Sdk vs Flutter vs React Native

Android_Flutter_ReactNative

Và sau đây là trận so găng tranh tài giữa ba thế lực trong hoạt động lập trình Android. Tôi xin trân trọng giới thiệu từng “tay đấm” một. Đầu tiên là thành viên lâu đời nhất, chính thống nhất, cổ điển nhất, và cũng chính chủ nhất, đó là Android Sdk. Kẻ thách đấu thứ hai là một võ sĩ dù kém tuổi về số năm, nhưng tuổi chiến đấu thì không hề thua kém với cộng đồng fan hâm mộ rất đông đảo và nhiệt tình, vâng đó chính là React Native. Và cuối cùng, tuy là người nhỏ tuổi nhất, nhưng võ công lại thâm hậu và tự hào bản thân gồm tinh túy nhất của hai đàn anh đàn chị, là một người em cùng cha khác ông ngoại của đấu sĩ đầu tiên, đó chính là Flutter.

Khác với các bài viết trước, lần này thì tôi sẽ đưa code gần như hoàn chỉnh, và bạn sẽ là người cóp pát vào các projects của bạn và tiến hành chạy thử để xem kết quả. Điều kiện đủ là bạn cần chạy các projects trên cùng một máy để có kết quả chuẩn xác nhất và công bằng nhất. Và bạn sẽ sắm vai trọng tài kiêm giám khảo, xác định xem ai sẽ là người chiến thắng. Tuy nhiên, chiến thắng về mặt hiệu năng cũng chưa hẳn đã hay ho. Quan trọng là bạn thích cái nào nhất. Bài thi của chúng ta hôm nay là Gửi HttpRequest lên “http://jsonplaceholder.typicode.com/posts” và parse HttpResponse để hiển thị các kết quả lên một danh sách, với hình ảnh minh họa như bên dưới, chỉ khác là thay vì chữ “Request” trong Toolbar, bạn sẽ thấy thời gian thực hiện và tính bằng milliseconds:

Flutter_LIstView_getDataFromInternet

Dưới đây là phần code của MainActivity trong Android. Với Android Sdk, tôi có “ăn gian” là sử dụng thư viện Volley thay vì các class và method có sẵn nhưng đã bị deprecated. Nhưng dẫu sao, đây cũng là thư viện chính chủ của Google nên cũng không có gì là thiên vị. Vì vậy, trước khi chạy thì bạn cần thêm thư viện Volley và điều chỉnh AndroidManifest như tôi đã giới thiệu trong bài viết trước về Volley tại đây.

Và sau đây là phần thi của Flutter, với code của _MyHomePageState. Các class khác vẫn giữ nguyên nên tôi không cần đưa ra code ở đây:

Cuối cùng là phần “khoe hàng” của React Native. Vì đây là bài thử nghiệm nên code có hơi “lởm” và bản thân tôi cũng không giỏi React Native cho lắm. Ở đây tôi dùng FlatList để hiển thị dữ liệu, và dùng hàm fetch để gửi Request. Bạn nên chạy với RN project được tạo bởi react-native-cli thay vì dùng create-react-native-app với Expo, tôi xin nói ngoài lề một chút là app được tạo với create-react-native-app trong môi trường Expo sẽ chạy nhanh hơn, vì server Expo có thực hiện một số thao tác trung gian nên phần xử lí trên thiết bị không mất nhiều thời gian như app tạo với react-native-cli (tức react-native init). Vì vậy, bạn nên chạy câu lệnh sau với react-native run-android:

Để có kết quả chính xác nhất, bạn nên build debug hay release APK rồi cho chạy trên thiết bị (dù là máy ảo) để bài thử nghiệm diễn ra thực tế nhất. Ngoài ra bạn cũng nên để ý kích cỡ của từng file APK nữa. Và cuộc so găng này chưa dừng lại ở đây. Chúng ta sẽ tiếp tục với những màn thi đấu khác để xem chiến thắng toàn cục sẽ thuộc về ai. Rất hi vọng bạn sẽ đồng hành với tôi trong các bài thi tiếp theo.

3 thoughts on “So găng: Android Sdk vs Flutter vs React Native”

  1. Mình chưa chạy thử nhưng bạn nên đặt như thế này trong RN nhé:
    componentDidMount() {
    const start = Date.now();
    fetch(“http://jsonplaceholder.typicode.com/posts”)
    .then((response) => {
    return response.json()
    })
    .then((json) => {
    this.setState({
    data: json.map((item) => {
    item.key = item.id + “”
    return item;
    }),
    title: “” + (Date.now() – start)
    })
    })
    }
    Vì từ constructor tới didMount nó còn trải qua willMount(deprecated at react@16.3) và render nữa nên cần 1 khoảng thời gian.

    1. Tức là đặt start trong componentDidMount luôn chứ không nằm trong constructor đúng không bạn? Như vậy cũng hay nhưng có vẻ sẽ thiên vị RN 1 chút, thời gian sẽ còn ngắn hơn nữa, vì mình muốn start tính từ lúc tạo class luôn như trong Android Java và Flutter vậy.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.