Hướng dẫn chi tiết sâu sắc nhưng không bao giờ dứt khoát về kiến ​​trúc phát triển di động

Bản địa, Web, PWA, hybrid, Cross-Compiled, đâu là cách tốt nhất để phát triển cho các nền tảng Android và iOS? Điều gì có vẻ hợp lý? Và làm thế nào bạn có thể lựa chọn trong số các tùy chọn? Trong bài viết này, tôi sẽ trình bày tất cả để bạn có thể đưa ra quyết định sáng suốt.

Trước tiên, hãy để tôi cung cấp cho bạn một chút bối cảnh. Tôi là một chuyên gia tư vấn cao cấp về CNTT và ý tưởng kết hợp hướng dẫn này được sinh ra từ các cuộc thảo luận với một trong những khách hàng của chúng tôi về những gì có thể là cách tiếp cận tốt nhất cho họ. Vâng, chỉ cho họ. Và chúng tôi nhận ra rằng chúng tôi không có một chiến lược rõ ràng, một nền tảng vững chắc và đáng tin cậy, để giúp chúng tôi đưa ra câu trả lời đúng.

Và bạn biết những gì? Tôi cũng không thể tìm thấy một hướng dẫn như vậy dễ dàng ở bất cứ đâu trên Internet. Mặc dù có một số bài viết về chủ đề này, không ai trong số những người tôi đi qua đã hoàn thành hợp lý. Thật không may, phần lớn bỏ qua rất nhiều khái niệm hoặc, thậm chí tệ hơn, về cơ bản là sai.

Bây giờ, tôi muốn nhìn rộng hơn. Và trong khi tôi có khả năng giúp ai đó tự đưa ra quyết định, tôi cũng hỏi mọi người xung quanh cộng đồng để có thêm suy nghĩ về chủ đề này.

Hướng dẫn này có hai phần:

  1. Tầng kiến ​​trúc phát triển di động (này)
  2. Làm thế nào để đưa ra quyết định của bạn

Nó cũng có sẵn trên YouTube dưới dạng một loạt 10 video và là một khóa học miễn phí trên Udemy. Ở đó, bạn sẽ tìm thấy cùng một tài liệu bằng văn bản như ở đây, cùng các video từ loạt YouTube, cũng như các câu đố để sửa tất cả các chủ đề và chứng nhận cuối cùng.

Vậy hãy bắt đầu.

Giới thiệu

Khi nói đến nền tảng di động, người ta cho rằng chỉ có hai người chơi lớn: Android và iOS. Các công nghệ khác như Tizen, Blackberry hoặc Windows Phone đã chết hoặc đã xuất hiện được một thời gian và không có triển vọng đạt được bất kỳ thị phần đáng kể nào.

Một cái nhìn nhanh về sự độc quyền lớn này có thể khiến bạn nghĩ rằng các nhà phát triển không có nhiều lựa chọn khi tạo ứng dụng di động. Tuy nhiên, ý tưởng này không thể xa hơn sự thật. Bạn có thể nhanh chóng phát hiện ra một loạt các ngôn ngữ lập trình đang được sử dụng ngoài đó: C / C ++, Java, Kotlin, Objective-C, Swift, JavaScript, TypeScript, C #, Dart, Ruby và tôi chắc chắn rằng tôi đã bỏ lỡ một vài hơn.

Điều tương tự cũng đúng với các khung phát triển di động. Trừ khi bạn không phải là nhà phát triển, hoặc bằng cách nào đó đã không biết về các công nghệ mới trong 10 năm qua, bạn có thể đã nghe nói về Cordova / PhoneGap, React Native, Xamarin, Ionic, Nigencript hoặc Flutter, chỉ để đặt tên cho một vài chéo giải pháp nền tảng cho các ứng dụng di động.

Vì vậy, hãy để Lọ nhìn vào tất cả các phần của kiến ​​trúc và phá vỡ mọi thứ một chút.

TL; DR

Không có người chiến thắng rõ ràng. Tất cả các phương pháp đều có ưu và nhược điểm, và có thể là phù hợp nhất hoặc phù hợp nhất cho dự án tiếp theo của bạn. Trong hướng dẫn này, tôi phân loại nhiều giải pháp khác nhau thành các tầng khác nhau tùy theo khoảng cách kiến ​​trúc của chúng là từ nền tảng bản địa.

Ứng dụng gốc

Để bắt đầu, hãy đi thẳng vào kim loại. Tầng kiến ​​trúc đầu tiên của chúng tôi là Ứng dụng bản địa.

Cấp ứng dụng gốc - Nơi bạn phát triển cho từng nền tảng cụ thể (có thể cụ thể hơn nữa khi xem xét NDK)

