Innhold
- PWAs vs Native apps: Hva er forskjellen?
- Progressive webapper: Bygg for nettet
- Styrker av PWA
- Svakheter ved PWA
- Reager Native
- Styrker av React Native
- Svakheter ved React Native
- NativeScript
- Styrker av NativeScript
- Svakheter ved NativeScript
Hvilken tilnærming bør du ta når du bygger en app? Bør du ta opp PWA / webteknologiruten, eller bør du gå native og designe for spesifikke plattformer? Begge alternativene har sine fordeler og ulemper, og i denne artikkelen konsentrerer vi oss om noen av de populære valgene som brukes til å lage nett- og native apps.
PWAs (Progressive Web Apps) aka webapper, er bygget med populære webteknologier HTML, CSS og JavaScript og fungerer i en nettleser. (Sjekk ut noen av de viktigste HTML-kodene for å hjelpe deg med byggingen din.) PWAer er effektivt mobile nettsteder designet for å ligne en app, og bruken av web-API-er gir dem funksjonalitet som ligner på en innfødt app.
For mer råd om appbygging, se innlegget vårt om hvordan du lager en app, eller hvis det er et nettsted du vil lage, se disse topp nettstedbyggere og webhotelltjenester.
PWAs vs Native apps: Hva er forskjellen?
Progressive Web Apps har fordelen av å være installerbar og leve på en enhet uten behov for en appbutikk. En del av prosessen er Web App Manifest som lar utviklere kontrollere hvordan en app vises og hvordan den blir lansert. Også webdesignere / frontend-utviklere vil allerede ha den ferdigheten som trengs for å begynne å bygge umiddelbart. Det er ikke nødvendig å lære et nytt språk, i motsetning til innfødte apper.
Innfødte apper er bygget med tanke på et bestemt operativsystem - dvs. iOS og Android - og bruk et rammeverk eller språk for å oppfylle det formålet. iOS-applikasjoner bruker vanligvis Xcode eller Swift, og Android-apper, JavaScript. Men for denne artikkelen konsentrerer vi oss om et par JavaScript-baserte open source-rammer - React Native og NativeScript - som fungerer for begge plattformene.
Fordelene med innfødte apper er at de vanligvis gir bedre funksjonalitet ettersom de bedre bruker maskinvare og programvare for enheter, er raskere og mer responsive, og du får kvalitetssikring gjennom rangeringer i appbutikker. Men det vil bety at du må lære å bruke et bestemt rammeverk eller bibliotek.
Her ser vi på tre forskjellige alternativer - ett for nett (PWAs) og to for native (React Native, NativeScript) - for å bygge en app. Vi går gjennom hvordan de opererer, hva de kan gjøre og ser på styrker og svakheter for å hjelpe deg med å bestemme hvilket alternativ du skal velge å bygge appen din.
Progressive webapper: Bygg for nettet
Styrker av PWA
- Apper fungerer også i nettleseren
- Distribusjon: nettleser, bedrift og appbutikker
- Kan bruke React, Angular, Vue, vanilje eller andre rammer
Svakheter ved PWA
- Ingen tilgang til alle innfødte API-er
- Evner og butikkdistribusjon på iOS og iPadOS er begrenset
- Det er i kontinuerlig evolusjon
PWA-er er det nåværende designmønsteret for å lage apper med høy ytelse, offline, installerbar ved å bruke nettstakken: HTML, CSS, JavaScript og nettlesers API-er. Takket være tjenestearbeideren og spesifikasjonene for webappens manifest, kan vi nå lage en førsteklasses appopplevelse etter installasjon for Android, iOS, iPadOS, Windows, macOS, Chrome OS og Linux.
For å lage PWA-er kan du bruke hvilken som helst arkitektur: fra server-side, vanilje JavaScript, React, Vue, Angular eller andre rammeverk på klientsiden. Det kan være en enkeltsidig applikasjon eller en flersidig webapplikasjon, og vi definerer hvordan vi skal støtte brukere mens de er offline.
I denne tilnærmingen trenger vi ikke å pakke og signere ressursene til appen vår: vi er bare vert for filene på en webserver, og tjenestearbeideren vil være ansvarlig for å cache filene i klienten og servere dem etter installasjonen. Dette betyr også at hvis en app trenger oppdatering, endrer du bare filene på serveren, og servicearbeiderens logikk vil være ansvarlig for å oppdatere dem på brukernes enheter uten bruker- eller appbutikkinnblanding.
Når det gjelder distribusjon, er nettleseren den vanligste metoden. Brukere installerer appen fra nettleseren ved å bruke Legg til på startskjermen eller Installer menyelementet, ved å godta en invitasjon til å installere eller ved å bruke et tilpasset webapp-brukergrensesnitt på kompatible plattformer. Det er verdt å merke seg at Apple avviser rene PWAer som er publisert i App Store og oppfordrer webutviklere til å distribuere det gjennom Safari.
Brukergrensesnittet administreres utelukkende av web-runtime, noe som betyr at webdesigneren er ansvarlig for å gjengi hver kontroll på skjermen. Hvis du bruker et UI-rammeverk, for eksempel Ionic, eller et materialdesignbibliotek, vil HTML og CSS etterligne innebygde grensesnitt på Android eller iOS, men det er ikke obligatorisk.Når du gjør PWAer, er det obligatorisk å bruke webytelse teknikker for å holde en god brukeropplevelse.
Når det gjelder evner, vil en PWA bare ha tilgang til APIer som er tilgjengelige i nettlesermotoren på den plattformen, og den kan ikke utvides med innebygd kode - med unntak av appbutikkens PWA-distribusjoner. I denne saken er iOS og iPadOS de mer begrensede plattformene for PWA-er, mens Chrome (for Android og stasjonære operativsystemer) har mer tilgjengelighet og jobber hardt for å legge til alle mulige API-er til JavaScript med Fugu-prosjektet.
- Beste skylagring: Velg riktig alternativ for deg.
Reager Native
Styrker av React Native
- Samme mønstre som med React.js
- Noen web-API-er er eksponert
- Nett- og skrivebordsstøtte
Svakheter ved React Native
- Kan ikke bruke nettgrensesnittkomponenter på nytt
- Den innfødte broen trenger litt arbeid
- Reagererfaring er nødvendig
React Native er et JavaScript-basert komponent-rammeverk med åpen kildekode, sponset av Facebook, som bruker React-designmønstre, samt JavaScript-språk for å kompilere native apps for iOS, iPadOS og Android fra en kildekode.
Men ingen HTML-elementer godtas for gjengivelse; bare andre innfødte komponenter er gyldige. Derfor, i stedet for å gjengi en div> med en p> og en inngang> element med JSX, vil du gjengi en Vis> med en Tekst> og en TextInput>. For stylingkomponenter bruker du fortsatt CSS, og oppsettet defineres gjennom Flexbox.
Brukergrensesnittet blir ikke gjengitt i nettleserens DOM, men bruker de innebygde brukergrensesnittbibliotekene på Android og iOS. Derfor er en Knapp> i ReactNative blir en forekomst av UIButton på iOS og android.widget.Button klasse på Android; det er ingen webkjøring involvert i React Native.
Imidlertid vil all JavaScript-koden kjøres i en virtuell JavaScript-maskin på enheten, så det er ingen JavaScript til ekte native-kodekonvertering når du kompilerer appen. Det er et sett med kjente API-er for webutviklere, som Fetch API, WebSockets og nettleserens tidtakere: setInterval og requestAnimationFrame. Andre evner distribueres i plattformen gjennom tilpassede APIer, for eksempel animasjoner.
Du kan starte et raskt React Native-prosjekt med to gratis CLI-er: Expo eller den mer avanserte og offisielle ReactNative CLI. Hvis du bruker den offisielle CLI, trenger du også Android Studio for å kompilere og teste Android-appen og Xcode for å gjøre det samme på iOS og iPadOS, så du trenger en macOS-datamaskin for den plattformen.
React Native kompilerer native apps for iOS og Android, noe som betyr at distribusjonen av appen din vil følge de samme reglene som andre native apps: appbutikker for offentlige apper, virksomhetsdistribusjon og alfa / beta-testing. Vanligvis kan du ikke distribuere en app gjennom en nettleser, selv om React Native for Web og Microsofts React Native for Windows-plattformer kan hjelpe.
NativeScript
Styrker av NativeScript
- Gode verktøy for koding og testing
- Omfattende galleri med apper som er klare til å leke med
- Alle API-er for Android og iOS er eksponert i JS
Svakheter ved NativeScript
- Lite samfunn
- Kan ikke bruke nettgrensesnittkomponenter på nytt
- Ingen støtte for nett, skrivebord eller React
NativeScript er ikke like kjent som React Native, men det konkurrerer i samme felt: native iOS- og Android-apper fra JavaScript og webrammer. Det lar deg bruke JavaScript eller TypeScript og en XML-brukergrensesnittfil for å lage opprinnelige apper. Den støtter også Angular og Vue rett ut av esken, så det er en flott løsning for utviklere som er vant til disse rammene.
Fordelene med NativeScript er tydeligere når du bruker Angular eller Vue. For Angular oppretter du de samme komponentene du er vant til, men bruker XML i stedet for HTML for malen, inkludert alle databindinger. I XML, i stedet for a div> med en p> og en img>, vil du plassere en StackLayout> med en Merkelapp> og en Bilde> komponent.
CSS og Sass støttes med lignende stiler som CSS i nettleseren. Ruting og nettverksadministrasjon gjøres gjennom implementeringer av standard Angular-tjenester. For Vue er det noe lignende; du skriver malen i XML i stedet for å bruke HTML i den samme mal> element i .vue-filen.
NativeScript inneholder en samling komponenter som deretter blir kartlagt til en Android- eller iOS-innfødt kontroll, så når du gjengir en liste eller en plukker, vil den være den opprinnelige appen, ved å bruke den samme ideen som i React Native.
JavaScript eller TypeScript-koden (transpilert) kjøres i en virtuell JavaScript-maskin på enheten med en bro til / fra det opprinnelige miljøet. I den broen blir hele native API-ene fra Android eller iOS / iPadOS eksponert, så til tross for at vi har tilgang til API-er på tvers av plattformer, kan vi starte eller ringe hvilken som helst Java- eller Objective-C-kode fra JavaScript / TypeScript, og NativeScript vil samle datatyper.
NativeScript har god støtte for verktøy, inkludert VS-kodeprogrammer, CLI, et testsystem for omlastning og en NativeScript-lekeplass-app, slik at du ikke trenger å installere alle avhengigheter mens du tester, samt flere tilleggstjenester som en online lekeplass.
Til slutt kompilerer NativeScript bare en app for Android og iOS som kan installeres fra offisielle distribusjonskanaler og appbutikker hvis du overholder deres regler, virksomhetsdistribusjon og alfa / beta-testing. Vanligvis vil det ikke være noen måte å distribuere apper fra en nettleser, og det er ingen løsninger for stasjonære apper for denne plattformen.
Denne artikkelen ble opprinnelig publisert i utgave 325 of net, verdens mest solgte magasin for webdesignere og utviklere. Kjøpe utgave 325 eller abonnere til netto.
Bli med oss i april 2020 med vårt utvalg av JavaScript-superstjerner på GenerateJS - konferansen som hjelper deg med å bygge bedre JavaScript. Bestill nå pågenerateconf.com
