Nghiên ứu một số ông nghệ đa nền tảng và áp dụng ứng dụng hỗ trợ họ tập

Phát triển ứng dụng native Các Native app được tạo cho một nền tảng cụ thể là Android hoặc iOS, trong khi quá trình phát triển Hybrid app phụ thuộc vào chức năng đa nền tảng.. Điều đó có

Giảng viên hướ ng d n: ẫ TS Nguy n Thanh Hùng ễ

Viện: Công ngh thông tin và Truy n thông ệ ề

HÀ N I, 2020 Ộ

Tai ngay!!! Ban co the xoa dong chu nay!!! 17061132068651000000

Viện: Công ngh thông tin và Truy n thông ệ ề

HÀ N 2020 Ộ I,

ký c a GVHD Chữ ủ

1

LỜI CAM ĐOAN

Tôi – Nguy n Trung Kiên - h c viên l p Cao h c 201ễ ọ ớ ọ 7A-CNTT Trường Đại

h c Bách Khoa Hà Nọ ội – cam k t Luế ận văn này là công trình nghiên cứu c a b n thân ủ ảtôi d i s h ng d n c a TS Nguy n Thanh Hùng ướ ự ướ ẫ ủ ễ – Viện Công Nghệ Thông Tin và Truy n Thông ề – Đạ ọi h c Bách Khoa Hà N i Các s u, k t qu nêu trong ộ ố liệ ế ảluận văn là trung thực và ch a tư ừng được ai công b trong b t k công trình nào khác ố ấ ỳ

Tác giả ận văn xin chị lu u trách nhi m vềệ nghiên c u c a mình ứ ủ

2

LỜI CẢM ƠNTruớc tiên, tôi xin chân thành cảm ơn tấ ảt c quý thầy cô trường Đạ ọi h c Bách Khoa Hà N i nói chung và Vi n Công Ngh Thông Tin và Truyộ ệ ệ ền Thông nói riêng đã truyền đạt cho tôi nh ng ki n th c hữ ế ứ ữu ích làm cơ sở để giúp tôi th c hi n t t lu n ự ệ ố ậvăn này

V i lòng kính tr ng và biớ ọ ết ơn, tôi xin được b y t lòng cả ỏ ảm ơn tới TS Nguyễn Thanh Hùng - Vi n Công Ngh Thông Tin và Truyệ ệ ền Thông, Đạ ọi h c Bách Khoa Hà Nội Đã khuyến khích và r t t n tình h ng d n, ch b o tôi trong su t quá ấ ậ ướ ẫ ỉ ả ốtrình th c hi n luự ệ ận văn Nhờ có s quan tâm ch b o và nh ng ý kiự ỉ ả ữ ến đóng góp quý báu c a Thủ ầy đã giúp tôi có thể hoàn thành luận văn này

Tôi cũng xin cảm ơn các bạn đồng nghi p công ty Koolsoft đã tệ ở ạo điều ki n ệ

để tôi có th h c t p và nghiên c u ể ọ ậ ứ

Cuối cùng tôi xin chân thành cảm ơn gia đình, bạn bè đã quan tâm, động viên, chia sẻ, và giúp đỡ tôi trong su t quá trình h c t p, nghiên c u, và hoàn thành lu n ố ọ ậ ứ ậvăn này

Học viên

Nguyễn Trung Kiên

3

M C L C Ụ Ụ

DANH MỤC VIẾT TẮT 5

DANH MỤC HÌNH V 6 Ẽ DANH MỤC BẢNG BI U 7 Ể CHƯƠNG I : GIỚI THI U 8 Ệ 1.1 Đặt vấn đề 8

1.2 Mục tiêu và phạm vi nghiên c u 9ứ CHƯƠNG II: TỔNG QUAN V PHÁT TRI N NG DỀ Ể Ứ ỤNG ĐA NỀN T NG 11 Ả 2.1 Các n n t ng công ngh ề ả ệ trong việc phát triể ứn ng dụng di động 11

2.2 Phát tri n ng d ng native 13ể ứ ụ 2.3 React Native 17

2.3.1 Giới thiệu 18

2.3.2 Kiến trúc 18

2.3.3 Ưu điểm và nhược điểm 20

2.4 Flutter 22

2.4.1 Giới thiệu 22

2.4.2 Kiến trúc 23

2.4.3 Ưu điểm và nhược điểm 25

2.5 So sánh và đánh giá 26

2.5.1.So sánh 26

2.5.2.Đánh giá 30

2.6 sánh Flutter và React Native qua ví d c So ụ ụ thể 31

4

CHƯƠNG III: PHÂN TÍCH VÀ THIẾT K 39 Ế3.1 Khảo sát nhu c u và yêu c u bài toán 39ầ ầ3.1.1 Khảo sát nhu c u 39ầ3.1.2 Phân tích yêu c u 40ầ3.2 Mô ả ổt t ng quan h ệ thống 413.3 Mô tả chi ti t 42ế3.3.1 Biểu đồ Usercase phân rã – Người dùng làm bài t p 42ậ3.3.2 Biểu đồ Usercase phân rã – Người dùng làm bài thi 433.4 Thiết kế ổ t ng quan 443.4.1 Biểu đồ trình t cho Hự ọc sinh xem bài giảng 443.4.2 Biểu đồ trình t cho Hự ọc sinh làm bài tập , bài ki m tra 45ể3.5 Thiết kế chi ti t 46ế3.5.1 Thiết kế ểu đồ ớ bi l p 463.5.1.1 Thiết kế ểu đồ sinh viên ôn tậ bi p , làm bài t p 46ậ3.5.2 Thiết kế mô hình dữ liệ u 47

CHƯƠNG IV: TRIỂN KHAI NG D NG TH C T 54 Ứ Ụ Ự Ế4.1 Màn hình chính và màn hình review 544.2 Màn hình Tiến trình học tập và đặt m c tiêu ki m tra 55ụ ể4.3 Màn hình học sinh làm bài tập và màn hình thông tin đề thi 554.4 Màn hình kết quả bài kiểm tra 574.5 Thống kê ng d ng sau khi tri n khai 58ứ ụ ể

CHƯƠNG V: KẾT LU N 61 Ậ5.1 Kết quả đạt được 615.2 Hướng phát tri n c a ng d ng 62 ể ủ ứ ụ

TÀI LIỆU THAM KH O 63 Ả

5

Từ viết tắt Ý Nghĩa GCD Google Cloulds Data Store

RN React Native

JSX Java Script XML

JS Java script

MVP Model View Presenter

URL Uniform Resource Locator

HTTPS Hypertext Transfer Protocol Secure CSS Cascading Style Sheets

HTML Hyper Text Markup Language

TS Type script

IDE Integrated Development Environment

CE Code Editor

JSON JavaScript Object Notation

SDK Software Development Kit

JRE Java Runtime Environment

6

Hình 2.1: Các hướng ti p c n khi phát tri n ng dế ậ ể ứ ụng di động 12

Hình 2.1.1: Phát tri n ng dể ứ ụng di động theo n n t ng Native 13ề ả Hình 2.1.2: Phát tri n ng dể ứ ụng di động đa nề ản t ng 15

Hình 2.2: So sánh gi a React Native và Fllutter 17ữ Hình 2.2: N n t ng React Native 17ề ả Hình 2.4: N n t ng Flutter 22ề ả Hình 2.4.2: Ki n trúc n n t ng Flutter 23ế ề ả Hình 2.4.2: Các t ng c u trúc trong Flutter 24ầ ấ Hình 2.6: ng d ng minh ho so sánh hiỨ ụ ạ ệu năng Flutter và React Native 32

