Nastavljam sa člankom kojeg sam započeo ranije i u kojem iznosim stav zbog čega je XAML zaista Sveti gral u izazovu suradnje razvojnih inžejera (developera) i dizajnera svih vrsta... Prvi dio možete pročitati ovdje.

Izražajnost, sadržajnost, proširivost, odvojivost…

Microsoft XAML tržišno pozicionira kao opisni jezik s velikim brojem prednosti u usporedbi s drugim opisnim jezicima za sučelja. U prvom redu tu je njegova izražajnost – mogućnost da opiše gotovo sve korisničke kontrole koje dolaze u .NET Frameworku (button, toolbar, combo box…), kao i mogućnost da se kroz njega kreiraju i definiraju neke nove korisničke kontrole. Nadalje, osim samih kontrola, tu su i mogućnosti pozicioniranja elemenata sučelja u raznim elementima (canvas, grid, panels) te opisi svakog pojedinog elementa nizom atributa (colors, fonts…). Tu cijela priča ne staje – podrška za animacije, 3D objekte (uključujući njihove definicije, teksture, osvjetljenja…), vektorske oblike (uključujući i free form paths) samo su neke od mogućnosti koje upotpunjuju izražajnost XAML-a.

Drugi element je sadržajnost, a nadovezuje se na prethodno opisanu izražajnost. Već je rečeno kako XAML opisuje mnogo više od samih vizualnih elemenata sučelja i na taj način povezuje sebe kao opisni jezik s moćnim WPF-om. Sadržajnost je, s druge strane, najjasnije istaknuta u podršci za stilove (styles), predloške (templates), povezivanje s izvorima podataka (data binding) i animacije.

Definiranje stilova je svoj uzor vjerojatno pronašlo u vezi između CSS-a i HTML-a. U XAML-u, a posve podržano i kroz Blend kao dizajnersko i razvojno okruženje, definiranje stilova predstavlja vrlo učinkovit način odvajanja izgleda pojedinih elemenata sučelja od njegovog sadržaja.

Predloške u XAML-u možemo promatrati kroz dvije perspektive – prva podrazumijeva predloške kontrola (control templates) čija izmjena omogućuje promjenu izgleda pojedinih kontrola bez utjecaja na njihovo temeljno ponašanje i podržane oblike interakcije, dok predlošci za izvore podataka (data templates) omogućuju dizajnerima kreiranje niza vizualnih elemenata za predstavljanje pojedinih izvora ili tipova podataka. Microsoft tu posebno ističe izostanak potrebe da se grade posebno prilagođene kontrole koje bi uparivale izvore podataka s elementima korisničkog sučelja.

Povezivanje s izvorima podataka je jedna od najčešćih operacija koja se danas izvodi prilikom pisanja softvera. Bilo da izrađujete tipičnu poslovnu aplikaciju, RSS čitač ili aplikaciju za POS sustave, povezivanje s izvorima podataka je nešto što ćete u pravilu uvijek raditi. U WPF-u je povezivanje s izvorima podataka sveprisutno i kao takvo se odražava i kroz sam XAML. Expression Blend kao alat izbora vam, primjerice, omogućuje da izradite RSS čitač koji kao izvor podatak koristi neku XAML datoteku praktično bez pisanja linije koda.

I konačno – animacije. WPF dolazi s izuzetno bogatim modelom koji podržava animacije. Same animacije s mogu prikazati i pokretati kroz sam XAML. Gledajući iz šire perspektive, to znači da dizajner može definirati neku animaciju (primjerice da gumb iz plave postane narančaste boje prilikom prijelaza pokazivača miša preko njega) bez ikakvog znanja o programiranju. Dakako, ako ga ima  - to ne šteti jer omogućuje čitav niz dodatnih interesantnih scenarija.

Treći element koji karakterizira XAML je proširivost. Ponovno, teško ga je promatrati izvan konteksta dva ranije spomenuta (izražajnosti i sadržajnosti) jer se na njih nadovezuje. Zajednica razvojnih inženjera vrlo jasno ističe kako XAML sam po sebi nije programski jezik nego „.NET jezik za serijalizaciju i inicijalizaciju“. Konkretno, time se, zapravo, želi reći kako XAML može učiniti i više nego samo prikazati već postojeće osobine WPF-a kao platforme. Izrada i predstavljanje novih kontrola, novih animacija kao i gotovo bilo kojeg .NET podržanog objekta samo su neke od mogućnosti. Ističe se i to kako se XAML može predstaviti kao programski kod prikazan XML-om. U detaljiziranje i raspravu oko ispravnosti ovog stanovišta se svatko može upustiti samostalno, u svoje slobodno vrijeme…

