En introduksjon til NativeScript

I denne artikkelen skal vi se på NativeScript, et open source-rammeverk for å bygge mobile apper med JavaScript. På slutten av artikkelen bør du ha en ganske god ide om hva NativeScript er, hvordan det fungerer, og hvilke teknologier det bruker. Bortsett fra det, skal vi også svare på vanlige spørsmål som du kan ha når du utforsker en ny teknologi, for eksempel hvordan den adskiller seg fra alternativer som Cordova og React Native, og hvordan Telerik er involvert i prosjektet.

1. Hva er NativeScript?

NativeScript er et rammeverk for å bygge mobile mobilapplikasjoner på tvers av plattformer. Det lar utviklere bruke XML, CSS og JavaScript til å bygge programmer for Android, IOS, og til og med Windows Universal Platform. I motsetning til Cordova, som bruker WebView til å gjengjøre brukergrensesnittet til appen, bruker NativeScript den opprinnelige plattformens gjengivelsesmotor, noe som betyr at den gir en virkelig opprinnelig brukeropplevelse. 

2. Fordeler

  • Det er gratis og åpen kildekode. Dette betyr at du kan bidra til koden og bruke den uansett, så lenge du ikke bryter med Apache 2.0-lisensen.
  • Det lar deg bygge virkelig innfødte apps for Android og iOS-enheter. Hver av UI-komponentene som NativeScript eksponerer, oversettes til tilhørende innfødte UI-komponenter.
  • Den lar deg få tilgang til innlemmingsplattform-APIer via JavaScript-kode. Du trenger ikke å ha kunnskap om Java eller Objective-C for å kunne bruke API-moduler for innfødte plattformer fordi du kan skrive alt i JavaScript. Dette betyr at hvis du trenger tilgang til en bestemt enhetsfunksjon, kan du bare lære hvordan du får tilgang til innfødte APIer med JavaScript, og du er god til å gå. 
  • Det gir brukerne en opplevelse nærmere innfødte enn de som tilbys av hybrid mobile app-rammer som Cordova. 
  • Det lar utviklere enkelt bygge, distribuere og administrere sine NativeScript-apper via Telerik-plattformen. Jeg vil diskutere Telerik-plattformen mer i en senere del.
  • Den har null dagers støtte til nye innfødte plattformer. Dette betyr at du umiddelbart kan bruke de nyeste innfødte APIene og UI-komponentene når Google eller Apple oppdaterer plattformen.
  • Dokumentasjonen gir mye informasjon om hvordan du kommer i gang, kjernekonsepter og brukergrensesnittet. Det er også eksempler, opplæringsprogrammer, et forum, Stack Overflow-spørsmål og eksempler på programmer som kan hjelpe nybegynnere til å komme i gang med NativeScript. 
  • Du kan skrive dine NativeScript-apper med TypeScript. TypeScript er et språk som transpilerer til JavaScript og legger til objektorientert programmeringsfunksjonalitet til JavaScript.
  • Et hvilket som helst JavaScript-bibliotek som du finner på npm som ikke stole på nettleseren, og DOM kan brukes i NativeScript. Eksempler på slike biblioteker inkluderer verktøybiblioteker som loddrett og understreking. 
  • Du kan gjøre nesten alt med NativeScript CLI. Grunnleggende, for eksempel å opprette et nytt prosjekt, legge til en plattform, kjøre på en enhet og distribuere til en bestemt plattform, er alt inkludert. Bortsett fra det, kan du også installere plugins, feilsøke appen og laste opp til appbutikken.

3. Cons

  • Det er ingen HTML og DOM i NativeScript. Du må lære å bruke de ulike brukergrensesnittkomponentene for å kunne bygge brukergrensesnittet til appen. 
  • Verifiserte plugins mangler. Når du skriver denne artikkelen, er det bare 16 verifiserte pluginer totalt. Selv om det er mange NativeScript-plugins som er oppført på npm, kan du aldri være sikker på kvaliteten. 
  • Utviklere trenger å kjenne de innfødte Android- og IOS-APIene for å få tilgang til maskinvareenheten og andre plattformsspesifikke funksjoner.
  • På grunn av sin naturlige natur kan du bare teste programmer på en faktisk enhet eller en emulator. Dette gjør det første oppsettet til testing tregere. Men når du får det til å kjøre på enheten, tar det en god opplasting. Dette betyr at hver gang du gjør en endring til kildekoden, lastes den umiddelbart opp appen for å gjenspeile endringene.
  • Ikke alle brukergrensesnittkomponenter er tilgjengelige gratis. Du må kjøpe Telerik brukergrensesnitt for NativeScript hvis du vil bruke komponenter som diagrammer og kalendere.

4. Hvordan virker det?

NativeScript består av en virtuell JavaScript-maskin, en runtime og en bromodul. JavaScript-virtuell maskin tolker og utfører JavaScript-kode. Deretter oversetter bromodulen anropene til de plattformspesifikke API-anropene og returnerer resultatet til den som ringer. For å si det enkelt, gir NativeScript utviklere muligheten til å kommandere den innfødte plattformen gjennom JavaScript i stedet for Objective-C på IOS eller Java på Android.