Hình 2.6.1: Hiệu năng CPU trên nề ản t ng Native Android 35

Hình 2.6.2: Hiệu năng CPU trên nề ản t ng Flutter 35

Hình 2.6.3: Hiệu năng CPU trên nề ản t ng React Native 35

Hình 3.2: Biểu đồ User case mô t t ng quan h ả ổ ệ thống 42

H nh 3.3.1: Use case phân rã - Sinh viên làm bài t p 42ì ậ H nh 3.3.2: Use case phân rã Sinh viên làm bài thi 43ì – Hình 3.5.1.1: Biểu đồ ớ l p sinh viên ôn t p, làm bài t p 47ậ ậ Hình 3.5.1.2: Biểu đồ ớ l p sinh viên làm bài ki m tra 47ể Hình 3.5.2: Thi t k t ng quan mô hình d u 48ế ế ổ ữ liệ Hình 4.1: giao di n chính cệ ủa ứng dụng 54

Hình 4.2: Màn hình m c tiêu và l trình h c t p 55ụ ộ ọ ậ Hình 4.3: Màn hình ôn luy n chính và màn hình ki m tra 56ệ ể Hình 4.4: Màn hình k t qu ki m tra 57ế ả ể Hình 4.5: Biểu đồ thống kê s ự tăng trưởng v ề người dùng 58

Hình 4.6: Biểu đồ thống kê v ề độ tuổi những người dùng s d ng ng dử ụ ứ ụng 59 Hình 4.7: Biểu đồ thống kê v ề thời lượng s d ng app trung bình 59ử ụ

7

B ng 1: So sánh th i gian phát tri n ng d ng gi a các n n tả ờ ể ứ ụ ữ ề ảng 33

B ng 2: So sánh hiả ệu năng CPU giữa các n n tề ảng 36

B ng 3: So sánh t ng quát gi a Flutter và React Native 37ả ổ ữ

B ng 3: Mô t chi ti t User case sinh viên làm bài t p 43ả ả ế ậ

B ng 5: Biả ểu đồ tuầ ự ọn t h c sinh xem bài giảng 45

B ng 6: Biả ểu đồ tuầ ự ọn t h c sinh làm bài t p , bài ki m tra 46ậ ể

S phát tri n c a m i n n tự ể ủ ỗ ề ảng di động ph thu c vào r t nhi u tr i nghiụ ộ ấ ề ả ệm người dùng trên n n tề ảng đó Ngoài ra, vớ ối s lượng hàng tri u ệ ứng d ng đang có mặt ụtrên các ch ng dợ ứ ụng thì đồng nghĩa với vi c s c c nh tranh gi a các ng d ng là ệ ứ ạ ữ ứ ụ

c c kự ỳ l n Vớ ấn đề ề v thời gian và tiến độ để có th xây d ng mể ự ột ứng d ng nhanh và ụ

t t nh t, có s c c nh tranh nhố ấ ứ ạ ất luôn luôn là bài toán hàng đầu đố ới v i các nhà phát triể ứn ng d ng ụ

M t khác viặ ệc đưa công nghệ thông tin vào lĩnh vực giáo dục đã được triển khai t ừ lâu nhưng còn rất nhi u m t h n ch Ví d ề ặ ạ ế ụ điển hình là đạ ịi d ch Covid - 19

x y ra t d p tả ừ ị ết nguyên đán tới nay Trong khi chính ph ủ các nước áp d ng nhi u bi n ụ ề ệpháp cách ly gián cách xã h i Không ch riêng Vi t Nam và nhiộ ỉ ệ ều nước trên thế ới gi

đều cho h c sinh các c p ngh h c t i nhà chuy n qua hình th c h c tr c tuy n Mặc ọ ấ ỉ ọ ạ ể ứ ọ ự ế

dù vấn đề này là m i lo c a toàn xã hố ủ ội nhưng cũng là thời điểm để cho các công ty phát tri n ph n m m ể ầ ề đưa ra thị trường nh ng s n ph m chữ ả ẩ ất lượng v m t giáo d c ề ặ ụ

M t l n n a khía c nh thộ ầ ữ ạ ời gian để xây d ng ng dự ứ ụng di động cho th y t m quan ấ ầtrọng c a nó ủ

Để giúp các l p trình viên c a cái nhìn rõ ràng và c th ậ ủ ụ ể hơn về quy trình phát triể ứn ng dụng di độ g, đặn c bi t là quy trình phát tri n ứệ ể ng dụng di động đang lên

t ng Luả ận văn sẽ ớ gi i thi u cách th c ti p c n trong quá trình phát tri n ng d ng di ệ ứ ế ậ ể ứ ụ

9

động Bên cạnh đó vẫn văn cũng đưa ra các so sánh thự ế ềc t v các mặt ưu điểm và khuyết đi m củể a một số ề ả n n t ng phát triển ứng dụng di động đa nề ảng Đồn t ng thời luận văn cũng trình bày về quy trình phát triển ứng dụng di động v giáo d c theo nề ụ ền

t ng Flutter ả

1.2 M c tiêu và ph m vi nghiên cụ ạ ứu

M c tiêu chính c a luụ ủ ận văn là nghiên cứu và so sánh các phương pháp phát triể ứn ng dụng di động d a theo t t c các tiêu chí t trưự ấ ả ừ ớc đến nay, t ừ đó có thể đưa

ra mộ ứt ng dụng thành công đến v i cớ ộng đồng Đầu tiên luận văn s gi i thi u v ẽ ớ ệ ề các cách ti p c n và phát tri n ng dế ậ ể ứ ụng di động hi n nay Ti p theo nghiên c u và lệ ế ứ ựa chọn hai n n t ng phát tri n ng dề ả ể ứ ụng di động đa nề ảng đang được đánh giá là tốn t t

nh t hiấ ện nay đó là React Native và Flutter Dựa trên đặc điểm c a t ng n n t ng luủ ừ ề ả ận văn sẽ s d ng m t s tiêu chí c n thiử ụ ộ ố ầ ết để so sánh nhưng giao diện, tr i nghiả ệm người dùng, thi t k b cế ế ố ục, cộng đồng, ki m th , và các vể ử ấn đề liên quan đế ận l p trình Luận văn gồm các phần như sau:

Chương 1 gi i thiớ ệu và đưa ra các cách phát triển ứng dụng di động nhưng đặc

bi t t p trung vào hai n n t ng phát tri n ng dệ ậ ề ả ể ứ ụng là React Naitve và Flutter, đồng thời phân tích v ề tính năng kiến trúc các đặc điểm n i bổ ật ưu điểm cũng như khuyết điểm c a t ng n n t ng ủ ừ ề ả

Chương 2 s ẽ đưa ra những biểu đồ , Nh ng b ng hi u so sánh v i kh ữ ả ệ ớ ả năng

c a t ng n n t ng khi phát tri n ng dủ ừ ề ả ể ứ ụng di động native Sau đó sẽ đi sâu vào những tiêu chí mà các nhà phát tri n ph n m m cể ầ ề ần quan tâm để có th l a ch n m t n n ể ự ọ ộ ề

t ng phù h p ả ợ

Chương 3 s trình bày v phân tích và thi t k mẽ ề ế ế ột ứng d ng ph c v mụ ụ ụ ục đích

học tập online

Chương 4 luận văn sẽ trình bày v mề ột ứng dụng di động m ng giáo dạ ục đã

từng được phát tri n b ng c hai n n tể ằ ả ề ảng React Native và Futter Đây là mộ ứt ng

d ng th c t ụ ự ế đã được đưa ra cộng đồng kho ng mả ột năm trở lại đây Từ đó đưa ra một

