Những điều mong đợi tiếp theo dành cho phát triển ứng dụng di động tại Airbnb

Hoàng Vĩnh

Mang lại những gì tốt nhất cho ứng dụng native

Khoảng thời gian thú vị trước mắt

Ngay cả khi thử nghiệm với React Native, chúng tôi vẫn tiếp tục đẩy nhanh nỗ lực của mình trên native. Ngày nay, chúng tôi có một số dự án thú vị trong sản xuất hoặc trong kế hoạch dự định. Một số dự án này được lấy cảm hứng từ những phần hay nhất và những bài học từ kinh nghiệm của chúng tôi với React Native.

Server-Driven Rendering

Mặc dù không còn sử dụng React Native, nhưng chúng tôi vẫn thấy giá trị trong việc viết mã sản phẩm một lần. Chúng tôi vẫn dựa nhiều vào hệ thống ngôn ngữ thiết kế chung (DLS) và nhiều màn hình trông gần như giống hệt nhau trên Android và iOS.

Một số nhóm đã thử nghiệm và bắt đầu thống nhất xung quanh các framework Server-Driven Rendering. Với các framework này, máy chủ gửi dữ liệu đến thiết bị mô tả các component để hiển thị, cấu hình màn hình và các hành động có thể xảy ra. Sau đó mỗi nền tảng di động diễn giải dữ liệu này và hiển thị màn hình gốc hoặc thậm chí toàn bộ luồng sử dụng các thành phần DLS.

Việc sử dụng Server-driven rendering đi kèm với những thách thức riêng. Dưới đây là một số ít chúng tôi đang giải quyết:

  • Cập nhật an toàn các định nghĩa component của chúng tôi trong khi duy trì tính tương thích ngược.
  • Định nghĩa loại chia sẻ cho các thành phần của chúng tôi trên các nền tảng.
  • Trả lời các sự kiện khi chạy như nút nhấn hoặc đầu vào của người dùng.
  • Chuyển đổi giữa nhiều màn hình hướng JSON trong khi vẫn giữ trạng thái bên trong.
  • Hiển thị các thành phần tùy chỉnh mà hoàn toàn không có triển khai hiện tại vào thời gian biên dịch. Chúng tôi đang thử nghiệm định dạng Lona cho việc này.

Các khuôn khổ hiển thị do máy chủ điều khiển đã đem lại giá trị rất lớn bằng cách cho phép chúng tôi thử nghiệm và cập nhật chức năng ngay lập tức qua vô tuyến.

Epoxy Components

Trong năm 2016, chúng tôi mở Epoxy có nguồn gốc cho Android. Epoxy là một khung công tác kích hoạt RecyclerViews, UICollectionViews và UITableViews dị thể. Ngày nay, hầu hết các màn hình mới đều sử dụng Epoxy. Làm như vậy cho phép chúng tôi chia nhỏ từng màn hình thành các thành phần riêng biệt và đạt được kết xuất chậm. Hôm nay, chúng tôi có Epoxy trên Android và iOS.

Đây là những gì được dùng trên iOS:

Trên Android, chúng tôi đã tận dụng khả năng viết DSL trong Kotlin để làm cho các thành phần triển khai dễ dàng dễ dàng để viết và loại bỏ một cách an toàn:

Epoxy Diffing

Trong React, bạn trả về một danh sách các component từ render. Chìa khóa cho hiệu suất của React là các component biểu diễn model dữ liệu của các view / HTML thực tế mà bạn muốn render. Cây component sau đó được phân biệt và chỉ các thay đổi được gửi đi. Chúng tôi xây dựng một khái niệm tương tự cho Epoxy. Trong Epoxy, bạn khai báo các mô hình cho toàn bộ màn hình của bạn trong buildModels. Điều đó, kết hợp với DSL Kotlin làm cho khái niệm rất giống với React và trông như thế này:

Bất cứ khi nào dữ liệu của bạn thay đổi, bạn gọi requestModelBuild () và nó sẽ hiển thị lại màn hình của bạn với các cuộc nhập dữ liệu RecyclerView tối ưu được gửi đi.

