Scrum radionica @ CROZ

13. i 14.11.2019. s trojicom kolega iz tvrtke Informatika Fortuno sudjelovao sam na Scrum radionici u organizaciji CROZ-a. Radionicu je činilo devet sudionika podijeljenih u dva tima, a sve je vodio Josip Osrečki.

Scrum radionica, 13.-14.11.2019. @ CROZ

Iako sam početkom godine bio na eventu pod nazivom “Svjetski dan retrospektive i stanje “agilizacije” u regiji“, koji je bio usko vezan uz neke od tema ove radionice, tek sada zapravo počinjem shvaćati što znači agilno.

Ovo su neke od natuknica skupljenih tijekom radionice:

  • Kada se Scrum implementira nije potrebno uvesti sve njegove komponenete nego svaka organizacija treba odabrati koje od njih su joj potrebne
  • Ako je okruženje jako dinamično može se koristiti samo jedan dio Scruma npr. vizualizacija
  • Tim postane efikasan nakon 6-12 mjeseci, ako su izmjene članova tima česte gubi se napredak
  • Scrum Master ne bi trebao biti (tehnički) team lead, nego vanjska osoba koja može odluke donositi objektivno, jer ionako ima previše posla, a možda nema soft skills
  • Jednom kada je tim formiran do razine pune produktivnosti više mu nije potreban Scrum Master. Iako, ovo je idealan scenarij koji se rijetko događa jer uvijek ima mjesta za poboljšanja.
  • Scrum Master nije tu da govori ljudima kako da rade svoj posao nego da im uklanja smetnje
  • Razvojni tim treba imati zadnju odluku kada je u pitanju izbor tehnologije s kojim će raditi
  • User story nije artefakt Scruma, ali ga svi koriste
  • Development i business dio organizacije trebaju raditi zajedno prilikom definiranja zadataka
  • Product Owner treba imati domensko znanje, treba biti jedna osoba, odlučuje što ide u Product Backlog

Scrum radionica, Tomislav Stanković

Scrum je okvir za razvoj, isporuku i održavanje složenih proizvoda, a temelji se na teoriji iskustvene kontrole procesa, empirizmu. Taj se okvir sastoji od Scrum timova i pripadajućih uloga, događaja i artefakata (proizvodi ljudskog rada koji su nastali primjenom agilnih metoda). – Vodič kroz Scrum

Čarobne loptice

Scrum radionica - Čarobne loptice
Josip Osrečki, CROZ
S ovom smo vježbom započeli radionicu, a imala je nekoliko pravila:
– Svaki član tima mora dotaknuti lopticu
– Prilikom dodavanja loptica mora neko vrijeme provesti u zraku
– Nema dodavanja susjedima lijevo i desno

Kao što se može vidjeti u svakoj sljedećoj iteraciji imali smo, kao tim A, bolji ili jednak rezultat sve dok nismo postigli svoj maksimum. Nakon prvog kruga imali smo rezultat od ukupno 20 loptica. Nakon toga procjena je bila da ćemo u sljedećem krugu prebaciti 28 loptica, a prebacili smo ih 36. U trećoj iteraciji procjenili smo 100 loptica, a prebacili između 50 i 60. U zadnjoj iteraciji procjena je bila 56 loptica, a prebacili smo ih 60.

Da smo igru nastavili dalje mogli smo proces dodano optimizirati kako bi postigli možda još i bolji rezultat do nekog novog maksimuma. Iz toga se može zaključiti da kada prvi put krećemo s nekom aktivnošću i nemamo referencu za usporedbu za svaki rezultat mislimo da je dobar i ne dovodimo ga u pitanje. Ako se zadovoljimo s tim rezultatom nikada nećemo znati da možemo i bolje. Možda ćemo se u tom procesu jednom i precijeniti, kao mi sa 100 loptica, ali ćemo i iz toga nešto naučiti. Kako god bilo, iz svega toga steći ćemo neko iskustvo, bolje se prilagoditi i tako postići bolji rezultat, a sve zahvaljujući učenju iz prošlih iskustava i usporedbom s prošlim rezultatima.

Push vs Pull

Tema u kojoj smo se svi na radionici mogli pronaći.