10

s ki n ngh ố ế ị đối v i nhà phát triớ ển ứng dụng di động trong vi c l a ch n mệ ự ọ ột n n t ng ề ảthích hợp nh ất

11

Trong quy trình phát tri n ể ứng dụng điện thoại di động ngày nay Vi c l a ch n ệ ự ọ

n n t ng phát tri n luôn là m t về ả ể ộ ấn đề khó đố ới v i nhà phát triển ph n mầ ềm Khi nào công ty quyết định t o ra mạ ột ứng d ng mobile, thì phụ ải đối m t v i s l a ch n cặ ớ ự ự ọ ủa Native app ( ng d ng g c) và Hybrid app ( ng dỨ ụ ố Ứ ụng lai) và điều quan tr ng nh t là ọ ấtìm ki m nh ng cách hi u qu ế ữ ệ ả để thực hiện ý tưởng Trong bài vi t này, chúng ta s ế ẽtìm hi u s khác bi t gi a Native app và Hybrid app, tìm hiể ự ệ ữ ểu ưu và nhược điểm của chúng và cách chúng ảnh hưởng đến quá trình phát tri n chung và performance cể ủa

ứng d ng Chúng ta s xem xét các công ngh ụ ẽ ệ được s d ng cho n n t ng iOS vử ụ ề ả à Android trong bố ải c nh phát triển Native app và Hybrid app để ạ b n có th ch n m t ể ọ ộcông ngh phù h p nh t cho d án cệ ợ ấ ự ủa mình.Ở chương này luận văn sẽ ớ gi i thi u các ệcách tiếp cận này sau đó phân tích cụ ể ề th v hai n n t ng là React Native và Flutter ề ả

2.1 Các ền tản ng công ngh trong vi c phát triệ ệ ển ứng dụng di động

Ứng dụng mobile được xem là một trong những công cụ kinh doanh năng động nhất Chúng đã trở thành tiêu chuẩn mới để xây dựng kết nối với khách hàng Không chỉ về các sản phẩm phần mềm, mà bất kỳ dịch vụ nào khác như ngân hàng, chia sẻ xe hoặc giao hàng đều bị ràng buộc phải có ứng dụng mobile cho cả Android và iOS Chúng cho phép các công ty cung cấp cho người dùng của họ trải nghiệm thuận tiện

và nhanh chóng hợp thời Kinh doanh được thúc đẩy bởi những đổi mới liên tục, do

đó, rất nhiều ngành công nghiệp đã sử dụng các ứng dụng mobile ít nhất 6 7 năm Thật tuyệt khi các công ty có sự lựa chọn phát triển Native app và Hybrid app vì cả hai đều trở thành một giải pháp hợp lý cho nhiều công ty Hiện tại, một số doanh nghiệp dịch

-vụ, như Uber, một trong những ví dụ Hybrid app thành công, thích ứng với các ứng dụng di động hơn các trang web Chúng giúp cải thiện khả năng duy trì bằng cách có khả năng tương tác trực tiếp với khách hàng Khách hàng nhận được mức độ tiếp cận tăng lên như thông báo push, tùy chọn thanh toán mới,

12

Hình 2.1: Các hướng ti p c n khi phát tri n ng dế ậ ể ứ ụng di động

Đây là một cơ chế quan trọng cho doanh nghiệp hiện đại, tuy nhiên chúng cũng đòi hỏi đầu tư vào phát triển và bảo trì ứng dụng mobile Và cuối cùng, mỗi công ty sẽ phải đối mặt với câu hỏi Native app hay Hybrid app tốt hơn? Chúng ta sẽ tìm câu trả lời tron nộig dung luận án này Các công ty khác nhau có các mục tiêu khác nhau, hạn chế ngân sách và thời gian, chiến lược tiếp thị và các giai đoạn vòng đời kinh doanh

Sẽ không có câu trả lời đúng cho tất cả mọi trường hợp Do đó, cả phát triển Native app và Hybrid app có thể trở thành phương pháp tốt nhất cho các công ty khác nhau

13

2.2 Phát triển ứng dụng native

Các Native app được tạo cho một nền tảng cụ thể là Android hoặc iOS, trong khi quá trình phát triển Hybrid app phụ thuộc vào chức năng đa nền tảng Điều đó có nghĩa là, các Native app được xây dựng trên các ngôn ngữ lập trình chỉ có thể được hỗ trợ bởi một nền tảng nhất định Java, Kotlin thường là các công nghệ được áp dụng để phát triển Android và Objective-C và Swift cho iOS –

Điểm m nh c a l p trình ng d ng gạ ủ ậ ứ ụ ốc đó là ứng dụng đượ ậc l p trình dành riêng cho m t h ộ ệ điều hành duy nhất Được s h ự ỗ trợ ủ c a các SDK t các n n t ng ừ ề ảnên ng d ng có th t n dứ ụ ể ậ ụng được gần như là tấ ả tính năng trên hệ điềt c u hành T ỉ

l hoàn thi n cệ ệ ủa ứng dụng cũng cao hơn rất nhi u so về ới ứng d ng khác, ít khi mụ ắc

lỗi lặt vặt

Hình 2.1.1: Phát tri n ng dể ứ ụng di động theo n n t ng Native ề ả

Tuy v y, dù ph bi n nh t, công ngh ậ ổ ế ấ ệ Native App cũng không tránh khỏ ạn i hchế ủa mình, điề c u làm nó ph i như ng ph n còn l i th trư ng cho nh ng công ngh ả ờ ầ ạ ị ờ ữ ệkhác Khi phát triển ứng d ng g c, l p trình viên b h n ch kh ụ ố ậ ị ạ ế ả năng phát triển trên nhi u n n t ng khác nhau, vì mề ề ả ỗi ứng d ng ch phù h p v i duy nh t m t n n t ng ụ ỉ ợ ớ ấ ộ ề ả

mà thôi N u mu n phát tri n ng d ng trên 2 n n t ng l n nh t hi n nay, l p trình ế ố ể ứ ụ ề ả ớ ấ ệ ậ

14

viên ph i làm 2 ng d ng y hả ứ ụ ệt nhau nhưng bằng hai lo i ngôn ng ạ ữ khác nhau Đó là

lý do vì sao chi phí th c hi n mự ệ ột ứng d ng gụ ốc trên di động l i t n nhiạ ố ều chi phí hơn

so với nhi u lo i khác ề ạ

Công nghệ được sử ụng để d phát tri n iOS Native app ể

 Objective-C – Ngôn ng lữ ập trình này được biết đến v i tr i nghi m phát ớ ả ệtriển tuy t vệ ời, thư viện có s n và m t nhóm chuyên gia r ng l n Objective-ẵ ộ ộ ớ

C là một mature framework, cũng có được kh ả năng tương thích với các công ngh l p trình khác B t ch p nh ng lệ ậ ấ ấ ữ ợi ích đó, chúng ta nhận ra r ng ằcác ngôn ng m i xu t hiữ ớ ấ ện và đôi khi nó sẽ không có kh ả năng hỗ trợ ấ t t

c ả các tính năng mới nh ất

 Swift – Đây là một framework lập trình tương đối mới được Apple gi i ớthiệu đã trở thành l a ch n thay th xây d ng các iOS Native app Các ự ọ ế để ựnhà phát triển đã chỉ ra performance nhanh hơn của nó và nó d ễ dàng hơn

để tìm hi u và làm vi c v i Nó liên t c phát triể ệ ớ ụ ển đó là lý do tại sao có th ểthiếu m t s thành phộ ố ần Tuy nhiên, người ta nói r ng có th thay th ằ ể ếObjective-C trong tương lai