Đây là tầng mà bạn phải nhận thức được các đặc điểm riêng của từng nền tảng. Nó không có ý định đào sâu vào chúng, tôi chỉ muốn đề cập đến một vài điều trong một chút bối cảnh.

iOS

Bắt đầu từ phía iOS, chỉ vì nó đơn giản hơn, chỉ có Apple thống trị thế giới. Ban đầu, các nhà phát triển cần học Objective-C, một biến thể C hướng đối tượng độc quyền với một số nguồn cảm hứng từ SmallTalk (và một API có tên cực kỳ dài).

Năm 2014, Apple đã công bố Swift, một ngôn ngữ đa mô hình, dễ dàng hơn rất nhiều so với người tiền nhiệm. Vẫn có thể xử lý mã kế thừa Objective-C, nhưng Swift đã đạt đến mức trưởng thành cao. Vì vậy, nếu bạn dự định học cách phát triển tự nhiên cho iOS, Swift chắc chắn là nơi bạn nên bắt đầu.

Android

Về phía Android, có một số nhà sản xuất khác nhau. Phần lớn trong số họ phụ thuộc vào bộ xử lý ARM. Nhưng nói chung, các ứng dụng Android nằm trên các phiên bản máy ảo (phiên bản ART) để giúp đối phó với các đặc tính tiềm ẩn tiềm ẩn (không phải không có nhiều thủ thuật đáng kinh ngạc).

Đó là lý do tại sao, ban đầu, ngôn ngữ được lựa chọn là Java. Nó không chỉ là ngôn ngữ phổ biến nhất trên thế giới trong gần hai thập kỷ (với một vài lần hoán đổi vị trí với C), mà nó còn đáng chú ý với Máy ảo Java (JVM). Điều này trao quyền cho các nhà phát triển biên dịch mã của họ xuống một mã byte trung gian có thể được đọc và chạy bởi JVM.

Với Bộ công cụ phát triển bản địa Android (NDK), bạn cũng có thể phát triển các phần quan trọng của ứng dụng trực tiếp bằng mã gốc, viết bằng C / C ++. Trong trường hợp này, bạn phải nhận thức được các quirks nền tảng cơ bản.

Kotlin là ngôn ngữ được JetBrains tiết lộ vào năm 2011. Khi nó lần đầu tiên ra mắt, mặc dù có tính linh hoạt và đồng nhất, nó không phải là một ngôn ngữ JVM khác với các đối thủ thành công hơn như Scala, Clojure hoặc Groovy. Tuy nhiên, sau khi phát hành lớn đầu tiên vào năm 2016, nó nhanh chóng bắt đầu nổi bật trước đám đông, đặc biệt là sau khi Google tuyên bố rằng nó sẽ được hỗ trợ chính thức trên nền tảng Android tại Google I / O 2017.

Kotlin đang trở thành ngôn ngữ hạng nhất của Google (hiện tại là Kotlin và Java - theo thứ tự này - được sử dụng trong toàn bộ tài liệu chính thức của Android). Một sự thay thế hoàn toàn về Java được dự kiến ​​thậm chí còn nhiều hơn nữa vì vậy bây giờ Tòa án phúc thẩm liên bang Hoa Kỳ đã đưa ra phán quyết về vụ kiện bất tận do Oracle cáo buộc Google vi phạm bản quyền Java.

Thành phần bản địa

Phát triển trong tầng này, bạn cũng có thể tận dụng tất cả các API gốc và đặc biệt là các thành phần gốc. Điều này tiết kiệm ứng dụng của bạn khỏi phải phát minh lại bánh xe.

Tôi đã xuất bản bản demo video về cách tạo một dự án đơn giản trên Xcode (iOS) và Android Studio. Nếu bạn muốn kiểm tra nó:

Ưu điểm của ứng dụng gốc

  • Hiệu suất tốt nhất và sự tham gia của người dùng hàng đầu
  • Chảy máu cạnh các tính năng bản địa
  • IDE đáng chú ý Android Studio / Xcode
  • Ngôn ngữ cấp cao hiện đại Kotlin / Swift
  • Cách tiếp cận rất thấp với NDK

Nhược điểm của ứng dụng gốc

  • Hai cơ sở để duy trì
  • Yêu cầu cài đặt (ngoại trừ Ứng dụng tức thì của Android)
  • Khó phân tích SEO
  • Rất tốn kém để khiến người dùng tải xuống ứng dụng

Ứng dụng web

Ở phía bên kia của quang phổ, chúng tôi có Ứng dụng web. Ứng dụng web về cơ bản là các ứng dụng được chạy bởi trình duyệt. Bạn không viết mã nhắm mục tiêu nền tảng, mà là bất kỳ trình duyệt nào chạy trên nền tảng đó.

