Tomislav Capan - Muzika Hr (IT Showoff)

1,154 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,154
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tomislav Capan - Muzika Hr (IT Showoff)

  1. 1. © Copyright Muzika.hr 2010.<br />Muzika.hr – redizajn & rewrite portala- Iskustva iz prve ruke -<br />12. veljače 2010.<br />
  2. 2. © Copyright Muzika.hr 2010.<br />2<br />Sadržaj<br />Rewrite portala <br />Zašto? A i kako...<br />Metodologije<br />Tehnologije<br />
  3. 3. Prije početka…<br />© Copyright Muzika.hr 2010.<br />3<br />Media management & publishing<br />management, prodaja, marketing, logistika <br />Brandovi: <br />Muzika.hr, Filmski.net, Booksa.hr<br />New media development,<br />digital, konzalting, social media, online strategije, social media integracije, community management, internet marketing <br />Medij - specijalizirani portal<br />dnevni medij, najposjećeniji glazbeni portal<br />Logički dijelovi:<br />portal, forum, newsletter, fanclub, kalendar, fotogalerija<br />
  4. 4. 1. dio: Muzika.hr Rewrite portala – ZAšto i kako<br />© Copyright Muzika.hr 2010.<br />4<br />
  5. 5. Muzika.hr (Tech) Timeline<br />2001. – HTML portal<br />2003. – razvoj prve CMS podrške<br />2004. – prvi “redizajn”<br />2005/06. – zastoj u razvoju<br />Fakultetske obveze, kasnije posao<br />Internet oglašavanje?<br />2008. – tehnološka zaostalost portala<br />CMS ne prati zahtjeve (SEO, dizajn, funkcije)<br />© Copyright Muzika.hr 2010.<br />5<br />
  6. 6. Zašto rewrite, a ne refactoring?<br />Tehnički problemi<br />Nekvalitetan dizajn sustava<br />Server overload<br />Nepostojanje repozitorija kôda<br />Nema “stabilne verzije” aplikacije!!!<br />.Net v1.1  .Net v2.0/3.5<br />© Copyright Muzika.hr 2010.<br />6<br />
  7. 7. Agilni pristup<br />Portal mora cijelo vrijeme raditi<br />Iterativna implementacija<br />Postepeno uvođenje nove aplikacije po modulima<br />Paralelni rad stare i nove aplikacije<br />© Copyright Muzika.hr 2010.<br />7<br />
  8. 8. Resursi i plan razvoja<br />Tim (ljeto/jesen 2008.):<br />1 full-time + 2 studenta (do 12/2008 i 4/2009)<br />Razvoj ispočetka<br />Slobodan izbor alata i metodologija<br />Backend: ASP.Net + MVP + ASP.Net webforms<br />Frontend: ASP.Net + MVP + Spark View Engine<br />Pozitivno: kvalitetan DB model<br />(God bless prof. Mirta B.  )<br />© Copyright Muzika.hr 2010.<br />8<br />
  9. 9. © Copyright Muzika.hr 2010.<br />9<br />Plan<br />Stvarnost<br />Razvoj novog backenda, replicirati postojeću funkcionalnost<br />Razvoj novog frontenda i novi dizajn<br />Nove funkcionalnosti u bakcendu i frontendu<br />Launch redizajniranog portala<br />Planirani downtime?<br />1 vikend? Suupeeer....<br />Djelomično replicirana funkcionalnost backenda<br />Facebook i NL promocija server overload!!!<br />Dizajn kasni!  [4/2009]<br /><ul><li>stari dizajn + novi frontend + SEO</li></ul>Dovršen backend [6/2009]<br />Sređen dioUI nelogičnosti i manje funkcionalne novosti<br />Izrada novih funkcionalnosti i redizajn portala<br />
  10. 10. © Copyright Muzika.hr 2010.<br />10<br />Rezultati primijenjenog pristupa<br />+100% rast posjetitelja i oglašivačkog potencijala<br />Novi frontend + stari dizajn  dobra odluka<br />
  11. 11. 2. dio: metodologije i Tehnologije<br />© Copyright Muzika.hr 2010.<br />11<br />
  12. 12. © Copyright Muzika.hr 2010.<br />12<br />2. dio: Pregled<br />Iskustva – naučena na vlastitoj koži<br />3-slojni patterni – MVC vs. MVP<br />DDD<br />ORM: NHibernate<br />Zašto baš NHibernate<br />NHibernate vs. LINQ<br />Spark View Engine<br />
  13. 13. © Copyright Muzika.hr 2010.<br />13<br />Muzika.hr iskustva:- VersionControlSystem (VCS) -<br />Obavezno! Čak i za one-man-band razvoj!<br />Mi ga nismo imali – obilo nam se u glavu kad smo izgubili ‘stabilnu verziju koda’<br />Subversion, Git, Mercurial..?<br />Izaberi jedan! Bilo koji...<br />Repozitorij na development računalu <br />je isto repozitorij i bolji je od neimanja repozitorija<br />VCS alati podržavaju lokalne repozitorije (Tortoise SVN)<br />
  14. 14. © Copyright Muzika.hr 2010.<br />14<br />Muzika.hr iskustva:- ‘The Real’ OO design -<br />Muzika.hr i ASP.Net: MSDN-AA<br />.Net 1.0/1.1 (2002/2003.)<br />DataSet, DataTable, DataRow... <br />objekt = DataRow konceptualni promašaj<br />.Net 3.5 (2008.)<br />ASP.Net MVC + LINQ<br />objektni pristup od najnižeg nivoa aplikacije<br />suvremena OO (web) platforma<br />Posljedica: kompletan rewrite portala<br />
  15. 15. Muzika.hr iskustva:- Dizajn i arhitektura sustava -<br />Neraslojena arhitektura<br />Kompleksno, nepregledno, komplicirano za održavanje<br />Zašto raslojiti?<br />Preglednost<br />“Separationofconcerns”<br />Lakše testiranje<br />Jednostavnije i jeftinije održavanje<br />© Copyright Muzika.hr 2010.<br />15<br />
  16. 16. 3-slojna arhitektura- DesignPatterns - <br />MVC (Model-View-Controller)<br />ASP.Net MVC<br />MVP (Model-View-Presenter)<br />http://www.codeproject.com/KB/architecture/ModelViewPresenter.aspx<br />http://www.codeproject.com/KB/architecture/NHibernateBestPractices.aspx<br />Varijacije<br />MVPC (Model-View-Presenter-Controller)<br />© Copyright Muzika.hr 2010.<br />16<br />
  17. 17. 3-slojna arhitektura- Model-View-Controller (MVC) - <br />Controller (ASP.Net MVC)<br />Akcije = metode (kratke)<br />Delegiranje posla servisima<br />Routing<br />Usmjerava HTTP Request na odgovarajući Controller<br />© Copyright Muzika.hr 2010.<br />17<br />
  18. 18. 3-slojna arhitektura- Model-View-Presenter - <br />Viewinterface-i (IView)<br />View<br />Implementira IView<br />Presenter<br />IView kao parametar<br />“push” podataka kroz interface<br />Nema routing komponente<br />© Copyright Muzika.hr 2010.<br />18<br />
  19. 19. 3-slojna arhitektura- Model-View-Presenter - <br />MVP je evolucija MVC-a<br />http://www.mvcsharp.org/Basics_of_MVC_and_MVP/<br />Viewinterfaces (IView):<br />Testability (mockingviews)<br />Aplikacija nesvjesna UI platforme<br />Delegiranje korisničkih akcija<br />aplikacijska logika u aplikacijskom sloju<br />© Copyright Muzika.hr 2010.<br />19<br />
  20. 20. 3-slojna arhitektura- Model-View-Presenter-Controller (MVPC) - <br />MVPC Controller<br />Postavlja se kao IViewpresenteru<br />Može implementirati više IView-a<br />Osvježava View<br />MVPC View<br />Pasivan - samo UI logika<br />Templatingengine<br />http://aviadezra.blogspot.com/2008/06/mvpc-model-view-presenter-controller.html<br />© Copyright Muzika.hr 2010.<br />20<br />
  21. 21. © Copyright Muzika.hr 2010.<br />21<br />3-slojna arhitektura- Religija ili? -<br />Blogovi<br />Nove varijacije patterna “svakodnevno”<br />Još uvijek postoje patternima neriješeni problemihttp://lebensold.net/development/mvp-or-mvc-or-neither<br />Zaboravite “pravovjerje”:<br />“Konačan cilj je kvalitetno složen ‘separation of concerns’, manje je bitno kojim patternom će to biti ostvareno”<br />
  22. 22. Dizajn i arhitektura sustava- Domain-Driven-Design (DDD) -<br />Izolacija problemske domene<br />Layered architecture<br />Oblikovanje modela<br />Entiteti, agregati, value-objekti<br />“Factories”, repozitoriji, servisi, moduli<br />Modeliranje u praksi<br />Osnovni sustav<br />refactoring (“toward deeper insight”)<br />eksplicitno modeliranje procesa...<br />© Copyright Muzika.hr 2010.<br />22<br />
  23. 23. Dizajn i arhitektura sustava- Domain-Driven-Design (DDD) -<br />Eric Evans: “Domain Driven Design”<br />http://www.amazon.com/gp/product/0321125215/<br />Domain-model centric OO design<br />Modeliranje problemske domene<br />Entiteti, svojstva, akcije – kako sve to organizirati?<br />© Copyright Muzika.hr 2010.<br />23<br />
  24. 24. © Copyright Muzika.hr 2010.<br />24<br />Dizajn i arhitektura sustava- Patterni oblikovanja sustava -<br />Martin Fowler: “Patterns of Enterprise Application Architecture”<br />http://www.amazon.com/gp/product/0321127420/<br />Iskustva i praktična rješenja za česte situacije u oblikovanju softverskog sustava<br />
  25. 25. NHibernate<br />© Copyright Muzika.hr 2010.<br />25<br />
  26. 26. © Copyright Muzika.hr 2010.<br />26<br />ORM<br />ORM = Object-Relational Mapping<br />Veza relacijske baze i objektnog modela podataka<br />standardne biblioteke <br />NHibernate, LINQ, SubSonic, iBatis<br />
  27. 27. © Copyright Muzika.hr 2010.<br />27<br />NHibernate vs. ActiveRecord (RoR)<br />4 std. patterna za rad s podacima (Fowler):<br />Table Data Gateway, Row Data Gateway, Active Record, Data Mapper<br />ActiveRecord (Active Record pattern)<br />Domain modelobjekt sam odrađuje pristup data storageu<br />NHibernate (Data Mapper pattern)<br />poseban sloj aplikacije (biblioteka) za rad s data storageom<br />
  28. 28. © Copyright Muzika.hr 2010.<br />28<br />Data Mapper vs. Active Recordby Martin Fowler<br />Active Record pattern<br />“an object that wraps a row in a database table or view, encapsulatesthe database access, and adds domain logic on that data.”<br />Data Mapper pattern<br />“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.”<br />
  29. 29. NHibernate<br />Data Mapper implementacija<br />Podrška:<br />MS Sql Server, IBM DB2, IBM Informix, Oracle, PostgreSql, MySql, SqlLite...<br />Java  .Net <br />paralelne platforme, jedan alat<br />© Copyright Muzika.hr 2010.<br />29<br />
  30. 30. NHibernate vs. LINQ<br />NHibernate<br />LINQ (Linq2Entities)<br />Data mapper<br />Ručno mapiranje<br />XML ili annotationmapping<br />kompleksni scenariji<br />single-class (POCO)<br />Alati:<br />FluentNHibernate – stronglytyped C# codemappings<br />NHibernateValidator – validacija anotacijama<br />Data mapper<br />Automatsko mapiranje<br />Manjak konrtoledevelopera što i kako se mapira<br />partialclass za validacije na modelu podataka<br />Visoka razina VS integracije<br />Samo MSSQL<br />© Copyright Muzika.hr 2010.<br />30<br />
  31. 31. © Copyright Muzika.hr 2010.<br />31<br />NHibernateQuick Start- S#arp Architecture -<br />ASP.Net MVC + NHibernate projektni okvir<br />VS.Net Project template<br />Domain Driven Design focused<br />Konfiguriran NHibernate:<br />Support klase (“plumbing”)<br />“Open Session In View” (lazy loading)<br />Fokus programera na aplikaciju<br />http://www.sharparchitecture.net/<br />http://wiki.sharparchitecture.net/<br />
  32. 32. SparkViewEngine<br />© Copyright Muzika.hr 2010.<br />32<br />
  33. 33. © Copyright Muzika.hr 2010.<br />33<br />SparkViewEngine vs. WebForms<br />WebForms View Engine (ASP.Net MVC default):<br /><%if(Users != null) { %><br /><ulid="users-list"><br /><%foreach( var user inUsers ) { %><br /><liclass="<%= user.PermissionLevel.Label %>"><br /><%= user.Username %>: <%= user.FullName %><br /></li><br /><% } %><br /></ul><br /><% } %><br />Spark View Engine:<br /><uls:if="Users != null"id="users-list"><br /><lis:each="var user in Users"class="${user.PermissionLevel.Label}"><br /> ${user.Username}: ${user.FullName}<br /></li><br /></ul><br />
  34. 34. © Copyright Muzika.hr 2010.<br />34<br />SparkViewEnginePodaci - ViewData Dictionary<br />Template:<br /><s:viewdataArticles="IList[[MuzikaHr.Models.Article]]"/><br /><s:varstyles="new[] {‘left',’right'}"/><br /><ps:each="var article in Articles"<br />class="${styles[articleIndex%2]}“>${article.Title}<br /></p><br />Rezultat:<br /><p class="left">Vangelis</p><br /><p class="right">Simple Minds</p><br /><p class="left">The Stranglers</p><br /><p class="right">Michael Jackson (1958.–2009.)</p><br /><p class="left">A Perfect Circle</p><br /><p class="right">Suede (1989.–2003.)</p><br />
  35. 35. © Copyright Muzika.hr 2010.<br />35<br />SparkViewEngine: Master-Content<br />Master template:<br /><html xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://sparkviewengine.com/"><br /><head><br /> <title>${pageTitle}</title><br /> <!-- cut --><br /><s:use content="head"/><br /></head><br /><body><br /> <div id="main"><br /> <div id="header"><br /> <div id="headerLogo"><img src="..." alt=“Muzika.hr" /></div><br /><s:menu /><br /> </div><br /><s:use content="view" /><br /> <div id="footer"><s:footer /></div><br /> </div><br /><s:use content="ads"/><br /></body><br /></html><br /><ul><li>Namedcontent content=“...”
  36. 36. Defaultcontent content=“view”</li></li></ul><li>© Copyright Muzika.hr 2010.<br />36<br />SparkViewEngine: Master-Content<br />Content template (article.spark):<br /><s:content name="head"><br /> <script type="text/javascript“>initSocial();</script><br /></s:content><br /><div><br /> <div id="contentTop"><br /> <div id="headingHeader"><br /> <h1>${article.Heading.Name}</h1><br /> </div><br /> <div id="articleDisplay"><br /> <h1>${article.Title}</h1><br /><s:test if="associatedAlbumDisplay"><s:albumInfoBox /></s:test><br /> <div>${article.Body}</div><br /> </div><br /> </div><br /></div><br />MasterContent<br /><ul><li><s:use content=“head”/>  <s:contentname=“head”>
  37. 37. <s:use content="view”/>defaultviewcontent</li></ul>Partial views<br /><ul><li>_albumInfoBox.spark
  38. 38. _menu.spark, _footer.spark</li></li></ul><li>© Copyright Muzika.hr 2010.<br />37<br />SparkViewEngine- Značajke -<br />ASP.Net MVC View Engine<br />Može raditi neovisno ASP.Net MVC-u<br />Generic handlers (.ashx) + .spark templates<br />Arhitektura bez ASP.Net server-kontrola<br />Nema Page Lifecycle-a i ViewState-a<br />“Seamless integration of your HTML and code”<br />Čist, pregledan, elegantan<br />Bez blokova programskog kôda u HTML-u<br />HTML dominantan, kôd nenametljivo uklopljen<br />
  39. 39. © Copyright Muzika.hr 2010.<br />38<br />SparkViewEngine - Značajke -<br />HTML-Encoding output<br />Manual (shorthand H() function)<br />Automatic !!! (escape auto-encoding: !{..} )<br />Master-Content (multi-level) + partial views<br />Globalne i lokalne varijable<br />Macro helper-funkcije<br />Open-source, autor: Louis DeJardin<br />http://sparkviewengine.com/<br />
  40. 40. Q&A<br /><ul><li>Portal rewritecase-study
  41. 41. 3-slojni patterni – MVC, MVP, MVPC
  42. 42. DDD
  43. 43. ORM: NHibernate
  44. 44. SparkViewEngine</li></ul>© Copyright Muzika.hr 2010.<br />39<br />
  45. 45. © Copyright Muzika.hr 2010.<br />Tomislav Capan<br />tomislav.capan@muzika.hr<br />@tomislavcapan<br />

×