Kod Push sistema fokus je na pojedincu koji je često preopterećen, nema transparentnosti te uslijed stresa dolazi do niske kvalitete rada i krajnjeg proizvoda. Pojednostavljeno rečeno, pojedinac dobiva radne zadatke bez ikakvog reda i pravila jer je netko tako odlučio. Osoba nema mogućnost sama odabrati što želi raditi i samim time stvara se otpor prema izvršenu jer cilj osobe koja je zadatak zadala nije postao cilj osobe koja to mora napraviti.

Nasuprot tome nalazi se Pull sistem u kojemu je fokus na timu i timskom radu, zajedničkoj predanosti te na kvaliteti rada i krajnjeg proizvoda. Tada raste motivacija tima i ciklus se ponavlja. Tim postaje izrazito produktivan i opravdava korištenje Pull sistema. I ovdje svaki pojedinac mora napraviti svoj dio posla, ali ima drugačiji pristup ako sam sebi odabere što će raditi jer tada osjeća odgovornost ispuniti odabrane zadatke. Članovi tima međusobno se dogovaraju, stvara se zajednički cilj.

Iterativno & inkrementalno

SCRUM CROZ - Iterativno i Inkrementalno
Josip Osrečki, CROZ
Ovo mi je bio jedan od zanimljivijih dijelova radionice. Na jednom se primjeru moglo vidjeti kako isti projekt može otići u dva sasvim suprotna smjera ovisno o tome na koji način se pristupi poslu.

Zaključak:
– Svaki korak je funkcionalan
– Validacija pretpostavki
– Korisničke potrebe

Klijentu i developerima je u interesu nakon svakog Sprinta imati funkcionalno rješenje. Prvima da u što kraćem vremenu imaju nešto za probati, a drugima da na osnovu povratih informacija prilagode procese i proizvod.

Recimo da nam dođe klijent koji želi brže stići na posao i hoće da mu napravimo jako brz automobil sa motorom od 300KS. Procesu izrade rješenja možemo pristupiti na dva načina.

Primjer kako ne treba raditi

Možemo se što je brže moguće baciti na razvoj automobila. Istovremeno krenuti raditi kotače, motor, šasiju i dr. i na kraju to sve sklopiti da bi pred kraj projekta shvatili da motor viri izvan šasije i da nema očekivanih 300KS. Klijent tijekom čitavog procesa nije imao mogućnost isprobati funkcionalno rješenje iako smo ga uvjeravali da je sve super. Mi smo i vjerovali da je sve super je kotači sami za sebe izgledaju dobro, motor je dorađen iako nije očekivano jak, šasije je svježe obojana,… ali smo previdjeli da će doći do poteškoća prilikom spajanja svega toga, a više nemamo vremena niti budžeta za izmjene. Od testiranja stigli smo se samo provozati po parkingu firme. Klijent preuzima auto i nezadovoljan se vraća nakon nekoliko dana. To nije ono što je on htio. Auto nije dobro sklopljen, nema očekivanih 300KS i treba mu isto vremena da stigne na posao kao što mu je trebalo i sa starim automobilom.

Scrum radionica, 13.-14.11.2019. @ CROZ
Josip Osrečki, CROZ
Primjer kako bi trebalo raditi

Napravimo romobil, klijent ga u vrlo kratkom vremenu preuzme i koristi. Zadovoljan je prvom verzijom i brže stiže na posao, ali je shvatio da ga bole noge i nije mu zgodno nositi laptop. Pristupimo rješavanju tog problema i napravimo mu električni bicikl s ugrađenom torbom za laptop da ga ne mora držati u rukama, a također ne mora niti pedalirati. Uskoro počinju sve češće kiše , a i baterija je oslabila s vremenom pa klijent opet stiže kod nas. Napravimo mu skuter, sa zaštitom od kiše za vozača. Međutim, uskoro se očekuje prvi snijeg. Kroz čitav ovaj proces izrađivali smo tehnička rješenja i sa svakim naučili nešto novo. Smatramo da smo nakon skutera spremni napraviti i automobil o čemu razgovaramo s klijentom. Taj automobil ne mora imati 300KS, ali će klijentu omogućiti da na ugodniji i sigurniji način stigne na posao neovisno o vremenskim uvjetima, a usput može povesti nekog od kolega i potrebnu opremu. Klijent je oduševljen.