Cấp ứng dụng web - rõ ràng nằm trên thanh trình duyệt nhắm mục tiêu một con thú ngồi giữa Android và iOS.

Trong tầng này, bạn sẽ tìm thấy một số lượng lớn các ứng cử viên điên cuồng nhảy vào họng của nhau. Nhưng tất cả đều sử dụng một kho vũ khí bao gồm cùng một loại vũ khí: HTML, CSS và Javascript.

Các khung và thư viện web, ngay cả khi tận dụng các trình biên dịch trước CSS như LESS hoặc SASS, thậm chí các ngôn ngữ được biên dịch trước Javascript như TypeScript, CoffeeScript hoặc Flow, thậm chí là cộng sinh như JSX hoặc Elm, để lại các công cụ như Babel được sử dụng để dịch mã mọi thứ sang Javascript khác mức độ phù hợp có thể định cấu hình với thông số kỹ thuật hàng năm của ECMAScript (ES6 / ES7 / ES8 hoặc nếu bạn thích ES2015 / ES2016 / ES2017 / ES2018).

Vào cuối ngày, tất cả chúng đều là HTML, CSS và JavaScript được trình duyệt hiển thị và chạy. Không có quyền truy cập trực tiếp vào các API gốc như máy ảnh, độ rung, trạng thái pin hoặc hệ thống tệp, nhưng một số trong số chúng có thể đạt được thông qua API Web:

Tôi có thể dựa vào các tính năng của Nền tảng web để xây dựng ứng dụng của mình không?

Vấn đề lớn với API Web là mức độ trưởng thành của chúng. Nhiều người trong số họ không được hỗ trợ bởi một số trình duyệt. Có sự khác biệt trong việc triển khai, đặc biệt là trên các trình duyệt di động.

Ưu điểm của ứng dụng web

  • Mã được chia sẻ giữa các nền tảng và trình duyệt máy tính để bàn
  • Không yêu cầu cài đặt trước đó, chỉ cần điều hướng và sử dụng
  • Hàng tấn khung và thư viện đi cùng với họ
  • Tốt nhất cho SEO

Nhược điểm của ứng dụng web

  • Hiệu suất thấp hơn
  • Khó có được trải nghiệm người dùng bản địa
  • Yêu cầu kết nối internet
  • Không có sẵn trên các cửa hàng ứng dụng chính thức
  • API không hoàn thiện và đáng tin cậy như API gốc

Các khung và thành phần Web

Angular, React và Vue có lẽ là các khung web phổ biến nhất vào năm 2018. Tuy nhiên, chính xác, React chỉ được coi là một thư viện do tính chất linh hoạt và ít quan điểm của nó. Angular, mặt khác, là một khuôn khổ ý kiến ​​mạnh mẽ. Vue sống ở một số điểm ở giữa chúng.

Angular vs React vs Vue

Angular, ban đầu được gọi là AngularJS, đã được Google giới thiệu ra thế giới vào năm 2010. Nó nhanh chóng bắt đầu tỏa sáng, do sự đảo ngược của các mô hình so với các thư viện khác từ thời điểm đó (như jQuery, phổ biến nhất hồi đó). Thay vì nói chuyện trực tiếp với các phần tử HTML để thao tác trạng thái UI, với AngularJS, các mẫu được cập nhật một cách kỳ diệu bất cứ khi nào mô hình JavaScript được cập nhật.

Khi AngularJS ngày càng trở nên phổ biến, nó cũng phát triển theo mục đích. Nó đã trở thành một khung hoàn chỉnh và có ý kiến, là một trong những khung đầu tiên coi trọng SPA (Ứng dụng trang đơn). Sự tăng trưởng này (về cả hai khía cạnh) chịu trách nhiệm cho một số vấn đề về hiệu năng và hiệu suất API.

React được tạo bởi Facebook để giải quyết nhu cầu của riêng họ trên lớp trình bày. Nó đã giới thiệu nhiều khía cạnh đột nhiên trở nên rất phổ biến, như DOM ảo, luồng dữ liệu một chiều (tên ban đầu là Flux, đặc biệt phổ biến thông qua thư viện triển khai có tên Redux) và hỗn hợp HTML và JavaScript có tên là JSX.

Chỉ trong năm 2016, sau những cuộc tranh luận dài và những thay đổi lớn bất ngờ, Google đã ra mắt phiên bản hai của khung web phổ biến của mình. Họ gọi nó là Angular, thay vì AngularJS. Nhưng, như nhiều người đã gọi phiên bản đầu tiên là Ang Angular (không có hậu tố "JS"), mọi người bắt đầu gọi phiên bản mới Angular 2. Điều đó đã trở thành một vấn đề đặt tên, vì Google cũng tuyên bố rằng họ sẽ phát hành các phiên bản chính mới mỗi 6 tháng.

