Een inleiding tot NativeScript

In dit artikel gaan we kijken naar NativeScript, een open-source framework voor het bouwen van mobiele apps met JavaScript. Aan het einde van het artikel zou u een redelijk goed idee moeten hebben van wat NativeScript is, hoe het werkt en welke technologieën het gebruikt. Afgezien daarvan gaan we ook veelgestelde vragen beantwoorden die u mogelijk heeft bij het verkennen van een nieuwe technologie, zoals hoe deze verschilt van alternatieven zoals Cordova en React Native en hoe Telerik bij het project is betrokken.

1. Wat is NativeScript?

NativeScript is een raamwerk voor het bouwen van native mobiele mobiele apps op verschillende platforms. Hiermee kunnen ontwikkelaars XML, CSS en JavaScript gebruiken om apps voor Android, iOS en zelfs het Windows Universal Platform te bouwen. In tegenstelling tot Cordova, dat WebView gebruikt voor het weergeven van de gebruikersinterface van de app, maakt NativeScript gebruik van de rendering-engine van het native platform, wat betekent dat het een echte native-gebruikerservaring biedt. 

2. Pros

• Het is gratis en open source. Dit betekent dat u aan de code kunt bijdragen en deze kunt gebruiken zoals u wilt, zolang u de Apache 2.0-licentie niet schendt.
• Hiermee kunt u echte native apps voor Android- en iOS-apparaten bouwen. Elk van de UI-componenten die NativeScript blootlegt, wordt vertaald naar de overeenkomstige native UI-componenten.
• Hiermee hebt u via JavaScript-code toegang tot native platform-API's. U hoeft geen kennis van Java of Objective-C te hebben om native platform-API's te gebruiken, omdat u dit allemaal in JavaScript kunt schrijven. Dit betekent dat als u toegang wilt hebben tot een specifieke apparaatfunctie, u gewoon kunt leren hoe u met JavaScript native API's kunt openen en dat u klaar bent om te gaan. 
• Het geeft gebruikers een ervaring die dichter bij de moedertaal ligt dan die van hybride mobiele app-frameworks zoals Cordova. 
• Hiermee kunnen ontwikkelaars hun NativeScript-apps eenvoudig bouwen, implementeren en beheren via het Telerik-platform. Ik zal het Telerik-platform meer in een later hoofdstuk bespreken.
• Het heeft zero-day-ondersteuning voor nieuwe native platforms. Dit betekent dat u onmiddellijk de nieuwste native API's en UI-componenten kunt gebruiken wanneer Google of Apple hun platform updaten.
• De documentatie biedt veel informatie over hoe u aan de slag kunt gaan, kernconcepten en de gebruikersinterface. Er zijn ook voorbeelden, tutorials, een forum, Stack Overflow-vragen en voorbeeld-apps waarmee beginners kunnen beginnen met NativeScript. 
• U kunt uw NativeScript-apps schrijven met TypeScript. TypeScript is een taal die overgaat naar JavaScript en objectgeoriënteerde programmeermogelijkheden toevoegt aan JavaScript.
• Elke JavaScript-bibliotheek die u op npm kunt vinden die niet afhankelijk is van de browser en de DOM, kan worden gebruikt binnen NativeScript. Voorbeelden van dergelijke bibliotheken omvatten utiliteitsbibliotheken zoals lodash en underscore. 
• U kunt bijna alles doen met de NativeScript CLI. Basics zoals het maken van een nieuw project, het toevoegen van een platform, het draaien op een apparaat en het inzetten op een specifiek platform zijn allemaal inbegrepen. Afgezien daarvan kun je ook plug-ins installeren, de app debuggen en uploaden naar de app store.

3. Nadelen

• Er is geen HTML en DOM in NativeScript. U moet leren hoe u de verschillende UI-componenten gebruikt om de gebruikersinterface van de app te bouwen. 
• Geverifieerde plug-ins ontbreken. Op het moment van schrijven van dit artikel zijn er in totaal slechts 16 geverifieerde plug-ins. Hoewel er veel NativeScript-plug-ins worden vermeld op npm, kun je nooit echt zeker zijn van hun kwaliteit. 
• Ontwikkelaars moeten de native Android- en iOS-API's kennen om toegang te krijgen tot de apparaathardware en andere platformspecifieke functies.
• Vanwege het native karakter kunt u alleen apps testen op een daadwerkelijk apparaat of een emulator. Dit maakt de initiële setup voor testen langzamer. Maar zodra u het op het apparaat laat draaien, neemt hot-reloading het over. Dit betekent dat elke keer dat u een wijziging aanbrengt in de broncode, deze de app onmiddellijk opnieuw laadt om de wijzigingen weer te geven.
• Niet alle UI-componenten zijn gratis beschikbaar. U moet Telerik-gebruikersinterface voor NativeScript aanschaffen als u componenten zoals diagrammen en agenda's wilt gebruiken.