Neke od ostalih tema koje smo obradili bile su:

  • Scrum uloge
  • Product backlog
  • Projektni put
  • Lean razmišljanje
  • Agilne vrijednosti
  • Planiranje Sprinta (Sprint Planning)
  • Dnevni sastanak (Daily Scrum)
  • Pregled Sprinta (Sprint Review)
  • Osvrt na Sprint (Sprint Retrospective)
  • User story
  • Valueno value
  • Vrste otpada
  • Vizija
  • Retrospective
  • Relative estimation
  • Kontrola procesa

Zaključak

Ovo je bilo zanimljivo iskustvo gdje sam uspio saznati i naučiti nešto novo. Iako Scrum nije rješenje svih problema svake organizacije ipak nudi određene mogućnosti, a na svakoj je organizaciji da implementira ono što njoj treba i na način koji je najbolji za nju.

Ove su mi teme probudile dodatni interes pa ću ih nastaviti istraživati.

Scrum radionica - Tomislav Stanković

WebCamp Zagreb 2019 – osvrt na konferenciju

Ovo mi je drugi put da sam bio na WebCamp konferenciji u Zagrebu, a prvi put je to bilo 2015. pa je red da objavim barem kraći osvrt na cjelokupno iskustvo.

U petak ujutro u 6 sati krenulo se prema Zagrebu, prilikom dolaska smještaj u hotel i lagano prema lokaciji konferencije. Red predavanja, red pauza uz grickalice, voće i piće i sve tako do kasnog poslijepodneva kada je bilo vrijeme za kvalitetan networking. Gordon Cindrić, živio!

Naravno kakav bi to bio posjet Zagrebu da se ne ode malo u provod pa je noć iskorištena za obilazak, najviše Tkalčićeve, ugostiteljskih objekata do sitnih noćnih sati.

Sve to nije bilo prepreka da se i u subotu ponovi repriza petka s tom razlikom da se kasnije više nije išlo u provod nego se krenulo prema Vinkovcima.

WebCamp Zagreb 2019 - Informatika Fortuno

Manje više ponuđeno je ono što se od ove konferencije i očekivalo.

Prikladan konferencijski prostor, dostupnost hrane i pića, osoblje tj. volonteri, sanitarni čvor, parking,… i sve ostalo što je za konferenciju na ovoj razini potrebno bilo je na nivou.

U nastavku više o nekima od predavanja koja sam posjetio.

* The top work skills you need in the 21st century [Keynote]

Learn foundational work skills that cross industries and can last for decades.

The top work skills you need in the 21st century

> Predavač: Merlin Rebrović > Razina: osnovna > Trajanje: 60 minuta

Odlično predavanje, kao stvoreno za keynote. Merlin je govorio o važnosti razvijanja osnovnih vještina industrije u kojoj se osoba nalazi.

Prilikom svake promjene posla ili načina rada dio znanja i vještina zadržavamo, a dio moramo naučiti i prilagoditi se novonastalom stanju.

Developer koji iz backenda ode u npr. frontend treba dosta toga novoga naučiti, ali mu ostaje temelj i specifičan način razmišljanja.

* The platform is dead, long live the platform

Out with the old, in with the new. Replacing a functioning platform with shiny containerized automated goodness.

The platform is dead, long live the platform

> Predavač: Luka Kladaric > Razina: napredna > Trajanje: 25 minuta

Predavanje fokusirano na automatizaciju poslovnih procesa korištenjem tehnologija kao što su AWS, Docker, CloudFormation i dr..

Svaka tvrtka i svaki njezin dio tijekom vremena se mijenja te je za očekivati da neke poslovne procese treba ponekada postaviti od nule, a kada se to već radi onda je dobro odmah razmišljati o automatizaciji. Jer što vrijedi novi hardver ili softver ako se i dalje sve mora raditi ručno.

* Developing hybrid Cloud/Native applications

Traditional desktop applications are losing ground. We decided on a hybrid cloud/desktop approach to have the best of both worlds.