Theo tôi, đó là một sai lầm của voi ma mút. Tôi đã thấy điều này trước đây (ví dụ với Struts vs Struts 2 / WebWork). Họ có một sản phẩm phổ biến rộng rãi dường như đã đạt đến cao nguyên của nó, và nó đã bắt đầu bị chỉ trích nhiều hơn là ca ngợi. Nếu Google quyết định xây dựng lại từ đầu, họ không bao giờ nên thay đổi phiên bản chính của mình. Làm thế nào mọi người sẽ tin rằng họ sẽ không lặp lại nó mỗi phiên bản chính mới? Phiên bản hai được cho là sẽ trình bày những thay đổi đột phá, nhưng điều đó không có nghĩa là nó có thể được tân trang lại hoàn toàn.

Angular là một khung web ngoạn mục, và tôi thực sự cảm thấy đam mê về nó. Tuy nhiên, nó là một con thú hoàn toàn mới. Nó không có nhiều liên quan đến AngularJS. Ngay cả Vue, một khung công tác tuyệt vời khác (có lẽ là một trong những cách dễ chịu nhất để làm việc cùng) trông giống với AngularJS từ góc nhìn của một con chim. Tôi tin rằng điều này đã gây ra một sự di chuyển đáng kể khỏi Angular và đóng góp đáng kể vào sự nổi tiếng của React.

Vue là một trong ba khung web phổ biến nhất không được hỗ trợ bởi một công ty lớn. Nó thực sự được bắt đầu bởi một nhà phát triển cũ của Google. Do sự đơn giản ghê gớm và dấu chân nhỏ bé của nó, nó đã nhận được sự chú ý từ một cộng đồng lớn và nhiệt tình.

Mặc dù có nhiều giải pháp hoàn chỉnh hơn, tất cả chúng đều hoạt động dựa trên khái niệm các thành phần web. Có một đặc điểm kỹ thuật mở về chúng hiện đang được tiến hành trong W3C và một số triển khai thú vị như Polyme, Macintosh và X-Tag.

Trong video thứ ba của loạt bài này, tôi không dành quá nhiều thời gian để thảo luận về các khung mà thảo luận về các thư viện thành phần web:

Ứng dụng di động vs Ứng dụng web

Tôi không chắc là bạn có chú ý hay không, nhưng thứ tự các bậc tôi đang trình bày ở đây tuân theo những gì tôi nghĩ là con đường dễ nhất để tìm hiểu mọi phương pháp. Tôi bắt đầu từ Cấp bản địa, sự phát triển di động thực sự nhất. Sau đó, tôi quyết định bay trực tiếp đến một thái cực khác để trình bày Cấp độ Web, đây là tầng có sẵn kể từ những điện thoại thông minh đầu tiên.

Chỉ bây giờ, sau khi xây dựng một so sánh giữa hai cạnh của sơ đồ của tôi, tôi sẽ bắt đầu nói về nhiều cách tiếp cận đa nền tảng để xây dựng các ứng dụng di động.

Có một cuộc tranh luận dài giữa Ứng dụng di động và Ứng dụng web. Mọi thứ tôi nói về Ứng dụng dành cho thiết bị di động không dành riêng cho Lớp bản địa. Nó cũng có thể áp dụng cho tất cả các tầng đa nền tảng mà tôi trình bày sau này.

Tình huống khó xử về hành vi người dùng

Người dùng dành nhiều thời gian hơn cho Ứng dụng di động (87%) so với Trang web dành cho thiết bị di động (13%)

Theo khảo sát của Comscore năm 2017, độ trung thực của người dùng đối với ứng dụng di động có liên quan nhiều hơn so với các trang web di động. Theo một bài viết được căn chỉnh trên Forbes, điều này thường là do sự tiện lợi (ví dụ: nút trên màn hình chính, widget, thông báo hàng đầu), tốc độ (ví dụ: giao diện mượt mà, khởi động gần như ngay lập tức) và cài đặt được lưu trữ (ví dụ: ngoại tuyến Nội dung).

Trang web dành cho thiết bị di động tiếp cận được nhiều người hơn (8,9 triệu khách truy cập hàng tháng so với 3,3 triệu ứng dụng di động)

