Angular Framework

Jedan Frejmvork da svima vlada

[vc_row][vc_column][vc_column_text]

30. maja sam držao meetup na temu kako možemo razvijati aplikacije za različite platforme koristeći istu kodnu bazu.

Uvod

Da li je moguće koristiti jedinstvenu kodnu bazu za tri različite platforme? To je pitanje koje nas sve muči. Pod pretpostavkom da projektni zadatak zahteva razvoj aplikacija sa sličnim ili istim funkcionalnostima za različite platforme. Razvoj aplikacija za sve platforme je skup i dug proces.

Angular + NativeScript + Electron.js = Cross Platform Solutions

Jedan Frejmvork Da Svima Vlada

Videćemo kako možemo postaviti projekat i razvijati rešenja za razlilčite platforme iz jedne kodne baze.
Angular kao jezgro, NativeScript za razvoj native mobilnih aplikacija i Electron.js za razvoj desktop aplikacije.

Angular

Angular je kompletan, modularan JavaScript (*TypeScript) framework za kreiranje web aplikacija. Angular pruža i mehanizme za lakši rad sa formama (Reactive Forms), rutiranje (Router Module), http pozivima (HttpClientModule), mehanizam za Dependency Injection, itd.

Jedan Frejmvork Da Svima Vlada

Angular je odlično rešenje za razvoj skalabilnih web ali i mobile odnosno desktop aplikacija.

Smatram da su neke od ključnih prednosti ovog radnog okruženja:

  • NG CLI, interfejs komandne linije kao alat za brži razvoj
  • Dependency Injection, mehanizam koji povećava modularnost ali i olakšava testiranje celina (Unit Testing)
  • Reaktivne forme, s obzirom da većinu poslovnih aplikacija krase komplekse forme

NativeScript

NativeScript je radno okruženje za razvoj native mobilnih aplikacija koristeći web tehnologije. Ovo radno okruženje pruža native komponente i kompletan pristup native API-jima. Naglasio bih da timovi koji stoje iza NativeScript-a i Angular-a usko sarađuju da bi developerima obezbedili što bolju integrisanost ova dva radna orkuženja.

Važno je napomenuti da NativeScript komponente koriste XML umesto HTML dokumenta. CSS koji odgovara NativeScript komponenti je nešto drugačiji od CSS-u koji odgovara standardnim DOM elementima.

U već postojeći Angular projekat, moguće je dodati NativeScript Schematics:

ng add @nativescript/schematics

ili prilikom kreiranja novog projekta:

ng new –collection=@nativescript/schematics project-name –shared

Na taj način proširujemo NG-CLI da odgovara potrebama projekta.

Electron.js

Electron.JS je platformski nezavisno radno orkuženje koji nam omogućava da kreiramo desktop aplikacije koristeći već poznate web tehnologije (JS, HTML & CSS).

Isporučivanje postojeće web aplikacije kao desktop aplikacije je prilično jednostavno.

Instaliranjem Electron.JS-a kao Dev Dependency:

npm install electron –save-dev

Nakon toga, potrebno je dodati main atribut u package.json dokumentu a njegova vrednost treba da pokazuje na skriptu za kreiranje desktop aplikacije (main.js u root direktorijumu Angular aplikacije), ali i postaviti base href na ’./’.

Više informacija o podešavanju skripte za inicijalizaciju možete pronaći na zvaničnom sajtu Electron.js-a.

Deljenje kodne baze za sve platforme

Zašto ne bismo probali da apstrahujemo biznis logiku i ponudimo rešenje za sve platforme?

Ideja je da razdvojimo komponente kao UI jedinice na Pametne i Glupe (iliti Kontejnerske i Prezentacione komponente).

  • Pametne komponente su one koje nemaju pravu vizuelnu prezentaciju ali su zadužene za dohvatanje i manipulaciju podacima.
  • Glupe komponente primaju parametre preko Input polja a obaveštavaju roditelja o eventualnoj promeni preko Output dogadjaja.
  • Glupe komponente su UI jedinice koje prezentuju podatke korisniku odnosno primaju korisnički unos a Pametna komponenta dalje odlučuje kako da upravlja tim podacima.
  • Pametnu komponentu možemo posmatrati još kao Proxy Server koji komunicira sa Angular servisima i korisničkim unosom (glupim komponentama).

Poštujući pravilo jednosmernog protoka podataka (unidirectional data flow), ako želimo da promenimo stanje nekog objekta, ideja je da delegiramo promenu i postavimo novo stanje tog objekta na najvišem nivou odnosno da u servisu ili kontejnerskoj komponenti.
Izvor informacija je uvek jedinstven samim tim se i smanjuje prostor za greškom.

Native i web aplikacije koriste različite API-je za rad sa HTTP metodama. Medjutim, zbog Angular-ovog Dependency Injection mehanizma, vrlo lako možemo odlučiti na koji način mobilna odnosno web platforma upravlja HTTP protokolom. Slično važi i za rutiranje ili bilo koji drugi API koji može koristiti naša aplikacija.

Kompletnu postavku projekta možete videti na https://github.com/grizlizli/ng-goes-native.

Miloš Krstić
Web & Mobile Developer // Angular expert[/vc_column_text][/vc_column][/vc_row]

Scroll to Top