Developing hybrid Cloud/Native applications

> Predavač: Damir Bulic > Razina: napredna > Trajanje: 45 minuta

Starije desktop aplikacije iako polako gube bitku naspram novih cloud aplikacija nisu u potpunosti otpisane jer im se pomoću Electrona može dati novi život.

* One implementation to rule them all!

Cross platform mobile development with Go and Lua or how a small team unified the implementation of their applications.

One implementation to rule them all!

> Predavač: Zdeslav Vojković > Razina: srednja > Trajanje: 25 minuta

S obzirom da i sam radim cross platform mobilne aplikacije zanimalo me što ću saznati na ovom predavanju, a dobio sam puno više nego sam očekivao.

Predavanje je išlo jako u dubinu, ali to se moglo i očekivati jer je trajalo samo 25 minuta. U tom se vremenskom periodu niti ne može dati neka šira slika o nekoj temi.

* Privilege as a technical debt

Do you believe political correctness and empathy are buzzwords that limit the society rather than contribute to its advancement?

Privilege as a technical debt

> Predavač: Amr Abdelwahab > Razina: osnovna > Trajanje: 25 minuta

Predavanje o tehničkom dugu iz sasvim neke druge perspektive.

Amr je u Europu došao iz Egipta i prema vlastitom iskustvu stekao dojam da se mora puno više truditi kako bi bio prepoznat kao developer te ostvario ista prava kao i njegovi kolege koji su izvorno iz Europe + bijele boje kože.

* Move Fast, Move Correctly

What if there is a faster and safer way to build an MVP without taking a huge amount of technical debt?

Move Fast, Move Correctly

> Predavač: Nikola Henezi > Razina: srednja > Trajanje: 25 minuta

Ovo je predavanje pokušalo dati odgovor na pitanje – što ako je MVP (minimum viable product) moguće napraviti na brži i jeftiniji način sa što manjim tehničkim dugom?

* WebAssembly: Binary in Plain English

How to run native code in the browser, why would you do that, and what does it all mean for the future of web development.

WebAssembly: Binary in Plain English

> Predavač: Milica Mihajlija > Razina: srednja > Trajanje: 25 minuta

Ovo je, veselo, predavanje dalo uvod u WebAssembly koji omogućava izvršavanje nativnog koda unutar web preglednika.

* From Conversation to Software

How to write valuable software in an engaging manner at a sustainable and predictable pace.

From Conversation to Software

> Predavač: Pim Elshoff > Razina: osnovna > Trajanje: 45 minuta

Prilikom razvoja softvera, osim tehničkih vještina važne su i one međuljudske.

Ovo je predavanje dalo uvid u konkretne korake potrebne za uspješan razvoj projekta koristeći tzv. soft skills.

Developeri trebaju znati kreirati seriju pitanja pomoću kojih će navoditi klijenta prema ključnim odlukama. Koliko god je važno znati što točno klijent traži i pravilno razradit specifikaciju jednako je važno i znati koja osoba je zatražila koji dio softvera.

Ako se ne zna tko je zatražio neki dio funkcionalnosti lako se može dogoditi da se danima izrađuje funkcionalnost koju je zatražila zadnja osoba u lancu odlučivanja jer “to bi bilo fora imati”, a da to zapravo neće nitko koristiti niti itko treba.

VVIT Meetup #1 – Vukovar

04.10.2019., petak, održao se prvi meetup koji je organizirala udruga VVIT, udruga za promicanje i razvoj ICT sektora Vukovarsko-srijemske županije.

Prema Vukovaru sam krenuo negdje oko 16:40h te na lokaciju došao taman u trenutku održavanja konferencije za medije. Ušavši u Vukovarsko Pub ondje sam zatekao dio Informatika Fortuno ekipe.

VVIT Meetup Informatika Fortuno
Foto: Nenad Horvat

Inače, tim Informatika Fortuno činili su: Mario Levanić, Momir Grgec, Nikola Božanović, Nenad Horvat, Alen Marković, Mirta Petrović i ja.

Glavnina eventa počela je u 18h pozdravnim govorom od strane predsjednika VVIT udruge Vice Božića, nakon čega su Saša Salamon, Vice Božić i Mario Levanić ispričali svoje poduzetničke priče.

