Zašto bi netko potrošio godinu dana za redizajn portala? Zašto bi redizajn portala uključio i njegov kompletan rewrite? Kako smo ‘jurili’ punom brzinom u zid (i jesmo li se u njega zabili), izazovi s kojima smo se susreli, inženjerski principi na kojima temeljimo razvoj, tehnologije i alati koje koristimo, te kako smo sve skupa doveli do (sretnog) kraja.

1. © Copyright Muzika.hr 2010. Muzika.hr – redizajn & rewrite portala- Iskustva iz prve ruke - 12. veljače 2010.

2. © Copyright Muzika.hr 2010. 2 Sadržaj Rewrite portala Zašto? A i kako... Metodologije Tehnologije

3. Prije početka… © Copyright Muzika.hr 2010. 3 Media management & publishing management, prodaja, marketing, logistika Brandovi: Muzika.hr, Filmski.net, Booksa.hr New media development, digital, konzalting, social media, online strategije, social media integracije, community management, internet marketing Medij - specijalizirani portal dnevni medij, najposjećeniji glazbeni portal Logički dijelovi: portal, forum, newsletter, fanclub, kalendar, fotogalerija

4. 1. dio: Muzika.hr Rewrite portala – ZAšto i kako © Copyright Muzika.hr 2010. 4

5. Muzika.hr (Tech) Timeline 2001. – HTML portal 2003. – razvoj prve CMS podrške 2004. – prvi “redizajn” 2005/06. – zastoj u razvoju Fakultetske obveze, kasnije posao Internet oglašavanje? 2008. – tehnološka zaostalost portala CMS ne prati zahtjeve (SEO, dizajn, funkcije) © Copyright Muzika.hr 2010. 5

6. Zašto rewrite, a ne refactoring? Tehnički problemi Nekvalitetan dizajn sustava Server overload Nepostojanje repozitorija kôda Nema “stabilne verzije” aplikacije!!! .Net v1.1  .Net v2.0/3.5 © Copyright Muzika.hr 2010. 6

7. Agilni pristup Portal mora cijelo vrijeme raditi Iterativna implementacija Postepeno uvođenje nove aplikacije po modulima Paralelni rad stare i nove aplikacije © Copyright Muzika.hr 2010. 7

8. Resursi i plan razvoja Tim (ljeto/jesen 2008.): 1 full-time + 2 studenta (do 12/2008 i 4/2009) Razvoj ispočetka Slobodan izbor alata i metodologija Backend: ASP.Net + MVP + ASP.Net webforms Frontend: ASP.Net + MVP + Spark View Engine Pozitivno: kvalitetan DB model (God bless prof. Mirta B.  ) © Copyright Muzika.hr 2010. 8

10. © Copyright Muzika.hr 2010. 10 Rezultati primijenjenog pristupa +100% rast posjetitelja i oglašivačkog potencijala Novi frontend + stari dizajn  dobra odluka

11. 2. dio: metodologije i Tehnologije © Copyright Muzika.hr 2010. 11

12. © Copyright Muzika.hr 2010. 12 2. dio: Pregled Iskustva – naučena na vlastitoj koži 3-slojni patterni – MVC vs. MVP DDD ORM: NHibernate Zašto baš NHibernate NHibernate vs. LINQ Spark View Engine

13. © Copyright Muzika.hr 2010. 13 Muzika.hr iskustva:- VersionControlSystem (VCS) - Obavezno! Čak i za one-man-band razvoj! Mi ga nismo imali – obilo nam se u glavu kad smo izgubili ‘stabilnu verziju koda’ Subversion, Git, Mercurial..? Izaberi jedan! Bilo koji... Repozitorij na development računalu je isto repozitorij i bolji je od neimanja repozitorija VCS alati podržavaju lokalne repozitorije (Tortoise SVN)