I posljednja „-ost“ u ovom nizu je odvojivost. XAML donosi onu pravu, punokrvnu odvojenost koda (programske logike) i korisničkog sučelja. Definicije korisničkog sučelja (uključujući sve više navedene elemente poput kontrola, stilova, predložaka, animacija…) se nalaze u .XAML datotekama, dok se programska logika nazali u C# ili VB code-behind datotekama. Tako, konkretno, dizajner nacrta pravokutnik i uredi njegovo oblikovanje te mu kao event handler za MouseDown pridruzi rutinu „MouseClicked“. U tom se trenutku u code behind datoteci stvara mjesto na kojem razvojni inženjer može napisati kod i implementirati programsku logiku. Sve izmjene koje dizajner radi na sučelju ostaju u XAML datoteci i ne interferiraju s radom razvojnog inženjera, a sve što razvojni inženjer stvori u datoteci koda ne smeta i ne utječe na izgled korisničkog sučelja. Naravno, dizajner radi u Expression Studio okruženju, a razvojnom inženjeru će se otvoriti Visual Studio. Međusobno se automatski sinkroniziraju prilikom izmjena i nema konflikata. Tipične formate rješenja i projekata kao i same datoteke koda i XAML u potpunosti podržavaju i Visual Studio i Expression Studio. Time je postignuto da svaka strana radi ono u čemu je najbolja, da to mogu raditi paralelno (sjećamo se ideje o povećanoj produktivnosti i fleksibilnosti?) i što je možda najvažnije – nema  potrebe za kompromisima.

Kompromisi odlaze u prošlost

Zvuči pompozno, ali s pojavom XAML-a, nestaju zidovi između razvojnih inženjera i dizajnera, a time i potreba za manjim ili većim kompromisima s obje strane. Zaista, kompromisi sada ustupaju mjesto suradnji koja može biti vrlo glatka i fluidna. Zadovoljena su sva tri uvjeta s početka priče – od workflowa do alata koji to podržavaju i XAML-a kao medija u sredini koji to katalizira. Osim kompromisa, u prošlost odlazi i jednosmjernost i serijalnost razvoja koji svoje mjesto ustupaju paralelnom, suradničkom modelu rada. Marketing mašinerija će reći kako ovo sada otvara niz novih mogućnosti za rad dizajnera i razvojnih inženjera i jedan sasvim novi dijalog koji može, u konačnici, rezultirati nizom beneficija za obje strane, ali osobito za same korisnike.

Što to znači dizajnerima i razvojnim inženjerima?

Dizajneri će od sada biti, vjerojatno, po prvi put uključeni u same jezgre razvojnih timova postajući time i dijelom rješenja, ali i stječući vrlo jasniju sliku o tome što razvoj jednog softverskog proizvoda uistinu jest. Prije su dizajneri satima crtali prototipe u PhotoShopu, koristili su PowerPoint za izradu modela interakcije, rezali elemente sučelja i spremali ih kao GIF, PNG, JPG, PDF datoteke i onda pokušavali s razvojnim inženjerima svoju prvotnu misao pretočiti u realnost. Naravno, to u pravilu nije bilo sasvim uspješno i moralo se pristajati na kompromise. Ako su dizajneri zamislili okrugli gumb, a razvojni inženjer se tome usprotivio jer njegovo razvojno okruženje to ne podržava (recimo, to je teško izvedivo uporabom Windows Formsa) moralo je doći do kompromisa. Naravno i jedna i druga strana su gorljivo zagovarale svoje stanovište – no rezultat je u načelu bio ustupak jedne ili druge strane što se nužno moralo odraziti na sam izgled i funkcionalnost aplikacije te krajnje iskustvo korisnika kada bi aplikacija došla do njega.

Danas, dizajneri ne moraju trošiti svoje vrijeme uvjeravajući razvojne inženjere u ispravnost svojih odluka i vizualnog izražaja i ne moraju dizajnirati s ograničenjem i pitanjem hoće li se taj dizajn i izgled moći realno prenijeti i u konačnoj inačici aplikacije. Nema potrebe za izradom prototipova i raznih Flash ili Director animacija i koncepata. Sve je moguće odmah i izravno raditi u Expression Blendu. Grafičke elemente je moguće stvarati u Expression Designu i eksportirati izvorno u XAML formatu i time apsolutno čuvati vjernost izgleda. Napokon, to može značiti da dizajneri prvi slože izgled samog sučelja direktno u Expression Blendu i samo stvore event handlere te na tom projektu razvojni inženjeri samo nastave svoj rad pišući kod i dodajući programsku i poslovnu logiku u datotekama koda.

