• Like
Tomislav Capan - Muzika Hr (IT Showoff)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Tomislav Capan - Muzika Hr (IT Showoff)

  • 967 views
Published

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 …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
967
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 9. © Copyright Muzika.hr 2010.
    9
    Plan
    Stvarnost
    Razvoj novog backenda, replicirati postojeću funkcionalnost
    Razvoj novog frontenda i novi dizajn
    Nove funkcionalnosti u bakcendu i frontendu
    Launch redizajniranog portala
    Planirani downtime?
    1 vikend? Suupeeer....
    Djelomično replicirana funkcionalnost backenda
    Facebook i NL promocija server overload!!!
    Dizajn kasni!  [4/2009]
    • stari dizajn + novi frontend + SEO
    Dovršen backend [6/2009]
    Sređen dioUI nelogičnosti i manje funkcionalne novosti
    Izrada novih funkcionalnosti i redizajn portala
  • 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>
  • 35. © Copyright Muzika.hr 2010.
    35
    SparkViewEngine: Master-Content
    Master template:
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://sparkviewengine.com/">
    <head>
    <title>${pageTitle}</title>
    <!-- cut -->
    <s:use content="head"/>
    </head>
    <body>
    <div id="main">
    <div id="header">
    <div id="headerLogo"><img src="..." alt=“Muzika.hr" /></div>
    <s:menu />
    </div>
    <s:use content="view" />
    <div id="footer"><s:footer /></div>
    </div>
    <s:use content="ads"/>
    </body>
    </html>
    • Namedcontent content=“...”
    • 36. Defaultcontent content=“view”
  • © Copyright Muzika.hr 2010.
    36
    SparkViewEngine: Master-Content
    Content template (article.spark):
    <s:content name="head">
    <script type="text/javascript“>initSocial();</script>
    </s:content>
    <div>
    <div id="contentTop">
    <div id="headingHeader">
    <h1>${article.Heading.Name}</h1>
    </div>
    <div id="articleDisplay">
    <h1>${article.Title}</h1>
    <s:test if="associatedAlbumDisplay"><s:albumInfoBox /></s:test>
    <div>${article.Body}</div>
    </div>
    </div>
    </div>
    MasterContent
    • <s:use content=“head”/>  <s:contentname=“head”>
    • 37. <s:use content="view”/>defaultviewcontent
    Partial views
    • _albumInfoBox.spark
    • 38. _menu.spark, _footer.spark
  • © Copyright Muzika.hr 2010.
    37
    SparkViewEngine- Značajke -
    ASP.Net MVC View Engine
    Može raditi neovisno ASP.Net MVC-u
    Generic handlers (.ashx) + .spark templates
    Arhitektura bez ASP.Net server-kontrola
    Nema Page Lifecycle-a i ViewState-a
    “Seamless integration of your HTML and code”
    Čist, pregledan, elegantan
    Bez blokova programskog kôda u HTML-u
    HTML dominantan, kôd nenametljivo uklopljen
  • 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/
  • 40. Q&A
    • Portal rewritecase-study
    • 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