NộI Dung
- PWAs so với ứng dụng gốc: Sự khác biệt là gì?
- Ứng dụng web tiến bộ: Xây dựng cho web
- Điểm mạnh của PWA
- Điểm yếu của PWA
- React Native
- Điểm mạnh của React Native
- Điểm yếu của React Native
- NativeScript
- Điểm mạnh của NativeScript
- Điểm yếu của NativeScript
Bạn nên thực hiện cách tiếp cận nào khi xây dựng ứng dụng? Bạn nên tham gia vào lộ trình công nghệ web / PWA hay bạn nên chuyển sang chế độ gốc và thiết kế cho các nền tảng cụ thể? Cả hai tùy chọn đều có ưu và nhược điểm và trong bài viết này, chúng tôi tập trung vào một số lựa chọn phổ biến được sử dụng để tạo web và ứng dụng gốc.
PWA (Ứng dụng web tiến bộ) hay còn gọi là ứng dụng web, được xây dựng bằng các công nghệ web phổ biến HTML, CSS và JavaScript và hoạt động trong trình duyệt web. (Kiểm tra một số thẻ HTML cần thiết để trợ giúp cho các bản dựng của bạn.) PWA là các trang web dành cho thiết bị di động hiệu quả được thiết kế để trông giống như một ứng dụng và việc sử dụng các API web cung cấp cho chúng chức năng tương tự như một ứng dụng gốc.
Để được tư vấn thêm về cách xây dựng ứng dụng, hãy xem bài đăng của chúng tôi về cách tạo ứng dụng hoặc nếu đó là trang web bạn muốn tạo, hãy xem các nhà tạo trang web hàng đầu này và các dịch vụ lưu trữ web.
PWAs so với ứng dụng gốc: Sự khác biệt là gì?
Ứng dụng web tiến bộ có lợi thế là có thể cài đặt và hoạt động trên thiết bị mà không cần cửa hàng ứng dụng. Và, một phần của quy trình là Tệp kê khai ứng dụng web cho phép nhà phát triển kiểm soát cách ứng dụng xuất hiện và cách khởi chạy ứng dụng. Ngoài ra, các nhà thiết kế web / nhà phát triển giao diện người dùng sẽ có bộ kỹ năng cần thiết để bắt đầu xây dựng ngay lập tức. Không cần phải học một ngôn ngữ mới, không giống như các ứng dụng bản địa.
Ứng dụng gốc được xây dựng với một hệ điều hành cụ thể - tức là. iOS và Android - và sử dụng khung hoặc ngôn ngữ để thực hiện mục đích đó. Các ứng dụng iOS thường sử dụng Xcode hoặc Swift và các ứng dụng Android, JavaScript. Tuy nhiên, đối với bài viết này, chúng tôi tập trung vào một số khung công tác mã nguồn mở dựa trên JavaScript - React Native và NativeScript - hoạt động cho cả hai nền tảng.
Ưu điểm của ứng dụng gốc là chúng thường mang lại chức năng tốt hơn vì chúng sử dụng tốt hơn phần cứng và phần mềm của thiết bị, nhanh hơn và phản hồi nhanh hơn và bạn nhận được sự đảm bảo về chất lượng thông qua xếp hạng trong các cửa hàng ứng dụng. Tuy nhiên, nó sẽ có nghĩa là phải học cách sử dụng một khuôn khổ hoặc thư viện cụ thể.
Ở đây chúng tôi xem xét ba tùy chọn khác nhau - một cho web (PWA) và hai cho bản địa (React Native, NativeScript) - để xây dựng một ứng dụng. Chúng tôi xem xét cách họ hoạt động, những gì họ có thể làm và xem xét điểm mạnh và điểm yếu của họ để giúp bạn quyết định tùy chọn nào bạn nên chọn để xây dựng ứng dụng của mình.
Ứng dụng web tiến bộ: Xây dựng cho web
Điểm mạnh của PWA
- Các ứng dụng cũng hoạt động trong trình duyệt
- Phân phối: trình duyệt, doanh nghiệp và cửa hàng ứng dụng
- Có thể sử dụng React, Angular, Vue, vanilla hoặc các khung công tác khác
Điểm yếu của PWA
- Không có quyền truy cập vào mọi API gốc
- Khả năng và phân phối cửa hàng trên iOS và iPadOS bị hạn chế
- Nó đang trong quá trình phát triển liên tục
PWA là mẫu thiết kế hiện tại để tạo các ứng dụng có hiệu suất cao, ngoại tuyến, có thể cài đặt chỉ bằng cách sử dụng ngăn xếp web: HTML, CSS, JavaScript và API của trình duyệt. Nhờ có service worker và thông số kỹ thuật của tệp kê khai ứng dụng web, giờ đây chúng tôi có thể tạo trải nghiệm ứng dụng hạng nhất sau khi cài đặt cho Android, iOS, iPadOS, Windows, macOS, Chrome OS và Linux.
Để tạo PWA, bạn có thể sử dụng bất kỳ kiến trúc nào: từ phía máy chủ, JavaScript vani, React, Vue, Angular hoặc các khuôn khổ phía máy khách khác. Nó có thể là một ứng dụng một trang hoặc một ứng dụng web nhiều trang và chúng tôi xác định cách chúng tôi sẽ hỗ trợ người dùng khi ngoại tuyến.
Theo cách tiếp cận này, chúng tôi không cần phải đóng gói và ký các tài nguyên của ứng dụng của mình: chúng tôi chỉ lưu trữ các tệp trong một máy chủ web và nhân viên dịch vụ sẽ chịu trách nhiệm lưu trữ các tệp trong máy khách và phục vụ chúng sau khi cài đặt. Điều này cũng có nghĩa là nếu một ứng dụng cần cập nhật, bạn chỉ cần thay đổi các tệp trên máy chủ và logic của nhân viên dịch vụ sẽ chịu trách nhiệm cập nhật chúng trên thiết bị của người dùng mà không có sự can thiệp của người dùng hoặc cửa hàng ứng dụng.
Về phân phối, phương pháp phổ biến nhất là trình duyệt. Người dùng cài đặt ứng dụng từ trình duyệt bằng cách sử dụng mục menu Thêm vào Màn hình chính hoặc Cài đặt, bằng cách chấp nhận lời mời cài đặt hoặc bằng cách sử dụng giao diện người dùng ứng dụng web tùy chỉnh trên các nền tảng tương thích. Điều đáng chú ý là Apple từ chối các PWA thuần túy được xuất bản trong App Store và khuyến khích các nhà phát triển web phân phối nó thông qua Safari.
Giao diện người dùng hoàn toàn được quản lý bởi thời gian chạy web, có nghĩa là nhà thiết kế web chịu trách nhiệm hiển thị từng điều khiển trên màn hình. Nếu bạn sử dụng khung giao diện người dùng, chẳng hạn như Ionic hoặc thư viện Material Design, HTML và CSS sẽ bắt chước các giao diện gốc trên Android hoặc iOS nhưng không bắt buộc.Khi thực hiện PWA, việc áp dụng các kỹ thuật hiệu suất web là bắt buộc để duy trì trải nghiệm người dùng tốt.
Về khả năng, PWA sẽ chỉ có quyền truy cập vào các API có sẵn trong công cụ trình duyệt trên nền tảng đó và nó không thể được mở rộng bằng mã gốc - ngoại trừ các bản phân phối PWA trên cửa hàng ứng dụng. Về vấn đề này, iOS và iPadOS là những nền tảng hạn chế hơn đối với PWA, trong khi Chrome (dành cho hệ điều hành Android và máy tính để bàn) có nhiều tính khả dụng hơn và đang nỗ lực để thêm mọi API có thể vào JavaScript với dự án Fugu.
- Lưu trữ đám mây tốt nhất: Chọn tùy chọn phù hợp với bạn.
React Native
Điểm mạnh của React Native
- Các mẫu tương tự như với React.js
- Một số API web được tiết lộ
- Hỗ trợ web và máy tính để bàn
Điểm yếu của React Native
- Không thể sử dụng lại các thành phần giao diện người dùng web
- Cầu bản địa cần một số công việc
- Kinh nghiệm phản ứng là cần thiết
React Native là một khung thành phần dựa trên JavaScript mã nguồn mở, được tài trợ bởi Facebook, sử dụng các mẫu thiết kế React, cũng như ngôn ngữ JavaScript để biên dịch các ứng dụng gốc cho iOS, iPadOS và Android từ một mã nguồn.
Nhưng không có phần tử HTML nào được chấp nhận để hiển thị; chỉ các thành phần gốc khác mới hợp lệ. Do đó, thay vì hiển thị div> với một p> và một đầu vào> với JSX, bạn sẽ hiển thị Xem> với một Văn bản> và một TextInput>. Đối với các thành phần tạo kiểu, bạn vẫn sử dụng CSS và bố cục được xác định thông qua Flexbox.
Giao diện người dùng sẽ không được hiển thị trong DOM của trình duyệt mà sử dụng các thư viện giao diện người dùng gốc trên Android và iOS. Do đó, một Nút> trong ReactNative sẽ trở thành một phiên bản của UIButton trên iOS và android.widget.Button lớp học trên Android; không có thời gian chạy web liên quan đến React Native.
Tuy nhiên, tất cả mã JavaScript sẽ được thực thi trong máy ảo JavaScript trên thiết bị, vì vậy không có chuyển đổi JavaScript thành mã gốc thực khi biên dịch ứng dụng. Có một tập hợp các API nổi tiếng dành cho các nhà phát triển web, chẳng hạn như API Tìm nạp, WebSockets và bộ định thời của trình duyệt: setInterval và requestAnimationFrame. Các khả năng khác được triển khai trong nền tảng thông qua các API tùy chỉnh, chẳng hạn như hoạt ảnh.
Bạn có thể bắt đầu một dự án React Native nhanh chóng với hai CLI miễn phí: Expo hoặc ReactNative CLI chính thức và nâng cao hơn. Nếu bạn sử dụng CLI chính thức, bạn cũng cần Android Studio để biên dịch và kiểm tra ứng dụng Android và Xcode để làm điều tương tự trên iOS và iPadOS, vì vậy bạn sẽ cần một máy tính macOS cho nền tảng đó.
React Native biên dịch các ứng dụng gốc cho iOS và Android, có nghĩa là việc phân phối ứng dụng của bạn sẽ tuân theo các quy tắc giống như các ứng dụng gốc khác: cửa hàng ứng dụng dành cho ứng dụng công khai, phân phối dành cho doanh nghiệp và thử nghiệm alpha / beta. Thông thường, bạn không thể phân phối ứng dụng thông qua trình duyệt, mặc dù nền tảng React Native dành cho Web và React Native dành cho Windows của Microsoft có thể trợ giúp.
NativeScript
Điểm mạnh của NativeScript
- Các công cụ tốt để viết mã và kiểm tra
- Thư viện ứng dụng phong phú sẵn sàng để chơi cùng
- Tất cả các API Android và iOS đều được hiển thị trong JS
Điểm yếu của NativeScript
- Cộng đồng nhỏ
- Không thể sử dụng lại các thành phần giao diện người dùng web
- Không hỗ trợ web, máy tính để bàn hoặc React
NativeScript không nổi tiếng như React Native nhưng nó cạnh tranh trong cùng một lĩnh vực: các ứng dụng iOS và Android gốc từ JavaScript và các khuôn khổ web. Nó cho phép bạn sử dụng JavaScript hoặc TypeScript và tệp giao diện người dùng XML để tạo các ứng dụng gốc. Nó cũng hỗ trợ Angular và Vue ngay lập tức, vì vậy nó là một giải pháp tuyệt vời cho các nhà phát triển đã sử dụng các khung công tác này.
Ưu điểm của NativeScript rõ ràng hơn khi bạn sử dụng Angular hoặc Vue. Đối với Angular, bạn tạo các thành phần giống như bạn đã quen nhưng sử dụng XML thay vì HTML cho mẫu, bao gồm tất cả các liên kết dữ liệu. Trong XML, thay vì một div> với một p> và một img>, bạn sẽ đặt một StackLayout> với một Nhãn> và một Hình ảnh> thành phần.
CSS và Sass được hỗ trợ với các kiểu tương tự như CSS trong trình duyệt. Định tuyến và quản lý mạng được thực hiện thông qua việc triển khai các dịch vụ Angular tiêu chuẩn. Đối với Vue, nó là một cái gì đó tương tự; bạn viết mẫu bằng XML thay vì sử dụng HTML trong cùng một mẫu> trong tệp .vue của bạn.
NativeScript bao gồm một tập hợp các thành phần sau đó được ánh xạ tới một điều khiển gốc Android hoặc iOS, vì vậy khi bạn hiển thị một danh sách hoặc một bộ chọn, nó sẽ là ứng dụng gốc, sử dụng cùng một ý tưởng như trong React Native.
Mã JavaScript hoặc TypeScript của bạn (được chuyển đổi) được thực thi trong một máy ảo JavaScript trên thiết bị có cầu nối đến / từ môi trường gốc. Trong cầu nối đó, toàn bộ API gốc từ Android hoặc iOS / iPadOS đều được hiển thị nên mặc dù có quyền truy cập vào API đa nền tảng, chúng tôi có thể khởi tạo hoặc gọi bất kỳ mã Java hoặc Objective-C nào từ JavaScript / TypeScript và NativeScript sẽ điều khiển các loại dữ liệu.
NativeScript có hỗ trợ tuyệt vời cho việc tạo công cụ, bao gồm các plugin mã VS, CLI, hệ thống kiểm tra tải lại nóng và ứng dụng sân chơi NativeScript, vì vậy bạn không cần phải cài đặt tất cả các phụ thuộc trong khi kiểm tra, cũng như một số dịch vụ bổ sung như trực tuyến sân chơi.
Cuối cùng, NativeScript chỉ biên dịch một ứng dụng cho Android và iOS có thể được cài đặt từ các kênh phân phối chính thức và cửa hàng ứng dụng nếu bạn tuân thủ các quy tắc của họ, phân phối doanh nghiệp và thử nghiệm alpha / beta. Thông thường, sẽ không có cách nào để phân phối ứng dụng từ trình duyệt và không có giải pháp nào cho ứng dụng máy tính để bàn cho nền tảng này.
Bài báo này ban đầu được xuất bản trong vấn đề 325 của net, tạp chí bán chạy nhất thế giới dành cho các nhà thiết kế và nhà phát triển web. Mua vấn đề 325 hoặc là đăng ký vào lưới.
Hãy tham gia cùng chúng tôi vào tháng 4 năm 2020 với đội ngũ siêu sao JavaScript của chúng tôi tại GenerateJS - hội nghị giúp bạn xây dựng JavaScript tốt hơn. Đặt ngay tạigenerateconf.com