4. Hoe werkt het??

NativeScript bestaat uit een JavaScript-virtuele machine, een runtime en een brugmodule. De JavaScript-virtuele machine interpreteert en voert JavaScript-code uit. Vervolgens vertaalt de brugmodule de oproepen naar platform-specifieke API-aanroepen en retourneert het resultaat aan de beller. Om het simpel te zeggen: NativeScript biedt ontwikkelaars een manier om het native platform via JavaScript te beheren in plaats van Objective-C op iOS of Java op Android.

Natuurlijk is er achter de schermen veel meer aan de hand, maar de ontwikkelaars van Telerik leggen het beter uit dan ik kan, dus als je meer wilt weten over de innerlijke werking van NativeScript, kun je het artikel van Georgi Atanasov op NativeScript lezen - een technisch overzicht of het artikel van TJ VanToll over hoe NativeScript werkt.

5. Welke technologieën gebruikt het??

Met NativeScript gebruikt u XML om de gebruikersinterface van de app, CSS voor styling en JavaScript voor het toevoegen van functionaliteit te beschrijven. 

U kunt TypeScript gebruiken met Angular 2 als u de voorkeur geeft aan een framework voor het schrijven van uw JavaScript-code. 

Voor styling gebruikt NativeScript alleen een subset CSS. Dit betekent dat niet alle CSS-functies die beschikbaar zijn in een browseromgeving kunnen worden gebruikt. U kunt bijvoorbeeld geen zwevende elementen of positiekenmerken gebruiken. Hier is de volledige lijst met ondersteunde CSS-eigenschappen. Net als in de browser kunt u stijlen toevoegen die van toepassing zijn op de hele app, op specifieke pagina's of alleen op een specifieke gebruikersinterfacecomponent. Als u Sass liever gebruikt, kunt u de NativeScript Dev Sass-plug-in installeren.

Voor het beschrijven van de structuur van de gebruikersinterface, gebruikt u XML. Elke pagina in de app moet in een eigen XML-bestand staan. NativeScript wordt geleverd met vooraf gedefinieerde widgets of componenten voor de gebruikersinterface die u kunt gebruiken om de gebruikersinterface van de app te bouwen. Sommige van deze componenten lijken op de verschillende HTML-elementen die u in de browser gebruikt. 

Er is bijvoorbeeld een Beeld component, wat het equivalent is van de img element, of de TextField component, wat gelijk is aan de invoer element met een type tekst. Event-handlers zoals tikken op een knop worden toegevoegd in de component zelf. Hier is een voorbeeld:

exports.doSomething = function () // do something

Een ander ding om op te merken is dat de componenten ook als sjablonen dienen. Als u bekend bent met sjabloonbibliotheken zoals Handlebars of Moustache, zou u thuis moeten zijn met de volgende syntaxis:

Het bovenstaande voorbeeld gebruikt de Lijstweergave component. Zoals de naam al doet vermoeden, kunt u met deze component lijsten maken. dieren is een array gedefinieerd in het JavaScript-bestand en is gebonden aan de dieren variabele bij het laden van de pagina. Dit maakt de dieren variabele beschikbaar voor gebruik in het XML-bestand.

var animals = ['panda', 'tiger', 'monkey', 'snake', 'mantis']; function pageLoaded (args) var page = args.object; page.bindingContext = animals: animals

Dit geeft elk item in de array binnen de Lijstweergave.

Ten slotte zijn er plug-ins waarmee u toegang hebt tot de hardware van het apparaat en platformspecifieke functies. NativeScript wordt geleverd met een camera-plug-in vooraf geïnstalleerd. Hiermee kunt u de camera van het apparaat openen en foto's maken. U kunt vervolgens het lokale pad naar de foto in uw app opslaan voor later gebruik. Platform-specifieke functies zoals social sharing kunnen ook worden gebruikt door plug-ins te installeren, zoals de NativeScript Social Share Plugin.

6. Welke apps kun je bouwen??

Vanwege het native karakter van NativeScript kun je bijna elke soort app ermee bouwen. Hier zijn enkele voorbeelden van apps die u kunt bouwen met NativeScript:

• Apps die met de server praten, zoals nieuws-apps en apps voor sociaal netwerken.
• Eenvoudige spellen zoals schaken, boter of kaas, of flipperkast.
• Real-time apps zoals chat-apps of live feeds. Er is een Firebase-plug-in voor NativeScript die u kunt gebruiken om real-time apps te implementeren.
• Muziek en video streaming-apps. Er is een videospeler-plug-in waarmee u lokaal opgeslagen video's kunt afspelen of externe video's kunt streamen, zoals die op YouTube.
• Kaarten en geolocatie-apps. Er zijn plug-ins voor Google Maps en API's voor native maps.
• Apps die toegang hebben tot de hardware van het apparaat. Voorbeelden zijn camera-apps en IoT-apps.