Vrijeme nakon toga ostavljeno je na raspolaganju za međusobno neformalno upoznavanje i razmjenjivanje iskustava. S obzirom da je ovo prvi event ove vrste, u organizaciji udruge VVIT, ekipe su bile podijeljene ovisno o tvrtkama iz kojih su dolazile.

VVIT Meetup Vukovar
Foto: Nenad Horvat

Nas nekoliko ostalo je ondje do oko 22:30h kada je već bilo vrijeme za krenuti kući prema Vinkovcima, a mjesto u Vukovar Pubu prepustiti gostima koji nisu dio IT struke i samo se žele zabaviti uz živu glazbu.

Ovakvih događanja definitivno nedostaje na ovom području i nadam se da će se ova priča nastaviti. Ako ništa drugo dobro je naći se barem jednom mjesečno u ovakvom neformalnom okruženju kako bi se razmjenjivala iskustva i možda potaknulo neke ideje na realizaciju.

VVIT Meetup #1 – službeni poziv

Pozivamo Vas na prvi VVIT Meetup koji će se održati u petak, 4.10.2019. s početkom u 17:30 sati u Vukovaru, Vukovarsko pub, povodom pokretanja VVIT – Udruge za promicanje i razvoj ICT sektora Vukovarsko-srijemske županije.

Raspored:

17:30 – Konferencija za medije

18:00 – Meetup – Pozdravni govor i uvod

18:20 – (Ne)obične priče o uspjehu IT bećara: tri nepovezane priče o uspjehu trojice mladića iz Slavonije koji su se odlučili za IT industriju. Ove priče pružit će posjetiteljima motivaciju i inspiraciju za razvoj vlastite ideje ili pokretanje vlastitog posla i pokazati da je to moguće napraviti i u Slavoniji. Perspektiva iz prve ruke, sami članovi će ispričati vlastite priče i vlastito iskustvo u tom pothvatu.

19:30 – Interaktivna radionica sa posjetiteljima uz druženje i poslovno povezivanje. Posjetitelji će moći sami iznijeti svoje ideje, pitanja i zatražiti savjet iz prve ruke. Praktična pitanja, brainstorm ideje ili jednostavno druženje ljudi koji dijele zajedničke interese.

Na kraju večeri pozivamo Vas da ostanete i uživate u rock svirci Bruno & +40 band.

Ulaz je slobodan.

Vidimo se! 🙂

KulenDayz 2019 – osvrt na konferenciju

07.09.2019., subota, bio sam na središnjem danu KulenDayz konferencije koja ove godine ide pod sloganom Slow down, a održala se od 06. do 08.09.2019. po prvi put u prostoru Rektorata i Akademije za umjetnost i kulturu u Osijeku.

KulenDayz 2019 – osvrt na konferenciju
Izvor https://www.youtube.com/watch?v=5Chq-sNswxo

Program se sastojao od preko 50 predavanja u 10 trackova (Development, Data, Design, Cloud, Cloud Dev, Game, IT Pro, Chalk&Talk, Project Management, Tech by FERIT) tako da je svatko mogao pronaći nešto za sebe.

U nastavku više o nekim od predavanja koja sam posjetio.

Technical experiences from developing a global SaaS product

Domagoj Pavlešić [Development]

Technical experiences from developing a global SaaS product

The best thing ever is to build something that’s used all over the world. But that ain’t easy. Especially if you plan for ten users, and suddenly you end up with a thousand. And they pay for your product, and expect it to be available, reliable, bug-free, fast and smart. Luckily, in this cloud era, that’s easier than ever. Join us on this session and you’ll hear what it takes to develop such product, namely Sessionize.com. – izvor

Ovo je prvo predavanje na kojemu sam tog dana bio i moram priznati da mi je bilo zanimljivo čuti kako je nastao Sessionize jer za taj projekt znam još od 2017. kada ga je Domagoj prvi put predstavio na svojem blogu.

S obzirom da dosta developera u svoje slobodno vrijeme voli razvijati vlastita softverska rješenja korisno je čuti tuđa iskustva i vidjeti koliko toga zapravo imamo zajedničkog.

