O introducere în NativeScript

În acest articol, vom examina NativeScript, un cadru open-source pentru construirea de aplicații mobile cu JavaScript. La sfârșitul articolului, ar trebui să aveți o idee destul de bună despre ceea ce este NativeScript, cum funcționează și ce tehnologii utilizează. În afară de aceasta, vom răspunde, de asemenea, la întrebările frecvente pe care le puteți avea atunci când explorați o nouă tehnologie, cum ar fi cum diferă de alternative precum Cordova și React Native și cum este implicat Telerik în proiect.

1. Ce este NativeScript?

NativeScript este un cadru pentru construirea de aplicații mobile native pe platformă. Acesta permite dezvoltatorilor să utilizeze XML, CSS și JavaScript pentru a construi aplicații pentru Android, iOS și chiar și pentru Windows Universal Platform. Spre deosebire de Cordova, care utilizează WebView pentru redarea interfeței UI a aplicației, NativeScript utilizează motorul de randare al platformei native, ceea ce înseamnă că oferă o experiență cu adevărat nativă a utilizatorului. 

2. Persoane

  • Este gratuit și open source. Aceasta înseamnă că puteți să contribuiți la cod și să îl utilizați oricum doriți, atâta timp cât nu încălcați licența Apache 2.0.
  • Vă permite să construiți aplicații cu adevărat native pentru dispozitive Android și iOS. Fiecare dintre componentele UI pe care NativeScript le expune este tradusă în componentele UI native corespunzătoare.
  • Acesta vă permite să accesați API-urile de platformă nativă prin codul JavaScript. Nu aveți nevoie să aveți cunoștințe despre Java sau despre Obiectiv-C pentru a utiliza API-uri de platformă nativă, deoarece le puteți scrie totul în JavaScript. Aceasta înseamnă că, dacă aveți nevoie să accesați o caracteristică specifică a dispozitivului, puteți să aflați cum să accesați API-urile native cu JavaScript și că sunteți bineveniți. 
  • Oferă utilizatorilor o experiență mai apropiată de cea locală decât cea oferită de cadrele de aplicații mobile hibride precum Cordova. 
  • Acesta permite dezvoltatorilor să construiască, să implementeze și să gestioneze cu ușurință aplicațiile lor NativeScript prin intermediul platformei Telerik. Voi discuta platforma Telerik într-o secțiune ulterioară.
  • Are suport zilnic pentru noi platforme native. Aceasta înseamnă că puteți utiliza imediat cele mai recente componente API native și componente UI ori de câte ori Google sau Apple își actualizează platforma.
  • Documentația oferă o mulțime de informații despre cum să începeți, conceptele de bază și interfața cu utilizatorul. Există, de asemenea, exemple, tutoriale, un forum, întrebări privind stack Overflow și exemple de aplicații care pot ajuta începătorii să înceapă cu NativeScript. 
  • Puteți scrie aplicațiile dvs. NativeScript cu TypeScript. TypeScript este o limbă care transpire în JavaScript și adaugă capabilități de programare orientate pe obiecte către JavaScript.
  • Orice bibliotecă JavaScript pe care o puteți găsi pe npm care nu se bazează pe browser și DOM poate fi utilizată în cadrul NativeScript. Exemple de astfel de biblioteci includ bibliotecile de utilitate cum ar fi lodash și underscore. 
  • Puteți face aproape orice cu CLI-ul NativeScript. Noțiuni de bază, cum ar fi crearea unui nou proiect, adăugarea unei platforme, rularea pe un dispozitiv și implementarea pe o anumită platformă sunt incluse. În afară de aceasta, puteți, de asemenea, să instalați pluginuri, să depanați aplicația și să încărcați în magazinul de aplicații.