Als het gaat om de soorten apps die u met NativeScript kunt bouwen, zijn de enige beperkende factoren de beschikbaarheid van prestaties en plug-ins. Het schrijven van native mobiele apps in JavaScript heeft een prijs: je kunt niet echt verwachten dat je apps bouwt die hoge prestaties vereisen. Voorbeelden zijn spellen met complexe grafische afbeeldingen en animaties, apps met veel bewegende delen en achtergrondprocessen. 

Een andere beperking is de beschikbaarheid van plug-ins. De meeste ontwikkelaars komen naar NativeScript vanaf een achtergrond voor webontwikkeling. Dit betekent dat de meeste van hen niet bekend zijn met of weinig kennis hebben van de native platform-API's die kunnen worden gebruikt om plug-ins te maken om toegang te krijgen tot de hardware van het apparaat of platformspecifieke functies zoals contacten of messaging.

Als je meer wilt weten over welke soorten apps je kunt bouwen met NativeScript, kun je de pagina Showcases bekijken. De meeste apps die daar worden vermeld, zijn gepubliceerd in zowel de Google Play Store als de Apple Store. Dit betekent dat je het kunt installeren en op je apparaat kunt uitvoeren om een ​​idee te krijgen van hoe apps die zijn gebouwd met NativeScript eruit zien en hoe ze presteren.

7. Hoe vergelijkt NativeScript met Hybrid Frameworks?

Als u geen ervaring hebt met de ontwikkeling van hybride mobiele apps, bent u misschien kaders tegengekomen, zoals Cordova en React Native. NativeScript is gerelateerd aan deze twee frameworks in die zin dat ze allebei het probleem van "Eenmalig schrijven, overal uitvoeren" op het gebied van ontwikkeling van mobiele apps willen oplossen. Laten we nu elk kader naast elkaar bekijken:

Kortom, Cordova is de oude generatie hybride mobiele app-frameworks. Het maakt gebruik van WebView om de gebruikersinterface van de app te renderen en toegang te krijgen tot systeemeigen mogelijkheden via plug-ins. React Native en NativeScript zijn de nieuwe generatie omdat ze uw JavaScript-code vertalen zodat deze door het native platform kan worden uitgevoerd.

Iemand kan in de toekomst misschien een betere naam verzinnen voor frameworks als React Native en NativeScript. Maar laten we ze nu classificeren als 'Native Hybrid Frameworks' omdat ze beide JavaScript gebruiken voor het maken van apps en ze bieden allebei native-achtige ervaring en prestaties voor gebruikers.

8. Hoe is Telerik betrokken bij het project?

Telerik is het bedrijf dat NativeScript heeft gemaakt. En, net als elk ander bedrijf, moeten ze geld verdienen om te overleven. U zou dus kunnen vragen, als NativeScript gratis en open source is, hoe verdient Telerik er geld mee? Welnu, het antwoord is via het Telerik-platform en de gebruikersinterface van Telerik voor NativeScript. 

Het Telerik-platform biedt ontwikkelaars de tools die ze nodig hebben om eenvoudig de prestaties van NativeScript-apps te ontwerpen, bouwen, testen, implementeren, beheren en meten. Hier zijn een paar voorbeelden van de tools die ze bieden:

• een visuele app-bouwer waarmee u verschillende UI-componenten kunt slepen en neerzetten
• een clouddatabase die de database voor uw app levert
• live app-updates om eenvoudig updates naar de app te pushen zonder deze opnieuw in de app store te hoeven indienen en de gebruiker de app handmatig te laten bijwerken
• een analysedienst die vragen beantwoordt zoals hoe uw app wordt gebruikt, hoe deze presteert en wat uw gebruikers ervan vinden

De gebruikersinterface van Telerik voor NativeScript is een reeks componenten voor het bouwen van de gebruikersinterface van de app. NativeScript wordt al geleverd met gratis UI-componenten, maar er zijn ook betaalde UI-componenten zoals de grafiek en de agenda die u alleen kunt gebruiken wanneer u deze koopt bij Telerik.

9. Volgende stappen

Als u meer wilt weten over NativeScript, raad ik u aan de volgende bronnen te bekijken:

• Als u nog steeds vragen over NativeScript heeft, moet u de pagina met veelgestelde vragen bekijken.
• Ga voor een praktisch artikel over het bouwen van een hello world-app met NativeScript naar Aan de slag met NativeScript.
• Als u een verzameling artikelen, videozelfstudies en codefragmenten over NativeScript wilt, zijn er NativeScript Snacks en NativeScript-bronnen.

Conclusie

In dit artikel heb je de basisprincipes van NativeScript geleerd. Zoals u hebt gezien, is NativeScript een goede optie om mobiele apps te bouwen met de vaardigheden die u al hebt als webontwikkelaar. Ik hoop dat dit artikel u de nodige kennis heeft gegeven om u te helpen beslissen of NativeScript geschikt voor u is.