Selvfølgelig går det mye mer bak scenene, men utviklerne på Telerik forklarer det bedre enn jeg kan, så hvis du vil lære mer om NativeScript's indre arbeid, kan du lese artikkelen av Georgi Atanasov på NativeScript - en teknisk oversikt eller TJ VanTolls artikkel om hvordan NativeScript fungerer.

5. Hvilke teknologier bruker den?

Med NativeScript bruker du XML til å beskrive brukergrensesnittet til appen, CSS for styling og JavaScript for å legge til funksjonalitet. 

Du kan bruke TypeScript med Angular 2 hvis du foretrekker å bruke et rammeverk for å forklare JavaScript-koden. 

For styling bruker NativeScript bare en delmengde av CSS. Dette betyr at ikke alle CSS-funksjoner som er tilgjengelige i et nettlesermiljø, kan brukes. For eksempel kan du ikke bruke flyter eller posisjonsattributter. Her er en fullstendig liste over støttede CSS-egenskaper. På samme måte som i nettleseren, kan du legge til stiler som gjelder for hele appen, til bestemte sider, eller kun til en bestemt brukergrensesnitt. Hvis du foretrekker å bruke Sass, kan du installere NativeScript Dev Sass plugin.

For å beskrive strukturen til brukergrensesnittet bruker du XML. Hver side i appen skal være i sin egen XML-fil. NativeScript kommer med forhåndsdefinerte brukergrensesnitt widgets eller komponenter som du kan bruke til å bygge brukergrensesnittet til appen. Noen av disse komponentene ligner de forskjellige HTML-elementene du bruker i nettleseren. 

For eksempel er det en Bilde komponent, som er ekvivalent av img element eller Tekstfelt komponent, som tilsvarer inngang element med en type tekst. Hendelsehåndterere som å trykke på en knapp legges til i selve komponenten. Her er et eksempel:

export.doSomething = funksjon () // gjør noe

En annen ting å merke seg er at komponentene også fungerer som maler. Hvis du er kjent med templerende biblioteker som håndterker eller mustasjer, bør du være hjemme med følgende syntaks:

     

Eksemplet ovenfor bruker Listevisning komponent. Som navnet antyder, lar denne komponenten deg lage lister. dyr er en array definert i JavaScript-filen og er bundet til dyr variabel på sidebelastning. Dette gjør dyr variabel tilgjengelig for bruk i XML-filen.

var dyr = ['panda', 'tiger', 'ape', 'slange', 'mantis']; funksjonssideLadet (args) var side = args.object; page.bindingContext = dyr: dyr

Dette gir ut hvert element i arrayet inne i Listevisning.

Til slutt er det plugins som gir deg tilgang til maskinvare- og plattformspesifikke funksjoner for enheten. NativeScript leveres med et forhåndsinstallert kamera plugin. Dette lar deg få tilgang til kameraet på enheten og ta bilder. Du kan deretter lagre den lokale banen til bildet i appen din for senere bruk. Platformspesifikke funksjoner som sosial deling kan også brukes ved å installere plugins, for eksempel NativeScript Social Share Plugin.

6. Hvilke apper kan du bygge?

På grunn av native NativeScript-karakter, kan du bygge nesten alle slags apper med den. Her er noen eksempler på programmer du kan bygge med NativeScript:

  • Apper som snakker til serveren, for eksempel nyhetsprogrammer og sosiale nettverksprogrammer.
  • Enkle spill som sjakk, tic-tac-toe eller pinball.
  • Realtidsprogrammer som chat-apper eller live-feeder. Det er et Firebase-plugin for NativeScript som du kan bruke til å implementere sanntidsprogrammer.
  • Musikk og video streaming apps. Det er en videospiller-plugin som lar deg spille av videoer som er lagret lokalt eller streame eksterne videoer, som de på YouTube.
  • Kart og geolocation-apper. Det er plugins for Google Maps og innfødte kart-APIer.
  • Apper som får tilgang til maskinvaren til enheten. Eksempler er kamera apps og IoT apps.

Når det gjelder typer apper som du kan bygge med NativeScript, er de eneste begrensende faktorene ytelse og plugin tilgjengelighet. Skrive innfødte mobilapper i JavaScript kommer med en pris: du kan egentlig ikke forvente å bygge programmer som krever høy ytelse. Eksempler er spill med komplisert grafikk og animasjoner, apper med mange bevegelige deler og bakgrunnsprosesser. 

En annen begrensning er plugin tilgjengelighet. De fleste utviklere kommer til NativeScript fra en webutviklingsbakgrunn. Dette betyr at de fleste av dem ikke er kjent med eller har begrenset kjennskap til API-modulene for innfødte plattformer som kan brukes til å lage plugins for å få tilgang til maskinvareenheten eller plattformspesifikke funksjoner som kontakter eller meldinger.

