Mga PWA vs katutubong app: Alin ang dapat mong piliin?

Nilalaman

• PWAs vs. Native apps: Ano ang pagkakaiba?
• Mga progresibong web app: Pagbubuo para sa web
• Lakas ng PWAs
• Mga kahinaan ng PWAs
• React Native
• Mga Lakas ng React Native
• Mga Kahinaan ng React Native
• NativeScript
• Mga Lakas ng NativeScript
• Mga kahinaan ng NativeScript

Aling diskarte ang dapat mong gawin kapag nagtatayo ng isang app? Dapat mo bang kunin ang ruta ng PWA / mga teknolohiya sa web o dapat kang maging katutubong at disenyo para sa mga tiyak na platform? Ang parehong mga pagpipilian ay may mga kalamangan at kahinaan, at sa artikulong ito nakatuon kami sa ilan sa mga tanyag na pagpipilian na ginamit upang lumikha ng web at katutubong mga app.

Ang mga PWA (Progressive Web Apps) aka mga web app, ay binuo gamit ang mga tanyag na teknolohiya sa web na HTML, CSS at JavaScript at gumagana sa isang web browser. (Suriin ang ilan sa mga mahahalagang tag ng HTML upang makatulong sa iyong mga build.) Ang mga PWA ay mabisang mga mobile website na idinisenyo upang magmukhang isang app, at ang paggamit ng mga web API ay nagbibigay sa kanila ng pag-andar na katulad ng isang katutubong app.

Para sa higit pang payo sa pagbuo ng app, tingnan ang aming post sa kung paano gumawa ng isang app, o kung ito ay isang site na nais mong likhain tingnan ang mga nangungunang tagabuo ng website at mga web hosting service.

PWAs vs. Native apps: Ano ang pagkakaiba?

Ang Progressive Web Apps ay may kalamangan na mai-install at mabuhay sa isang aparato nang hindi nangangailangan ng isang app store. At, bahagi ng proseso ay ang Web App Manifest na nagbibigay-daan sa mga developer na kontrolin kung paano lumilitaw ang isang app at kung paano ito inilunsad. Gayundin, ang mga web designer / front end developer ay magkakaroon na ng skillset na kinakailangan upang simulan agad ang pagbuo. Hindi na kailangang matuto ng bagong wika, hindi katulad ng mga katutubong app.

Ang mga katutubong app ay binuo kasama ang isang tukoy na OS na nasa isip - ibig sabihin. iOS at Android - at gumamit ng isang balangkas o wika upang matupad ang hangaring iyon. Karaniwang gumagamit ang mga application ng iOS ng Xcode o Swift, at Android apps, JavaScript. Ngunit, para sa artikulong ito nakatuon kami sa isang pares ng mga framework na bukas na mapagkukunan na batay sa JavaScript - React Native at NativeScript - na gumagana para sa parehong mga platform.

Ang mga pakinabang ng katutubong apps ay karaniwang nagdadala sila ng mas mahusay na pag-andar habang mas mahusay nilang ginagamit ang isang hardware at software ng mga aparato, mas mabilis at mas madaling tumugon at nakakakuha ka ng katiyakan sa kalidad kahit na ang mga rating sa mga store ng app. Ngunit, nangangahulugan ito na kailangang malaman kung paano gumamit ng isang tukoy na balangkas o silid-aklatan.

Dito tiningnan namin ang tatlong magkakaibang pagpipilian - isa para sa web (PWAs) at dalawa para sa katutubong (React Native, NativeScript) - para sa pagbuo ng isang app. Tumatakbo kami sa kung paano sila gumana, kung ano ang magagawa nila at tingnan ang kanilang mga kalakasan at kahinaan upang matulungan kang magpasya kung aling pagpipilian ang dapat mong piliin na buuin ang iyong app.

Mga progresibong web app: Pagbubuo para sa web

Lakas ng PWAs

• Gumagana din ang mga app sa browser
• Pamamahagi: browser, enterprise at app store
• Maaaring magamit ang React, Angular, Vue, vanilla o iba pang mga balangkas

Mga kahinaan ng PWAs

• Walang access sa bawat katutubong API
• Ang mga kakayahan at pamamahagi ng tindahan sa iOS at iPadOS ay limitado
• Ito ay nasa tuloy-tuloy na ebolusyon

Ang PWAs ay ang kasalukuyang pattern ng disenyo upang lumikha ng mga high-performant, offline, mai-install na mga app gamit lamang ang web stack: HTML, CSS, JavaScript at mga API ng mga browser. Salamat sa service worker at mga manifest ng web app na manifest, makakagawa na kami ng isang karanasan sa app ng unang klase pagkatapos mag-install para sa Android, iOS, iPadOS, Windows, macOS, Chrome OS at Linux.

Upang lumikha ng mga PWA, maaari kang gumamit ng anumang arkitektura: mula sa server-side, vanilla JavaScript, React, Vue, Angular o iba pang mga framework ng panig ng client. Maaari itong isang application na solong pahina o isang multi-page na web application at tinutukoy namin kung paano namin susuportahan ang mga gumagamit habang offline.

