Trong thời đại công nghệ ngày càng phát triển như hiện nay, thì việc sử dụng điện thoại thông minh ngày càng nhiều và trở nên phổ biến hơn. Khi đó, mọi doanh nghiệp đều phải chạy theo xu hướng phát triển, cần tích hợp các tính năng thông minh, giao diện đẹp là chìa khóa quyết định sự thành công cho tương lai. Có rất nhiều bạn vẫn đang thắc mắc về React Native và tại sao Tiki lại chọn React Native, hãy tìm hiểu ngay sau đây nhé!
React Native là gì?
React Native được biết đến là một Framework – một mã nguồn mở được tạo ra bởi facebook. Tuy nhiên, nó lại được sử dụng nhằm mục đích phát triển các di động ứng dụng như IOS, Android, Web hay UWP. Hơn nữa, nó còn cho phép nhà phát triển sử dụng các React Native trong ứng dụng gốc.
Ưu nhược điểm của React Native
Ưu điểm:
- Giúp người dùng tiết kiệm thời gian và chi phí phát triển ứng dụng
- Có khả năng tận dụng hết nguồn nhân lực
- Khả năng duy trì code ít, và bugs ít hơn
- Có cộng đồng người dùng lớn
- Mang lại sự ổn định và tối ưu
- Đơn giản hóa trong quá trình xử lý mọi dữ liệu
- Xây dựng các Native code dành cho các hệ điều hành khác nhau
- Mang lại cho người dùng nhiều trải nghiệm hơn
Nhược điểm:
- Đòi hỏi và yêu cầu Native code.
- Hiệu năng kém so với Native App khá nhiều
- Chức năng bảo mật chưa tốt, bị ảnh hưởng nhiều
- Không phù hợp trong app cần tính toán nhiều
Tại sao tiki chọn React Native?
Tiki chọn React Native dựa vào Reusability
Groove technology Software (Best Software Outsourcing Company) cho biết một tính năng mạnh mẽ khác của React Native là dòng mã phổ quát có thể được sử dụng trên nền tảng iOS và Android. Một ví dụ điển hình là khi bạn sử dụng thành phần Native switch của React, nó sẽ hiển thị UISwitch trong iOS và thành phần Native Switch trong Android. Đối với ứng dụng Tiki, có 80% JavaScript được sử dụng cho Android và iOS ..
Integration liên tục
Tiki sử dụng Jenkins để triển khai các ứng dụng gốc. Đồng thời, việc triển khai React Native hy vọng sẽ được áp dụng theo cách tương tự. Đối với mỗi commit được nhập thông qua nhánh staging, quá trình test sẽ được chạy và Jenkins sẽ đẩy gói JS bundle mới nhất đến máy chủ CodePush, sau đó thông báo cho Tiki thông qua kênh Slack.
Theo ví dụ này, Tiki đã tạo một công cụ CLI tùy chỉnh để chạy “code-push release-react “TikiHome-ios” ios -d “Staging” — des “Jenkins deploy” — dev true -m false -t”. Sau khi vượt qua nhánh phát triển, mã sẽ được nhập vào nhánh chính – master branch. Jenkins sẽ chạy tất cả các bài kiểm tra, tạo production target, triển khai phần mềm đi kèm deploy bundle mới nhất và thậm chí tạo tag version.
Về vấn đề hiệu năng
“Dzut Co Hon” ban đầu được dựa trên Redux. Mục tiêu của Tiki là khi nhấp vào sản phẩm, màn hình sẽ hiển thị tiến trình và trạng thái sẽ thay đổi ngay sau cuộc gọi mạng.
Tuy nhiên, trên thực tế, việc lựa chọn nhiều sản phẩm hơn sẽ mất khoảng một giây. Tiki nhận thấy rằng phải mất một thời gian dài để “Reducer” có được hành động định trước từ Product Component. Do đó, Tiki đã quyết định sử dụng “setState” trong “Product Component” và loại bỏ Redux khỏi “Product List Component”.
Trong ứng dụng mới của Tiki sử dụng RN 0.42, ListView vẫn gặp các sự cố do nhiều tab và chế độ xem phức tạp khiến cho bạn thao tác cuộn rất khó khăn. Do đó, Tiki sẽ chuyển đổi thành “FlatList” để xem nó trông như thế nào.
Đối với nhiều tab sử dụng ViewPager, khi tab được tải, tất cả ListView và toàn bộ Store sẽ được lưu trữ và nó không đủ bộ nhớ nên thường xảy ra trên các thiết bị cấp thấp. Do đó, Tiki chỉ cần khôi phục dữ liệu cần thiết cho thẻ đang hoạt động trong “Bộ nhớ”. Dữ liệu của các thẻ khác sẽ được đặt trong “LocalStorage”. Nói cách khác, các tab này sẽ chỉ hiển thị chế độ xem đang tải.
Khi người dùng quay lại các tab này, Tiki chỉ tốn thời gian tìm nạp dữ liệu từ bộ nhớ cache của đĩa và hiển thị “shouldComponentUpdate()” và “Pure Component” thực sự tiện lợi. Khi đó, người dùng thực hiện một giao dịch biểu ngữ tốt, chỉ báo sẽ được thay đổi. Kết quả là, thành phần “cha” hoặc toàn bộ thành phần cũng sẽ thay đổi và gây ra suy giảm hiệu suất. Do đó, Tiki sử dụng “shouldComponentShouldUpdate” để đảm bảo rằng các thành phần không liên quan không bị thay đổi.
Tab Layout
Tiki hiện đang sử dụng một trong những thư viện phổ biến nhất là react-native-scrollable-tab-view. Về cơ bản, nó có thể là JavaScript thuần túy với phương thức làm việc của nó rất giống với chế độ material design, và các đạo cụ rất dễ điều khiển trong phạm vi rộng.
Tuy nhiên, do sự phức tạp của giao diện người dùng Tiki, thư viện bắt đầu bộc lộ các vấn đề về hiệu suất. Cũng bởi vì nó là một triển khai JS thuần túy, có độ trễ giữa thông tin từ người dùng đến ứng dụng. Do đó, chúng tôi quyết định viết phiên bản RNTabLayout cục bộ của riêng mình và chuyển đổi nó sang Javascript.
Page transition vẫn còn chậm
Sau khi bấm vào nút đăng nhập, màn hình sẽ hiển thị thời gian và sản phẩm trong thời gian diễn ra sự kiện. Khi chúng tôi chuyển hướng tuyến đường đến trình điều hướn thì JavaScript sẽ phải hiển thị tất cả các yếu tố cần thiết của màn hình mới này. Ngoài ra, nó phải thực hiện chuyển đổi trang trong chuỗi JS này, vì phải thực hiện hai thao tác này cùng lúc nên quá trình chuyển đổi giữa các trang diễn ra rất chậm.
Do đó, chúng ta phải sử dụng InteractionManager.runAfterInteraction () để lập lịch cho từng hoạt động. Do đó, trước khi chuyển đổi, tất cả dữ liệu tab sẽ được tải sẵn danh sách sản phẩm trong màn hình “Đăng ký”. Sau khi chuyển đổi xong, chúng ta chỉ cần tập trung trình bày nội dung. Do đó, trải nghiệm người dùng trở nên mượt mà hơn.
Code cho riêng từng platform
Khi nhóm QA kiểm tra chức năng đếm ngược, Tiki phát hiện một lỗi lạ thì iOS tính nhanh hơn Android.Tiki đã cố gắng khắc phục bằng cách kiểm tra sau
let currentTime1
countDown(10000)
let currentTime2
Kết quả cho ra sẽ là: currentTime2 — currentTime1 = 10000 trên cả 2 platform. Nhưng chỉ iOS là chính xác. Ngoài ra, iOS kết xuất danh sách sản phẩm trên nhanh hơn Android. Vì vậy, chúng tôi đã áp dụng một số thủ thuật
Các bản cập nhật được tung ra quá nhiều
React Native vẫn đang được phát triển với nhiều tính năng và lỗi đã được sửa trong mỗi phiên bản. Tuy nhiên, chúng cũng chứa một số thay đổi lớn khiến mỗi bản cập nhật ứng dụng dễ bị treo hơn. Trong các trường hợp trên, do một số chức năng đang sử dụng React Native nên mỗi lần cập nhật phiên bản mới sẽ mất rất nhiều thời gian để khắc phục.
Hot reloading & Live reloading
Khi đó, khả năng live reloading trong React Native sẽ được khá nhiều người yêu thích. Nhưng trong ngôn ngữ lập trình thì nó lại khác, khi đó chúng ta cần phải chờ đợi cho tới khi quá trình compile hoàn thành, khi đó nó sẽ lên đến hơn 120 seconds thì mới hiện ra kết quả output.
Thế nhưng React Native sẽ cho phép bạn modify mà không cần phải recompile. Và javaScript code sẽ được load từ các local server ở trong giai đoạn lập trình app và được tích hợp vào áp cùng với resources khác. Nhờ vậy mà đã rút ngắn được thời gian cho UI iterations.
Hơn nữa, các đơn vị cung cấp dịch vụ Android Native Service làm cho React Native tích hợp thêm một số tính năng mới như Hot Reloading. Nó sẽ giúp cho app hoạt động bình thường hơn và sẽ update hay thêm các thay đổi trong cùng một thời điểm thực tại.
Cho đến thời điểm hiện tại thì Hot Reloading không trở nên hoàn hảo được cho dù trong bất cứ một tình huống nào đặc biệt, thế nhưng một lần reload lại thì app sẽ hỗ trợ cho bạn fix lại.
Incremental adopting React Native
Khi chúng tôi bắt đầu sử dụng nó vào mục đích để phát triển các tính năng mới, chẳng hạn như lựa chọn các tính năng để tìm kiếm sản phẩm. Thế nhưng trong quá trình chuyển đổi hoàn toàn sang React Native sẽ rất tốn kém và một số tính năng nhất định cũng sẽ yêu cầu sử dụng ngôn ngữ lập trình native. Do đó, Tiki quyết định đi hướng hybird app.
Trong sự kiện hàng năm của Tiki có tên là “Dzut Co Hon”, trang web của Tiki đã truyền tải một thông điệp tích cực đến khách hàng của mình. Tuy nhiên, vào tháng 7 năm ngoái, sự kiện này đã được áp dụng trên nền tảng di động. Ở Việt Nam thì chắc hẵn ai cũng biết tháng 7 âm lịch là tháng xui xẻo nhất. Nên mọi người thường bỏ tiền bạc, và cúng kiến những đồ vật đó cho những vong linh vất vưởng để họ không quấy phá chuyện kinh doanh, việc làm hay đời sống họ. Còn Tiki thì không cúng gì cả, nhưng họ đã làm 1 điều mà các trang thương mại điện tử khác phải trầm trồ đó là hạ giá 80% nhân dịp trên. Việc còn lại phụ thuộc vào bạn có nhanh tay để mua những món hàng đó trước khi những người khác kịp mua nó.
Kết luận
React Native thực sự là một trong những Framework tốt để xây dựng ứng dụng, phần mềm. Trên đây là những liên quan thông tin đến việc tại sao Tiki chọn React Native. Mong rằng với những kiến thức, thông tin mà Tech-Buzz chia sẽ giúp bạn trong bài viết này thực sự hữu ích.