Trên iOS, nó sẽ trông như thế này:

Framework Android Product mới (MvRx)

Một trong những phát triển thú vị nhất gần đây là loại Khung mới mà chúng tôi đang phát triển được gọi là MvRx. MvRx kết hợp những gì tốt nhất của Epoxy, Jetpack, RxJava và Kotlin với nhiều nguyên tắc từ React để xây dựng màn hình mới dễ dàng hơn và liền mạch hơn bao giờ hết. Đây là một khung công tác được linh hoạt nhưng lại khó thay đổi được phát triển bằng cách lấy các mẫu phát triển chung mà chúng tôi quan sát cũng như các phần tốt nhất của React. Nó cũng là chủ đề an toàn và gần như tất cả mọi thứ chạy ra khỏi thread chính giúp di chuyển và hoạt họa dễ dàng và trôi chảy.

Cho đến nay, nó đã làm việc trên một loạt các màn hình và gần như loại bỏ nhu cầu phải giải quyết với vòng đời. Chúng tôi hiện đang thử nghiệm trên một loạt các sản phẩm Android và đang có kế hoạch mở nguồn nếu nó tiếp tục thành công. Đây là mã hoàn chỉnh cần thiết để tạo màn hình chức năng tạo yêu cầu mạng:

MvRx có cấu trúc đơn giản để xử lý Fragment args, savedInstanceState nhất quán trong quá trình khởi động lại quá trình, theo dõi TTI và một số tính năng khác.

Chúng tôi cũng đang phát triển một framework tương tự cho iOS và đang trong giai đoạn thử nghiệm đầu tiên.

Chúng tôi hy vọng sớm được cập nhật thêm về điều này nhưng chúng tôi rất vui mừng về tiến trình đã thực hiện cho đến thời điểm này.

Tốc độ lặp lại

Rõ ràng tốc độ lặp lại khi chuyển từ React Native về native. Thật khó mà chấp nhận khi phải đi từ một chiều nơi mà bạn có thể dễ dàng kiểm tra các thay đổi của mình trong vòng một hoặc hai giây đến một chỗ phải mất đến 15 phút. May mắn thay, chúng tôi cũng có thể cung cấp một số cứu trợ cần thiết ở đó

Chúng tôi đã xây dựng cơ sở hạ tầng trên Android và iOS cho phép bạn biên dịch chỉ một phần của ứng dụng có trình khởi chạy và có thể phụ thuộc vào các mô-đun tính năng cụ thể.

Trên Android, điều này dùng đến gradle product flavors. Mô-đun gradle của chúng tôi trông như thế này:

Mức độ vô hướng mới này cho phép các kỹ sư xây dựng và phát triển trên một lát mỏng của ứng dụng. Điều này kết hợp với mô-đun IntelliJ unloading cải thiện đáng kể việc xây dựng và hiệu suất IDE trên một MacBook Pro.

Chúng tôi đã lập các tập lệnh để tạo ra một thử nghiệm mới và trong khoảng thời gian chỉ vài tháng, chúng tôi đã tạo hơn 20 lần. Các bản dựng phát triển sử dụng các flavors mới này nhanh hơn 2,5 lần và tỷ lệ phần trăm bản dựng dài hơn năm phút giảm xuống còn 15x.

Tương tự, trên iOS, các mô-đun của chúng tôi trông như sau:

Cùng một hệ thống dẫn đến các bản dựng nhanh hơn 3-8 lần

Kết luận

Thật thú vị khi được ở một công ty không ngại thử các công nghệ mới nhưng vẫn cố gắng duy trì một thanh cao đáng kinh ngạc về chất lượng, tốc độ và trải nghiệm của nhà phát triển. Cuối cùng, React Native là một công cụ thiết yếu trong các tính năng và cho chúng ta những cách nghĩ mới về phát triển di động. Nếu bạn muốn tham gia cuộc phiêu lưu này, hãy cho chúng tôi biết!

Tác giả: Gabriel Peal | Nguồn: medium.com