Công nghệ được sử ụng để d phát tri n Android Native app ể

 Java – Ngôn ng l p trình không ch ch yữ ậ ỉ ủ ếu được s d ng cho các ng ử ụ ứ

d ng mobile Android mà còn cho các mụ ục đích khác Phầ ớn l n phát triển desktop và web dựa trên Java Nó đã trở thành m t h ộ ệ thống công c ụ đặc

bi t, các nhà phát tri n có quy n truy c p vào mệ ể ề ậ ột thư viện m nh m Nó ạ ẽgiúp đơn giản hóa quá trình l p trình t ng th Tuy nhiên, các ậ ổ ể ứng d ng trên ụJava đòi hỏi nhi u b ề ộ nhớ hơn và hoạt động chậm hơn so với các framework khác

 Kotlin – Nó là m t ngôn ng lộ ữ ập trình được phát triển đặc biệt để làm vi c ệ

với Java và Java Virtual Machine Do đó, việc s dử ụng nó được Google h ỗtrợ và phê duyệt để phát tri n các ng d ng Android M t trong nhể ứ ụ ộ ững ưu điểm chính c a Kotlin so vủ ới Java thông thường là giao di n c a nó cho ệ ủ

15

phép làm vi c theo cú pháp ngệ ắn hơn Thự ếc t này giúp gi m th i gian l p ả ờ ậtrình c n thiầ ết để t o mạ ột ứng d ng cho Android Bây gi ụ ờ nó được bao gồm như là một thay th cho trình biên d ch Java tiêu chu n cho Android Studio ế ị ẩExpedia, Square, Pinterest và Flipboard có thể được nêu tên trong s ố những

ví d ụ điển hình nh t v các công ty s d ng Kotlin cho các ng d ng ấ ề ử ụ ứ ụAndroid của họ

2.3 Cross platform Native Apps

Phương án một phần hoặc hoàn toàn code dùng chung được giữa các hệ điều hành nhưng vẫn chạy như code thuần túy Các công nghệ thường được dùng hiện nay

là React Native, Flutter, và Native Script Đây là một nền tảng trung gian giữa các phương án khác biệt mà lại tiết kiệm được chi phí hơn, không những thế vẫn có thể tối

ưu và tạo style cho từng platform

Cross Platform hay còn được gọi là Multi Plaform là thuật ngữ để chỉ những ứng dụng đa nền tảng Trong khi các ứng dụng gốc tốn quá nhiều phí để xây dựng trọn bộ ứng dụng trên tất cả các nền tảng thì với Cross Platform, mọi thứ đều có thể giải quyết Lập trình viên chỉ cần lập trình một lần và biên dịch hoặc phiên dịch ra thành nhiều bản Native App tương ứng với từng nền tảng khác nhau

Hình 2.1.2: Phát tri n ng dể ứ ụng di động đa nề ản t ng

16

Công cụ quan trọng nhất để thực hiện các dự án ứng dụng đa nền tảng (Cross Platform) chính là Frameworks đa nền tảng Có rất nhiều Framework đa nền tảng Mỗi loại sẽ có những điểm mạnh và điểm yếu khác nhau Tùy vào mục tiêu xây dựng pp mà lập trình viên sẽ lựa chọn Framework nào cho phù hợp.a

Có thể thấy được lợi thế lớn nhất của Cross Platform là những tối ưu về thời gian và chi phí thực hiện Điều này cũng góp phần đáp ứng nhu cầu sử dụng các ứng dụng đa nền tảng của người dùng hiện nay

Và tất nhiên, công nghệ này vẫn còn rất nhiều hạn chế, cũng là lý do giải thích

vì sao loại ứng dụng này chưa thể chiếm thị trường lớn hơn Native App Những hạn chế đó tồn tại trong chính các Framework của loại công nghệ này

Đố ới v i các cross-platform framework, tính linh ho t s là l i th ạ ẽ ợ ế đáng chú ý giúp tăng tốc chu k phát tri n và c t gi m chi phí Hi u su t chỳ ể ắ ả ệ ấ ậm hơn sẽ là m t s ộ ựđánh đổi nh ỏ

Khi so sánh l i ích Native app và Hybrid app c a mợ ủ ỗi phương pháp là chân thật và rõ ràng Đây là nhiệm v c a m i công ty làm rõ mụ ủ ỗ để ục đích của h ngay t ọ ừđầu để có được k t qu ế ả mong đợi Các ng d ng chuyên d ng cung c p b o m t t t ứ ụ ụ ấ ả ậ ốhơn để chúng được các t chổ ức tài chính như ngân hàng, công ty bảo hi m l a ch n ể ự ọ

r ng rãi, H s n sàng chi nhi u tiộ ọ ẵ ề ền hơn cho việc phát triển và b o trì các ng d ng ả ứ ụmobile đắt tiền hơn để cung c p b o m t cho khách hàng c a h Các công ty lấ ả ậ ủ ọ ớn cũng

có thể quan tâm đến nh ng Native app khi chúng có kh ữ ả năng đáp ứng ng d ng cho ứ ụcác n n t ng khác nhau Amazon và PayPal có th ề ả ể được đề ập như cá c c ví d ng ụ ứ

dụng như vậy

Cross-platform framework h p dấ ẫn hơn đố ới v i các công ty m i kh i nghiớ ở ệp

v i kinh phí h n ch và kinh doanh t p trung vào phân ph i n i dung Nó s là mớ ạ ế ậ ố ộ ẽ ột cách ti p c n tuy t v i cho các ng d ng k t n i v i du lế ậ ệ ờ ứ ụ ế ố ớ ịch, đánh giá về hàng hóa khác nhau, hình nh và x p h ng c a khách hàng Các ví d v Hybrid app n i ti ng ả ế ạ ủ ụ ề ổ ế

có th ể được g i là Uber, Twitter và Instagram Native app và Hybrid app không gây ọ

ra s cự ạnh tranh nhưng đem đến nhiều cơ hội hơn cho các công ty để cung c p cho ấ

17

người dùng c a h nh ng tr i nghiủ ọ ữ ả ệm t t nh t M c tiêu chính c a công ty và nhà phát ố ấ ụ ủtriển là th c hi n chúng tự ệ ốt Trong các đoạn ti p theo, em s ế ẽ đưa ra các thông tin chi tiết hơn về phát triển Native app và Hybrid app, ưu và nhược đi m c a chúng ể ủ

Hình 2.2: So sánh gi a React Native và Fllutter ữ

Flutter và React Native là hai framework được r t nhiấ ều người quan tâm ở thời điểm hi n tệ ại Điểm chung c a c ủ ả 2 đều là Cross Platform Mobile, build native cho c ảAndroid và iOS Cả 2 có th giao ti p vể ế ới native để ế vi t các module base on native (gần như bắt bu c) ộ

2.3 React Native

Hình 2.2: N n t ng React Native ề ả

18

React Native là m t framework do Facebook phát triộ ển hướng đế ối ưu hóa n t

hiệu năng Hybrid và tối gi n s ả ố lượng ngôn ng ữ Native di động React Native cho phép build ng dứ ụng Native đa nên tảng m t cách d dàng, khác v i Mobile Web ộ ễ ớApp, HTML5 App và Hybrid App

2.3.1 Giới thiệu

React Native là m t framework cho phép các nhà phát tri n xây d ng các ộ ể ự ứng

d ng native s d ng Javascript ụ ử ụ

Ứng d ng RN truy c p tr c ti p n toàn b APIs c a ngôn ng ụ ậ ự ế đế ộ ủ ữ Native Như