Iz perspektive razvojnih inženjera također ima određenih izmjena. Dosadašnja uloga (ili zadaća, ovisno o afinitetima) koja je uključivala i dizajniranje korisničkog sučelja u potpunosti može nestati iz opisa posla razvojnih inženjera. To bi u pravilu trebalo rezultirati oslobađanjem više vremena i bolju usredotočenost prema pisanju koda i stvaranju još stabilnijih i funkcionalnijih aplikacija, ali, može, djelovati i na ego. Naravno, niti dizajneri niti razvojni inženjeri nisu na to imuni. Nažalost, nikakav XAML ili alat tu ne mogu pomoći. Ono što može pomoći jest međusobno razumijevanje obje strane i njihovih specifičnih i nadopunjujućih uloga u timu te transparentnost i jasna podjela uloga i poslova. Tehnologija danas postoji, postoji i podrška za nju. Sada je samo potrebno sve te elemente objediniti i konkretizirati. Rezultat ne bi trebao izostati, a od njega bi koristi trebali imati svi – najviše sam korisnik rješenja, što bi i trebala biti misao vodilja u cijelom procesu razvoja softvera.

Prenosim svoj članak objavljen u kolovoškom izdanju Mreže - jedinog domaćeg časopisa za IT profesionalce koji na moje oduševljenje na svojim stranicama otvara prostor i za teme iz domene korisničkog iskustva (UX). U njemu se bavim jednom od meni profesionalno najinteresantnijih tema - suradnjom između razvojnih inženjera i dizajnera te razmatram ulogu koju u toj priči ima XAML i, općenito, Microsoft Expression Studio. Članak je poprilično dug pa ću ga objaviti ovdje u dva dijela, a engleska inačica istoga će uskoro osvanuti i na UXPassion.com blogu.

U potrazi za svetim gralom…

Pružiti korisnicima uporabljivu i funkcionalnu aplikaciju ili servis se danas podrazumijeva. Ono što se (pre)često zanemaruje i obično ne podrazumijeva je pružanje kvalitetnog korisničkog iskustva. Korisničko iskustvo je temeljni element kojeg zajednički moraju graditi i razvojni inženjeri i dizajneri. Kako pomiriti ta dva svijeta, omogućiti im da rade zajedno i da stvaraju i funkcionalne i ugodne aplikacije i servise? Odgovor kriju 4 slova: XAML

Kako nastaje i što čini odličan računalni program, servis ili operativni sustav? I dok se možda oko tog pitanja ne može naći sasvim jasan odgovor, odličan se softver, u načelu, na tržištu i kod samog korisnika lako prepoznaje. Proizvodnja softvera danas nije jednostavan biznis i u pravilu uključuje vrlo širok raspon faktora. Korisnici najčešće prvo zamjećuju samo grafičko korisničko sučelje i njegovu estetiku, tu je onda sadržaj, funkcionalnost, vrijeme potrebno da aplikacija odgovori na neku korisničku akciju... Faktori koji utječu i oblikuju naše iskustvo i doživljaje pri korištenju aplikacija su brojni i danas je sasvim jasno kako sami razvojni inženjeri uz eventualno pokojeg testera nisu niti izbliza dovoljni za razvoj kvalitetnog softvera. Razvojni tim danas više nije ograničen na te tradicionalne uloge već se proširuje i postaje gotovo interdisciplinaran.

 Softverski arhitekt, projektni menadžer, dizajner… I dok su prve dvije uloge svoje mjesto u većim razvojnim timova već na neki način zaslužile i opravdale, „crna ovca“ cijele priče su do sada bili dizajneri. Pomiriti razvojne inženjere i dizajnere ili otići čak veliki korak dalje – omogućiti im da zajedno rade na istom projektu, ali svaki samo ono u čemu je najbolji – dugo je vremena bio nedosanjani san. I, budimo realno – izvor frustracija s obje strane fronte.

Dobro je odmah na početku naglasiti kako se pod pojmom „razvojnog inženjera“ često podrazumijevaju uloge i same osobe koja piše i razvija kod, softverskog arhitekta, testera – dok se, pod zajedničkom kapom „dizajnera“ kriju grafički, web, dizajneri interaktivnosti i ostali… Jednostavnosti radi, dva tabora ćemo dijeliti u razvojne inženjere i dizajnere.

