Upload
it-showoff
View
1.006
Download
7
Embed Size (px)
DESCRIPTION
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.
Citation preview
© Copyright Muzika.hr 2010.
Muzika.hr – redizajn & rewrite portala- Iskustva iz prve ruke -
12. veljače 2010.
© Copyright Muzika.hr 2010.
2
Sadržaj
1. Rewrite portala – Zašto? A i kako...
2. Metodologije
3. Tehnologije
© Copyright Muzika.hr 2010.
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
© Copyright Muzika.hr 2010.
4
1. DIO: MUZIKA.HR REWRITE PORTALA – ZAŠTO I KAKO
© Copyright Muzika.hr 2010.
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.
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.
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.
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.
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
© Copyright Muzika.hr 2010.
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%
© Copyright Muzika.hr 2010.
11
2. DIO: METODOLOGIJE I TEHNOLOGIJE
© 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
© Copyright Muzika.hr 2010.
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)
© 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
© Copyright Muzika.hr 2010.
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
© Copyright Muzika.hr 2010.
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)
© Copyright Muzika.hr 2010.
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.
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
© Copyright Muzika.hr 2010.
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
© Copyright Muzika.hr 2010.
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
© Copyright Muzika.hr 2010.
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”
© Copyright Muzika.hr 2010.
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.
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.
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
© Copyright Muzika.hr 2010.
25
NHIBERNATE
© Copyright Muzika.hr 2010.
26
ORM
• ORM = Object-Relational Mapping
• Veza relacijske baze i objektnog modela podataka
• standardne biblioteke – NHibernate, LINQ, SubSonic, iBatis
© 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 model objekt sam odrađuje pristup data storageu
• NHibernate (Data Mapper pattern)– poseban sloj aplikacije (biblioteka) za rad s data
storageom
© 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, 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.”
© Copyright Muzika.hr 2010.
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.
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
© Copyright Muzika.hr 2010.
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/
© Copyright Muzika.hr 2010.
32
SPARK VIEW ENGINE
© Copyright Muzika.hr 2010.
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>
© Copyright Muzika.hr 2010.
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>
© Copyright Muzika.hr 2010.
35
Spark View Engine: Master-ContentMaster 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>
• Named content content=“...”
• Default content content=“view”
© Copyright Muzika.hr 2010.
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
© Copyright Muzika.hr 2010.
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
© Copyright Muzika.hr 2010.
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/
© Copyright Muzika.hr 2010.
39
Q&A•Portal rewrite case-study•3-slojni patterni – MVC, MVP, MVPC•DDD•ORM: NHibernate•Spark View Engine