vậy một ứng dụng được xây d ng b ng react native cho hiự ằ ệu năng và cảm nhận tương

t ự như một ứng d ng native ụ

Đầu tiên, có th d dàng gi nh r ng React Native s biên d ch ngôn ng JS ể ễ ả đị ằ ẽ ị ữcode tr c ti p sang ngôn ng ự ế ữ native tương ứng Nhưng điều này th t s ậ ự khó khăn vì Objective C hay Java đều là nh ng ngôn ng khá ch t ch Thay vì th , RN hoữ ữ ặ ẽ ế ạt động

một cách thông minh hơn Về ả b n chất RN được xem như là mộ ật t p h p các thành ợ

ph n React (React components), m i component th hiầ ỗ ế ện tương ứng v i view hay ớcomponent nào đó của native

2.3.2 Kiến trúc

Nhìn chung thì c ả ios và android đều có chung m t ki n trúc v i m t vài s ộ ế ớ ộ ựkhác biệt nhỏ N u nhìn m t cách t ng th , n n t ng RN s có 3 ph n chính: ế ộ ổ ế ề ả ẽ ầ

1 Native Code/ Modules

Đố ới v i ios toàn b ộ native code được vi t b ng Objective C ho c Swift, còn ế ằ ặ

v i Android s ớ ẽ được vi t bế ằng Java Nhưng để ế vi t một ứng d ng React Native, l p ụ ậtrình viên s không phẽ ải vi t bế ằng native code c a Android hay Ios ủ

2 Javascript JVM

Máy o JS s ch y toàn b JS code Trên các máy o Ios hay Android và trên ả ẽ ạ ộ ảcác thi t b React Native s d ng JavaScriptCore Các công c JavaScript h ế ị ử ụ ụ ỗ trợSafari JavaScriptCore là m t công c mã ngu n m xây d ng cho Webkit V i IOS, ộ ụ ồ ở ự ớ

19

React Native s d ng JavaScriptCore ử ụ được cung c p b i n n tấ ở ề ảng Ios, được gi i thiớ ệu

lần đầu tiên trên ios 7

Với Android React Native đóng gói JavaScriptCore cùng vớ ứi ng dụng Do đó

s ẽ làm tăng kích thước của app

Trong trường h p s d ng ch ợ ử ụ ế độ debug Chrome, code JavaScript s ẽ chạy trên Chrome ch không ch y trên thi t b và giao ti p v i native code thông qua ứ ạ ế ị ế ớWebsocket, s d ng vử ụ ới V8 engine Điều này cho phép l p trình viên ậ quan sát được nhiều thông tin hơn trên công cụ Chrome debugging như network requests, console logs,

3 React Native Bridge

React native bridge là m t c u n i C++/Java giúp giao ti p gi a lu ng native ộ ầ ố ế ữ ồ

và lu ng Javascript M t giao th c custom s ồ ộ ứ ẽ được s d ng cho vi c g i các messages ử ụ ệ ử

giữa 2 luồng

Trong h u hầ ết các trường h p, các l p trình viên s vi t toàn b ợ ậ ẽ ế ộ ứng d ng React ụNative bằng JavaScript Sau đó để chạy một ứng dụng như vậy, m t câu l nh cộ ệ ần được thực hiên thông qua CLI: react-native run-android ho c react-native run-ios Lúc này, ặReact Native CLI s sinh ra m t node packager/bundler làm nhi m v ẽ ộ ệ ụ đóng gói JS code vào trong một file có tên main.bundle.js Sau đó, mỗi l n ầ ứng d ng React Native ụđược kh i ch y, thành phở ạ ần đầu tiên được n p vào là ngõ vào c a native Native ạ ủThread t o ra m t máy ạ ộ ảo JS (JSVM) để chạy JS code đã được đóng gói JS code đó

là toàn b business logic cộ ủa ứng d ng Lu ng Native t ụ ồ ừ đó sẽ g i các messages thông ửqua RN bridge để kh i ch y m t ng d ng JS Luở ạ ộ ứ ụ ồng Javascript được sinh ra b t đ u ắ ầ

g i các l nh, yêu c u t i lu ng native thông qua RN Bridge Các l nh bao g m các ử ệ ầ ớ ồ ệ ồview s ẽ được n p vào, các thông tin nh n t ph n c ng, Ví d , n u lu ng JS muạ ậ ừ ầ ứ ụ ế ồ ốn

một view và text được kh i t o nó s g i yêu c u vào trong m t message và g i nó ở ạ ẽ ử ầ ộ ửqua Native thread để render chúng

Native thread sẽ ự th c hi n các ho t đ ng và g i l i kệ ạ ộ ử ạ ết qu ả cho JS để đả m bảo các yêu cầu đã được thực hiện chính xác

20

2.3.3 Ưu điểm và nhược điểm

Ưu điểm c a React Native: ủ

 Native application:

React Native đượ ử ụng đểc s d xây d ng mự ột ứng d ng Native th t s Nh ng ụ ậ ự ữWebview không th cung c p tr i nghi m chân thể ấ ả ệ ật cho người dùng i u mà ch – đ ề ỉReact Native có th ể làm được

V i React Native, nhớ ững component cơ bản(View, Image, Button, Checkbox)

đều là những component native Do đó ứng d ng s mang m t tr i nghi m li n m ch ụ ẽ ộ ả ệ ề ạ

v i t ng h ớ ừ ệ điều hành Điều đó thực s làm lên m t khác bi t l n so v i các framework ự ộ ệ ớ ớ

l p trình cross-platform khác ậ

Nó th c s ự ự ấn tượng hơn nữa khi b n l i code b ng ngôn ng javascript và ạ ạ ằ ữrender ra các component native từ OS

M t ví d ộ ụ đơn giản: Đó chính là DatePicker widget Ứng d ng v i widget này ụ ớ

s hi n th khác nhau trên Android và IOS ẽ ể ị

Đây chính là một đặc điểm t o nên s khác bi t: Không ch là tạ ự ệ ỉ ốc độ vì nó gần native nh t, mà nó còn làm cho công vi c c a l p trình viên tr nên d ấ ệ ủ ậ ở ễ dàng hơn Họkhông c n ph i code l i m t logic cho các n n t ng khác nhau mà v n có ng d ng ầ ả ạ ộ ề ả ẫ ứ ụnative cho t ng n n từ ề ảng đó

Nếu nó đã build được như 1 native application thì hiệu năng nó sẽ ấ r t là t ốt

 Tiết ki m nhân l c và th i gian: ệ ự ờ

Ưu điểm v m t nhân l c và th i gian c a React Native là r t l n So v i ề ặ ự ờ ủ ấ ớ ớ

vi c phệ ải đầu tư nhân lực để phát tri n riêng cho hai h ể ệ điều hành Android và iOS Thì việc l a chự ọn và s d ng React Native s ti t kiệử ụ ẽ ế m gần như là gấp đôi

 Viết 1 được nhi u: ề

Code d án bự ằng React Native đều có th build trên Android và IOS m t cách ể ộnhanh chóng và d dàng ễ

21

 Cộng đồng khá l n: ớ

Có r t nhiấ ều thư viện được cộng đồng gác đây tiếp phát tri n và hoàn toàn miể ễn phí Các l p trình viên hoàn toàn có th s d ng mi n phí hoậ ể ử ụ ễ ặc cùng nhau đóng góp công sức để xây d ng nhự ững thư viện có chất lượng

Tiế đó nó đượp c s h u thu n c a facebook, và v i m t cự ậ ẫ ủ ớ ộ ộng đồng khá l n ớcùng chung tay phát triển thì tương lai nó sẽ còn l n mớ ạnh hơn nữa

 Kiến th c n n đ ti p c n: ứ ề ể ế ậ