14. © Copyright Muzika.hr 2010. 14 Muzika.hr iskustva:- ‘The Real’ OO design - Muzika.hr i ASP.Net: MSDN-AA .Net 1.0/1.1 (2002/2003.) DataSet, DataTable, DataRow... objekt = DataRow konceptualni promašaj .Net 3.5 (2008.) ASP.Net MVC + LINQ objektni pristup od najnižeg nivoa aplikacije suvremena OO (web) platforma Posljedica: kompletan rewrite portala

15. Muzika.hr iskustva:- Dizajn i arhitektura sustava - Neraslojena arhitektura Kompleksno, nepregledno, komplicirano za održavanje Zašto raslojiti? Preglednost “Separationofconcerns” Lakše testiranje Jednostavnije i jeftinije održavanje © Copyright Muzika.hr 2010. 15

16. 3-slojna arhitektura- DesignPatterns - MVC (Model-View-Controller) ASP.Net MVC MVP (Model-View-Presenter) http://www.codeproject.com/KB/architecture/ModelViewPresenter.aspx http://www.codeproject.com/KB/architecture/NHibernateBestPractices.aspx Varijacije MVPC (Model-View-Presenter-Controller) © Copyright Muzika.hr 2010. 16

17. 3-slojna arhitektura- Model-View-Controller (MVC) - Controller (ASP.Net MVC) Akcije = metode (kratke) Delegiranje posla servisima Routing Usmjerava HTTP Request na odgovarajući Controller © Copyright Muzika.hr 2010. 17

18. 3-slojna arhitektura- Model-View-Presenter - Viewinterface-i (IView) View Implementira IView Presenter IView kao parametar “push” podataka kroz interface Nema routing komponente © Copyright Muzika.hr 2010. 18

19. 3-slojna arhitektura- Model-View-Presenter - MVP je evolucija MVC-a http://www.mvcsharp.org/Basics_of_MVC_and_MVP/ Viewinterfaces (IView): Testability (mockingviews) Aplikacija nesvjesna UI platforme Delegiranje korisničkih akcija aplikacijska logika u aplikacijskom sloju © Copyright Muzika.hr 2010. 19

20. 3-slojna arhitektura- Model-View-Presenter-Controller (MVPC) - MVPC Controller Postavlja se kao IViewpresenteru Može implementirati više IView-a Osvježava View MVPC View Pasivan - samo UI logika Templatingengine http://aviadezra.blogspot.com/2008/06/mvpc-model-view-presenter-controller.html © Copyright Muzika.hr 2010. 20

21. © Copyright Muzika.hr 2010. 21 3-slojna arhitektura- Religija ili? - Blogovi Nove varijacije patterna “svakodnevno” Još uvijek postoje patternima neriješeni problemihttp://lebensold.net/development/mvp-or-mvc-or-neither Zaboravite “pravovjerje”: “Konačan cilj je kvalitetno složen ‘separation of concerns’, manje je bitno kojim patternom će to biti ostvareno”

22. Dizajn i arhitektura sustava- Domain-Driven-Design (DDD) - Izolacija problemske domene Layered architecture Oblikovanje modela Entiteti, agregati, value-objekti “Factories”, repozitoriji, servisi, moduli Modeliranje u praksi Osnovni sustav refactoring (“toward deeper insight”) eksplicitno modeliranje procesa... © Copyright Muzika.hr 2010. 22

23. Dizajn i arhitektura sustava- Domain-Driven-Design (DDD) - Eric Evans: “Domain Driven Design” http://www.amazon.com/gp/product/0321125215/ Domain-model centric OO design Modeliranje problemske domene Entiteti, svojstva, akcije – kako sve to organizirati? © Copyright Muzika.hr 2010. 23

24. © Copyright Muzika.hr 2010. 24 Dizajn i arhitektura sustava- Patterni oblikovanja sustava - Martin Fowler: “Patterns of Enterprise Application Architecture” http://www.amazon.com/gp/product/0321127420/ Iskustva i praktična rješenja za česte situacije u oblikovanju softverskog sustava

25. NHibernate © Copyright Muzika.hr 2010. 25

26. © Copyright Muzika.hr 2010. 26 ORM ORM = Object-Relational Mapping Veza relacijske baze i objektnog modela podataka standardne biblioteke NHibernate, LINQ, SubSonic, iBatis