Danas je poslovno, ali i tehnološko okruženje dovoljno zrelo da se i jednoj i drugoj ulozi omogući zajednički rad i suradnja. No, potrebno je biti svjestan tri ključna momenta u samoj ideji suradnje razvojnih inženjera i dizajnera iz Microsoftove perspektive.

Prvi uključuje nuždu za promjenom paradigme i načina rada. Klasični workflow prema kojem razvojni inženjer piše kod u nekoj razvojnoj okolini, a dizajner svoje skice crta u, primjerice, Photoshopu, danas može biti posve drugačiji. Priča je otišla toliko daleko da danas na istom projektu razvojni inženjer piše kod i dodaje programsku logiku, dok dizajner, praktično istovremeno, dizajnira grafičko sučelje, branding, elemente interakcije…

Drugi ključni moment je ideja koja uključuje prihvaćanje koncepta prema kojem su kod i izgled aplikacije (presentation layer) međusobno odvojeni elementi, povezani samo s nizom event handlera koji korisničke zahtjeve povezuju s nekom programskog logikom sadržanom u nekoj code – behind datoteci. Ovaj moment i ne predstavlja izuzetno veliku novost jer je, na neki način, već uobičajen prilikom razvoja ASP .net aplikacija. Ipak, njegova je uloga izuzetno velika u ovoj novoj promjeni paradigme.

I konačno, treći moment uključuje tehnološku podršku cijeloj ideji suradnje razvojnih inženjera i dizajnera. Iz perspektive razvojnih inženjera tu je već dobro poznata i ustoličena razvojna okolina Microsoft Visual Studio, trenutno u inačici 2008. No, po prvi puta platforma je zaokružena s obitelji alata Microsoft Expression Studio namijenjenoj prvenstveno dizajnerima (web, grafičkim, interakcijskim…), ali i razvojnim inženjerima koji su spremni donekle se prilagoditi ponešto drugačijoj radnoj okolini. Expression Studio 2, koji je izašao s prvim danima svibnja, se sastoji od niza alata: Weba (namijenjen web dizajnerima i programerima), Blenda (alat za izradu multimedijalnih, bogatih te interaktivnih web i desktop aplikacija temeljenih na Windows Presentation Foundationu i Silverlightu), Designa (alat za vektorsku grafiku i obradu) te alata Media i Encoder (namijenjenih za upravljanje i encodiranje video i ostalih multimedijalnih sadržaja).

Konačno, svjedoci smo konvergencije novog načina rada (workflowa) nove platforme i novih alata u jedinstven proces razvoja i izgradnje softvera koji, u konačnici, rezultira boljem i kvalitetnijem iskustvu korisnika, stabilnijim i jednostavnijim aplikacijama te poboljšanom učinkovitošću.

Ta četiri divna slova...

XAML – eXtensible Application Markup Language se, bez pretjerivanja, smatra „svetim gralom“ koji omogućuje nesmetanu kolaboraciju razvojnih inženjera i dizajnera u Microsoftovom svemiru. Na samom početku treba odmah pojasniti da XAML, sam po sebi, nije taj koji omogućuje sve te krasne prednosti međusobne suradnje – pravi ključ je WPF (Windows Presentation Foundation), a XAML bi onda mogli smatrati sredstvom kroz koji se, dijelom, WPF manifestira.

XAML se često opisuje pojmom markup language – isti atribut nosi i čitav niz drugih opisnih jezika za sučelja poput HTML-a (hypertext markup language), SVG-a (scalable vector graphics) ili XUL-a (XML user interface language). Uspjeh HTML-a kao tipičnog, i vjerojatno najpoznatijeg i najrasprostranjenijeg markup jezika ide u prilog tvrdnji kako su opisni jezici za sučelja uspješni i da su zajedno s razvojem ukupne platforme (kako za desktop, tako i za web) i sami rasli. XAML je u svojoj srži nalik XML-u, no XAML nije samo jezik za opisivanje izgleda samog sučelja. Uporabom XAML-a je moguće definirati i korisničke kontrole, na njima dodavati event handlere koji se, kasnije, povezuju s programskom logikom u code – behind datotekama.

Naravno, kao i gotovo svi opisni jezici, XAML je čitljiv ljudima (human readable) što je prednost koju ne treba zanemarivati. Primjerice, prilikom razvoja u Expression Blend 2 okolini, klikom na split view), u gornjem se dijelu zaslona vidi izgled samog sučelja dok se u donjem dijelu vidi jasan i čitljiv XAML kod.