Mặt khác, trong cùng một dữ liệu Comscore, chúng tôi biết rằng khách hàng có thể tiếp cận dễ dàng hơn từ các trang web di động, vì họ không bị ràng buộc nhiều với một vài ứng dụng ưu tiên của họ. Nếu bạn so sánh các trang web phổ biến nhất với các ứng dụng được tải xuống nhiều nhất, thì ước tính trung bình 8,9 triệu khách truy cập web duy nhất mỗi tháng truy cập vào 1000 trang web hàng đầu. Đó là gần gấp ba lần so với người dùng duy nhất trung bình của 1000 ứng dụng được tải xuống nhiều nhất.

Phân phối (Ứng dụng web) x Cam kết (Ứng dụng di động)

Đó là tất cả về phân phối và tham gia. Ứng dụng web của bạn có cơ hội truy cập cao hơn, vì người dùng có nhiều khả năng thử những điều mới khi điều hướng qua trình duyệt di động của họ. Nhưng Ứng dụng dành cho thiết bị di động đã được chứng minh là hấp dẫn hơn và thu hút sự chú ý của người dùng trong thời gian dài hơn nhiều.

Bây giờ bạn đã hiểu được vấn đề nan giải, hãy xem Ứng dụng web lũy tiến. Đây là một cách tiếp cận gắn liền với tầng Ứng dụng web mà tôi phân loại nó chỉ là phần phụ lục của Ứng dụng web. Nhưng đó là một kẻ gây rối lớn và là ứng cử viên nặng ký cho điều mới mẻ và hấp dẫn nhất trong phát triển web và di động.

Ứng dụng web lũy tiến

Ứng dụng web lũy tiến (PWAs) là một bộ công cụ được sử dụng để cung cấp cho người dùng Ứng dụng web trải nghiệm giống như khi họ chạy Ứng dụng di động. Điều này có nghĩa là Ứng dụng web có thể tận dụng mức phân phối tiềm năng cao hơn với mức độ tương tác cao hơn.

Phụ lục ứng dụng web lũy tiến cho tầng ứng dụng web

Google xác định ba bằng cấp chính cho PWAs: chúng phải đáng tin cậy, nhanh chóng và thu hút.

Các tính năng được gọi là Service Workers và App Shell là nền tảng của Ứng dụng web lũy tiến. Chúng được tạo ra để thúc đẩy độ tin cậy của ứng dụng vì giờ đây chúng được thiết kế để hoạt động bất kể trạng thái kết nối của thiết bị. Điều đó bao gồm chế độ ngoại tuyến, cũng như các kết nối kém. Chúng cũng cung cấp tăng hiệu suất nhận thức đáng kể, khi các ứng dụng khởi chạy bằng cách sử dụng dữ liệu được lưu trong bộ nhớ cache cục bộ, giúp loại bỏ sự chậm trễ khi tải xuống nội dung đồng bộ.

Bạn có thể coi độ tin cậy là một vector gián tiếp của sự tham gia. Người dùng không bị ảnh hưởng trong khi đi lại bằng tàu hỏa, ví dụ. Họ có thể ở lại đính hôn.

Áp dụng tương tự cho tốc độ. Theo Google:

53% người dùng sẽ từ bỏ một trang web nếu mất hơn 3 giây để tải!

Tuy nhiên, việc đáng tin cậy và nhanh chóng khi tải không nhất thiết đảm bảo mức độ tương tác cao. PWAs tận dụng các tính năng liên quan đến thiết bị di động đã từng là độc quyền cho các ứng dụng dành cho thiết bị di động, như tùy chọn Thêm vào màn hình chính trên màn hình và Thông báo đẩy.

Khi nói đến tính năng Thêm vào màn hình chính, bạn có thể nhận thấy rằng Apple đã có một tính năng tương tự kể từ iPhone đầu tiên. Một số người thậm chí còn cho rằng Ứng dụng web lũy tiến là tên mới lạ mắt của Google cho ý tưởng ban đầu của Apple.

Và bạn thực sự có thể hoàn toàn không đồng ý. Một số ý tưởng đang thực sự đi xe đạp. Họ đến, đi xa, và sau đó quay lại với một tên mới và một số cải tiến (ví dụ: Nhân viên phục vụ), để cuối cùng họ có thể bám lấy.

Mặt khác, nó khó có thể hoàn toàn đồng ý. Bài phát biểu của Steve Jobs, về Web 2.0 + AJAX và thông báo đáng nhớ về iPhone trở lại trong WWDC 2007 không đủ thuyết phục để gọi ông là cha, hay thậm chí là nhà tiên tri của PWAs.

Công bằng mà nói, khả năng Thêm vào màn hình chính trên iPhone không gì khác hơn là một tính năng tinh tế, gần như bị ẩn để tạo các biểu tượng trên máy tính để khởi động Ứng dụng web ở chế độ toàn màn hình. Nó có tất cả gánh nặng của chu kỳ phản hồi yêu cầu HTTP và không có đường dẫn rõ ràng xung quanh bộ nhớ cache.