3. Cons

  • Nu există HTML și DOM în NativeScript. Va trebui să învățați cum să utilizați diferitele componente UI pentru a construi interfața de utilizare a aplicației. 
  • Nu există pluginuri verificate. La momentul redactării acestui articol, există doar 16 pluginuri verificate în total. Deși există multe pluginuri NativeScript enumerate pe npm, niciodată nu puteți fi siguri de calitatea lor. 
  • Dezvoltatorii trebuie să cunoască API-urile native Android și iOS pentru a accesa hardware-ul dispozitivului și alte caracteristici specifice platformei.
  • Datorită naturii sale natură, puteți testa aplicațiile numai pe un dispozitiv sau pe un emulator real. Aceasta face setarea inițială pentru testarea mai lentă. Dar odată ce o să-l rulați pe dispozitiv, reîncărcarea la cald preia. Aceasta înseamnă că de fiecare dată când modificați codul sursă, acesta reîncarcă imediat aplicația pentru a reflecta modificările.
  • Nu toate componentele UI sunt disponibile gratuit. Trebuie să achiziționați Telerik UI pentru NativeScript dacă doriți să utilizați componente cum ar fi diagrame și calendare.

4. Cum funcționează?

NativeScript este compusă dintr-o mașină virtuală JavaScript, un modul de rulare și un modul de punte. Mașina virtuală JavaScript interpretează și execută codul JavaScript. Apoi modulul de punte traduce apelurile la apelurile API specifice platformei și returnează rezultatul apelantului. Pentru a spune pur și simplu, NativeScript oferă dezvoltatorilor o modalitate de a comanda platforma nativă prin JavaScript în loc de Obiectiv-C pe iOS sau Java pe Android.

Desigur, în spatele scenei se desfășoară mult mai multe, dar dezvoltatorii de la Telerik o explică mai bine decât pot, deci dacă doriți să aflați mai multe despre funcționarea interioară a NativeScript, puteți citi articolul lui Georgi Atanasov pe NativeScript - o prezentare tehnică sau articolul lui TJ VanToll despre modul în care funcția NativeScript funcționează.

5. Ce tehnologii utilizează?

Cu NativeScript, utilizați XML pentru a descrie interfața de utilizare a aplicației, CSS pentru stil și JavaScript pentru a adăuga funcționalități. 

Puteți folosi TipScript cu Angular 2 dacă preferați să utilizați un cadru pentru scrierea codului dvs. JavaScript. 

Pentru stil, NativeScript utilizează doar un subset de CSS. Aceasta înseamnă că nu toate funcțiile CSS disponibile în mediul browserului pot fi utilizate. De exemplu, nu puteți utiliza flotoare sau atribute de poziție. Iată lista completă a proprietăților CSS acceptate. La fel ca în browser, puteți adăuga stiluri care se aplică întregii aplicații, anumitor pagini sau unei componente specifice UI. Dacă preferați să utilizați Sass, puteți instala pluginul NativeScript Dev Sass.

Pentru a descrie structura interfeței cu utilizatorul, folosiți XML. Fiecare pagină din aplicație trebuie să fie în propriul fișier XML. NativeScript vine cu widget-uri sau componente de interfață predefinită pe care le puteți utiliza pentru a construi interfața de utilizare a aplicației. Unele dintre aceste componente sunt similare cu diferitele elemente HTML pe care le utilizați în browser. 

De exemplu, există o Imagine componentă, care este echivalentul img element, sau TextField componentă, care este echivalentă cu intrare element cu un tip de text. Operatorii de evenimente, cum ar fi atingerea unui buton, sunt adăugați în componenta în sine. Iată un exemplu:

exports.doSomething = funcție () // face ceva

Un alt lucru de observat este faptul că componentele servesc, de asemenea, ca șabloane. Dacă sunteți familiarizați cu bibliotecile templating, cum ar fi Handlebars sau Mustache, ar trebui să fiți acasă cu următoarea sintaxă:

     

Exemplul de mai sus utilizează ListView componentă. După cum sugerează și numele, această componentă vă permite să creați liste. animale este o matrice definită în fișierul JavaScript și este legată de animale variabilă la încărcarea paginii. Acest lucru face ca animale variabilă disponibilă pentru utilizare în interiorul fișierului XML.

var animale = ["panda", "tigru", "maimuță", "șarpe", "mantis"]; funcția pageLoaded (args) var page = args.object; page.bindingContext = animale: animale