Hvis du vil lære mer om hvilke typer apper du kan bygge med NativeScript, kan du sjekke ut siden App Showcases. De fleste appene som er oppført der, er publisert på både Google Play Butikk og Apple Store. Dette betyr at du kan installere det og kjøre det på enheten for å få en følelse av hvilke apps som er bygget med NativeScript, og hvordan de utfører.

7. Hvordan virker NativeScript sammenlignet med hybridrammer?

Hvis du ikke er ny til hybrid mobilapputvikling, har du kanskje kommet over rammebetingelser som Cordova og React Native. NativeScript er relatert til disse to rammene fordi de begge har som mål å løse problemet med "Skriv en gang, kjør overalt" innen utvikling av mobilapp. La oss nå se på hvert rammeverk side om side:


Cordova Reager Native NativeScript
skaperen Nitobi; Senere kjøpt av Adobe Systems Facebook Telerik
UI HTML UI-komponenter blir oversatt til sine innfødte kolleger UI-komponenter blir oversatt til sine innfødte kolleger
Kan teste på Nettleser, emulator, enhet Emulator, enhet Emulator, enhet
Kode med HTML, CSS, JavaScript UI-komponenter, JavaScript, delmengde av CSS UI-komponenter, delmengde av CSS, JavaScript
Native funksjonalitet tilgang Gjennom plugins Innfødte moduler Native API-tilgang via JavaScript
Deploys til Android, iOS, Ubuntu, Windows, OS X, Blackberry 10 Android og iOS. Windows Universal og Samsung Tizen kommer snart Android og iOS. Windows Universal kommer snart
JavaScript-bibliotek og rammeverk Ethvert front-end-bibliotek eller rammeverk (for eksempel Angular, Ember) Eventuelt bibliotek som ikke er avhengig av nettleseren Eventuelt bibliotek som ikke er avhengig av nettleseren
Kodemønster En hvilken som helst front-end ramme kan brukes til å strukturere koden UI-oppgraderingen, JavaScript og CSS er alle klumpet sammen i en enkelt fil som standard
MVVM / MVC mønster
Hvordan JavaScript-kode er utført WebView JavaScriptCore Engine for å utføre appkode på både Android og iOS
Webkit JavaScriptCore-motor for å utføre appkoden på iOS og Googles V8 JavaScript-motor på Android

For å oppsummere er Cordova den gamle generasjonen av hybrid mobile app-rammer. Den bruker WebView til å gjengi brukergrensesnittet til appen og får tilgang til innfødte enhetskapasiteter ved hjelp av plugins. React Native og NativeScript er den nye generasjonen fordi de oversetter JavaScript-koden slik at den kan utføres av den innfødte plattformen.

Noen kan komme med et bedre navn for rammer som React Native og NativeScript i fremtiden. Men for nå la oss klassifisere dem som "Native Hybrid Frameworks" fordi de begge bruker JavaScript for authoring apps, og de tilbyr begge opprinnelig opplevelsen og ytelsen til brukerne.

8. Hvordan er Telerik involvert i prosjektet?

Telerik er selskapet som opprettet NativeScript. Og, akkurat som alle andre selskaper, må de tjene penger for å overleve. Så du kan spørre, om NativeScript er gratis og åpen kildekode, hvordan tjener Telerik penger fra det? Vel, svaret er gjennom Telerik-plattformen og Telerik-brukergrensesnittet for NativeScript. 

Telerik-plattformen gir utviklere verktøyene de trenger for å enkelt designe, bygge, teste, distribuere, administrere og måle ytelsen til NativeScript-apper. Her er noen eksempler på verktøyene de tilbyr:

  • en visuell appbygger som lar deg dra og slippe forskjellige UI-komponenter
  • en sky-database som gir databasen til appen din
  • Live app oppdateringer for å enkelt skyve oppdateringer til appen uten å måtte sende den inn på app-butikken, og at brukeren oppdaterer appen manuelt.
  • en analysetjeneste som svarer på spørsmål som hvordan appen din blir brukt, hvordan den utfører, og hva brukerne tenker på det

Telerik brukergrensesnitt for NativeScript er et sett med komponenter for å bygge brukergrensesnittet til appen. NativeScript leveres allerede med gratis UI-komponenter, men det er også betalt UI-komponenter som diagram og kalender som du bare kan bruke når du kjøper den fra Telerik.

9. Neste trinn

Hvis du vil lære mer om NativeScript, anbefaler jeg at du sjekker ut følgende ressurser:

  • Hvis du fortsatt har spørsmål angående NativeScript, må du sjekke ut FAQ-siden.
  • For en praktisk artikkel om å bygge en hallo verden app med NativeScript, sjekk ut Komme i gang med NativeScript.
  • Hvis du vil ha en samling av artikler, videoopplæringer og kodestykker om NativeScript, er det NativeScript Snacks og NativeScript Resources.

Konklusjon

I denne artikkelen har du lært veldig grunnleggende om NativeScript. Som du har sett, er NativeScript et godt alternativ for å bygge mobile apps ved hjelp av ferdighetene du allerede har som webutvikler. Jeg håper denne artikkelen har gitt deg den nødvendige kunnskapen for å hjelpe deg med å avgjøre om NativeScript er riktig for deg.