PWAs bắt đầu từ điểm đúng. Họ khám phá cách cài đặt Ứng dụng Web trước đây không cần thiết mà không mất phần khởi động phía máy khách của Ứng dụng di động. Điều này có nghĩa là mọi thứ người dùng cần cho lần tương tác đầu tiên sau khi khởi động có thể được lưu trong bộ nhớ cache cục bộ (đọc: App Shell) và được cung cấp ngay khi họ nhấn vào Thêm Add vào màn hình chính.

Chuyển sang một đặc điểm nổi tiếng khác của PWAs, hãy để nói về tính năng siêu hấp dẫn (hoặc tái thu hút) của thế giới Ứng dụng di động: Thông báo đẩy. Chúng là các tin nhắn kiểu cảnh báo xuất hiện trên thanh / khu vực thông báo hàng đầu, cũng như trên màn hình khóa. Họ có khả năng kéo người dùng quay lại ứng dụng của bạn sau khi họ nhận được thông báo.

Để củng cố sự hấp dẫn của PWAs, Google đã và đang kéo tất cả các API Web hiện đại dưới cái ô PWA. Vì vậy, mong đợi để xem những thứ như Yêu cầu thanh toán, Quản lý thông tin xác thực, WebVR, Cảm biến, WebAssugging và WebRTC trong bối cảnh Ứng dụng web lũy tiến. Nhưng các tính năng này không nhất thiết phải gắn với PWA, và một số thậm chí đã được sinh ra trước khi thuật ngữ PWA được đặt ra.

PWA và Apple

Apple, mặt khác, đã công bố những cột mốc vững chắc đầu tiên của họ đối với PWAs chỉ trong tháng 3 năm 2018. Mặc dù vẫn còn một số hạn chế, nhưng tiến trình này rất đáng trân trọng. Một số hạn chế có thể liên quan đến thực tế là Safari đã tụt hậu so với các đối thủ cạnh tranh. Những người khác có thể được quy cho triết lý kiểm soát chặt chẽ của Apple.

Tuy nhiên, Apple có một App Store có lợi nhuận cao hơn Google. Apple khẳng định rằng nhiều tiêu chí hơn trên các ấn phẩm ứng dụng mang lại độ tin cậy tổng thể cao hơn và PWAs chắc chắn sẽ làm tổn hại đến doanh thu của App Store. Điều này cho thấy rằng một số hạn chế dường như được áp đặt có chủ ý (như kích thước bộ đệm tối đa 50Mb của PWA) sẽ có giá cao hơn để bị thu hồi.

Thật không may, PWAs không hoàn hảo

Các giải pháp web và, ở các cấp độ khác nhau, tất cả các giải pháp đa nền tảng đấu tranh để đạt được sự xuất sắc và toàn diện của Ứng dụng gốc. Mỗi tính năng mới và mọi chi tiết cụ thể cho Android hoặc iOS khiến cho bản địa đó cảm thấy khó khăn hơn và khó truy cập hơn khi bạn đặt ứng dụng của mình từ tầng gốc.

Nhìn chung, PWAs khắc phục một số vấn đề trong lớp Ứng dụng web. Nhưng có một số vấn đề khác có thể được khắc phục bởi một giải pháp hoạt động trên trình duyệt.

Những gì PWAs sửa chữa

  • Trải nghiệm nhiều hơn nữa
  • Thời gian tải nhanh hơn
  • Không yêu cầu kết nối internet
  • Buộc các nhà phát triển web phải nhận thức được các tình huống trong đó không có kết nối cũng như kết nối xấu
  • Kết hợp các tính năng từ Ứng dụng dành cho thiết bị di động như Thông báo đẩy, Định vị địa lý hoặc Nhận dạng giọng nói

Họ tặng gì

  • Sự chậm chạp cố hữu
  • Không có sẵn trên các cửa hàng ứng dụng (chưa)
  • Vẫn chưa được hỗ trợ đầy đủ bởi tất cả các trình duyệt
  • Vẫn thiếu các tính năng di động như NFC, Ambient Light, Geofenced
  • Cũng thiếu hỗ trợ cho các đặc thù của Android hoặc iOS như PiP, biểu ngữ ứng dụng thông minh, tiện ích khởi chạy màn hình và cảm ứng 3D

Trong video dưới đây, tôi làm một tổng quan ngắn gọn về PWAs.

Ứng dụng lai

Ở cấp độ này, chúng tôi bắt đầu đi sâu vào thế giới Ứng dụng di động. Chúng tôi sẽ bắt đầu từ tầng xa nhất: Ứng dụng lai.