Shipping quality software in hostile environments

Luka Kladarić [Development]

Shipping quality software in hostile environments

Everyone loves features, right? Product loves features. Management loves features. The board loves features. Features are what make the users use and the investors invest, right? They certainly make the media pay attention.
What happens when, for 8 years straight, all you care about is features? Productivity grinds to a halt, production outages are a given, post-mortems are a joke and job satisfaction and happiness are flatlining.
Lessons learned unravelling layers and layers of terribleness to rediscover productivity and job satisfaction while also improving security and robustness of the products. – izvor

View Shipping quality software in hostile environments on Notist.

Odlično predavanje o tehničkom dugu, lošim menadžerskim i developerskim praksama u tvrtkama i mnogim drugim temama uz koje smo se svi prisutni mogli i nasmijati.

Zaključak predavanja bi mogao biti da nema idealne tvrtke niti idealnih poslovnih procesa, ali to ne znači da treba odustati od poboljšanja. Svaka tvrtka i svaki proces mogu biti bolji samo je potrebno imati cilj, razraditi plan i pratiti provedbu.

Secret sauce that makes a good interaction

Mario Šimić [Design]

Secret sauce that makes a good interaction

Mario will talk about how to come up with a good animation/interaction and how it should tie with conceptual thinking.
This knowledge will help designers base their interactions ideas that are not based on medium such as web, video or AR but on a strong concept which is visible throughout every element of their digital creation. – izvor

Iako nisam dizajner zanimljivo mi je pratiti kako nastaju napredna grafička rješenja koja se na prvi pogled čine vrlo jednostavnima.

Iza takvih grafičkih rješenja zapravo stoji nekoliko slojeva odluka koje je potrebno donijeti kako bi neka animacija postigla svoj cilj.

Road to DevOps: Are we ready for transformation?

Nenad Trajkovski, Mustafa Toroman [Keynote]

Road to DevOps: Are we ready for transformation?

DevOps is another IT industry trend. And as usually with all trends, everyone wants to join no matter what. But is it that simple and what does it really take? Do our current processes fit into this transformation? Do we have right people for this change? What tools do we need? What do we need to do to make our organization ‘DevOps’? And, what is DevOps anyway? These and many other questions will be answered in this session. – izvor

Ovogodišnje keynote predavanje nije poslužilo kao otvorenje i uvod u ostale sadržaje konferencije nego je održano prije ručka. Ipak, ili unatoč tome, tražilo se mjesto više.

Što se tema tiče, fokus je bio na DevOpsu, što označava set određenih praksi za razvoj softvera, koji se previše mistificira ili mu se daje previše na značenju kao da je DevOps rješenje svih problema svake tvrtke. Isti slučaj je i po pitanju SCRUM, agilne i drugih metodologija.

Firebase is OP

Sebastijan Dumančić [Cloud Dev]

Firebase is OP

Find out how Firebase can help you build an app from the ground up without a lot of backend hassle. Listeners, server-side functions, and powerful NoSQL databases all come together in this great tool from Google. – izvor

Na ovo sam predavanje otišao zato što Firebase koristim već duže vrijeme i htio sam čuti za što ga i kako drugi koriste.

Stekao sam dojam da je Firebase neopravdano zapostavljen s obzirom što sve nudi (Cloud Firestore, Cloud Functions, Authentication, Hosting, Cloud Storage, Realtime Database, Cloud Messaging, Crashlytics,..).

Ovo je predavanje održano odmah nakon ručka pa me ugodno iznenadio broj posjetitelja koji su ga odlučili posjetiti.

*ngFor u Angularu 101

Cilj blog posta “*ngFor u Angularu za početnike” je napraviti uvod u ngFor Angular direktivu jer ona je osnova koju svaki, Angular, developer treba i mora znati.

*ngFor direktiva se primarno koristi za prikaz niza podataka (array) i početnicima može predstavljati poseban izazov. Također, može se koristiti i za prikaz objekata uz pomoć KeyValuePipe.

Prije nego krenem s izradom primjera trebam kreirati Angular projekt, a to činim naredbom:

Projekt je vidljiv na adresi http://localhost:4200/

Uvod

