Indhold
- PWA'er vs. indfødte apps: Hvad er forskellen?
- Progressive webapps: Bygning til internettet
- Styrker af PWA'er
- Svagheder ved PWA'er
- Reager indfødt
- Styrker af React Native
- Svagheder ved React Native
- NativeScript
- Styrker af NativeScript
- Svagheder ved NativeScript
Hvilken tilgang skal du tage, når du bygger en app? Skal du tage PWA / webteknologiruten, eller skal du gå native og designe til specifikke platforme? Begge muligheder har deres fordele og ulemper, og i denne artikel koncentrerer vi os om et par af de populære valg, der bruges til at oprette web- og native apps.
PWA'er (Progressive Web Apps), alias webapps, er bygget med populære webteknologier HTML, CSS og JavaScript og fungerer i en webbrowser. (Tjek nogle af de vigtige HTML-tags for at hjælpe med dine builds.) PWA'er er effektivt mobile websteder designet til at ligne en app, og brugen af web-API'er giver dem funktionalitet svarende til en native app.
For flere råd om app-opbygning, se vores indlæg om, hvordan du opretter en app, eller hvis det er et websted, du vil oprette, se disse topwebbygere og webhostingtjenester.
PWA'er vs. indfødte apps: Hvad er forskellen?
Progressive Web Apps har den fordel, at de kan installeres og lever på en enhed uden behov for en appbutik. En del af processen er Web App Manifest, der giver udviklere mulighed for at kontrollere, hvordan en app vises, og hvordan den startes. Webdesignere / frontend-udviklere vil også allerede have det nødvendige sæt til at starte med det samme. Der er ikke behov for at lære et nyt sprog i modsætning til native apps.
Indfødte apps er bygget med et specifikt operativsystem i tankerne - dvs. iOS og Android - og brug en ramme eller et sprog til at opfylde dette formål. iOS-applikationer bruger typisk Xcode eller Swift og Android-apps, JavaScript. Men til denne artikel koncentrerer vi os om et par JavaScript-baserede open source-rammer - React Native og NativeScript - der fungerer for begge platforme.
Fordelene ved native apps er, at de typisk giver bedre funktionalitet, da de gør bedre brug af hardware og software til enheder, er hurtigere og mere lydhøre, og du får kvalitetssikring gennem vurderinger i appbutikker. Men det betyder at skulle lære at bruge en bestemt ramme eller et bestemt bibliotek.
Her ser vi på tre forskellige muligheder - en til web (PWA'er) og to til indfødte (React Native, NativeScript) - til opbygning af en app. Vi gennemgår, hvordan de fungerer, hvad de kan gøre, og ser på deres styrker og svagheder for at hjælpe dig med at beslutte, hvilken mulighed du skal vælge at bygge din app.
Progressive webapps: Bygning til internettet
Styrker af PWA'er
- Apps fungerer også i browseren
- Distribution: browser, virksomhed og appbutikker
- Kan bruge React, Angular, Vue, vanilla eller andre rammer
Svagheder ved PWA'er
- Ingen adgang til hver native API
- Evner og distribution af butikker på iOS og iPadOS er begrænset
- Det er i kontinuerlig udvikling
PWA'er er det nuværende designmønster til at skabe højtydende, offline, installerbare apps, der kun bruger webstakken: HTML, CSS, JavaScript og browsers API'er. Takket være servicearbejderen og webapp-manifestspecifikationerne kan vi nu oprette en førsteklasses appoplevelse efter installation til Android, iOS, iPadOS, Windows, macOS, Chrome OS og Linux.
For at oprette PWA'er kan du bruge enhver arkitektur: fra server-side, vanilje JavaScript, React, Vue, Angular eller andre klient-side rammer. Det kan være en applikation med en enkelt side eller en webapplikation med flere sider, og vi definerer, hvordan vi skal støtte brugere, mens de er offline.
I denne tilgang behøver vi ikke pakke og underskrive ressourcerne i vores app: vi hoster kun filerne på en webserver, og servicearbejderen er ansvarlig for at cache filerne i klienten og servere dem efter installationen. Dette betyder også, at hvis en app skal opdateres, skal du bare ændre filerne på serveren, og servicearbejderens logik er ansvarlig for at opdatere dem på brugernes enheder uden bruger- eller appbutikintervention.
Med hensyn til distribution er browseren den mest almindelige metode. Brugere installerer appen fra browseren ved hjælp af menupunktet Føj til startskærm eller Installer ved at acceptere en invitation til installation eller ved at bruge en brugerdefineret brugerflade til webapp på kompatible platforme. Det er værd at bemærke, at Apple afviser rene PWA'er, der er offentliggjort i App Store, og opfordrer webudviklere til at distribuere det gennem Safari.
Brugergrænsefladen administreres udelukkende af web-runtime, hvilket betyder, at webdesigneren er ansvarlig for at gengive hver kontrol på skærmen. Hvis du bruger en UI-ramme, såsom Ionic, eller et Material Design-bibliotek, efterligner HTML og CSS native grænseflader på Android eller iOS, men det er ikke obligatorisk.Når du udfører PWA'er, er det obligatorisk at anvende webpræstationsteknikker for at bevare en god brugeroplevelse.
Med hensyn til evner har en PWA kun adgang til API'er, der er tilgængelige i browsermotoren på den platform, og den kan ikke udvides med native kode - med undtagelse af PWA-distributioner i App Store. I denne sag er iOS og iPadOS de mere begrænsede platforme til PWA'er, mens Chrome (til Android og desktop OS'er) har mere tilgængelighed og arbejder hårdt på at tilføje enhver mulig API til JavaScript med Fugu-projektet.
- Bedste skyopbevaring: Vælg den rigtige mulighed for dig.
Reager indfødt
Styrker af React Native
- Samme mønstre som med React.js
- Nogle web-API'er er eksponeret
- Web- og desktop support
Svagheder ved React Native
- Kan ikke genbruge web-UI-komponenter
- Den indfødte bro har brug for noget arbejde
- Der er behov for at reagere
React Native er en JavaScript-baseret komponent-ramme med open source, sponsoreret af Facebook, der bruger React-designmønstre samt JavaScript-sprog til at kompilere native apps til iOS, iPadOS og Android fra en kildekode.
Men ingen HTML-elementer accepteres til gengivelse; kun andre oprindelige komponenter er gyldige. Derfor i stedet for at gengive en div> med en p> og en input> element med JSX, vil du gengive en Vis> med en Tekst> og en TextInput>. Til stylingkomponenter bruger du stadig CSS, og layoutet defineres gennem Flexbox.
Brugergrænsefladen gengives ikke i en browsers DOM, men bruger de oprindelige brugergrænsefladesbiblioteker på Android og iOS. Derfor er en Knap> i ReactNative bliver en forekomst af UIButton på iOS og android.widget.Button klasse på Android; der er ingen web-runtime involveret i React Native.
Al JavaScript-kode vil dog blive udført på en JavaScript-virtuel maskine på enheden, så der er ingen JavaScript til ægte native-kodekonvertering, når appen kompileres. Der er et sæt velkendte API'er til webudviklere, såsom Fetch API, WebSockets og browserens timere: setInterval og requestAnimationFrame. Andre evner implementeres på platformen via brugerdefinerede API'er, såsom animationer.
Du kan starte et hurtigt React Native-projekt med to gratis CLI'er: Expo eller den mere avancerede og officielle ReactNative CLI. Hvis du bruger den officielle CLI, har du også brug for Android Studio til at kompilere og teste Android-appen og Xcode for at gøre det samme på iOS og iPadOS, så du får brug for en macOS-computer til den platform.
React Native kompilerer native apps til iOS og Android, hvilket betyder, at distributionen af din app følger de samme regler som andre native apps: app-butikker til offentlige apps, virksomhedsdistribution og alfa / beta-test. Du kan typisk ikke distribuere en app via en browser, selvom React Native for Web og Microsofts React Native for Windows-platforme kan hjælpe.
NativeScript
Styrker af NativeScript
- Gode værktøjer til kodning og test
- Omfattende galleri af apps klar til at lege med
- Alle Android og iOS API'er er eksponeret i JS
Svagheder ved NativeScript
- Lille samfund
- Kan ikke genbruge web-UI-komponenter
- Ingen understøttelse af web, desktop eller React
NativeScript er ikke så kendt som React Native, men det konkurrerer inden for det samme felt: native iOS- og Android-apps fra JavaScript og webrammer. Det giver dig mulighed for at bruge JavaScript eller TypeScript og en XML-brugergrænsefladefil til at oprette native apps. Det understøtter også Angular og Vue lige ud af kassen, så det er en fantastisk løsning for udviklere, der er vant til disse rammer.
Fordelene ved NativeScript er tydeligere, når du bruger Angular eller Vue. For Angular opretter du de samme komponenter, som du er vant til, men bruger XML i stedet for HTML til skabelonen, inklusive alle databindinger. I XML i stedet for en div> med en p> og en img>, placerer du en StackLayout> med en Mærkat> og en Billede> komponent.
CSS og Sass understøttes med lignende stilarter som CSS i browseren. Routing og netværksadministration udføres gennem implementeringer af standard Angular-tjenester. For Vue er det noget lignende; du skriver skabelonen i XML i stedet for at bruge HTML i den samme skabelon> element i din .vue-fil.
NativeScript indeholder en samling af komponenter, der derefter kortlægges til en indbygget Android- eller iOS-kontrol, så når du gengiver en liste eller en vælger, vil den være den oprindelige app ved hjælp af den samme idé som i React Native.
Din JavaScript- eller TypeScript-kode (transpileret) udføres i en virtuel JavaScript-maskine på enheden med en bro til / fra det oprindelige miljø. I denne bro eksponeres hele native API'erne fra Android eller iOS / iPadOS, så på trods af at vi har adgang til API'er på tværs af platforme, kan vi instantiere eller ringe til enhver Java- eller Objective-C-kode fra JavaScript / TypeScript, og NativeScript vil marskalere datatyper.
NativeScript har god understøttelse af værktøj, herunder VS-kode-plugins, CLI, et hot-reload-testsystem og en NativeScript-legepladsapp, så du behøver ikke at installere alle afhængigheder under test, samt flere ekstra tjenester såsom en online legeplads.
Endelig kompilerer NativeScript kun en app til Android og iOS, der kan installeres fra officielle distributionskanaler og appbutikker, hvis du overholder deres regler, virksomhedsdistribution og alfa / beta-test. Der er typisk ingen måde at distribuere apps fra en browser, og der er ingen løsninger til desktop-apps til denne platform.
Denne artikel blev oprindeligt offentliggjort i udgave 325 of net, verdens bedst sælgende magasin til webdesignere og udviklere. Købe udgave 325 eller abonnere til netto.
Deltag i april 2020 med vores lineup af JavaScript-superstjerner på GenerateJS - konferencen, der hjælper dig med at oprette bedre JavaScript. Book nu pågenerateconf.com
