Sau vài tuần làm quen với React Native, tôi đã thành công viết ra một app mobile cho mình. Và nó thật ra rất là đơn giản, chỉ phải mất vài ngày mà lại khá là vui.
App ứng dụng dành cho blog về đồ ăn yêu thích của tôi, Smitten Kitchen.
Ứng dụng cho phép người dùng tìm kiếm thông tin từ hơn 1,000 công thức, cũng như hiển thị các nguyên liệu và cách thức thực hiện món ăn.
User cũng có khả năng bookmark các công thức mà họ thích và chia sẻ chúng với bạn bè và người thân
Xin lưu ý rằng tôi chỉ sẽ tung ra ứng dụng này nếu được sự chấp thuận của blog, còn hiện giờ thì mã nguồn của nó sẽ vẫn được giữ kín.
React Native sẽ còn làm mưa gió một thời gian nữa
Một điều thường thấy ở các developer là họ rất ngại phải đầu tư thời gian học một ngôn ngữ lập trình mới nếu họ thấy rằng nó có khả năng cao trở nên lạc hậu trong tương lai.
Tuy vậy với React Native, mặc dù tôi chỉ mới tiếp xúc sơ thôi nhưng quả thật nó là một tool cực kì mạnh mẽ. Và tôi tin rằng React Native vẫn sẽ sống khỏe thêm một thời gian nữa.
Facebook, Instagram, và Airbnb đều dùng React Native để cho ra những version mobile app mới nhất của họ. Ngoài ra còn có một list dài bao gồm các app nổi tiếng cũng sử dụng React Native.
Jeff Meyerson, nhà sáng lập của Software Engineering Daily, cũng nói khá chi tiết về React Native platform. Ông tin rằng nó sẽ vẫn tiếp tục phát triển và được dùng rộng rãi bởi phần lớn các app thuộc mobile ecosystem.
Jeff còn cho rằng Facebook sẽ tung ra smartphone của riêng họ, với các app hỗ trợ được tạo bởi React Native.
React Native khác gì so với các cross-platform tool khác
Nếu như bạn chỉ mới biết đến React Native, nó là một open source project được tạo ra bởi Facebook. React Native cho phép developer tạo ra các cross-platform mobile app sử dụng JavaScript. Nó khá là giống so với React, một JavaScript library khá nổi tiếng của Facebook dành cho tạo ra web application.
Tôi vốn dĩ luôn khá là có ác cảm với những tool được quảng cáo là dành cho cross-platform mobile. Bởi kết quả thường xuyên nhận được luôn là nỗi thất vọng.
React Native không như các mobile app development framework khác như Ionic hoặc Cordova bởi nó compile code của bạn thành các dòng code native dành cho OS (Andord hoặc iOS).
Do đó mà bạn có thể tạo ra một app có độ phức tạp cao mà lại không thua kém gì so với các app tạo ra bởi các ngôn ngữ Swift/Objective-C hoặc Java.
Tuy vậy, ta vẫn phải hiểu và phân biết được sự khác nhau giữa các platform đó. Đồng thời trải nghiệm sử dụng của người dùng trên Android và iOS là hoàn toàn khác nhau nên bạn cần phải có khả năng tạo ra app chạy được trơn tru trên cả 2 platform.
Ngoài ra, nếu có tính năng bạn muốn thêm vào những tính năng mới những chưa có sự hỗ trợ từ React Native library, React Native giúp bạn tự viết ra Native Module phù hợp cho tính năng mới, và kết nối nó tới React Native codebase.
Bắt đầu từ đâu
Theo tôi, Udemy là một khởi đầu tuyệt vời. Giúp bạn hiểu thêm về react và redux cũng như làm quen với setup.
Ngoài ra, Facebook cũng vừa mới công bố Create React Native App, giúp cho quá trình setup ban đầu càng dễ dàng hơn.
Còn nếu bạn đã quen với React, thì giờ cứ nhảy thẳng vào đây. Mặc dù bạn sẽ phải bỏ ra $10, nhưng khóa học này thật sự rất hữu ích, giúp bạn tạo ra 4 loại mobile app khác nhau cũng như cung cấp component có thể tái sử dụng cho các project trong tương lai.
Udemy còn có khóa học chuyên sâu Advanced React Native Concepts, dành cho những developer muốn nâng cao tay nghề mình thêm.
Styling trong React Native
Bạn sẽ mất một thời gian để làm quen với Styling của React Native. Bởi nó sử dụng CSS flexbox. Điều mà tôi vẫn chưa thể cảm thấy thoải mái, dù bản thân vốn xuất thân từ bên lập trình cho web.
Thật may là có khá nhiều nguồn hữu ích giúp cho việc học về flexbox trở nên dễ dàng hơn như:
Ngoài ra còn có cả trò chơi để bạn thực hành: Flexbox Froggy
Sau vài tuần học về React native, tôi giờ đã hiểu rõ hơn về flexbox.
Cách tốt nhất để hiểu rõ thêm về Styling là tạo ra style object cho từng component. , sau đó áp dụng nó với inline-style. Nên nhớ rằng bạn không thực sự làm về CSS, do đó việc đặt tên cho properties sẽ có khác đi một chút.
Một điểm khác biệt quan trọng nữa là bạn không thể sử dụng HTML tags trong Javascript, bởi vì bạn đang lập trinh cho một app chạy trên phone chứ không phải cho trình duyệt web. Thay vào đó, các component được tạo ra từ một set các component cung cấp bởi React Native library.
Bạn sẽ mất một thời gian để làm quen, nhưng tin tôi đi, đến khi bạn kịp nhận ra thì nó đã hình thành trong vô thức sử dụng <View></View> tag thay vì <div></div> trong project web app tiếp theo của mình.
Để hiểu rõ hơn, bạn có thể xem code sau đây:
import React from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
const Button = (props) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity style={buttonStyle} onPress={props.onPress}>
<Text style={textStyle}>
{props.children}
</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
textStyle: {
alignSelf: 'center',
color: '#6B7794',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10
},
buttonStyle: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#fff',
borderWidth: 1,
borderRadius: 5,
borderColor: '#6B7794',
margin: 5,
marginRight: 5
}
});
export { Button };
Còn đây là GitHub gist
Chọn phiên bản library nào?
React Router được xem như lựa chọn chuẩn về library của cộng đồng React, tuy vẫn còn nhiều library cũng hỗ trợ cho ngôn ngữ này.
Riêng tôi thì React Native Router Flux library khá là tuyệt vời và tôi luôn dùng nó cho các project của mình. Tuy nhiên, library này lại không thích hợp cho các project lớn và phức tạp.
May thay, React Native đã có một cộng đồng khá lớn. Các phiên bản cập nhật luôn được tung ra hàng tháng nên tôi nghĩ những vấn đề trên sẽ không làm khó bạn.
Trải nghiệm cũng rất quan trọng
Quả thật tính năng chia sẻ code giữa Andriod và iOS app của React Native là một điểm mạnh và thu hút nhiều developer. Tuy nhiên nó chỉ là một phần làm nên sự nổi bật của ngôn ngữ lập trình.
Điều tôi yêu thích nhất ở React Native là khả năng reload ngay lập tức. Vốn đã từng dùng Andriod Studio, và phải chờ từ 30 cho đến 60 giây cho mỗi lần reload như vậy
Nói cách khác, React Native thật sự khiến bạn hăng sai code và đó là quá đủ để cho bạn dùng thử ngôn ngữ lập trình tuyệt vời này.
Hãy luôn ham tìm tòi và khám phá
React Native là một minh chứng cho việc ta có thể áp dụng một ý tưởng vốn đã thành công (web) vào một lĩnh vực khác (mobile) mà vẫn có được kết quả tương tự.
Cũng như Haseeb Quereshi đã tuyên bố trong buổi diễn thuyết về convergence, là một kỹ sư phần mềm, ta luôn nên tìm cách hội tụ và tạo ra một nguyên tắc, ngôn ngữ, tool mà dùng được cho nhiều lĩnh vực và trường hợp khác nhau.
Hãy tập trung vào một giải pháp thật tối ưu.
“Hãy giữ cho cái tôi của bạn nhỏ thôi” – Paul Graham
Đôi khi chúng ta trở nên quá lý thuyết và giáo điều, khiến cho đánh mất đi cái nhìn sâu sắc về mọi thứ xung quanh.
Vì thế hãy luôn tìm hiểu.
Nếu bạn thử xài React Native thì tôi tin rằng bạn sẽ nhận ra sự tuyệt vời của ngôn ngữ này.
Nguồn: topdev.vn via Medium