Thuật ngữ Hybrid cũng thường được áp dụng cho tất cả các giải pháp đa nền tảng. Tuy nhiên, ở đây, tôi đã giới hạn nó ở Ứng dụng hoạt động bên trong các thành phần di động, được gọi là WebViews.

Tầng ứng dụng lai. Bên dưới dòng của trình duyệt nhưng trên đầu trang WebViews

Trong các bản demo trong video thứ hai, mục đích của tôi để thêm WebView làm ví dụ Hello World là để làm rõ rằng có một thành phần gốc cho mỗi nền tảng có thể hoạt động như một trình duyệt thực tế.

Cordova / PhoneGap

Các giải pháp như Cordova / PhoneGap thu hẹp khoảng cách (xin lỗi vì cách chơi chữ không mệt mỏi) giữa Ứng dụng web và thiết bị di động. Họ cung cấp các công cụ để đóng gói mã HTML, JavaScript và CSS của nhà phát triển (cũng như mọi tài sản bổ sung như hình ảnh hoặc video) và chuyển đổi chúng thành Ứng dụng di động (có, ứng dụng Android hoặc iOS thực). Các ứng dụng này có WebView riêng để giải thích và chạy mã web gốc, bắt đầu với tập tin index.html.html trong thư mục chính của ứng dụng (thường được gọi là www www). Họ cũng kết nối mã JavaScript với API gốc thông qua các plugin được triển khai một phần bằng JavaScript và một phần bằng ngôn ngữ bản địa.

Vì vậy, hãy làm cho mọi thứ rõ ràng hơn. Ứng dụng lai có thể truy cập API gốc (thay vì API Web), nhưng chúng được kèm theo bởi WebView. Nút có Cordova phải là nút HTML được hiển thị bởi WebView thay vì nút gốc trên thiết bị di động.

Đây là tầng ma thuật cho phép các công ty chuyển Ứng dụng web của họ sang Ứng dụng di động để được vận chuyển bởi các cửa hàng ứng dụng. Vì vậy, bất kỳ khung web được cho phép ở đây.

Ionic

Các khung như Ionic bọc Cordova vào các giải pháp của riêng họ. Với Ionic, bạn không cần sử dụng giao diện dòng lệnh (CLI) của Cordova, vì tất cả các lệnh của nó được bao bọc bởi Ionic CLI.

Gần đây, nhóm Ionic đã quyết định lấy dây cương của toàn bộ ngăn xếp Ứng dụng lai. Vì vậy, họ đã đưa ra một sự thay thế được đề xuất cho Cordova được gọi là Tụ. Tụ điện có hỗ trợ cho các plugin Cordova và cũng có thể được sử dụng bởi một dự án không phải Ionic.

Bạn có thể xem tôi đi qua một mẫu Cordova Hello World trong video thứ năm của loạt bài:

Ưu điểm của ứng dụng lai

  • Chúng thực chất là các ứng dụng web có thể chuyển đến các cửa hàng ứng dụng chính thức
  • Có thể được sử dụng cùng với bất kỳ khung / thư viện JavaScript nào
  • Mã vẫn có thể chia sẻ cao trên các nền tảng
  • Truy cập vào các tính năng gốc (ví dụ: máy ảnh, gia tốc kế, danh sách liên lạc)

Nhược điểm của ứng dụng lai

  • Đấu tranh với các vấn đề về hiệu suất và tiêu thụ bộ nhớ, vì các lượt xem web chịu trách nhiệm hiển thị mọi thứ trên màn hình
  • Phải bắt chước tất cả các thành phần UI gốc trên một chế độ xem web
  • Khó được chấp nhận và xuất bản hơn trên App Store
  • Thường mất nhiều thời gian hơn để có các tính năng gốc có sẵn cho các môi trường này

Web bản địa

Web Native là một tầng tương đối mới và thường bị hiểu lầm. Đó là nơi Ứng dụng web đáp ứng các thành phần gốc. Mặc dù Appcelerator (Axway) Titanium đã xuất hiện từ lâu, nhưng có một số đối thủ cạnh tranh tương đối mới chứng minh rằng đây là một loại ứng dụng di động hoàn toàn riêng biệt.

Ứng dụng gốc web không cần WebView khi chúng nói chuyện trực tiếp với các thành phần gốc khác

Như bạn có thể thấy ở trên, không có chế độ xem web để kết xuất và chạy ứng dụng của bạn. Vậy, JavaScript của bạn được thực thi như thế nào? Nó được biên dịch? Chà, nếu bạn xem xét việc dịch mã (biên dịch từ ngôn ngữ này sang ngôn ngữ khác - ví dụ TypeScript sang JavaScript), gói, thu nhỏ, xáo trộn và mã hóa tất cả cùng nhau như một trình biên dịch, có JavaScript được biên dịch.

