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
Rewrite portala
Zašto? A i kako...
Metodologije
Tehnologije

Prije početka…
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

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

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

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
6

Agilni pristup
Portal mora cijelo vrijeme raditi
Iterativna implementacija
Postepeno uvođenje nove aplikacije po modulima
Paralelni rad stare i nove aplikacije
7

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

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
Rezultati primijenjenog pristupa
+100% rast posjetitelja i oglašivačkog potencijala
Novi frontend + stari dizajn  dobra odluka

2. dio: metodologije i Tehnologije
11

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

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
15

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

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
17

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

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
19

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
20

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”

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

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?
23

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

NHibernate
25

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 modelobjekt sam odrađuje pristup data storageu
NHibernate (Data Mapper pattern)
poseban sloj aplikacije (biblioteka) za rad s data storageom

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

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

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
30

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/

SparkViewEngine
32

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
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
SparkViewEngine: Master-Content
Master 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>
Namedcontent content=“...”
Defaultcontent content=“view”

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”>
<s:use content="view”/>defaultviewcontent
Partial views
_albumInfoBox.spark
_menu.spark, _footer.spark

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

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/

Q&A
Portal rewritecase-study
3-slojni patterni – MVC, MVP, MVPC
DDD
ORM: NHibernate
SparkViewEngine
39

Tomislav Capan
tomislav.capan@muzika.hr
@tomislavcapan

Tomislav Capan - Muzika Hr (IT Showoff)

by IT Showoff on Feb 23, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Tomislav Capan - Muzika Hr (IT Showoff) — Presentation Transcript