Nó không đòi hỏ ậi l p trình viên ph i th t gi i hay quá cao siêu m i có th p ả ậ ỏ ớ ể tiế

cận được nó Th nh l p trình viên c n trang b nhứ ật ậ ầ ị là ững cái căn bản như XML, HTML, CSS hay ch c n biỉ ầ ết avascript hoặJ c Java core, ho c cho dù ặ là Web developer hay mobile developer thuần cũng đã có thể ọc tố h t React native

Nhược điểm c a react native ủ

React Native là một giải pháp tuy t v i cho phát triệ ờ ển ứng dụng trên điện tho i di ạđộng, tuy nhiên đến th i đi m hi n t i, v n còn t n t i m t s khuyờ ể ệ ạ ẫ ồ ạ ộ ố ết điểm:

 V n còn thi u các component view cho Android: Map, Modal, Slider, Spinner ẫ ế

hoặc các module như Camera Roll,

 Không h ỗ trợ Window Phone: đây sẽ là điểm tr l n n u so vừ ớ ế ới ứng d ng ụhybrid Tuy nhiên, n u b n ch t p trung cho iOS và Android thì tế ạ ỉ ậ ất nhiên đây không ph i là vả ấn đề ớ l n

 Không build đượ ức ng d ng iOS trên Window và Linux: tụ ất nhiên đây không phải là điểm y u kém c a bế ủ ản thân React Native, mà đó là do yêu cầu t ừ Apple

 React Native không th ể build được ứng dụng “quá phức tạp” nế ậu l p trình viên không bi t Swift/Objecive-C, Java Tính ph c t p ế ứ ạ ở đây là ứng d ng c n ph i ụ ầ ả

chỉnh sửa các component

 Không nên dùng để ết game có tính đồ ọa và cách chơi phứ ạ vi h c t p

 Dùng ES2015/ES6: đây là cấu trúc m i cho Javascript t 2015 ớ ừ

22

 L p trình viên có th ph i m t nhi u thậ ể ả ấ ề ời gian để theo h t h sinh thái cế ệ ủa React Để làm cho đờ ập trình viên fullstack đẹp đẽi l và nh ng s n ph m ch t ữ ả ẩ ấlượng hơn,

2.4 Flutter

2.4.1 Giới thiệu

Flutter là m t công c mộ ụ ới được cung c p b i Google cho phép các nhà phát ấ ởtriển xây d ng các ng d ng ự ứ ụ đa nề ản t ng có th ể được th c hiự ện trong các h ống ệthkhác nhau ch ng hẳ ạn như Android hay iOS chỉ ớ v i m t codebase chung.ộ

Công c ụ này được được xây d ng trong C và C ++ và cung c p mự ấ ột cơ chếrendering 2D, một funtional-reactive framework là React-inspired, và m t t p h p các ộ ậ ợMaterial Design widget

Hình 2.4: N n t ng Flutter ề ả

Flutter là lời đáp trả trực ti p c a Google nh m th ng vào React-Native cế ủ ắ ẳ ủa Facebook Flutter cho phép các l p trình viên c a google có th t o ra app IOS và ậ ủ ể ạAndroid đơn giản ch v i m t lỉ ớ ộ ần code Điều này nghe có v là khá h p dẻ ấ ẫn nhưng có

l Flutter ph i m t m t chẽ ả ấ ộ ặn đường dài nữa để ắ ị b t k p React-Native Hi n t i, Dev ệ ạchủ yế ậu t p trung vào React-Native vì s phát tri n không ng ng c a nó, dự ể ừ ủ ẫn đến việc thờ ơ vớ ựi s xu t hi n c a Flutter Tuy nhiên, ấ ệ ủ em tin r ng Flutter m i th t s ằ ớ ậ ự là tương lai của mobile app v i nh ng lớ ữ ợi thế sau đây:

 Ngôn ngữ Dart V y Dart là gì? Nhi u l p trình viên s th c m c ậ ề ậ ẽ ắ ắ

23

 IDE tốt nh t cho Flutter là Android Studio và IntelliJ IDEA ấ

 Flutter s d ng c u n i là Dart App s nử ụ ầ ố ẽ ặng hơn nhưng chạy nhanh hơn

 React-Native và Flutter có nh ng cữ ấu trúc tương tự nhau như Event Handler

và Class Extensison

 Việc cài đặt thư viện ngoài cùng v i Animation trong Flutter r t tớ ấ ốt và mượt

mà

2.4.2 Kiến trúc

Khác với React-Native dùng Javascript làm c u n i đ g i các component ầ ố ể ọ

Native của IOS và Android

Flutter được xây d ng v i C/C++, Dart, Skia (2D rendering engine), Flutter ự ớcompile toàn b code trộ ực tiếp thành code ARM x86 t ừ đó có thể ễ d dàng s d ng ử ụGPU của thi t bế ị cũng như gọi các API native một các dễ dàng

Hình 2.4.2: Ki n trúc n n t ng Flutter ế ề ả

Flutter còn tích h p c animation, rendering, widgets, gestures vào trong ợ ả

framwork để dev có th tinh ch nh giao diể ỉ ện đế ận t n level pixel v i hiớ ệu năng cực

tốt Nhờ ậ v y, V i Flutter, không có gi i h n nào v giao di n ớ ớ ạ ề ệ

24

Hình 2.4.2: Các t ng c u trúc trong Flutter ầ ấ

Flutter hoạ ộng trên IOS và Android như thết đ nào ?

Android: Code C/C++ của thi t b s ế ị ẽ được biên d ch b i Android NDK Toàn ị ở

b code Dart s ộ ẽ được ti n biên dề ịch (AOT) thành code native và thư viện ARM Và toàn b nh ng th trên s ộ ữ ứ ẽ được build thành file apk M i thao tác render, event, input, ọ

… đều n m trong code Flutter và App code Cách hoằ ạt động này tương tự ớ v i nhi u ềEngine game hiện nay

IOS: Code C/C++ s ẽ được biên d ch b i LLVM Toàn b code Dart s ị ở ộ ẽ được tiền biên d ch (AOT) thành code native và thư vi n ARM Và toàn b nh ng th trên ị ệ ộ ữ ứ

s ẽ được build thành file ipa Mọi thao tác render, event, input, … đều n m trong code ằFlutter và App code Cách hoạ ộng này tương tựt đ với nhiều Engine game hi n nay ệFlutter hoạ ột đ ng v i các widget có s n cớ ẵ ủa HĐH (OEM) như thế nào ?

Không, th t ra Flutter không làm vi c vậ ệ ới chúng Thay vào đó, Flutter cung

c p hàng tá các widgets (bao g m c Material Design và Cupertino (IOS styled) ấ ồ ảwidgets), được qu n lý và render bả ởi Flutter’s framework và engine

Đội ngũ của Flutter tin r ng, v i cách hoằ ớ ạt động như vậy Những app được xây

d ng b i Flutter s ự ở ẽ có được chất lượng tốt hơn và sẽ không b gi i h n b i nh ng tính ị ớ ạ ở ữnăng của h ệ điều hành mà nó ph thu c vào ụ ộ

25

VD: Trong Android m t s thao tác c ộ ố ử chỉ định hướng (gesture) rất khó để

kiểm soát được V i Flutter, l p trình viên có th t xây d ng m t b gesture riêng ớ ậ ể ự ự ộ ộHơn thế ữ n a, gesture c a nh ng tác gi khác nhau có th ủ ữ ả ể tương thích tố ớt v i nhau Cài thêm thư viện:

Trong Flutter, m i th ọ ứ được cài đặt m t cách t ng Trong React nhiộ ự độ ều thư

vi n yêu c u việ ầ ệc cài đặt thủ công

Flutter tích h p trình quợ ản lý packages “packages manager”, nhờ ậy người vdùng không c n thi t ph i kầ ế ả ết nối với Xcode Cocoapods, ho c s d gn React-Native ặ ử ụlink như thông thường và cài đặt packages thông qua nmp

2.4.3 Ưu điểm và nhược điểm

Điểm m nh c a Flutter: ạ ủ

 Ngôn ng ữ Dart : Hướng đối tượng với Dart Tuy cú pháp hơi dài dòng nhưng

đố ới v i những ai đã có kinh nghiệm làm vi c qua v i Java / C# s c m th y ệ ớ ẽ ả ấthoải mái

 Không ph i thi t l p nhi u: ch c n khả ế ậ ề ỉ ầ ởi động project một cách bình thường

là mọi thứ đã có sẵn

 Cài đặt môi trường nhanh chóng: ch c n t i Flutter trên git vỉ ầ ả ề, sau đó chạy

“flutter doctor -v” thứ ẽ s báo cho l p trình viên bi t r ng h th ng còn thi u ậ ế ằ ệ ố ế

những gì để chạy được Flutter Sau đó tạo m t project v i Android Studio ộ ớhoặc bất kỳ m t IDE nào h ộ ỗ trợ Ch viỉ ệc gắn Flutter vào và ch y Flutter còn ạ

h ỗ trợ hot reloading giống như React Native

- Được h tr vỗ ợ ới các IDE: Android Studio, IntelJ Idea, VSCode,…

 Tích hợp s n navigator: Navigatẵ or được tích h p s n khi m i project m i c a ợ ẵ ộ ớ ủFlutter đượ ạc t o ra L p trình viên có th kh i t o ngay m t route mà không ậ ể ở ạ ộ

c n phầ ải kế ốt n i nó v i bớ ất kỳ thư viện nào c a bên Native ủ

 Tích h p s n gi i pháp qu n lý d ợ ẵ ả ả ữ liệu: đối v i Flutter, luôn có m t châm ớ ộngôn: “Everything has a Widget“ Flutter hỗ trợ một thư viện qu n lý state cả ực

ai chỉ ọ h c môi JavaScript ho c mu n chuy n t React-Native sang ặ ố ể ừ

 Không có JSX: Đối v i nhớ ững ai đã quen thuộc với React-Native, khi nhìn vào file code Dart Làm vi c v i data mà không có d u ngo c, không có style code, ệ ớ ấ ặ

qu ả thật là không d dàng ễ

 N i kh c a Styling: Không có quy chu n nào cho style, templete, controller ỗ ổ ủ ẩ

V y nên khi khai báo m t component m i thì l p trình viên ph i t mô t style ậ ộ ớ ậ ả ự ảcho component đó

 X ử lý animation sẽ khó hơn: Mặc dù có thể làm nhi u th ề ứ hơn với Animation, nhưng Flutter cũng yêu cầu m t m c đ x ộ ứ ộ ử lý cao hơn so với React-Native

 Tối ưu: Với Flutter, 2 trạng thái widget để ế thừ k a là changeable (stateful) và unchangeable (stateless) Trong khi đó đố ới v i React-Native ta có th qu n lý ể ảđược c ả vòng đời c a Component Và vi c thi t sót nhủ ệ ế ững tool để lưu giữ trạng thái c a củ ủa app cũng là một điểm yếu lớn Tuy nhiên điều này v n có th ẫ ể được

gi i quy t b ng cách tu n t hoá tr ng thái hi n t ả ế ằ ầ ự ạ ệ ại

2.5 So sánh và đánh giá

Ở phần trước luận văn đã trình bày chi tiế ề Flutter và React Native, đã đánh t v giá t ng quan v ổ ề ưu và nhược điểm c a t ng loủ ừ ại Trong chương này luận văn sẽ trình bày v hai n n t ng flutter và React Native So sánh s khác bi t gi a chúng T ề ề ả ự ệ ữ ừ đó đưa ra những đánh giá khách quan cụ ể th nh t ấ

2.5.1 So sánh

D a trên nh ng hi u bi t v RN và Flutter ự ữ ể ế ề mà em đã phân tích ở trên, có th rút ra ểđược m t s luộ ố ận điểm như sau:

27

RN s không bao gi mang l i hiẽ ờ ạ ệu năng cao hơn được native Lí do: là wrapper

và s d ng bridge, Javascript không có kh ử ụ ả năng thực hiện các performance như AOT compilation, không h ỗ trợ multithread gây ngh n c ẽ ổ chai

Flutter thì v n có kh ẫ ả năng đem lại hiệu năng cao hơn phía native trong m t s ộ ốtrường h p Lí do: Ví d có 2 app gi ng nhau hoàn toàn v m t giao diợ ụ ố ề ặ ện, 1 cái được code bằng native sdk, 1 cái được code b ng Flutter, thì tuy là chúng ta th y nó gi ng ằ ấ ố

y hệt nhau nhưng thực ch t cách chúng hoấ ạt động và phần bên dướ ại i l khác nhau hoàn toàn Flutter có một engine riêng và 1 thư viện đồ ọ h a riêng là Skia - Đây là 1 thư viện đồ ọ h a 2D khá ph biổ ến và được dùng trong Chrome Do native và Flutter có cách render UI khác nhau nên khó có th nói là bên nào tể ốt hơn hẳn được và th c t ự ế

là trong m t s bài test performance thì Flutter còn cho hiộ ố ệu năng cao hơn cả app được

vi t b ng native SDK Ngoài ra, ngôn ng l p trình cế ằ ữ ậ ủa Flutter cũng đem lạ ợi l i th ế

v hiề ệu năng hơn so với Javascript vì đây là một ngôn ng có th compile tr c ti p ữ ể ự ếsang machine code ch không c n thông qua máy o ứ ầ ả

Tuy v y, trong th c t l p trình viên s khó có th nh n ra mậ ự ế, ậ ẽ ể ậ ột app được viết

b i RN ho c Flutter ch b ng vi c nhìn vào tở ặ ỉ ằ ệ ốc độ ủ c a nó 2 framework này có kh ảnăng đáp ứng t t cho h u h t các ng d ng hi n nay - thành th c mà nói thì ph n lố ầ ế ứ ụ ệ ự ầ ớn các ứng d ng bây gi ụ ờ cũng chỉ bao g m text, nh và list thôi, mà nh ng component ồ ả ữnày đã được optimize r t t t r i và n u l p trình viên s dấ ố ồ ế ậ ử ụng đúng cách thì việc đạt được 60fps là chuy n trong t m tay ệ ầ

Giai đoạn phát tri n ể

Em s trình bày ẽ sâu hơn một chút v ề RN và Flutter, xem trong giai đoạn phát triển thì chúng s có l i th hoẽ ợ ế ặc khó khăn nào

Ngôn ngữ

RN: Javascript, Typescript, JSX

 Typescript thì là ngôn ng ki u m nh nên có th ữ ể ạ ể check được nh ng l i liên ữ ỗquan n kiđế ểu ở compile time Javascript thì là ki u y u nên nhi u bug ch ể ế ề ỉ có

 Chạy được trên nhi u n n t ng ề ề ả

 Compile thành ARM/x64 machine code, mang l i performance r t t t, JIT ạ ấ ốcompilation là n n tề ảng cho tính năng Hot Reload

 Do release app được compile AOT, không th th c hi n OTA update mà b t ể ự ệ ắ

