1. Tableau Business Intelligence

[React-Native] Overview and Getting Started

Discussion in 'Mobility Solutions' started by bsdinsight, Jun 6, 2017.

  1. bsdinsight

    bsdinsight Well-Known Member

    Overview
    Để hiểu rõ hơn về React Native là gì, trước tiên chúng ta cần phân biệt sự khác nhau giữa ứng dụng Native và Hybrid

    436b4619-f831-4e71-a449-5e8236373cf4.jpg

    Ứng dụng Hybrid
    Là chương trình phần mềm trên điện thoại di động được viết dựa trên nền tảng web (html5, css3, javascript), bản chất hoàn toàn là ứng dụng web nhưng có thêm được các tính năng thao tác phần hệ điều hành như tập tin, truy cập máy ảnh…Toàn bộ những thứ này đều được bao bọc bởi một lớp ứng dụng Native mà nổi bật là Phonegap/Cordova. Phần web được xử lý hiển thị bởi webview, phần tính năng truy cập hệ thống được cung cấp bởi các hàm API, gọi hàm bằng Javascript thông qua API thì chương trình bao bọc sẽ gọi trực tiếp Native xuống hệ điều hành. Bằng cách này, ứng dụng web có thêm những tính năng cao cấp của ứng dụng Native, và do được tính hợp mã nguồn sẵn nên tốc độ của ứng dụng hybrid nhanh hơn ứng dụng web.

    Ứng dụng Native (iOS, Android)
    Là ứng dụng được phát triển trực tiếp bằng ngôn ngữ của hệ điều hành đó cung cấp. Ví dụ với iOS là Objective-C, Swift Và Android là Java. Các ứng dụng viết bằng ngôn ngữ này được biên dịch ra ngôn ngữ máy trên điện thoại và có toàn bộ tính năng mà hệ điều hành đó cung cấp. Do là ngôn ngữ trực tiếp cũng như không phải thông qua ứng dụng nào khác nên tốc độ là nhanh nhất.

    • Điểm hạn chế khi viết ứng dụng Native đó là tốn thời gian re-complie. Mỗi lần sửa đổi một chức năng bạn cần re-build. Với iOS khi sử dụng swift cho codebase lớn, bạn sẽ thấy tốc độ re-complie khá là chậm.
    • Nhưng tại sao native app vẫn được ưu chuộng và phát triển hơn là việc dùng Web app hay Hybrid
      > Lý do rất đơn giản, các ứng dụng native mang lại trải nghiệm tốt hơn cho người dùng.
    React Native là gì?
    React Native là framework giúp ta viết các ứng dụng Native chỉ bằng Javascript do Facebook phát hành. Nó sử dụng cùng thiết kế như React . Hiểu đơn giản bạn viết code Javascript để có thể sử dụng cho cả thiết bị iOS và Android .
    Do đó React Native sẽ rất dễ dàng với người đã nắm vững Javascript. Hới đau đớn cho anh em mobile [​IMG]

    Code:
    import React, { Component } from 'react';
    import { Text, View } from 'react-native';
    
    class WhyReactNativeIsSoGreat extends Component {
    render() {
    return (
    <View>
    <Text>
    If you like React on the web, you'll like React Native.
    </Text>
    <Text>
    You just use native components like 'View' and 'Text',
    instead of web components like 'div' and 'span'.
    </Text>
    </View>
    );
    }
    }
    Sự ra đời của React Native để khắc phục các điểm yếu của ứng dụng Web và Hybrid.
    Với React Native, bạn không phải đang xây dựng một "mobile Web app", một "HTML5 app", hay một "Hybrid app". Bạn đang build một "real mobile app" cho tất cả các hệ điều hành nhưng không phân biệt bạn đang dùng Objective-C, Swift hay Java.
    React Native xây dựng giao diện cơ bản giống như các ứng dụng iOS và Android thông thường. Bạn chỉ cần đặc các Component lại với nhau bằng JavaScript và React.

    Code:
    import React, { Component } from 'react';
    import { Image, ScrollView, Text } from 'react-native';
    
    class AwkwardScrollingImageWithText extends Component {
    render() {
    return (
    <ScrollView>
    <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} />
    <Text>
    On iOS, a React Native ScrollView uses a native UIScrollView.
    On Android, it uses a native ScrollView.
    
    On iOS, a React Native Image uses a native UIImageView.
    On Android, it uses a native ImageView.
    
    React Native wraps the fundamental native components, giving you
    the performance of a native app, plus the clean design of React.
    </Text>
    </ScrollView>
    );
    }
    }
    Sử dụng React Native sẽ giảm thời gian Re-compiling, cho bạn cảm giác như real-time compiling. Thay vì phải mất thời gian re-compiling, React Native hỗ trợ Reload building , đơn giản sử dụng tổ hợp phím Command⌘ + R trên iOS simulator.

    d402ac70-9cf7-4321-80f2-fed43643af10.gif

    React Native hỗ trợ drop down to native code (Objective-C, Swift hay Java) nếu bạn cần custom hay optimize một số trường hợp đặc biệt trong ứng dụng của bạn.
    Bạn sẽ rất dễ dàng để xây dựng một phần/chức năng trong ứng dụng của bạn bằng React Native, và ngược lại. Đó cũng là cách mà Facebook apps đang sử dụng.

    Code:
    import React, { Component } from 'react';
    import { Text, View } from 'react-native';
    import { TheGreatestComponentInTheWorld } from './your-native-code';
    
    class SomethingFast extends Component {
    render() {
    return (
    <View>
    <TheGreatestComponentInTheWorld />
    <Text>
    TheGreatestComponentInTheWorld could use native Objective-C,
    Java, or Swift - the product development process is the same.
    </Text>
    </View>
    );
    }
    }
    Getting Started
    Để cài đặt React Native lên máy tính của bạn (Mac, Window, Linux), bạn có thể làm theo hướng dẫn từ trang chủ React Native
    Trước hết bạn cần cài đặt Homebrew nếu trên máy tính bạn chưa có.

    Cài đặt run iOS app
    Node, Watchman
    >brew install node
    >brew install watchman

    The React Native CLI
    >npm install -g react-native-cli

    Xcode
    Bạn nên cài đặt trực tiếp từ Mac App Store, sau đó bạn cần cài đặt iOS Simulator và các tools cần thiết để xây dựng iOS apps.

    Tạo mới React Native project
    >react-native init ProjectName

    Sau đó bạn truy câp vào folder project vừa tạo
    >cd ProjectName

    Và đơn giản thực hiện dòng lệnh để build app
    >react-native run-ios

    Cài đặt run Androi app
    Build app lên thiết bị Android ảo thì khó khăn hơn một chút
    Bắt buộc bạn phải cài đặt Java SE Development Kit (JDK)
    Tiếp đến cài đặt Android Studio

    Trường hợp bạn có chiếc điện thoại Android, đơn giản bạn chỉ cần kết nối nó với máy tính.
    Sau đó bạn tạo mới project React-Native bằng câu lệnh.
    >react-native init ProjectName

    Sau đó bạn truy câp vào folder project vừa tạo
    >cd ProjectName

    Và đơn giản thực hiện dòng lệnh để build app
    >react-native run-android

    Nếu bạn muốn dùng thiết bị ảo để chạy ứng dụng, mình suggest nên dùng Genymotion. Nhưng với Android thì thiết bị ảo không thể đáp ứng được hầu hết các yêu cầu mong muốn từ lập trình viên, đầu tiên đó là nó chạy rất chậm, nên việc có đầu tư một chiếc smartphone Android vừa tầm là việc cần thiết [​IMG]

    Editor tools
    XCode và Android Studio bạn sẽ sử dụng để run ứng dụng, còn bạn nên dùng Editor nào để coding React Native ?
    Hiện tại mình đang dùng Atom và thêm package Nuclide. Hỗ trợ khá mạnh mẽ cho React-Native
    Ngoài ra bạn có thể dùng Subline

    React-Native đang tạo ra một cơn sốt thực sự, được đánh giá với trên 48k Stars và trên 11k Forks trên Github.
     
  2. Loading...

    Similar Threads Forum Date
    Overview Tableau Desktop Version 9.0 Tableau Jun 26, 2015
    Microsoft Dynamics AX 2012 Architecture Overview Dynamics AX Jan 9, 2015
    Microsoft Dynamics Marketing Functional Overview Microsoft Dynamics 365 Jan 7, 2015

: React Native

Share This Page