Sa pamamaraang ito, hindi namin kailangang i-package at lagdaan ang mga mapagkukunan ng aming app: nagho-host lang kami ng mga file sa isang web server at mananagot ang manggagawa sa serbisyo para sa pag-cache ng mga file sa client at ihatid ang mga ito pagkatapos ng pag-install. Nangangahulugan din ito kung ang isang app ay nangangailangan ng pag-update, babaguhin mo lang ang mga file sa server at mananagot ang lohika ng manggagawa sa serbisyo para sa pag-update sa kanila sa mga aparato ng mga gumagamit nang walang interbensyon ng app o app store.

Sa mga tuntunin ng pamamahagi, ang pinakakaraniwang pamamaraan ay ang browser. Ang mga gumagamit ay nag-install ng app mula sa browser sa pamamagitan ng paggamit ng Idagdag sa Home Screen o Mag-install ng item sa menu, sa pamamagitan ng pagtanggap ng isang paanyaya upang mag-install o sa pamamagitan ng paggamit ng isang pasadyang interface ng gumagamit ng web app sa mga katugmang platform. Napapansin na tinatanggihan ng Apple ang mga purong PWA na na-publish sa App Store at hinihikayat ang mga developer ng web na ipamahagi ito sa pamamagitan ng Safari.

Ang interface ng gumagamit ay pulos pinamamahalaan ng web runtime, na nangangahulugang responsable ang taga-disenyo ng web para sa pagbibigay ng bawat kontrol sa screen. Kung gumagamit ka ng isang framework ng UI, tulad ng Ionic, o isang library ng Disenyo ng Materyal, gagayahin ng HTML at CSS ang mga katutubong interface sa Android o iOS ngunit hindi ito sapilitan.Kapag gumagawa ng PWAs, ang paglalapat ng mga diskarte sa pagganap ng web ay sapilitan upang mapanatili ang mahusay na karanasan ng gumagamit.

Sa mga tuntunin ng mga kakayahan, ang isang PWA ay magkakaroon lamang ng pag-access sa mga API na magagamit sa browser engine sa platform na iyon at hindi ito maaaring pahabain ng katutubong code - maliban sa mga pamamahagi ng PWA ng app store. Sa bagay na ito, ang iOS at iPadOS ay ang mas limitadong mga platform para sa PWA, habang ang Chrome (para sa mga Android at desktop OS) ay may higit na kakayahang magamit at nagsusumikap upang idagdag ang bawat posibleng API sa JavaScript kasama ang proyekto ng Fugu.

• Pinakamahusay na cloud storage: Piliin ang tamang pagpipilian para sa iyo.

React Native

Mga Lakas ng React Native

• Parehong mga pattern tulad ng sa React.js
• Ang ilang mga web API ay nakalantad
• Suporta sa web at desktop

Mga Kahinaan ng React Native

• Hindi magamit muli ang mga bahagi ng web UI
• Ang katutubong tulay ay nangangailangan ng ilang trabaho
• Kailangan ng karanasan sa reaksyon

Ang React Native ay isang balangkas ng sangkap na batay sa JavaScript na naka-sponsor, na na-sponsor ng Facebook, na gumagamit ng mga pattern ng disenyo ng React, pati na rin ang wikang JavaScript upang maipon ang mga katutubong app para sa iOS, iPadOS at Android mula sa isang source code.

Ngunit walang mga sangkap ng HTML ang tinatanggap para sa pag-render; iba pang mga katutubong sangkap ang wasto. Samakatuwid, sa halip na magbigay ng a div> kasama ang a p> at a input> elemento sa JSX, ikaw ay nagbibigay ng isang Tingnan> kasama ang a Text> at a TextInput>. Para sa mga sangkap ng estilo, gumagamit ka pa rin ng CSS at ang layout ay tinukoy sa pamamagitan ng Flexbox.

Ang interface ng gumagamit ay hindi mai-render sa DOM ng isang browser ngunit gumagamit ng mga katutubong library ng interface ng gumagamit sa Android at iOS. Samakatuwid, a Pindutan> sa ReactNative ay magiging isang halimbawa ng UIButton sa iOS at ang android.widget. Button klase sa Android; walang kasamang runtime web sa React Native.

Gayunpaman, ang lahat ng JavaScript code ay naisasagawa sa isang virtual virtual machine na nasa aparato, kaya walang JavaScript sa tunay na conversion ng katutubong code kapag pinagsasama-sama ang app. Mayroong isang hanay ng mga kilalang API para sa mga web developer, tulad ng Fetch API, WebSockets at mga timer ng browser: setInterval at requestAnimationFrame. Ang iba pang mga kakayahan ay na-deploy sa platform sa pamamagitan ng mga pasadyang API, tulad ng mga animasyon.

Maaari kang magsimula ng isang mabilis na React Native na proyekto na may dalawang libreng CLI: Expo o ang mas advanced at opisyal na ReactNative CLI. Kung gagamitin mo ang opisyal na CLI, kailangan mo rin ang Android Studio upang maipon at subukan ang Android app at Xcode upang gawin ang pareho sa iOS at iPadOS, kaya kakailanganin mo ng isang macOS computer para sa platform na iyon.

Ang react Native ay nag-iipon ng mga katutubong app para sa iOS at Android, na nangangahulugang ang pamamahagi ng iyong app ay susundin ang parehong mga patakaran tulad ng iba pang mga katutubong app: mga store ng app para sa mga pampublikong app, pamamahagi ng enterprise at pagsubok sa alpha / beta. Kadalasan, hindi ka makakabahagi ng isang app sa pamamagitan ng isang browser, kahit na makakatulong ang React Native for Web at ang Microsoft React Native for Windows platform.

NativeScript

Mga Lakas ng NativeScript

• Mahusay na tool para sa pag-coding at pagsubok
• Malawak na gallery ng mga app na handa nang makipaglaro
• Ang lahat ng mga Android at iOS API ay nakalantad sa JS

Mga kahinaan ng NativeScript

• Maliit na pamayanan
• Hindi magamit muli ang mga bahagi ng web UI
• Walang suporta sa web, desktop o React

Ang NativeScript ay hindi kilalang React Native ngunit nakikipagkumpitensya sa parehong larangan: katutubong iOS at Android apps mula sa JavaScript at mga balangkas ng web. Hinahayaan ka nitong gumamit ng JavaScript o TypeScript at isang XML user interface file upang lumikha ng mga katutubong app. Sinusuportahan din nito ang Angular at Vue mula mismo sa kahon, kaya't ito ay isang mahusay na solusyon para sa mga tagabuo na dati sa mga balangkas na ito.

Ang mga kalamangan ng NativeScript ay mas malinaw kapag gumamit ka ng Angular o Vue. Para sa Angular, lumikha ka ng parehong mga sangkap na nakasanayan mo ngunit gumagamit ng XML sa halip na HTML para sa template, kasama ang lahat ng mga binding ng data. Sa XML, sa halip na a div> kasama ang a p> at ang img>, ilalagay mo a StackLayout> kasama ang a Label> at ang Larawan> sangkap

Sinusuportahan ang CSS at Sass na may mga katulad na estilo sa CSS sa browser. Ang pagruruta at pamamahala sa network ay ginagawa sa pamamagitan ng pagpapatupad ng karaniwang mga serbisyo ng Angular. Para kay Vue, ito ay isang bagay na katulad; isinusulat mo ang template sa XML sa halip na gumamit ng HTML sa pareho template> elemento sa iyong .vue file.

Nagsasama ang NativeScript ng isang koleksyon ng mga bahagi na pagkatapos ay nai-map sa isang kontrol ng katutubong Android o iOS, kaya kapag nag-render ka ng isang listahan o isang tagapili, ito ay magiging katutubong app, na gumagamit ng parehong ideya tulad ng sa React Native.

Ang iyong JavaScript o TypeScript code (transpiled) ay isinasagawa sa isang on-device na JavaScript virtual machine na may tulay papunta / mula sa katutubong kapaligiran. Sa tulay na iyon, ang buong katutubong mga API mula sa Android o iOS / iPadOS ay nakalantad kaya sa kabila ng pagkakaroon ng pag-access sa mga cross-platform na API, maaari naming maitaguyod o tawagan ang anumang Java o Objective-C code mula sa JavaScript / TypeScript at NativeScript ay maglalagay ng marshal na mga uri ng data.

Ang NativeScript ay may mahusay na suporta para sa tooling, kabilang ang mga plugin ng VS code, ang CLI, isang hot-reload na pagsubok system at isang NativeScript playground app, kaya hindi mo kailangang i-install ang lahat ng mga dependency habang sinusubukan, pati na rin ang maraming mga karagdagang serbisyo tulad ng isang online palaruan.

Sa wakas, nag-iipon lamang ang NativeScript ng isang app para sa Android at iOS na maaaring mai-install mula sa opisyal na mga channel ng pamamahagi at mga app store kung sumunod ka sa kanilang mga patakaran, pamamahagi ng enterprise at pagsubok sa alpha / beta. Karaniwan ay walang paraan upang ipamahagi ang mga app mula sa isang browser at walang mga solusyon para sa mga desktop app para sa platform na ito.

Ang artikulong ito ay orihinal na na-publish sa isyu 325 ng net, ang pinakamahusay na nagbebenta ng magazine sa mundo para sa mga web designer at developer. Bumili isyu 325 o mag-subscribe sa net.

Sumali sa amin sa Abril 2020 kasama ang aming lineup ng mga JavaScript superstar sa GenerateJS - ang pagpupulong na tumutulong sa iyo na bumuo ng mas mahusay na JavaScript. Mag-book ngayon sagenerateconf.com