*ngFor direktiva u Angularu, osim što služi za prikaz niza podataka, je optimizirana da minimalno utječe na DOM (Document Object Model).

To će se najbolje vidjeti u nastavku kada budem koristio let i = index pri čemu ću uklanjati elemente niza bez da ga cijelog ponovno osvježavam.

Angular će se pobrinuti za to da samo taj jedan element izbaci dok sve drugo ostaje isto. Isti slučaj bi bio i kada bi htio dodati novi element u niz.

U slučaju kada podatke dohvaćamo putem nekog API-ja dogodit će se, u slučaju kada se neki podataka obriše ili doda, da Angular više neće znati što treba biti na kojoj poziciji. U tom slučaju koristim trackBy putem čega Angularu mogu reći koji parametar da koristi kako bi identificirao elemente.

*ngFor – prikaz niza podataka

Ako npr. imam sljedeći niz podatka za pretpostaviti je da ih želim na ekranu prikazati kao popis. U ovom će slučaju to biti jednostavan popis osoba. Podaci su fiksno određeni unutar niza, ali logika je ista čak i da stižu putem nekog API-ja.

Gore navedeni popis podataka želim prikazati na sljedeći način:

To znači da nekako moram postići da se za svaki objekt unutar niza kreira novi <li></li> element.

Upravo tu uskače *ngFor sa vrlo jednostavnom sintaksom *ngFor="let <value> of <collection>" pri čemu <value> označava naziv varijable koji proizvoljno određujem, dok <collection> označava izvor podataka što je u ovom slučaju niz simpleArray.

Konačni rezultat je sljedeći:

**ngFor u Angularu za početnike

Ako želim imati redne brojeve mogu koristiti ol tag. Ovo spominjem samo iz razloga što ću u nastavku pokazati kako je redne brojeve moguće dobiti i pomoću indexa elementa.

*ngFor u Angularu za početnike

*ngFor + element index

index se definira kao varijabla let i = index i uvijek počinje od 0. Mogu ga koristiti kako bi prikazao redne brojeve elemenata.

Na ekranu to izgleda ovako:

*ngFor u Angularu za početnike

index mogu, ali i ne moram prikazati na ekranu. U oba ga slučaja mogu koristiti kako bi pristupio pojednom elementu niza.

U sljedećem ću primjeru pomoću funkcije removeByIndex(i) ukloniti neke elemente iz niza.

Funkciju pozivam klikom na pojedini element.

U praksi to izgleda ovako:

Angular index element

*ngFor + trackBy

trackBy se definira kao ; trackBy: id.

Pomoću funkcije trackElement(i,data.id) dohvaćam unikatni ID svakog elementa niza.

U praksi to izgleda ovako:

*ngFor trackBy

*ngFor – prvi i zadnji element niza

*ngFor direktiva u Angularu nudi još jednu zanimljivu mogućnost, a to je dohvaćanje prvog i zadnjeg elementa niza pomoću ; let first = first; let last = last.

Na taj se način prvi i zadnji element mogu npr. urediti CSS-om.

U praksi to izgleda ovako:

*ngFor u Angularu za početnike

Iako ovo još nisam koristio u nekoj produkcijskoj aplikaciji izgleda vrlo zanimljivo.

*ngFor – parni i neparni elementi niza

Kada već spominjem uređivanje elementata CSS-om, postoji još jedna zanimljiva funkcionalnost korištenjem ; let even = even; let odd = odd.

Na taj se način parni i neparni elementi mogu npr. urediti CSS-om.

U praksi to izgleda ovako:

*ngFor u Angularu za početnike

*ngFor – niz unutar niza

Osim prikaza osnovnog niza mogu prikazati i napredni niz tj. countryList niz unutar nestedArray niza.

U ovom slučaju *ngFor ide unutar <ul>.

U praksi to izgleda ovako:

*ngFor u Angularu za početnike

Zaključak

U ovom blog postu, pod nazivom “*ngFor u Angularu za početnike“, naveo sam osnovne funkcionalnosti *ngFor direktive s kojom svaki developer može napraviti funkcionalno rješenje. Sve dalje ovisi o specifičnim potrebama projekta.

P.S. Struktura projekta prema package.json: