0 Comments

Do prije par godina se dosta spominjao pojam RIA, kako po internetovima tako i na ovom blogu. Uglavnom je kontekst razgovora bio vezan uz razvoj podatkovno-intenzivnih aplikacija za web, bilo internet ili intranet, i preporučena tehnologija za izradu je bio Silverlight + WCF web servisi. Također, dosta o tome se dalo isto pročitati na ovom blogu. Onda se desio Bob Muglia, najavio okretanje HTML-u, ASP.NET je postao open source, težište razvoja aplikacija se prebacilo na klijentsku stranu, Microsoft je prihvatio prvo jQuery, Newtonsoft Json.Net, Knockout.JS, SignalR kao alate za izradu bogatih web aplikacija. umjesto da dalje razvija svoje verzije (da, Microsoft Ajax, UpdatePaneli i slično se ne razvija dalje, iako i dalje dolazi uz ASP.NET). Po mom skromnom mišljenju, ovo je dobar potez, s obzirom na kaos, odnosno brojnost klijentskih biblioteka koje svakodnevno niču i nestaju. Sa serverske strane situacija je jednostavna: imamo WebAPI, MVC ili nešto treće (obični ashx handler, WCF, ServiceStack, OpenRasta, …) [more]

Ako se pitate što Wellness ima sa razvojem web aplikacija, to ne bih znao, ali SPA je već druga priča. Pojam SPA je skovan da bi opisao aplikacije čija se (prezentacijska) logika izvršava u browseru, a podaci dolaze putem web servisa u JSON obliku. Aplikacija se učitava putem jedne stranica, i ta stranica se nikada ne mijenja (npr. default.aspx), a sva kompozicija elemenata na stranici se obavlja putem Javascripta i raznih HTML predložaka. I da, SPA znači Single Page Application.

SPA označava skup serverskih i klijentskih alata s kojima kreiraju web aplikacije, i nije nužno vezan za određene alate, frameworke.

Riješili smo problem wellnesa, SPA-ova, ali nisam objasnio kakve to pak sve ima veze sa ručnicima! Kada idete u Spa, toplice, na zdravstvene i kozmetičke tretmane, uvijek sa sobom uzmete ručnik. Isto tako, kada idete razvijati SPA aplikacije, onda uzmete Hot Towel!

HOT TOWEL je samo skup biblioteka i sample aplikacija na kojoj možete vidjeti kako se razne biblioteke integriraju i rješavaju poznate probleme u izradu aplikacija: bindanje na view, predlošci, navigacija, upravljanje podacima, i slično. To je dobro mjesto za početi proučavati tehnike razvoja SPA aplikacija, a kasnije se onda određene komponente mogu zamijeniti po želji, npr. umjesto KnockoutJS uzeti Backbone.JS, jer ionako odabir pojedine biblioteke ovisi više o osobnih preferencijama nego o nekim tehničkim razlozima. Ono što će te svakako susreti pri razvoju aplikacija možemo grupirati u sljedeće cjeline:

DOM manipulacija: jQuery, tu se nema nekog velikog izbora :/

Klijentski framework (ne pada mi pametniji naziv za ovu grupu): općenito, razlikujemo varijante MVC, MVVM, MVP i sličnih MVx patterna. Svi oni se brinu o upravljanju sučelja, reagiranjem na korisničke unose, prikazivanje podataka, i više, ovisno o biblioteci. ASP.NET dolazi sa KnockoutJS (napravljen od strane člana ASP.NET tima).

Modularizacija: za izradu složenije aplikacije ne možemo koristiti tonu Javascript funkcija u globalnom scopeu, moramo ih nekako organizirati u cjeline. Kako Javascript nema namespace-ove i assemblye, koristimo malo drugačiji pristup, a najpopularnija biblioteka je RequireJS, putem koje definirate svoje module, zavisne module, pozivate ih (asinkrono), i slično.

Navigacija: poznatije pod pojmom routing, omogućava nam da reagiramo na browserove back i forward tipke, pozivanje određenog stanja naše aplikacije (pogodno za bookmarkiranje). Većina frameworka ima ovo riješeno (KnockoutJS koristi sammy.js)

Perzistencija podataka: podatke svakako morate spremiti u bazu: provjeriti koji su novi dodani, koji su promijenjeni, i sukladno s time serijalizirati ih u JSON i poslati na server. Za to se brine Breeze, ali opet, ovisi o klijentskom frameworku; Backbone na primjer ima svoj način spremanja na REST web servise.

Kako početi? Za početak instalirajte Web Tools Update na VisualStudio 2012, a potom dodajte neki od SPA predloška u Visual Studio – Hot Towel, Breeze + KnockoutJSDurandal (od autora odličnog Caliburn i Caliburn.Micro Silverlight/WPF frameworka!), EmberJS, AngularJS (sa Breezon), Sve predloške možete pronaći na ovoj adresi.

Svakako preporučujem i sljedeće linkove:

Single Page Application book

Primjeri raznih JS frameworka u izradu Todo aplikacije (korisno za usporedbu)

Uživajte!

11 Comments

image Silverlight po defaultu dolazi sa loader splash ekranom, koji je sve samo ne lijep. Neznam za čitatelje ovog teksta, ali ja čim vidim gradijente, odnosno prijelaze, još u kružnom obliku, dobijem iznenadnu želju za skakanjem sa vrha zgrade. Srećom, da ne bi slučajno došlo do realizacije tih želja gledajući brojna učitavanja Silverlight aplikacija, zamjena ekrana učitavanja je vrlo jednostavna.

Iz sljedećeg prikaza može se vidjeti slijed učitavanja aplikacije:

image

Splash screen i događaji koji ispisuju postotak učitavanja su u biti jedna XAML datoteka i Javascript metoda koja se poziva na promjenu postotka učitavanja i vrši interakciju sa elementima prikazanom XAML ekranu.

Postupak izrade izgleda ovako:

1. U jednoj XAML datoteci je potrebno pripremiti izgled ekrana. Ovdje se nalazi primjer takve datoteke,

2. Javascript metoda služi za prikaz i animiranje tog ekrana (potrebno dodati u posebnu JS datoteku i referencirati ju iz Head elementa od web stranice):

function SourceDownloadProgressChanged(s, e) {
    var bartext = s.findname("bartext");
    var bar = s.findname("bar");
    if (bartext != null || bar != null) {
        var value = Math.round(e.progress * 100)
        bartext.Text = value + "%";
        var newWidth = 3.3 * value;
        bar.Width = Math.round(newWidth)
    }
}

3. Dodatni parametri unutar poziva Silverlight aplkacije (u html/aspx, <object> element):

<param value="preloader.xaml" name="splashscreensource" />
<param value="SourceDownloadProgressChanged" name="onSourceDownloadProgressChanged" />