Nhưng vấn đề là, điều này không làm cho JavaScript của bạn trở thành thứ gì đó được các hệ điều hành Android hoặc iOS hiểu trực tiếp. Và, về mặt lý thuyết, không có thành phần gốc nào chỉ hoạt động như một công cụ JavaScript mà không có sự phình to của công cụ bố cục HTML.

Chiến lược là vận chuyển các công cụ JavaScript (thường là V8 cho Android và JavaScriptCore cho iOS) cùng với mã của bạn. Mặc dù chúng có dấu chân nhỏ và rất nhanh, nhưng chúng là thứ bên ngoài phải được cung cấp bởi ứng dụng của bạn.

Mặt khác, cách tiếp cận này có xu hướng có hiệu suất UI tốt hơn, vì tất cả các thành phần đều giống nhau (hoặc dựa trên cùng một điều đối với React Native chẳng hạn) như các ứng dụng được sử dụng bởi Ứng dụng gốc.

Ưu điểm của ứng dụng web gốc

  • Tiếp cận cả hai nền tảng với một cơ sở mã duy nhất
  • Hiệu năng gần giống như các ứng dụng gốc, vì chúng cũng xử lý các thành phần UI gốc
  • Tinh chỉnh là cần thiết, nhưng mã vẫn có thể chia sẻ với phát triển web

Nhược điểm của ứng dụng web gốc

  • Ngay cả với một cơ sở mã duy nhất, nhà phát triển phải nhận thức được các thành phần gốc
  • Đường cong học tập tốt hơn so với Ứng dụng lai / web dành cho nhà phát triển web, đặc biệt là khi nói đến bố cục

Phản ứng bản địa

Trong phần 6 của loạt bài, tôi thực hiện một Hello World nhanh chóng trong React Native. Điều này cho thấy, trên Trình kiểm tra bố cục của Android Studio, các thành phần nào được hiển thị trong trình giả lập. Tôi so sánh với các ví dụ trước, đảm bảo rằng không có WebView nào.

Bản địa

Một khuôn khổ tuyệt vời khác mà tôi đặc biệt quan tâm trong hai năm qua (tôi có một khóa học về Udemy về nó - bằng tiếng Bồ Đào Nha), là Bản địa. Nó tương tự như React Native nhưng không bị ràng buộc với thế giới React (mặc dù có một sự tích hợp không chính thức, mặc dù là bản gốc-Preact).

Với Bản gốc, bạn có thể phát triển bằng cách sử dụng vanilla JavaScript, TypeScript, Angular và gần đây hơn là Vue. Tất nhiên bạn có thể sử dụng các khung khác, nhưng đó là những khung được hỗ trợ chính thức. Nhân tiện, nó cũng được ghi nhận khá tốt.

Bản gốc có các công cụ như Bản địa Sidekick và Sân chơi bản địa, cũng như các cấu trúc dự án dựa trên các mẫu có thể được cung cấp bởi cộng đồng. Điều này sẽ giúp bạn trong việc tạo dự án, cung cấp cho bạn khả năng khởi động, triển khai, kiểm tra và chạy trên trình giả lập trên thiết bị đám mây và iPhone ngay cả khi bạn không phát triển bằng máy Mac.

Trong phần thứ bảy của loạt bài, tôi thực hiện Hello World bằng Sidekick cùng với một dự án khác bắt đầu từ CLI và mẫu bản sao WhatsApp tôi tạo cho mục đích học tập.

Điều quan trọng là phải xem Trình kiểm tra bố cục khi ứng dụng của bạn đang chạy trên trình giả lập Android. Với Bản gốc, nó hiển thị các thành phần gốc (một lần nữa, không có WebView) và các phiên bản trực tiếp của các lớp Android phổ biến như TextView. Điều này khác với React Native, có các lớp riêng để bọc các thành phần gốc.

Đó có lẽ là lý do tại sao Nariescript tuyên bố rằng không có sự chậm trễ nào giữa khi một tính năng mới có sẵn trên iOS và Android và khi bạn có thể sử dụng nó trong một dự án Nigencript. Ví dụ, họ đã đăng trên blog của mình một dự án AR vào cùng ngày iOS 11 được phát hành chính thức với API ARKit mới.

Cuối tuần

Một khuôn khổ khác đáng được đề cập trong danh mục này là Weex. Đây là một dự án được phát triển bởi Alibaba và hiện đang được ươm tạo tại Apache Sofware Foundation (ASF). Nó sử dụng các thẻ HTML phổ biến như các lệnh

và CSS bên trong các thẻ