buộc phải thông qua store

 UI code bằng chính ngôn ng phát triữ ển, đôi khi khó đọc

 D hễ ọc

Điểm y u c a Dart nói riêng và Flutter nói chung v n là vi c ngư i ta có s n lòng ế ủ ẫ ệ ờ ẵđón nhận nó hay không Ở thời điểm hi n t i, n u ệ ạ ế ai đó ọ h c Dart, người ta s ẽ chỉ có thể dùng nó cho nh ng project Flutter Còn n u h ữ ế ọ đầu tư vào Javascript/Typescript thì gần như chỗ nào cũng có đất di n cễ ả, và đó là lí do ngôn ngữ ẽ là điể s m mạnh để

RN có th lôi kéo nhi u dev mể ề ới hơn Ngoài ra, OTA update cũng là 1 trong những điểm hút khách c a RN khi mà l p trình viên có th ủ ậ ể đưa ra ữnh ng b n patch tr c ti p ả ự ế

đến máy của người dùng mà không c n ph i ch approve t ầ ả ờ ừstore

29

Ecosystem

RN v i ngôn ng phát tri n là Javascript có l i th l n v m t support khi ngôn ớ ữ ể ợ ế ớ ề ặ

ng này s ữ ố lượng package h tr thuộc top đầu trong tấ ảỗ ợ t c các lo i ngôn ng V các ạ ữ ềpackage h ỗ trợ cho RN nói riêng thì s ố lượng cũng rấ ớn do RN được release trước t l

và có lượng developer lớn hơn Gần như mọi th l p trình viên cứ ậ ần trong app như routing, state management hay UI component đều có đủ và điều này làm cho chúng

ta không c n m t nhi u th i gian mà có th dùng qu ầ ấ ề ờ ể ỹ thời gian đó để ậ t p trung phát triển nh ng logic riêng c a app ữ ủ

Flutter ra đời sau, s lư ng các package h tr không nhiố ợ ỗ ợ ều như RN nhưng cũng

s ẽ đáp ứng h u h t nh ng gì l p trình viên cầ ế ữ ậ ần Điểm khác biệt ở đâ y là h u h t các ầ ếpackage ph ổ biến của RN thì đượ ạc t o ra b i cở ộng đồng, còn nh ng package ph ữ ổ biến của Flutter thì đượ ạc t o ra b i Google Đây là m t khác bi t khá quan tr ng mà nhiều ở ộ ệ ọnhà phát tri n nên cân nh c khi l a ch n 1 trong 2 framework này RN có community ể ắ ự ọlớn hơn ở thời điểm hi n tệ ại, ngượ ại Flutter được l c Google support k ỹ lưỡng hơn với

vi c h t ệ ọ ự đầu tư phát triển các Widget với đầy đủ chức năng giúp đẩy nhanh quá trình phát tri n app Flutter L y ví d v Shared Element Transition - m t ch c nể ấ ụ ề ộ ứ ăng đem

l i hi u qu v m t hình ạ ệ ả ề ặ ảnh r t l n; chấ ớ ức năng này không có trong RN (hoặc ch ỉđược support bởi package c a bên th 3, ủ ứ nhưng lại được Flutter h tr và cách s d ng nó ỗ ợ ử ụcũng rấ ễt d dàng, th m chí d ậ ễ hơn cả ệ vi c implement phía native ở

Testing

C Rả eact Native và Flutter đều h ỗ trợ các phương thức testing cơ bản như Unit test, UI test và Integration test V unit test và UI test, React Native có h ề ỗtrợ test framework chính ch ủ đi kèm là Jest Với Jest, l p trình có th th c hi n ậ ể ự ệ

h u h t các lo i assertion và matching, ngoài ra Jest còn support tr c ti p React ầ ế ạ ự ế

v i Snapshot test - m t hình thớ ộ ức để test UI component đặc trưng Với Integration test, RN chưa có phương án chính thức để ỗ ợ h tr mà hi n tệ ại đang phụ thu c vào ộpackage c a bên th ủ ứ 3

30

Như đã nói ở trên, h sinh thái cệ ủa Flutter chưa phong phú bằng RN do được phát tri n b ng m t ngôn ng kém ph biể ằ ộ ữ ổ ến hơn Javascript, nên các l p trình viên s ậ ẽkhông có nhi u l a chề ự ọn để thay th nh ng test framework mế ữ ặc định Tuy v y, Flutter ậ

đã chứng minh là h r t ít khi c n ph thu c vào bên th 3 khi h ọ ấ ầ ụ ộ ứ ọ đã phát triển m t ộtest framework h ỗ trợ đầy đủ ấ t t c các lo i hình testing và n u ả ạ ế như mộ ật l p trình viên

đã làm Android rồi thì vi c làm quen v i nh ng công c này s r t nhanh ệ ớ ữ ụ ẽ ấ

2.5.2 Đánh giá

N u v tế ề ốc độ phát tri n c a công ngh hi n nay thì có th coi RN và Flutter là ể ủ ệ ệ ể

những framework khá "trưởng thành" RN được ra m t t ắ ừ 2015 và đến nay đã có 5 năm tích lũy kinh nghi m Trong th c t , h ệ ự ế ọ đang thực hi n khá nhi u c i tiệ ề ả ến để ải giquy t nhi u vế ề ấn đề đang gặp phải cũng như để ả c i thiện hơn nữa v m t hiề ặ ệu năng, từ

vi c tái cệ ấu trúc framework để giúp nó tr nên linh hoở ạt và có tính tương thích cao hơn đến vi c rewrite và tách các module support ra kh i core framework làm nó nh ệ ỏ ẹhơn (project Lean Core) Có thể nói Facebook đã đầu tư một lượng l n c nhân s , ớ ả ựthời gian và ti n bề ạc để làm RN tr thành m t trong nh ng framework t t nh t và là ở ộ ữ ố ấ

thứ người ta nghĩ đến đầu tiên n u mu n phát tri n app mobile, và ời điểế ố ể ởth m hi n ệ

t i thì h ạ ọ đã thành công phần nào React Native đã và đang đượ ấc r t nhi u ông l n lề ớ ựa

chọn như Skype, Pinterest, Uber, Discord, đây đều là nh ng app r t l n và phữ ấ ớ ục vụ

c ả trăm triệu người dùng hàng ngày Facebook cũng dùng RN trong những s n ph m ả ẩquan tr ng cọ ủa họ như chính trong app Facebook, Ad Manager hay Analytics

Flutter ra đời sau nhưng nếu so v lưề ợng tài nguyên đổ vào thì Google đầu tư hơn Facebook rất nhi u H t phát tri n ra m t ngôn ng m i, m t b engine riêng ề ọ ự ể ộ ữ ớ ộ ộ

và r t nhi u nhân s ấ ề ự để convert các view từ native sang framework c a h Không ch ủ ọ ỉ

v y, h ậ ọ còn đầu tư mạnh v m t hình nh khi mà các tài li u c a Flutter c c k ề ặ ả ệ ủ ự ỳ chi tiết và tr c quan (riêng b n thân em ự ả đánh giá documentation c a Flutter tủ ốt hơn RN

r t nhi u), h t ấ ề ọ ổ chức nhi u h i th o công ngh v Flutter, nhi u series gi i thi u và ề ộ ả ệ ề ề ớ ệthảo lu n trên Youtube M t trong nh ng series khá hay c a Flutter là "Widget of the ậ ộ ữ ủweek", là nh ng video ng n gi i thi u v Widget n i b t theo tu n, hay "The Boring ữ ắ ớ ệ ề ổ ậ ầFlutter Development Show", nơi mà các l p trình viên s ậ ẽ được ng i pair-programming ồ