tomislav capan - muzika hr (it showoff)

© Copyright Muzika.hr 2010.

Muzika.hr – redizajn & rewrite portala- Iskustva iz prve ruke -

12. veljače 2010.


2

Sadržaj

1. Rewrite portala – Zašto? A i kako...

2. Metodologije

3. Tehnologije


3

Prije početka…

Media management & publishingmanagement, 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 portaldnevni medij, najposjećeniji glazbeni portalLogički dijelovi:portal, forum, newsletter, fanclub, kalendar, fotogalerija


4

1. DIO: MUZIKA.HR REWRITE PORTALA – ZAŠTO I KAKO


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)


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


7

Agilni pristup

• Portal mora cijelo vrijeme raditi

• Iterativna implementacija– Postepeno uvođenje nove aplikacije po modulima– Paralelni rad stare i nove aplikacije


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. )


9

Plan1. Razvoj novog backenda,

replicirati postojeću funkcionalnost

2. Razvoj novog frontenda i novi dizajn

3. Nove funkcionalnosti u bakcendu i frontendu

4. Launch redizajniranog portala

Planirani downtime?• 1 vikend? Suupeeer....

1. Djelomično replicirana funkcionalnost backenda

2. Facebook i NL promocija server overload!!!

3. Dizajn kasni! [4/2009]• stari dizajn + novi frontend

+ SEO

4. Dovršen backend [6/2009]

5. Sređen dio UI nelogičnosti i manje funkcionalne novosti

6. Izrada novih funkcionalnosti i redizajn portala

Stvarnost


10

Rezultati primijenjenog pristupa

• +100% rast posjetitelja i oglašivačkog potencijala• Novi frontend + stari dizajn dobra odluka

Vrijeme Checkpoint Unq. visitors PageViews Rast

10/2009 Početak razvoja ~65.000 ~350.000

12/2009 NL + FB promocija ~69.500 ~385.000 +7/10%

04/2009 Rezultat NL/FB promocije+ krenuo SEO uz stari dizajn

~91.500 ~550.000 +41/57%

12/2009 Rezultat NL+FB+SEO(i dalje stari dizajn)

~136.000 ~750.000 +109/114%


11

2. DIO: METODOLOGIJE I TEHNOLOGIJE


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

Muzika.hr iskustva:- Version Control System (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

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– “Separation of concerns”– Lakše testiranje– Jednostavnije i jeftinije održavanje


16

3-slojna arhitektura- Design Patterns -

• 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)

http://www.codeproject.com/KB/architecture/ModelViewPresenter.aspx









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


18

3-slojna arhitektura- Model-View-Presenter -

• View interface-i (IView)• View

– Implementira IView• Presenter

– IView kao parametar– “push” podataka kroz

interface

• Nema routing komponente


19

3-slojna arhitektura- Model-View-Presenter -

• MVP je evolucija MVC-a– http://www.mvcsharp.org/Basics_of_MVC_and_MVP/

• View interfaces (IView):– Testability (mocking views)– Aplikacija nesvjesna UI platforme

• Delegiranje korisničkih akcija– aplikacijska logika u aplikacijskom sloju

http://www.mvcsharp.org/Basics_of_MVC_and_MVP/Default.aspx










20

3-slojna arhitektura- Model-View-Presenter-Controller (MVPC) -

• MVPC Controller– Postavlja se kao IView presenteru– Može implementirati više IView-a– Osvježava View

• MVPC View– Pasivan - samo UI logika– Templating engine– http://aviadezra.blogspot.com/2008/06/

mvpc-model-view-presenter-controller.html

http://aviadezra.blogspot.com/2008/06/mvpc-model-view-presenter-controller.html









21

3-slojna arhitektura- Religija ili? -

• Blogovi– Nove varijacije patterna “svakodnevno”– Još uvijek postoje patternima neriješeni problemi

http://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”

http://lebensold.net/development/mvp-or-mvc-or-neither


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...


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?

http://www.amazon.com/gp/product/0321125215/



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


26

ORM

• ORM = Object-Relational Mapping

• Veza relacijske baze i objektnog modela podataka

• standardne biblioteke – NHibernate, LINQ, SubSonic, iBatis


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 model objekt sam odrađuje pristup data storageu

• NHibernate (Data Mapper pattern)– poseban sloj aplikacije (biblioteka) za rad s data

storageom

http://www.martinfowler.com/eaaCatalog/tableDataGateway.html

http://www.martinfowler.com/eaaCatalog/rowDataGateway.html

http://www.martinfowler.com/eaaCatalog/activeRecord.html

http://www.martinfowler.com/eaaCatalog/dataMapper.html


28

Data Mapper vs. Active Recordby Martin Fowler

• Active Record pattern– “an object that wraps a row in a database table

or view, encapsulates the 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


30

NHibernate vs. LINQ

NHibernate• Data mapper• Ručno mapiranje

–XML ili annotation mapping– kompleksni scenariji

• single-class (POCO)• Alati:

–Fluent NHibernate – strongly typed C# code mappings

–NHibernate Validator – validacija anotacijama

LINQ (Linq2Entities)• Data mapper• Automatsko mapiranje

–Manjak konrtole developera što i kako se mapira

• partial class za validacije na modelu podataka

• Visoka razina VS integracije• Samo MSSQL


31

NHibernate Quick 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/

http://www.sharparchitecture.net/

http://wiki.sharparchitecture.net/


32

SPARK VIEW ENGINE


33

Spark View Engine vs. WebForms

WebForms View Engine (ASP.Net MVC default):

<% if(Users != null) { %> <ul id="users-list"> <% foreach( var user in Users ) { %> <li class="<%= user.PermissionLevel.Label %>"> <%= user.Username %>: <%= user.FullName %> </li> <% } %> </ul><% } %>

Spark View Engine:

<ul s:if="Users != null" id="users-list"> <li s:each="var user in Users" class="${user.PermissionLevel.Label}"> ${user.Username}: ${user.FullName} </li></ul>


34

Spark View EnginePodaci - ViewData Dictionary

Template:<s:viewdata Articles="IList[[MuzikaHr.Models.Article]]"/><s:var styles="new[] {‘left',’right'}"/><p s: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

Spark View Engine: Master-ContentMaster template:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://sparkviewengine.com/"><head> <title>${pageTitle}</title>  <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>

• Named content content=“...”

• Default content content=“view”


36

Spark View Engine: Master-ContentContent 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:content name=“head”>• <s:use content="view”/> default view content

Partial views• _albumInfoBox.spark• _menu.spark, _footer.spark


37

Spark View Engine- 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


38

Spark View Engine - 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/

http://sparkviewengine.com/


39

Q&A•Portal rewrite case-study•3-slojni patterni – MVC, MVP, MVPC•DDD•ORM: NHibernate•Spark View Engine


Tomislav Capan

[email protected]

@tomislavcapan

tomislav capan - muzika hr (it showoff)

Technology