Aceasta emite fiecare element din matrice din interiorul lui ListView.

În cele din urmă, există pluginuri care vă permit să accesați caracteristicile specifice hardware și ale platformei. NativeScript vine cu un plugin de cameră preinstalat. Aceasta vă permite să accesați camera aparatului și să faceți fotografii. Apoi, puteți salva calea locală la fotografia din aplicație pentru utilizare ulterioară. Funcțiile specifice platformei, cum ar fi partajarea socială, pot fi, de asemenea, utilizate prin instalarea unor plugin-uri, cum ar fi Plugin-ul social Share NativeScript.

6. Ce aplicații puteți construi?

Datorită naturii natale a NativeScript, puteți construi aproape orice fel de aplicație cu ea. Iată câteva exemple de aplicații pe care le puteți construi cu NativeScript:

  • Aplicațiile care vorbesc cu serverul, cum ar fi aplicațiile de știri și aplicațiile de rețele sociale.
  • Jocuri simple cum ar fi șah, tic-tac-toe sau pinball.
  • Aplicații în timp real, cum ar fi aplicații de chat sau feeduri live. Există un plugin Firebase pentru NativeScript pe care îl puteți utiliza pentru implementarea aplicațiilor în timp real.
  • Muzică și aplicații de streaming video. Există un plugin pentru player video care vă permite să redați videoclipuri stocate local sau să redați videoclipuri la distanță cum ar fi cele de pe YouTube.
  • Hărți și aplicații geolocation. Există pluginuri pentru Google Maps și API locale de hartă.
  • Aplicațiile care accesează hardware-ul dispozitivului. Exemplele includ aplicații pentru camere și aplicații IoT.

Când vine vorba de tipurile de aplicații pe care le puteți construi cu NativeScript, singurii factori limitativi sunt performanța și disponibilitatea pluginului. Scrierea aplicațiilor mobile native în JavaScript are un preț: nu vă puteți aștepta să creați aplicații care necesită performanțe ridicate. Exemplele includ jocuri cu grafică complexă și animații, aplicații cu multe părți în mișcare și procese de fundal. 

O altă limitare este disponibilitatea pluginului. Cei mai mulți dezvoltatori vin la NativeScript dintr-un fundal de dezvoltare web. Acest lucru înseamnă că cele mai multe dintre ele nu sunt familiarizați cu sau au cunoștințe despre API-urile platformei native care ar putea fi folosite pentru a crea plugin-uri pentru a accesa hardware-ul dispozitivului sau specifice platformei caracteristici, cum ar fi contacte sau mesaje limitate.

Dacă doriți să aflați mai multe despre tipurile de aplicații pe care le puteți crea cu NativeScript, puteți consulta pagina de prezentări de aplicații. Majoritatea aplicațiilor listate acolo sunt publicate atât în ​​Magazin Google Play cât și în Magazinul Apple. Acest lucru înseamnă că îl puteți instala și îl puteți rula pe dispozitiv pentru a vă simți ce aplicații au construit cu NativeScript și cum funcționează.

7. Cum compară NativeScript cu cadrele hibride?

Dacă nu sunteți nou în dezvoltarea aplicațiilor mobile hibride, s-ar putea să fi întâlnit cadre precum Cordova și React Native. NativeScript este legat de aceste două cadre în sensul că ambele au scopul de a rezolva problema "Scrieți o singură dată, rulați peste tot" în domeniul dezvoltării aplicațiilor mobile. Acum, să aruncăm o privire asupra fiecărui cadru lateral:


Cordova Răspunde Nativ NativeScript
Creator Nitobi; Imediat achiziționat de Adobe Systems Facebook Telerik
UI HTML Elementele UI sunt traduse la omologii lor nativi Elementele UI sunt traduse la omologii lor nativi
Pot testa Browser, emulator, dispozitiv Emulator, dispozitiv Emulator, dispozitiv
Cod cu HTML, CSS, JavaScript Componente UI, JavaScript, subset de CSS UI componente, subset de CSS, JavaScript
Acces la funcționalitate nativă Prin pluginuri Module native Acces API nativ prin JavaScript
Depinde la Android, iOS, Ubuntu, Windows, OS X, Blackberry 10 Android și iOS. Windows Universal și Samsung Tizen vin în curând Android și iOS. Windows Universal vine în curând
Biblioteci JavaScript și cadru Orice bibliotecă sau cadru frontal (de ex. Angular, Ember) Orice bibliotecă care nu depinde de browser Orice bibliotecă care nu depinde de browser
Formatul de codificare Orice cadru frontal poate fi folosit pentru a structura codul Marcajul UI, JavaScript și CSS sunt conjugate împreună într-un singur fișier în mod implicit
Modelul MVVM / MVC
Cum se execută codul JavaScript WebView JavaScriptCore Engine pentru a executa codul de aplicație atât pe Android, cât și pe iOS
Webkit JavaScriptCore motor pentru a executa codul de aplicație pe iOS și motorul Google V8 JavaScript pe Android

Pentru a rezuma, Cordova este vechea generație de cadre de aplicații mobile hibride. Utilizează WebView pentru a reda interfața de utilizare a aplicației și accesează capabilitățile dispozitivului nativ prin intermediul pluginurilor. Reacționați Native și NativeScript sunt noua generație deoarece traduc codul dvs. JavaScript astfel încât să poată fi executat de platforma nativă.

Cineva ar putea să vină cu un nume mai bun pentru cadre ca React Native și NativeScript în viitor. Dar, pentru moment, să le clasificăm ca "Native Hybrid Frameworks", deoarece ambele utilizează JavaScript pentru a crea aplicații și ambele oferă utilizatorilor experiență și performanță asemănătoare nativului.

8. Cum este implicat Telerik în proiect?

Telerik este compania care a creat NativeScript. Și, ca orice altă companie, trebuie să facă bani pentru a supraviețui. Deci, ați putea întreba, dacă NativeScript este gratuit și open source, cum face Telerik să facă bani din ea? Ei bine, răspunsul este prin Platforma Telerik și UI Telerik pentru NativeScript. 

Platforma Telerik furnizează dezvoltatorilor instrumentele de care au nevoie pentru a proiecta, construi, testa, implementa, gestiona și măsura cu ușurință performanțele aplicațiilor NativeScript. Iată câteva exemple de instrumente pe care le oferă:

  • un constructor de aplicații vizual care vă permite să trageți și să plasați componente diferite ale UI
  • o bază de date cloud care furnizează baza de date pentru aplicația dvs.
  • actualizări de aplicații live pentru împingerea ușoară a actualizărilor la aplicație fără a fi nevoie să le retrimiteți în magazinul de aplicații și să îi actualizeze manual aplicația
  • un serviciu de analiză care răspunde la întrebări, cum ar fi modul în care este folosit aplicația, modul în care funcționează și la ce gândesc utilizatorii dvs.

Telerik UI pentru NativeScript este un set de componente pentru construirea interfeței UI a aplicației. NativeScript vine deja cu componente UI gratuite, dar există, de asemenea, componente plătite UI, cum ar fi Chart și Calendar, pe care le puteți utiliza numai atunci când le achiziționați de la Telerik.

9. Pașii următori

Dacă doriți să aflați mai multe despre NativeScript, vă recomandăm să verificați următoarele resurse:

  • Dacă aveți în continuare întrebări referitoare la NativeScript, asigurați-vă că ați verificat pagina cu întrebări frecvente.
  • Pentru un articol hands-on despre construirea unei aplicații de salut lume cu NativeScript, consultați Noțiuni de bază cu NativeScript.
  • Dacă doriți o colecție de articole, tutoriale video și fragmente de cod despre NativeScript, există gustări NativeScript și resurse NativeScript.

Concluzie

În acest articol ați învățat foarte multe elemente de bază ale NativeScript. După cum ați văzut, NativeScript este o opțiune bună pentru construirea de aplicații mobile folosind abilitățile pe care le aveți deja ca dezvoltator web. Sper că acest articol v-a oferit cunoștințele necesare pentru a vă ajuta să decideți dacă NativeScript este potrivit pentru dvs..

Cod