27. © Copyright Muzika.hr 2010. 27 NHibernate vs. ActiveRecord (RoR) 4 std. patterna za rad s podacima (Fowler): Table Data Gateway, Row Data Gateway, Active Record, Data Mapper ActiveRecord (Active Record pattern) Domain modelobjekt sam odrađuje pristup data storageu NHibernate (Data Mapper pattern) poseban sloj aplikacije (biblioteka) za rad s data storageom

28. © Copyright Muzika.hr 2010. 28 Data Mapper vs. Active Recordby Martin Fowler Active Record pattern “an object that wraps a row in a database table or view, encapsulatesthe database access, and adds domain logic on that data.” Data Mapper pattern “a layer of software that separates the in-memory objects from the database. Its responsibility is to transfer data between the two and also to isolate them from each other.”

29. NHibernate Data Mapper implementacija Podrška: MS Sql Server, IBM DB2, IBM Informix, Oracle, PostgreSql, MySql, SqlLite... Java  .Net paralelne platforme, jedan alat © Copyright Muzika.hr 2010. 29

30. NHibernate vs. LINQ NHibernate LINQ (Linq2Entities) Data mapper Ručno mapiranje XML ili annotationmapping kompleksni scenariji single-class (POCO) Alati: FluentNHibernate – stronglytyped C# codemappings NHibernateValidator – validacija anotacijama Data mapper Automatsko mapiranje Manjak konrtoledevelopera što i kako se mapira partialclass za validacije na modelu podataka Visoka razina VS integracije Samo MSSQL © Copyright Muzika.hr 2010. 30

31. © Copyright Muzika.hr 2010. 31 NHibernateQuick Start- S#arp Architecture - ASP.Net MVC + NHibernate projektni okvir VS.Net Project template Domain Driven Design focused Konfiguriran NHibernate: Support klase (“plumbing”) “Open Session In View” (lazy loading) Fokus programera na aplikaciju http://www.sharparchitecture.net/ http://wiki.sharparchitecture.net/

32. SparkViewEngine © Copyright Muzika.hr 2010. 32

33. © Copyright Muzika.hr 2010. 33 SparkViewEngine vs. WebForms WebForms View Engine (ASP.Net MVC default): <%if(Users != null) { %> <ulid="users-list"> <%foreach( var user inUsers ) { %> <liclass="<%= user.PermissionLevel.Label %>"> <%= user.Username %>: <%= user.FullName %> </li> <% } %> </ul> <% } %> Spark View Engine: <uls:if="Users != null"id="users-list"> <lis:each="var user in Users"class="${user.PermissionLevel.Label}"> ${user.Username}: ${user.FullName} </li> </ul>

34. © Copyright Muzika.hr 2010. 34 SparkViewEnginePodaci - ViewData Dictionary Template: <s:viewdataArticles="IList[[MuzikaHr.Models.Article]]"/> <s:varstyles="new[] {‘left',’right'}"/> <ps:each="var article in Articles" class="${styles[articleIndex%2]}“>${article.Title} </p> Rezultat: <p class="left">Vangelis</p> <p class="right">Simple Minds</p> <p class="left">The Stranglers</p> <p class="right">Michael Jackson (1958.–2009.)</p> <p class="left">A Perfect Circle</p> <p class="right">Suede (1989.–2003.)</p>

39. © Copyright Muzika.hr 2010. 38 SparkViewEngine - Značajke - HTML-Encoding output Manual (shorthand H() function) Automatic !!! (escape auto-encoding: !{..} ) Master-Content (multi-level) + partial views Globalne i lokalne varijable Macro helper-funkcije Open-source, autor: Louis DeJardin http://sparkviewengine.com/

41. 3-slojni patterni – MVC, MVP, MVPC

42. DDD

43. ORM: NHibernate

44. SparkViewEngine© Copyright Muzika.hr 2010. 39

45. © Copyright Muzika.hr 2010. Tomislav Capan tomislav.capan@muzika.hr @tomislavcapan